Customizing Content and Structure

This article covers everything you need to know about making the template your own - from changing text and images to adjusting colors and adding new pages.

Editing Text Content

All visible text lives inside the HTML files. Open any .html file in your code editor, and you'll see the page content between HTML tags.

For example, to change a heading:

html

<!-- Find this in the HTML file -->
<h1>Welcome to Our Agency</h1>

<!-- Change it to your text -->
<h1>Welcome to Smith & Partners</h1>

The easiest way to find specific text is to use your editor's search function (Ctrl+F or Cmd+F). Search for the text you want to change, and the editor will highlight it in the code.

Tips for editing text:

• Keep the HTML tags intact - only change the text between them

• If you see class names like class="hero-title", leave those as they are - they connect the element to its styling

• Use the browser preview to verify your changes after saving the file

• Special characters like &, <, and > need to be written as &, <, and > in HTML

Replacing Images

Images in the template are referenced using the <img> tag or as CSS background images.

HTML images:

html

<!-- Original -->
<img src="images/hero-bg.jpg" alt="Hero background">

<!-- Replace with your image -->
<img src="images/my-hero-photo.jpg" alt="Our office building">

To replace an image, you can either:

1. Rename your image to match the existing filename (e.g., save your photo as hero-bg.jpg and drop it into the images/ folder, overwriting the old file)

2. Use a new filename and update the src attribute in the HTML to point to your new file

Recommended image practices:

• Match the approximate dimensions of the original placeholder image. If the original is 1920x1080, use a similar aspect ratio to avoid layout issues.

• Use JPEG for photographs and PNG for graphics with transparency.

• Optimize your images for the web. Large, uncompressed photos will slow down your site significantly. Tools like TinyPNG or Squoosh can reduce file size without visible quality loss.

• Always update the alt attribute with a description of your image - it helps with accessibility and SEO.

CSS background images:

Some sections use background images set in CSS rather than HTML. Look for rules like:

css

.hero-section {
  background-image: url('../images/hero-bg.jpg');
}

Replace the file path with your own image path.

Changing Colors

The template's color scheme is defined in the CSS files. Open the main stylesheet (usually style.css or main.css) and look for the primary colors used throughout.

Many templates use CSS custom properties (variables) at the top of the stylesheet:

css

:root {
  --primary-color: #2563eb;
  --secondary-color: #1e40af;
  --text-color: #333333;
  --background-color: #ffffff;
}

If your template uses variables like these, changing the color values here will update them across the entire site. If not, you'll need to search for specific color codes (e.g., #2563eb) and replace them throughout the CSS file.

Finding the right color to change:

1. Open the page in your browser

2. Right-click the element you want to change and select "Inspect" (or press F12)

3. The browser's developer tools will show you exactly which CSS rules are styling that element, including the color values

4. Search for those values in your CSS file and replace them

Adding and Removing Sections

Each page is built from sections - blocks of HTML that represent visual areas like the hero banner, features grid, testimonials, footer, etc. These are usually wrapped in <section> or <div> tags with descriptive class names:

html

<section class="features-section">
  <!-- Features content here -->
</section>

<section class="testimonials-section">
  <!-- Testimonials content here -->
</section>

To remove a section: Delete the entire <section>...</section> block (or the corresponding <div>) from the HTML file. Save and refresh the browser to confirm.

To rearrange sections: Cut a section block and paste it in a different position within the page. The order in the HTML file matches the order on the page.

To duplicate a section: Copy an entire section block, paste it where you want it, and change the content inside.

Adding New Pages

To create a new page:

1. Copy an existing page file (e.g., about.html) and rename it (e.g., services.html)

2. Open the new file and change the content inside the <body> section

3. Update the <title> tag in the <head> section

4. Add a link to the new page in the navigation menu of every page (see below)

Editing the Navigation Menu

The navigation menu appears on every page, but since this is a static HTML template, it's duplicated in each file. When you change the menu, you need to update it in all HTML files.

The navigation typically looks like:

html

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

To add a menu item, insert a new <li><a href="...">...</a></li> line. To remove one, delete the corresponding <li> element. Remember to make the same change in every HTML file.

Tip: If you're making a lot of changes, consider editing the navigation in one file first, then copying the entire <nav>...</nav> block to all other files.

Working with Icons

The template may use one of these icon approaches:

Icon fonts (like Font Awesome or Tabler Icons) - icons are inserted as HTML elements with specific class names:

html

<i class="fa fa-envelope"></i>  <!-- Font Awesome -->

You can browse available icons on the icon library's website and swap the class name to change the icon.

SVG icons - icons are embedded directly as SVG code or referenced as image files. These can be styled with CSS just like any other element.

Responsive Design

The template is built to work on all screen sizes - desktops, tablets, and phones. This is handled automatically through CSS media queries. You don't need to create separate mobile versions.

To verify how your changes look on different devices:

1. Open the page in Chrome or Firefox

2. Press F12 to open developer tools

3. Click the device toggle icon (or press Ctrl+Shift+M / Cmd+Shift+M)

4. Select different device sizes from the toolbar

If something looks off on mobile after your edits, it's usually because of an image that's too wide or text content that's longer than the original placeholder. Adjusting image sizes or trimming text typically resolves these issues.