Hello and Thank you for choosing Vertiglast.

Vertiglast is designed to showcase your real estate assets and drive custommers to your business.

Built for efficinecy and smoothness with HTML5, CSS3, PHP and Javascript on the Bootstrap 4 framework.

You can edit the template CSS files using any text editor but for the best experience we recommend Brackets or Notepad++

What's Included:

• 8 fully functional HTML templates:

• Two LeadGeneration styles with 2 variants: Parallax and Video

• Two ClickThrough styles with 2 variants: Parallax and Video

Created: 20/09/2018

Author: Atypical Themes

The main template folder contains the following:

Vertiglast - ClickThrough and Vertiglast - LeadGeneration folders each contain 4 templates separated in two styles with two variants each: Parallax and Video

Each template folder contains and index.html file along with the following folders:

• CSS - Bootstrap, the main template stylesheet and other css files.

• Fonts - Linearicons Icon font.

• Images - Image files and favicons.

• Js - Javascript files for bootstrap, smoothscroll, contact-form, animations, lightbox and template custom javascript file Vertiglast.js

• Php - Php scripts for contact and newsletter forms.

Dobucmentation is where you found this help file.

SETTING UP THE TEMPLATE

---

Adding Images:

Copy your custom images into the images folder and add them to the tempalte by editing the img link inside the template.

An image link looks like this in the code:

                       
<img src="imgages/yourimage.jpg" class="img-fluid" alt=" ">
                       

Setting up the fullscreen video:

The video included in the template is an mp4 video with 1280x720 resolution at 29fps. The supported video formats are mp4 , WebM and ogg.

When using video, loading times are very important so try to find a ballance between quality and size and limit your video to under 20mb in size.

Place your video file inside the images folder. Open index.html with a text editor and navigate to the hero section, here you will find the following lines of code:

                    
<video autoplay loop poster="images/poster.jpg" id="bgvid" class="img-fluid">
    <source src="images/bgvid.mp4" type="video/mp4">
</video>
                    

Now replace bgvid.mp4 with the name of your video file and also change "mp4" in the line type="video/mp4" with ogg or webm if you are using one of those formats.

If the video cannot be loaded the template will load a poster image instead. So create a .jpg image file and name it poster.jpg and paste it in the images folder.

By default the video will autoplay and loop, defined by the autoplay and loop parameters inside the video tag.

Video Modal Options

The video modal code looks like this:

                    
<href="#" class="js-video-button" data-video-id='210733516' data-channel="vimeo">
    <img src="images/video-thumb.jpg" class="img-fluid" alt="video-thumbnail">
</a>
                    

VIMEO

To set up the video lightbox with a vimeo video you need to select your video, click share, in the widow that appears you copy the number shown in the image(this is the video id) and paste it in the "data-video-id=" field from the above code.

YOUTUBE

To set up the video lightbox with a youtube video again click share on the video you want and copy and paste the video id code from the image below into the code above and change 'data-channel="vimeo"' to 'data-channel="youtube"'.

You can also change the thumbnail image of the video.

IMPORTANT NOTICE: Please note that because of a google security feature the video modal will not load the linked video on local machines, only once the tempalte is uploaded to the server.

Contact Forms

To reviece emails from the contact form change the line $EmailTo = "youremail@domain.com" to your desired email adress in the form-process.php file.

If you want to change the input filed names you will have to update them in the following files:

• index.html, Vertiglast.js, form-process.php

HTML STRUCTURE

---

The index.html file looks like this:

                    
<!DOCTYPE html>
    <html>
    <head>
      ...
    </head>
        <body>
            <!-- Loading Screen -->
            <div id="loader-wrapper">
                <div id="loader"></div>
            </div>
            <!-- HEADER -->
            <header id="main-header">            
              ...
            </header>
            <section id="...section">         
              ...
            </section>
            <!-- FOOTER -->
            <footer id="main-footer">       
              ...
            </footer>
        </body>
    </html>
                    

Each template is divided into the following sections and subsections:

• Hero Section

• About Section

• Testimonials Section

• Plans and Pricing Section

• CTA Section

A section looks like this:

                        
    <div id="about-section" class="large-margin">
        ...
        ...
        ...
    </div>
                        

The "large-margin" class sets the bottom margin of the section.

You can customize section margins individualy, three margin classes can be used to modify the bottom margin of each section:

• tiny-margin - 2em (32px)
• small-margin - 6em (96px)
• medium-margin - 8em (128px)
• large-margin - 12em (192px)

You can change the value of each margin class by going into the style.css file.

!Note that the em and rem values in this template are calculated for a 16px base font-size!

You can change the base font-size of the template by opening style.css and navigating to the "body" class.

CUSTOMIZATION

---

Changing Colors

Changing the main color of the template is an easy process:

1. Open style.css with your prefered text editor;

2. Press Ctrl+F (Cmd + F on mac) on your keyboard to open the search function;

3. Type the color codes below into the search box and replace the values with your custom color;

4. For both versions: #FFD012;

Changing Fonts

Here is how you change fonts in the Vertiglast template:

1. Go to Google Fonts and select you desired font.

2. After choosing and customizing your font package, on the download window copy the import code as shown:

   

3. Open your style.css file inside the css folder, look for the font import code (it should be near the top of the code) witch looks like this:

                                   
           @import url('https://fonts.googleapis.com/css?family=FontName');
                                   

4. Replace the inport code with your import code from google fonts

5. Press Ctrl+F (Cmd + F on mac) on your keyboard to open the search function and replace the old fonts with your new font name (font names are case sensitive).

Changing Icons

Vertiglast comes with the Linearicon icon font pack.

Icons look like this in the code:

    <i class="lnr lnr-apartment"></i>
                        

To change the icon being displayed you need to change "lnr-apartment" with the icon name you want.

Here is a list of Linearicons.

Hero Image Overlay

The hero images in every template (including the video) have an opacity filter over then to improve readability. To change the value of this filter navigate to the hero section in style.css and edit the linear gradient value (it can range from 0.1 to 1)

                        
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../images/hero.jpg);
                        

Example:

RESOURCES USED

---

Fonts - Raleway

Icons - Linearicons

Bootstrap 4

Lightbox

Bootstrap Validator

JQuery 3.2.1

Video lightbox plugin