Official Documentation

Welcome to the complete documentation of Aurum Template Pack. This guide was designed to take you from zero to a published site, covering everything from basic editing to advanced integrations.

Key Features

• Responsive Design: Fully adaptable to any device (Mobile, Tablet, Desktop).
• Clean Code: W3C Validated HTML5 & CSS3.
• Easy Customization: Commented code and intuitive structure.
• Fast Loading: Optimized assets and minimal scripts.
• SEO Friendly: Semantic tags and meta descriptions ready.
• Font Awesome Icons: Thousands of vector icons included.
• Google Fonts: Modern typography.
• Cross-Browser Compatibility: Works on Chrome, Firefox, Safari, Edge, and Opera.
• No Dependencies: Pure HTML/CSS/JS (no heavy framework installation required).

Folder Structure

The package is organized into strategic categories for different client profiles:

• /Templates/Classic-Designs: Light, direct, and functional models. Ideal for quick sales and low-budget clients.
• /Templates/Modern-Designs: Sophisticated design, smooth animations, and complete sections. High perceived value.
• /Templates/Premium-Designs: Our most exclusive releases (e.g., Sky Tower). High-end design.
• /Templates/Landing-Pages: Conversion-focused One Page templates. Perfect for paid traffic.
• /Templates/Bio-Links: Bio pages for Instagram (professional Linktree alternative).

Installation

Since these are static HTML templates, there is no complex "installation" (like WordPress). They work directly in the browser.

Requirements

• A code editor (We recommend VS Code).
• A modern browser (Chrome, Edge, Firefox).

How to Start a Project

1. Unzip the pack ZIP file.
2. Open VS Code.
3. Go to File > Open Folder and select the specific template folder you want to use.
4. Open the index.html file to start editing.
5. To view, right-click the HTML file and choose "Open with Live Server" (if you have the extension) or just double-click the file in the folder.

Editing Text

All text content is within the index.html file. Search for the text you want to change.

<!-- Example: Changing the Main Title -->
<h1>Specialized Law Firm</h1>

<!-- Change to: -->
<h1>Dr. James Smith - Civil Law</h1>
            

Changing Images

Images are located in the images/ folder within each project.

Method 1: File Replacement (Easiest)

1. Check the original image name in the folder (e.g., hero-bg.jpg).
2. Take your client's photo and rename it to the same name (hero-bg.jpg).
3. Replace the file in the folder. The site will update automatically.

Method 2: Code Change

If you prefer to use different names, change the src attribute in the img tag:

<img src="images/new-client-photo.jpg" alt="Client Photo">

Colors and Fonts

Most styles are in the css/style.css file. We use CSS variables (:root) at the top of the file to make global color swapping easy.

:root {
    --primary-color: #d4af37;  /* Main Color (Gold) */
    --secondary-color: #111111; /* Secondary Color (Black) */
    --text-color: #333333;
}
            

Simply change the Hex code (e.g., #d4af37) to your client's brand color. You can use the VS Code color picker by hovering over the color.

Icons (FontAwesome)

We use the FontAwesome 6 library for icons. To change an icon:

1. Go to FontAwesome Icons.
2. Search for the desired icon (e.g., "whatsapp", "instagram", "check").
3. Copy the HTML code of the icon (e.g., <i class="fa-brands fa-whatsapp"></i>).
4. Paste it into your code replacing the old icon.

Contact Forms

By default, forms in the templates are visual only (HTML). To make them work without needing a backend (PHP/Node), we recommend services like Formspree.

Setting up with Formspree (Free)

1. Create an account at formspree.io.
2. Create a new form and copy the provided URL (Endpoint).
3. In your HTML, edit the <form> tag:

<form action="https://formspree.io/f/YOUR_CODE_HERE" method="POST">
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <button type="submit">Send</button>
</form>
            

Now, when someone fills out the form, you will receive the data in your email.

Integrations (Analytics & Pixel)

To track visits and conversions, you must add tracking scripts inside the <head> tag.

Google Analytics 4 (GA4)

<!-- Paste right after the opening <head> tag -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');
</script>
            

Meta Pixel (Facebook Ads)

<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>
<!-- End Meta Pixel Code -->
            

Performance

Fast sites sell more. Follow this checklist before publishing:

• ✅ Compress Images: Use TinyPNG or Squoosh.app. Large images are the main cause of slowness.
• ✅ Lazy Loading: Add loading="lazy" to images below the fold (outside the initial screen).
• ✅ Minify CSS/JS (Optional): Tools like CSSMinifier can reduce file size.

Hosting & Domain

To get your site online, you need:

1. Domain: The site address (e.g., www.client.com). Buy from Namecheap or GoDaddy.
2. Hosting: Where files are stored.

Recommended Options

• Hostgator / Hostinger: Traditional hosting (cPanel). Easy to use, corporate email support.
• Vercel / Netlify: Modern and free hosting for static sites (like these). Great performance, but requires slightly more technical knowledge (Git or Drag-and-Drop).

Upload via cPanel

Access the File Manager and upload all files from the template folder (index.html, css/, js/, images/) to the public_html folder.

SEO Checklist

Ensure the site is found on Google:

• ✅ Page Title: Edit the <title> tag with the client's name and main keyword (e.g., "Dr. Smith - Labor Lawyer in NY").
• ✅ Meta Description: Edit the <meta name="description"> tag with an attractive summary.
• ✅ H1, H2, H3 Tags: Use correct hierarchy. Only one H1 per page.
• ✅ Alt Text: Add descriptions to images (alt="Law Firm Office").
• ✅ Favicon: Don't forget to change the browser tab icon (favicon.jpg or .ico).

License

Please ensure you understand the terms before using the item for commercial projects.

Key Points (Summary)

• ✅ You can use this item in an end product for yourself or a client.
• ✅ You can modify the item as needed.
• ❌ You cannot resell or redistribute the item (e.g., as stock, in a tool, or template).
• ❌ You cannot claim intellectual property rights to the item.

Sources & Credits

We used the following open-source resources in this pack:

Fonts (Google Fonts)

• Typography: Google Fonts (Manrope, Poppins, Inter, Syncopate).

Icons

• FontAwesome 6: fontawesome.com (Free License).

Images (Demo Only)

Images shown in the demo are for display purposes only and are not included in the download package (placeholders are provided), or are from free stock sources:

• Unsplash
• Pexels
• Freepik

Publishing Your Site (Deployment)

The easiest way to publish these HTML templates for free is using Netlify or Vercel.

Option 1: Netlify (Drag & Drop) - Recommended

1. Go to Netlify Drop.
2. Drag your project folder (the one containing the index.html) directly onto the upload area.
3. Wait a few seconds, and your site will be online!
4. You can then change the domain name in the "Site Settings".

Option 2: GitHub Pages

1. Create a repository on GitHub.
2. Upload your files.
3. Go to Settings > Pages and select the main branch.

Advanced Customization

Change Video Background

Some templates (like Sky Tower) use a video background. To change it:

1. Look for the <video> tag in the HTML.
2. Replace the src attribute with your new video file path.
3. Important: Keep videos short (10-15s) and small (under 5MB) for performance.

Google Maps

1. Go to Google Maps and find your location.
2. Click "Share" > "Embed a map".
3. Copy the <iframe> code.
4. Paste it into the contact section, replacing the existing <iframe>.

Favicon

The icon that appears in the browser tab is linked in the <head>:

<link rel="shortcut icon" href="favicon.png" type="image/x-icon">

Simply replace the favicon.png (or .ico) file in your folder with your own logo.

Frequently Asked Questions (FAQ)

1. Can I use this on WordPress?
Not directly. These are HTML templates. To use on WordPress, you would need to convert the code into a WordPress theme (which requires advanced PHP knowledge). We recommend using HTML for institutional sites and Landing Pages for speed and security.

2. How do I configure the domain?
You must point your domain's DNS (at Namecheap or where you bought it) to your hosting nameservers. Check your hosting support for DNS addresses.

3. Do images have copyrights?
We use images from free stock banks (Unsplash, Pexels). However, we strongly recommend using your client's real photos to avoid any future issues and increase site credibility.

4. Is the site responsive (works on mobile)?
Yes! All templates in the Template Pack are 100% responsive and tested on various screen sizes.

Support

If you encounter any bugs or issues with the files, please contact us via our profile page on Envato Elements.

Note: According to Envato Elements policy, item support is not mandatory for authors, but we are happy to help fix critical bugs related to the template code.