Dahlia - Responsive Wedding Invitation

Dear customers, thank you for choosing our products. In this document, you will find an in-depth description of all the template's features and functionality.

If you have any questions not attended to by our template documentation, please contact us. If you like our template, please leave your feedback. Thanks :)

Template Version: 1.0
By: lucky_roo
Response time (up to): 1 business day.

Installation

Follow the steps below to setup your site template:

Please note that Dahlia is a simple HTML template and not a Wordpress theme/plugin.

  1. Log into your hosting space via an FTP software (Filezilla for example).
  2. Unzip the downloaded package and open the html folder to find all the template files.
  3. Below is the folder structure and needs to be uploaded to your website root directory:
    • html/css - Stylesheets folder
    • html/images - Images folder
    • html/img - Images folder
    • html/js - Javacripts folder
    • html/rsvp.php – RSVP form PHP files
  4. Upload the HTML files corresponding to the variant of your choice along with all directories in the structure that they appear in your download package. Then, the HTML file should reside in the root directory, and all other files should reside inside their associated folder. You should upload all or specific HTML files as per your need.

Tips Do not start from scratch, use an existing page from the demo and modify it to learn how it works.

HTML Structure

Dahlia follows a simple and easy to customize coding structure. Here is the sample for your reference:

<!doctype html>
<html lang="en" class="h-100 w-100">
    <head>
        <title>Dahlia - Responsive Wedding Invitation</title>`

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <meta name="description" content="">
        <meta name="keywords" content="">

        <!-- Required CSS files -->
        <link href="css/style.min.css" rel="stylesheet">
        <link href="css/custom.css" rel="stylesheet">

        <!-- Favicon -->
        <link rel="icon" href="img/favicon-32x32.png" sizes="32x32" type="image/png">
        <link rel="icon" href="img/favicon-16x16.png" sizes="16x16" type="image/png">
        <link rel="icon" href="img/favicon.ico">
    </head>

    <body id="page-top" class="h-100 w-100">

        <!-- Preloader Start -->
        <div class="preloader bg-white h-100 position-fixed w-100">
            ...
        </div>
        <!-- Preloader End -->

        <!-- Header Start -->
        <header class="fixed-top">
        ...    
        </header>
        <!-- Header End -->

        <!-- Spacer -->
        <span class="spacer d-block w-100"></span>

        <!-- Section - Hero Start -->
        <section id="hero" class="bg-img-cover bg-overlay position-relative">
        ...    
        </section>
        <!-- Section - Hero End -->

        <!-- Section - The Couple Start -->
        <section id="the-couple">
        ...    
        </section>
        <!-- Section - The Couple End -->

        <!-- Section - The Wedding Event Start -->
        <section id="the-wedding-event">
        ...
            <!-- Modal - How to Get There Start -->
            <id="how-to-get-there-modal" class="modal fade" tabindex="-1">
            ...
            </div>
            <!-- Modal - How to Get There End -->
        </section>
        <!-- Section - The Wedding Event End -->

        <!-- Section - Love Story Start -->
        <section id="love-story">
        ...    
        </section>
        <!-- Section - Love Story End -->

        <!-- Section - Proposed Start -->
        <section id="proposed" class="bg-img-cover bg-overlay position-relative">
        ...    
        </section>
        <!-- Section - Proposed End -->

        <!-- Section - Photos Start -->
        <section id="photos">
        ...    
        </section>
        <!-- Section - Photos End -->

        <!-- Section - Wedding Gifts Start -->
        <section id="wedding-gifts" class="bg-img-cover bg-overlay position-relative">
        ...    
        </section>
        <!-- Section - Wedding Gifts End -->

        <!-- Section - RSVP Start -->
        <section id="rsvp">
        ...    
        </section>
        <!-- Section - RSVP End -->

        <!-- Footer Start -->
        <footer class="bg-img-cover bg-overlay position-relative">
        ...    
        </footer>
        <!-- Footer End -->

        <!-- Required JS files -->
        <script src="js/script.min.js"></script>
    </body>
</html>

Page Link

You can add link/button which direct you to other section of the same page with smooth scroll effect like it is one page website. You just need to add class: page-scroll and href should be the ID of the section as per the example shown below:

<a href="#the-couple" class="nav-link page-scroll">The Couple</a>

<!-- Section - The Couple Start -->
<section id="the-couple">    
...
</section>
<!-- Section - The Couple End -->

NotePlease note that destination section should have valid ID.

External Page Link

<a href="https://themeforest.net/" target="_blank">External Page Link</a>