Website Customization Guide

Complete step-by-step guide to personalize your QR Generator website
Perfect for community members who want to customize their own version

Table of Contents

Important Before Starting

  • Make a backup copy of your website files before making changes
  • Use a text editor like Notepad++, VS Code, or any code editor
  • Test your changes locally before uploading to your web server
  • Replace ALL instances of placeholder information with your own

1Change Basic Information

First, let's update your personal information that appears throughout the website.

File to Edit:

index.html

What to Change:

1.1 Author Name in Meta Tag:

Find this line and replace Abdo-Agadir with your name:

<meta name="author" content="Abdo-Agadir">

Change to:
<meta name="author" content="YOUR-NAME">
1.2 Footer Copyright:

Find this section and replace the name:

<p class="mb-0 small">Created by <strong>Abdo-Agadir</strong></p>

Change to:
<p class="mb-0 small">Created by <strong>YOUR-NAME</strong></p>
1.3 Contact Section:

Find the contact section and update your name:

<div class="mb-3"> <i class="fas fa-user fa-2x mb-2"></i> <p>Created by Abdo-Agadir</p> </div>

Change to:
<div class="mb-3"> <i class="fas fa-user fa-2x mb-2"></i> <p>Created by YOUR-NAME</p> </div>

2Update Contact Information

2.1 Email Address:

Find and replace the email address:

<p>[email protected]</p>

Change to:
<p>[email protected]</p>
2.2 Website URL in Schema:

Find the structured data section and update the URL:

"url": "https://yourwebsite.com",

Change to:
"url": "https://your-actual-domain.com",

3Customize Website Title & Description

3.1 Page Title:

Update the main title that appears in browser tabs:

<title>Free QR Code Generator - Create QR Codes Online | QR Generator Pro</title>

Change to:
<title>Your Custom Title - QR Generator | Your Brand Name</title>
3.2 Meta Description:

Update the description that appears in search results:

<meta name="description" content="Free QR Code Generator - Create QR codes for URLs, text, emails, phone numbers, and more. Fast, easy, and completely free online tool.">

Change to:
<meta name="description" content="Your custom description here - mention your unique features">
3.3 Website Brand Name:

Change the brand name that appears in navigation:

<a class="navbar-brand fw-bold" href="#"><i class="fas fa-qrcode me-2"></i>QR Generator Pro</a>

Change to:
<a class="navbar-brand fw-bold" href="#"><i class="fas fa-qrcode me-2"></i>Your Brand Name</a>
3.4 Hero Section Title:

Update the main heading on your homepage:

<h1 class="display-4 fw-bold text-primary mb-4"> Free QR Code Generator </h1>

Change to:
<h1 class="display-4 fw-bold text-primary mb-4"> Your Custom Headline </h1>
3.5 Hero Section Description:

Customize the description paragraph:

<p class="lead mb-4"> Create custom QR codes instantly! Generate QR codes for URLs, text, emails, phone numbers, and more. Fast, easy, and completely free. Perfect for businesses, events, and personal use. </p>

Change to:
<p class="lead mb-4"> Your custom description that describes your unique value proposition and services. </p>

4Add Your Social Media Links

4.1 Social Media Icons in Footer:

Find the social links section and add your actual social media URLs:

<div class="social-links mt-4"> <a href="#" class="text-white me-3"><i class="fab fa-facebook fa-2x"></i></a> <a href="#" class="text-white me-3"><i class="fab fa-twitter fa-2x"></i></a> <a href="#" class="text-white me-3"><i class="fab fa-linkedin fa-2x"></i></a> <a href="#" class="text-white"><i class="fab fa-instagram fa-2x"></i></a> </div>

Change to:
<div class="social-links mt-4"> <a href="https://facebook.com/yourpage" class="text-white me-3"><i class="fab fa-facebook fa-2x"></i></a> <a href="https://twitter.com/yourusername" class="text-white me-3"><i class="fab fa-twitter fa-2x"></i></a> <a href="https://linkedin.com/in/yourprofile" class="text-white me-3"><i class="fab fa-linkedin fa-2x"></i></a> <a href="https://instagram.com/yourusername" class="text-white"><i class="fab fa-instagram fa-2x"></i></a> </div>

5Update Community Links

5.1 Discord Community Link:

Replace the Discord invite link with your own (if you have one), or remove this section:

<div class="mb-3"> <i class="fab fa-discord fa-2x mb-2"></i> <p><a href="https://discord.gg/v3SEdskVR6" target="_blank" class="text-white text-decoration-none">Dirlfous Blaflous Community</a></p> </div>

Change to:
<div class="mb-3"> <i class="fab fa-discord fa-2x mb-2"></i> <p><a href="https://discord.gg/your-invite" target="_blank" class="text-white text-decoration-none">Your Community Name</a></p> </div>
5.2 Footer Community Link:

Also update the Discord link in the footer:

<a href="https://discord.gg/v3SEdskVR6" target="_blank" class="text-white text-decoration-none me-3"> <i class="fab fa-discord me-1"></i>Dirlflous Blaflous Community </a>

Change to:
<a href="https://discord.gg/your-invite" target="_blank" class="text-white text-decoration-none me-3"> <i class="fab fa-discord me-1"></i>Your Community Name </a>

6Final Testing & Launch

Testing Checklist

  • ✓ Local Testing: Open index.html in your browser to test all changes
  • ✓ QR Generator: Test that the QR code generation still works
  • ✓ Links Check: Verify all social media and community links work
  • ✓ Mobile Test: Check the website on mobile devices
  • ✓ Contact Info: Ensure all contact information is correct
  • ✓ Spelling: Double-check all text for spelling and grammar

Uploading to Your Server:

  1. Upload all files to your web hosting provider
  2. Make sure the main file is named "index.html"
  3. Test the live website thoroughly
  4. Submit to Google AdSense for approval

Optional Advanced Customizations

Color Scheme:

To change the main color scheme, edit the css/style.css file and look for color values like #007bff (blue) and replace with your preferred colors.

Logo/Favicon:

Replace the favicon.ico file with your own logo. You can create favicon files at favicon.io.

Analytics:

Add Google Analytics code before the closing </head> tag for tracking website visitors.

Need Help?

If you encounter any issues during customization:

  • Double-check that you haven't accidentally deleted any HTML tags
  • Make sure all quotation marks are properly closed
  • Use "Ctrl+Z" to undo recent changes if something breaks
  • Keep a backup copy of the original files
  • Join our Discord community for support: Dirlfous Blaflous Community