W A V E Y
Innovate

Docs Topics ...

Coming Soon HTML5 Template

Documentation

Welcome to our template documentation! This guide provides everything you need to quickly set up and customize your website. Designed for all skill levels, it’s your go-to resource for creating a professional site with ease. Let’s get started!

Template Customization

Customizing Document Structure

<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="ie=edge" />
        <title>Wavey &mdash; Coming Soon HTML5 Template</title>
        <meta name="description" content="Wavey - A coming soon template for our exciting new website launch. Stay tuned for updates!" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <!-- head Content -->
    </head>
    <body class="wt-home--style02 wt-menu-fs--style01">
        <!-- Page Content -->
    </body>
</html>

1- Change the Title:

  • Locate the <title> tag in the <head> section.
  • Replace Wavey &mdash; Coming Soon HTML5 Template with your desired title. 
<title>Your Company Name &mdash; Coming Soon HTML5 Template</title>

2- Update the Language:

  • If your website is in a different language, change the lang attribute in the <html> tag. 
<html class="no-js" lang="es"> <!-- For Spanish -->

3- Modify the Meta Description:

  • Update the <meta name="description"> tag to reflect your website's purpose. 
<meta name="description" content="Your Company Name - A brief description of your website." />

Customizing Meta Tags for Security and Social Media

<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <!-- head Content -->
        <!-- Content Security Policy -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://www.youtube.com https://www.youtube-nocookie.com https://s.ytimg.com; frame-src https://www.youtube.com https://www.youtube-nocookie.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' data: https://fonts.gstatic.com; img-src 'self' data: https://i.ytimg.com;">
        <!-- Open Graph and Twitter Card Tags -->
        <meta property="og:title" content="Wavey - Coming Soon Template" />
        <meta property="og:description" content="Stay tuned for updates!" />
        <meta property="og:image" content="assets/img/logo/favicon.png" />
        <meta property="og:url" content="https://yourwebsite.com" />
        <meta name="twitter:card" content="summary_large_image" />
        <!-- head Content -->
    </head>
    <body class="wt-home--style02 wt-menu-fs--style01">
        <!-- Page Content -->
    </body>
</html>

1- Update Open Graph Tags:

  • Replace the content of the og:title, og:description, og:image, and og:url tags with your website's details. 
<meta property="og:title" content="Your Company Name - Coming Soon" />
<meta property="og:description" content="Stay tuned for updates!" />
<meta property="og:image" content="assets/img/logo/your-logo.png" />
<meta property="og:url" content="https://yourwebsite.com" />

2- Update Twitter Card Tags:

  • Replace the twitter:card content if needed. 
 <meta name="twitter:card" content="summary_large_image" />

Customizing CSS and JavaScript Code

1- Add Custom CSS:

  • Open the empty custom.css file in the assets/css folder.
  • Add your custom styles at the top of the file. 
 <link rel="stylesheet" href="assets/css/custom.css" />

2- Add Custom JavaScript:

  • Open the empty custom.js file in the assets/js folder.
  • Add your custom styles at the top of the file. 
<script src="assets/js/custom.js"></script>

Customizing preloader

<!-- Page preloader -->
<div class="wt-preloader">
    <div class="wt-preloader__wrapper">
        <div class="wt-preloader--style02">
            <div class="wt-preloader__text">
                <span class="wt-preloader__text-span">W</span>
                <span class="wt-preloader__text-span">A</span>
                <span class="wt-preloader__text-span">V</span>
                <span class="wt-preloader__text-span">E</span>
                <span class="wt-preloader__text-span">Y</span>
            </div>
        </div>
    </div>
</div>
<!--End Page preloader -->

1- Change the Text:

  • Locate the <wt-preloader__text/> div.
  • Replace the letters W, A, V, E, Y with your desired text. 
<div class="wt-preloader__text">
    <span class="wt-preloader__text-span">L</span>
    <span class="wt-preloader__text-span">O</span>
    <span class="wt-preloader__text-span">A</span>
    <span class="wt-preloader__text-span">D</span>
</div>

Customizing the Off-Canvas Menu

1- Change the Logo:

  • Replace the src attribute of the <img> tag with your logo's path. 
<div class="wt-sidebar__thumb mb-10 pr-10">
    <img src="assets/img/logo/your-logo.png" alt="your image" />
</div>

2- Update the Gallery:

  • Replace the src attribute of the <img> tags in the gallery with your images. 
<img class="wt-post__instagram-img" src="assets/img/blog/your-image.jpg" alt="your image" />

3- Update Contact Information:

  • Replace the placeholder text with your contact details. 
<ul class="ul-test wt-menu wt-menu--vertical wt-menu--style02 wt-text--left">
    <li class="wt-menu__item mb-0">
        <a href="javascript:void(0);" class="wt-menu__link">
            <i class="wt-menu__icon fas fa-map-marker-alt"></i>
            123 Your Street, City, Country
        </a>
    </li>
    <li class="wt-menu__item mb-0">
        <p class="wt-menu__text">
            <a href="javascript:void(0);" class="wt-menu__link">
                <i class="wt-menu__icon fas fa-phone-alt"></i>
                Your Phone
            </a>
        </p>
    </li>

    <li class="wt-menu__item">
        <p class="wt-menu__text">
            <a href="javascript:void(0);" class="wt-menu__link">
                <i class="wt-menu__icon fas fa-envelope"></i>
                Your support link
            </a>
        </p>
    </li>
</ul>

Customizing the Header and Navigation

1- Change the Logo:

  • Replace the src attribute of the <img> tag with your logo's path. 
<img class="wt-navbar__logo wt-max-width--100" src="assets/img/logo/your-logo.png" alt="your image" />

2- Update the Background Slider:

  • Replace the images in the data-vegas-options attribute with your images. 
data-vegas-options='{"slides":[{"src": "assets/img/hero/your-image1.jpg"}, 
{"src": "assets/img/hero/your-image2.jpg"}]}'

Customizing the Footer

1- Update Social Media Links:

  • Replace the href attributes with your social media profiles. 
<a class="wt-menu__link text-white pb-0" href="https://facebook.com/yourpage">
    <i class="fab fa-facebook-f"></i>
</a>

2- Update the Copyright Text:

  • Replace the text and link in the copyright section. 
<span class="wt-copyright__text text-white">Copyright © 2025
    <a class="wt-copyright__link" href="https://yourwebsite.com"> Your Company Name</a> All rights reserved.
</span>