Welcome to PLUME HTML5 Multi-Purpose Template. We are Graphicfort, and we’d like to thank you for purchasing one of our products, your support is much appreciated.

PLUME is a HTML5/CSS3 template based on Bootstrap 3 framework. It allows you to built impressive, better & faster mobile friendly websites. If you are familiar with bootstrap, it will be easy to customize it and if not you can learn about bootstrap framework from it's official website.

Please consider Themeforest license policies, the purchase you made allows you to use PLUME on only one domain. That's means a single purchase is needed for each site you will use PLUME on. We appreciate everyone following the policy as it allows us to keep supporting and releasing new updates.

Please drop us a line and let us know what you think of this template, if you have any suggestions for improvements, extra features or you just want to say "Hello".

PLUME HTML5 Multi-Purpose Template is a HTML5 template which means you have to edit every thing manually, you can use any text editor like Sublime Text program to edit the files, and when you done you can upload the final files via any ftp program like FileZilla directly to your main host folder (usually the folder will be www or public_html)

- check this video to learn how to upload your files using filezilla program.

First of all you can download and install this program to install a localhost server into your machine

There are several ways to load css and js files, we will discuss a few of them and you are free to choose what suits you:

1- It's already has been used in the downloaded packadge and you don't have to make any modification, most of js and css files will be loaded dynamically, it means if the page has an element for example a parallax section, when the visitor open that page, the script will detect the element (parallax section) and it will dynamically load only the nessacary files that will make the parallax effect work.

- Advantage: The page will save 1 requst for the server and the page size will be reduced.
- in this method you must run the files from localhost or live server otherwise the website will have a lot of errors and will not work probably.

2- The normal way: which means you have to link every js and css file in HTML, to convert the original downloaded packadge files to this method follow these steps:
2.1- open every HTML file and replace this line:

<link rel="stylesheet" href="css/plugins.css">

with

<link rel="stylesheet" href="js/plugins/animsition/css/animsition.min.css">
<link rel="stylesheet" href="css/social-icons.css">
<link rel="stylesheet" href="css/animate/animate.min.css">
<link rel="stylesheet" href="js/plugins/chosen/chosen.min.css">
<link rel="stylesheet" href="js/plugins/fancybox/jquery.fancybox.min.css">
<link rel="stylesheet" href="js/plugins/owl-carousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="js/plugins/owl-carousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="js/plugins/videojs/videojs.min.css">

also you need to replace this line

<script type="text/javascript" src="js/plugins.js"></script>

with

<script type="text/javascript" src="js/plugins/animsition/js/animsition.min.js"></script>
<script type="text/javascript" src="js/plugins/chosen/chosen.jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/cookie/js.cookie.min.js"></script>
<script type="text/javascript" src="js/plugins/countto/jquery.countTo.min.js"></script>
<script type="text/javascript" src="js/plugins/downCount/jquery.downCount.min.js"></script>
<script type="text/javascript" src="js/plugins/easypiechart/jquery.easypiechart.min.js"></script>
<script type="text/javascript" src="js/plugins/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/plugins/fancybox/helpers/jquery.fancybox-media.min.js"></script>
<script type="text/javascript" src="js/plugins/fitvids/jquery.fitvids.min.js"></script>
<script type="text/javascript" src="js/plugins/gfortinsta/gfortInsta.min.js"></script>
<script type="text/javascript" src="js/plugins/gfortytplayer/ytplayer.js"></script>
<script type="text/javascript" src="js/plugins/infobox/infobox_packed.js"></script>
<script type="text/javascript" src="js/plugins/isotope/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="js/plugins/isotope/packery-mode.pkgd.min.js"></script>
<script type="text/javascript" src="js/plugins/matchHeight/jquery.matchHeight-min.js"></script>
<script type="text/javascript" src="js/plugins/owl-carousel/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/plugins/pace/pace.min.js"></script>
<script type="text/javascript" src="js/plugins/parallax/jquery.parallax-1.1.3.min.js"></script>
<script type="text/javascript" src="js/plugins/prettify/prettify.min.js"></script>
<script type="text/javascript" src="js/plugins/scrollto/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="js/plugins/tweetie/tweetie.min.js"></script>
<script type="text/javascript" src="js/plugins/typed/typed.min.js"></script>
<script type="text/javascript" src="js/plugins/validation/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/plugins/videojs/videojs.min.js"></script>
<script type="text/javascript" src="js/plugins/waypoint/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="js/plugins/waypoint/sticky.min.js"></script>
<script type="text/javascript" src="js/plugins/wow/wow.min.js"></script>

2.2- replace js/scripts.js file in the downloaded packadge with the file located in the documentation folder in the path js/scripts.js

- Advantage: you can run the template files from any where localhost, live server or even you can open the files directly.
- Disadvantage: The server requests and the page size will be hudge (at least the server request will be over 50 just for loading the files and the page size will be over 8 mb).

3- It's the same like the second method but in this method you have to combine all the files into 1 file only, it means you have to open and copy the content of these JS files

<script type="text/javascript" src="js/plugins/animsition/js/animsition.min.js"></script>
<script type="text/javascript" src="js/plugins/chosen/chosen.jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/cookie/js.cookie.min.js"></script>
<script type="text/javascript" src="js/plugins/countto/jquery.countTo.min.js"></script>
<script type="text/javascript" src="js/plugins/downCount/jquery.downCount.min.js"></script>
<script type="text/javascript" src="js/plugins/easypiechart/jquery.easypiechart.min.js"></script>
<script type="text/javascript" src="js/plugins/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/plugins/fancybox/helpers/jquery.fancybox-media.min.js"></script>
<script type="text/javascript" src="js/plugins/fitvids/jquery.fitvids.min.js"></script>
<script type="text/javascript" src="js/plugins/gfortinsta/gfortInsta.min.js"></script>
<script type="text/javascript" src="js/plugins/gfortytplayer/ytplayer.js"></script>
<script type="text/javascript" src="js/plugins/infobox/infobox_packed.js"></script>
<script type="text/javascript" src="js/plugins/isotope/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="js/plugins/isotope/packery-mode.pkgd.min.js"></script>
<script type="text/javascript" src="js/plugins/matchHeight/jquery.matchHeight-min.js"></script>
<script type="text/javascript" src="js/plugins/owl-carousel/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/plugins/pace/pace.min.js"></script>
<script type="text/javascript" src="js/plugins/parallax/jquery.parallax-1.1.3.min.js"></script>
<script type="text/javascript" src="js/plugins/prettify/prettify.min.js"></script>
<script type="text/javascript" src="js/plugins/scrollto/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="js/plugins/tweetie/tweetie.min.js"></script>
<script type="text/javascript" src="js/plugins/typed/typed.min.js"></script>
<script type="text/javascript" src="js/plugins/validation/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/plugins/videojs/videojs.min.js"></script>
<script type="text/javascript" src="js/plugins/waypoint/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="js/plugins/waypoint/sticky.min.js"></script>
<script type="text/javascript" src="js/plugins/wow/wow.min.js"></script>

into 1 file and you can name it any name and link it to the HTML files, also you will have to combine the css files

<link rel="stylesheet" href="js/plugins/animsition/css/animsition.min.css">
<link rel="stylesheet" href="css/social-icons.css">
<link rel="stylesheet" href="css/animate/animate.min.css">
<link rel="stylesheet" href="js/plugins/chosen/chosen.min.css">
<link rel="stylesheet" href="js/plugins/fancybox/jquery.fancybox.min.css">
<link rel="stylesheet" href="js/plugins/owl-carousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="js/plugins/owl-carousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="js/plugins/videojs/videojs.min.css">

into 1 file and you can name it any name and link it to the HTML files

- Advantage: The server requests will be only 2 requests for loading the JS and css files.
- Disadvantage: The page size will be over 8 mb.

So we choose the first method it's much better in our opinion, it's kind of combination between the second and the third method (load only what the page need which makes a balance between the server requests and the page size).

PS: this technique is used by WordPress platform, but we are using it via jQuery function jQuery.getScript() not PHP.

The mockup PSD files that used in PLUME are not included in the download package but you can download them from http://gfort.co/plumemockup.

We have separated the mockup files from the download package because it's 185MB and you don't have to download them every time we push an update.

There are 6 animation types of page preloader, all with a progress bar and a percentage, also you can add a text above the percentage.

1- To completely remove the page preloader follow these steps:

1.1- open js/scripts.js file and find this line

// Enable or Disable Page preLoader (true / false)
pagePreLoader = true;

change true to false

1.2- open js/plugins.js file and remove the lines for 1- PACE

1.3- open css/style.css file and find these lines

#main-wrapper {
    opacity: 0;
    padding: 0;
    z-index: 2;
    width: 100%;
    display: block;
    margin: 0 auto;
    position: relative;
    background-color: #ffffff;

    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

change opacity: 0; to opacity: 1;

2- To change the page preloader animation open js/scripts.js file and find this line

//1, 2, 3, 4, 5 or 6
pagePreLoaderStyle = '1';

change 1 to 2, 3, 4, 5 or 6 without removing the single quote.

3- To add a text to the page preloader, open js/scripts.js file and find this line

pagePreLoaderText = '';

add your text between the single quote, for example:

pagePreLoaderText = 'Loading';

and the result will be looks like:

There are 4 main notifications with an extra 5 styles, which makes the total 9 notifications.

You can copy the next code and insert it before <div id="main-wrapper"> and the code must be inserted before this line <div id="main-wrapper"> in the HTML file you want to show the notification.

<div class="notification-block notification-block-style-1">
    <!-- Notification Block Wrapper -->
    <div class="notification-block-wrapper">
        <!-- Notification Block Container -->
        <div class="notification-block-container">
            <!-- Notification Block Content -->
            <div class="notification-block-content">

                <button type="button" class="notification-block-close-btn">
                    <span aria-hidden="true">×</span>
                </button>

                <h6>JOIN OUR SUBSCRIBER</h6>

                <p>Join our subscriber and we'll inform you about all new products.</p>

                <!-- Subscribe Form Block (Mailchimp) -->
                <div class="form-block subscribe-form-block mailchimp-form-block" data-form-url="//Graphicfort.us11.list-manage.com/subscribe/post?u=dffe9a5d2b472dbe0cc471e1b&id=4150cd2f12">
                    <!-- Form Block Container -->
                    <div class="form-block-container">
                        <!-- Form -->
                        <form method="post" action="#">


                            <!-- Email Address -->
                            <div class="col-md-12">
                                <!-- Form Group -->
                                <div class="form-group">

                                    <label>Email Address</label>
                                    <input type="email" class="form-control subscribe-email" name="EMAIL">

                                </div><!-- /End Form Group -->
                            </div><!-- /End Email Address -->


                            <!-- Submit Button -->
                            <div class="col-md-12">
                                <!-- Form Group -->
                                <div class="form-group">

                                    <button type="submit" class="btn btn-gfort">SUBSCRIBE</button>

                                </div><!-- /End Form Group -->
                            </div><!-- /End Submit Button -->


                        </form><!-- /End Form -->
                    </div><!-- /End Form Block Container -->
                </div><!-- /End Subscribe Form Block (Mailchimp) -->

            </div><!-- /End Notification Block Content -->
        </div><!-- /End Notification Block Container -->
    </div><!-- /End Notification Block Wrapper -->
</div><!-- /End Notification Block -->

You can change the code after these lines:

<button type="button" class="notification-block-close-btn">
    <span aria-hidden="true">×</span>
</button>

and before this line

</div><!-- /End Notification Block Content -->

The code is the same as notification 1 code except we will add a background image, the color will be white, and the button hover will be different.

For the background image:

add this code

style="background-image: url(images/notifications/001.jpg);"

to this line

<div class="notification-block-content">

The result will be looks like:

<div class="notification-block-content" style="background-image: url(images/notifications/001.jpg);">

For the white color:

for furthur instruction to convert the text color from dark to light check this section.

add this code

light-color

to this line

<div class="notification-block-content" style="background-image: url(images/notifications/001.jpg);">

The result will be looks like:

<div class="notification-block-content light-color" style="background-image: url(images/notifications/001.jpg);">

For the button:

Change btn-gfort to btn-gfort-o

You can copy the next code and insert it before <div id="main-wrapper"> and the code must be inserted before this line <div id="main-wrapper"> in the HTML file you want to show the notification.

<div class="notification-block notification-block-style-2">
    <!-- Notification Block Wrapper -->
    <div class="notification-block-wrapper">
        <!-- Notification Block Container -->
        <div class="notification-block-container">
            <!-- Notification Block Content -->
            <div class="notification-block-content light-color text-center">

                <button type="button" class="notification-block-close-btn">
                    <span aria-hidden="true">×</span>
                </button>

                <p>Well done! You successfully read this important message. <a href="#" class="btn btn-gfort-white btn-gfort-sm">Read More</a></p>

            </div><!-- /End Notification Block Content -->
        </div><!-- /End Notification Block Container -->
    </div><!-- /End Notification Block Wrapper -->
</div><!-- /End Notification Block -->

You can change the code after these lines:

<button type="button" class="notification-block-close-btn">
    <span aria-hidden="true">×</span>
</button>

and before this line

</div><!-- /End Notification Block Content -->

The code is the same as notification 3 code except we will add a background image.

add this code

style="background-image: url(images/notifications/002.jpg);"

to this line

<div class="notification-block-content light-color text-center">

The result will be looks like:

<div class="notification-block-content light-color text-center" style="background-image: url(images/notifications/002.jpg);">

You can copy the next code and insert it before <div id="main-wrapper"> and the code must be inserted before this line <div id="main-wrapper"> in the HTML file you want to show the notification.

<div class="notification-block notification-block-style-3">
    <!-- Notification Block Wrapper -->
    <div class="notification-block-wrapper">
        <!-- Notification Block Container -->
        <div class="notification-block-container">
            <!-- Notification Block Content -->
            <div class="notification-block-content text-center">

                <button type="button" class="notification-block-close-btn">
                    <span aria-hidden="true">×</span>
                </button>

                <p>Well done! You successfully read this important message. <a href="#" class="btn btn-gfort btn-gfort-sm">Read More</a></p>

            </div><!-- /End Notification Block Content -->
        </div><!-- /End Notification Block Container -->
    </div><!-- /End Notification Block Wrapper -->
</div><!-- /End Notification Block -->

You can change the code after these lines:

<button type="button" class="notification-block-close-btn">
    <span aria-hidden="true">×</span>
</button>

and before this line

</div><!-- /End Notification Block Content -->

The code is the same as notification 5 code except we will add a background image, the color will be white, and the button hover will be different.

For the background image:

add this code

style="background-image: url(images/notifications/002.jpg);"

to this line

<div class="notification-block-content text-center">

The result will be looks like:

<div class="notification-block-content text-center" style="background-image: url(images/notifications/002.jpg);">

For the white color:

for furthur instruction to convert the text color from dark to light check this section.

add this code

light-color

to this line

<div class="notification-block-content text-center" style="background-image: url(images/notifications/002.jpg);">

The result will be looks like:

<div class="notification-block-content light-color text-center" style="background-image: url(images/notifications/002.jpg);">

For the button:

Change btn-gfort to btn-gfort-o

You can copy the next code and insert it before <div id="main-wrapper"> and the code must be inserted before this line <div id="main-wrapper"> in the HTML file you want to show the notification.

<div class="notification-block notification-block-style-4">
    <!-- Notification Block Wrapper -->
    <div class="notification-block-wrapper">
        <!-- Notification Block Container -->
        <div class="notification-block-container">
            <!-- Notification Block Content -->
            <div class="notification-block-content text-center">

                <button type="button" class="notification-block-close-btn">
                    <span aria-hidden="true">×</span>
                </button>

                <h6>JOIN OUR SUBSCRIBER</h6>

                <p>Join our subscriber and we'll inform you about all new products.</p>

                <!-- Subscribe Form Block (Mailchimp) -->
                <div class="form-block subscribe-form-block mailchimp-form-block" data-form-url="//Graphicfort.us11.list-manage.com/subscribe/post?u=dffe9a5d2b472dbe0cc471e1b&id=4150cd2f12">
                    <!-- Form Block Container -->
                    <div class="form-block-container">
                        <!-- Form -->
                        <form method="post" action="#">


                            <!-- Email Address -->
                            <div class="col-md-12">
                                <!-- Form Group -->
                                <div class="form-group">

                                    <label>Email Address</label>
                                    <input type="email" class="form-control subscribe-email" name="EMAIL">

                                </div><!-- /End Form Group -->
                            </div><!-- /End Email Address -->


                            <!-- Submit Button -->
                            <div class="col-md-12">
                                <!-- Form Group -->
                                <div class="form-group">

                                    <button type="submit" class="btn btn-gfort">SUBSCRIBE</button>

                                </div><!-- /End Form Group -->
                            </div><!-- /End Submit Button -->


                        </form><!-- /End Form -->
                    </div><!-- /End Form Block Container -->
                </div><!-- /End Subscribe Form Block (Mailchimp) -->

            </div><!-- /End Notification Block Content -->
        </div><!-- /End Notification Block Container -->
    </div><!-- /End Notification Block Wrapper -->
</div><!-- /End Notification Block -->

You can change the code after these lines:

<button type="button" class="notification-block-close-btn">
    <span aria-hidden="true">×</span>
</button>

and before this line

</div><!-- /End Notification Block Content -->

The code is the same as notification 7 code except we will add a background image, the color will be white, and the button hover will be different.

For the background image:

add this code

style="background-image: url(images/notifications/001.jpg);"

to this line

<div class="notification-block-content text-center">

The result will be looks like:

<div class="notification-block-content text-center" style="background-image: url(images/notifications/001.jpg);">

For the white color:

for furthur instruction to convert the text color from dark to light check this section.

add this code

light-color

to this line

<div class="notification-block-content text-center" style="background-image: url(images/notifications/001.jpg);">

The result will be looks like:

<div class="notification-block-content text-center light-color" style="background-image: url(images/notifications/001.jpg);">

For the button:

Change btn-gfort to btn-gfort-o

You can copy the next code and insert it before <div id="main-wrapper"> and the code must be inserted before this line <div id="main-wrapper"> in the HTML file you want to show the notification.

<div class="notification-block notification-block-style-4">
    <!-- Notification Block Wrapper -->
    <div class="notification-block-wrapper">
        <!-- Notification Block Container -->
        <div class="notification-block-container">
            <!-- Notification Block Content -->
            <div class="notification-block-content text-center">

                <button type="button" class="notification-block-close-btn">
                    <span aria-hidden="true">×</span>
                </button>

                <p><img src="images/notifications/003.png" alt="Plume" /></p>

                <p><a href="#" class="btn btn-gfort">Read More</a></p>

            </div><!-- /End Notification Block Content -->
        </div><!-- /End Notification Block Container -->
    </div><!-- /End Notification Block Wrapper -->
</div><!-- /End Notification Block -->

You can change the code after these lines:

<button type="button" class="notification-block-close-btn">
    <span aria-hidden="true">×</span>
</button>

and before this line

</div><!-- /End Notification Block Content -->

By default the expire days is 0. which means the notification will appear every time the visitor vist the page that contains the notifaction, even after he closed it, if you want to change that, for exmple you need the notifaction appear to the visitor every 10, find this line in js/scripts.js

// Notification Expire Days
notificationExpireDays = 0;

change 0 to 10

The result will be looks like:

// Notification Expire Days
notificationExpireDays = 10;

This will make the notification appear again after 10 days.

There are 4 different layouts for the page (boxed, Left sidebar, Right sidebar and center), and 1 layout for the section it self (Full Width section)

To convert the entier page to a boxed page open the HTML file and add this class page-boxed to the body tag, it will be looks like:

<body class="page-boxed">

Before we explain how Left sidebar, Right sidebar and center work, we need to explain the structure of the HTML file first.

The HTML file structure is almost the same for the entire HTML files except some files we removed the code for the sidebar because it's not necassry, because the sidebar will not be visible so no need to add extra code to that page.

The HTML file structure:

<div id="main-wrapper">


    <!-- Header Section
    ==================================================================== -->
    <header class="header-section">
        ...
    </header><!-- /End Header Section -->


    <!-- Page Title Section
    ==================================================================== -->
    <div class="page-title-section">
        ...
    </div><!-- /End Page Title Section -->


    <!-- Page Body
    ==================================================================== -->
    <div class="page-body">


        <!-- Main Content
        ================================================================ -->
        <div class="main-content">
            ...
        </div><!-- /End Main Content -->


        <!-- Main Sidebar
        ================================================================ -->
        <div class="main-sidebar">
            ...
        </div><!-- /End Main Sidebar -->


    </div><!-- /End Page Body -->


    <!-- Footer Section
    ==================================================================== -->
    <footer class="footer-section">
        ...
    </footer><!-- /End Footer Section -->


</div><!-- /End Main Wrapper -->

Some HTML files will be missing the Main Sidebar block as we explained before.

For an example check this file blog-left-sidebar.html.

To add a Left sidebar to the page, add this class page-left-sidebar to page-body, it will be looks like:

<div class="page-body page-left-sidebar">

If the page doesn't contain Main Sidebar block, then you have to copy the code from the previous example page.

For an example check this file blog-right-sidebar.html.

To add a Right sidebar to the page, add this class page-right-sidebar to page-body, it will be looks like:

<div class="page-body page-right-sidebar">

If the page doesn't contain Main Sidebar block, then you have to copy the code from the previous example page.

For an example check this file blog-center.html.

To make the page centered add this class page-center to page-body, it will be looks like:

<div class="page-body page-center">

In centered pages we have removed Main Sidebar block as it's not necessary and it will not be visible even if the block code present in the HTML file.

For an example check this file portfolio-4-fullwidth-title-overlay-no-margin.html.

This will make the section (not the page) take the full width of the screen size, to make the section in full width layout, add this class fullwidth-section to gfort-section, it will be looks like:

<div class="gfort-section fullwidth-section">

PLUME uses the most famous reveal animations when scrolling (WOW jQuery plugin) worth $29, and you don't have to purchase a licence to use it, as we already did.

To add an animation to any block you have to add 2 classes and 2 attributes

For example if you have normal div block:

<div>
    ...
</div>

You can add an animation to that block by adding wow class, the animation class, data-wow-duration attribute and data-wow-delay attribute.

<div class="wow fadeIn" data-wow-duration="1.5s" data-wow-delay="0.25s">
    ...
</div>

• wow class: the main class which makes the block invisible until the user scrolls to reveal it.
• animation class: this class you can change it as you wish, you can choose the animation you would like to add from here.
• data-wow-duration attribute: this attribute is responsible for the duration of the animation, it means you can set it 10s and the animation will take 10s till it finished.
• data-wow-delay attribute: this attribute is responsible for the delay before the animation starts, for example if you have more than one block in the same row and you want to fade the blocks one by one, you can set different delay for each one.

For more details about wow plugin, you can check the official documentation from here.

If you want to turn off the animation even if the necessary classes and attributes are present, open js/scripts.js file and find this line:

// Enable or Disable Animation (true / false)
enableAnimation = true;

change true to false

If you have a section which has a dark background color, the text will be hard to read, and to solve this problem you have to add the light-color class to the text to convert it to light color and it will be readable.

The code for the previous section is:

<!-- gfort Section -->
<div class="gfort-section black-background-color">
    <!-- Section Container -->
    <div class="section-container">


        <!-- col-md-12 -->
        <div class="col-md-12">
            <!-- Section Title -->
            <div class="section-title text-center">

                <h2 class="section-main-title">PLUME HTML5 Multipurpose Template</h2>

                <p class="section-subtitle">The smartest and most flexible HTML5 Bootstrap template you've ever seen. Create exactly what you need with Plume.</p>

                <div class="hr-divider hr-divider-style-3"></div>

            </div><!-- /End Section Title -->
        </div><!-- /End col-md-12 -->


    </div><!-- /End Section Container -->
</div><!-- /End gfort Section -->

If you add light-color class to the main block section-title the text will be converted to light color.

<div class="section-title text-center light-color">

And the result will be:

PLUME uses the most famous innovative (Slider Revolution Responsive jQuery Plugin) worth $16, and you don't have to purchase a licence to use it, as we already did.

We will explain a few tips, you can find the online official documentation from here which explain every thing, if you want to go beyond the provided sliders.

If you want to add more than 1 slider in the same page, every slider must have his unique id and it's own script.

For example rev_slider_container_1 id for the fiest slider and rev_slider_container_2 for the second one.

<!-- Slider Revolution -->
<div id="rev_slider_wrapper" class="rev_slider_wrapper fullwidthbanner-container">
    <div id="rev_slider_container_1" class="rev_slider fullwidthabanner" data-version="5.4.1">
        ...
    </div>
</div><!-- /End Slider Revolution -->

<!-- Slider Revolution -->
<div id="rev_slider_wrapper" class="rev_slider_wrapper fullwidthbanner-container">
    <div id="rev_slider_container_2" class="rev_slider fullwidthabanner" data-version="5.4.1">
        ...
    </div>
</div><!-- /End Slider Revolution -->

And for the scripts they should be like:

<script type="text/javascript">
    jQuery(document).ready(function () {

        'use strict';

        if (jQuery('#rev_slider_container_1').revolution === undefined) {
            revslider_showDoubleJqueryError('#rev_slider_container_1');
        } else {
            jQuery('#rev_slider_container_1').show().revolution({
                ...
            });
        }

    });
</script>

<script type="text/javascript">
    jQuery(document).ready(function () {

        'use strict';

        if (jQuery('#rev_slider_container_2').revolution === undefined) {
            revslider_showDoubleJqueryError('#rev_slider_container_2');
        } else {
            jQuery('#rev_slider_container_2').show().revolution({
                ...
            });
        }

    });
</script>

In the downloaded packadge you will find a lot of lines in the end of the HTML file which contains Slider Revolution, these files are only for development and you are free to remove them if you are ready to upload the final files to your host as they are not necessary in the final product.

These lines are:

<script type="text/javascript" src="js/plugins/slider-revolution/js/extensions/revolution.extension.actions.min.js"></script>
<script type="text/javascript" src="js/plugins/slider-revolution/js/extensions/revolution.extension.carousel.min.js"></script>
<script type="text/javascript" src="js/plugins/slider-revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
<script type="text/javascript" src="js/plugins/slider-revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script type="text/javascript" src="js/plugins/slider-revolution/js/extensions/revolution.extension.migration.min.js"></script>
<script type="text/javascript" src="js/plugins/slider-revolution/js/extensions/revolution.extension.navigation.min.js"></script>
<script type="text/javascript" src="js/plugins/slider-revolution/js/extensions/revolution.extension.parallax.min.js"></script>
<script type="text/javascript" src="js/plugins/slider-revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
<script type="text/javascript" src="js/plugins/slider-revolution/js/extensions/revolution.extension.video.min.js"></script>

It's better to remove the previous lines after you finish the development process, it will save about 9 unnecessary server requests and also the page size will be reduced.

Unlike slider revolution we coded owl slider in different way that allows you to add multiple sliders in the same page with the same JS code but with different HTML code if the sliders doesn't share the same behaviour.

PS: in the end of this section you will find all the attributes and what they do.

The next code is the basic structure for owl slider.

<!-- gfort owl Slider -->
<div class="gfort-owl-slider owl-carousel owl-theme">


    <!-- gfort owl Slider Item -->
    <div class="gfort-owl-slider-item">
        ...
    </div><!-- /End gfort owl Slider Item -->


    <!-- gfort owl Slider Item -->
    <div class="gfort-owl-slider-item">
        ...
    </div><!-- /End gfort owl Slider Item -->


</div><!-- /End gfort owl Slider -->

<div class="gfort-owl-slider owl-carousel owl-theme"> the container of the owl slider

<div class="gfort-owl-slider-item"> the slider item.

The previous code will create a slider with only 2 items, to add more items you have to add more <div class="gfort-owl-slider-item"> blocks, for example if you want to create a slider with 3 items, the code will be looks like:

<!-- gfort owl Slider -->
<div class="gfort-owl-slider owl-carousel owl-theme">


    <!-- gfort owl Slider Item -->
    <div class="gfort-owl-slider-item">
        ...
    </div><!-- /End gfort owl Slider Item -->


    <!-- gfort owl Slider Item -->
    <div class="gfort-owl-slider-item">
        ...
    </div><!-- /End gfort owl Slider Item -->


    <!-- gfort owl Slider Item -->
    <div class="gfort-owl-slider-item">
        ...
    </div><!-- /End gfort owl Slider Item -->


</div><!-- /End gfort owl Slider -->

By default the basic slider will display 1 item per slide, will not be autoplayable, the dots and arrows will not be visible.

<!-- gfort owl Slider -->
<div class="gfort-owl-slider owl-carousel owl-theme">


    <!-- gfort owl Slider Item -->
    <div class="gfort-owl-slider-item">
        item 1
    </div><!-- /End gfort owl Slider Item -->


    <!-- gfort owl Slider Item -->
    <div class="gfort-owl-slider-item">
        item 2
    </div><!-- /End gfort owl Slider Item -->


    <!-- gfort owl Slider Item -->
    <div class="gfort-owl-slider-item">
        item 3
    </div><!-- /End gfort owl Slider Item -->


</div><!-- /End gfort owl Slider -->

The previous code will create the next slider which has no dots, arrows, not autoplayable and display 1 item per slide, but you can drag the slides.

To add dots to the slider, you have do add data-slider-dots="true" attribute to <div class="gfort-owl-slider owl-carousel owl-theme">, it will be looks like:

<div class="gfort-owl-slider owl-carousel owl-theme" data-slider-dots="true">

and the result will be looks like:

To add arrows to the slider, you have do add data-slider-arrows="true" attribute to <div class="gfort-owl-slider owl-carousel owl-theme">, it will be looks like:

<div class="gfort-owl-slider owl-carousel owl-theme" data-slider-arrows="true">

and the result will be looks like: (move the mouse over the slider to see the arrows)

To add dots and arrows you have to add the previous attributes, it will be looks like:

<div class="gfort-owl-slider owl-carousel owl-theme" data-slider-dots="true" data-slider-arrows="true">

and the result will be looks like: (move the mouse over the slider to see the arrows)

To make the slider autoplayable from the start (the slides will be displayed one after the other without interact with the slider), you have do add data-slider-autoplay="true" attribute to <div class="gfort-owl-slider owl-carousel owl-theme">, it will be looks like:

<div class="gfort-owl-slider owl-carousel owl-theme" data-slider-autoplay="true">

and the result will be looks like:

By default the slider display 1 item per slide, but what if you want to display 2 items by slide?

To make the slider display 2 items per slide, you have do add data-slider-items="2" attribute to <div class="gfort-owl-slider owl-carousel owl-theme">, it will be looks like:

<div class="gfort-owl-slider owl-carousel owl-theme" data-slider-items="2">

and the result will be looks like:

In the previous example we manage to display 2 items per slide, but there are no space between the items

To add a space (30px) between the items, you have do add data-slider-items-space="30" attribute to <div class="gfort-owl-slider owl-carousel owl-theme">, it will be looks like:

<div class="gfort-owl-slider owl-carousel owl-theme" data-slider-items-space="30">

and the result will be looks like:

In the previous example we manage to display 2 items per slide, but if you resize the browser the slider will display only 1 item per slide.

To make the slider more responsive and interact with different screen sizes, you have to add some extra attributes.

data-slider-items for screen size >= 1200px

data-slider-items-md for screen size >= 992px > 1200px

data-slider-items-sm for screen size >= 768px >992px

data-slider-items-xs for screen size >= 480px > 768px

data-slider-items-xxs for screen size >= 0 > 480px

Example: we will make the slider show:

• 3 items per slide for screen size >= 1200px
• 2 items per slide for screen size >= 992px > 1200px
• 3 items per slide for screen size >= 768px > 992px
• 2 items per slide for screen size >= 480px > 768px
• 1 items per slide for screen size >= 0 > 480px

The code will looks like:

<div class="gfort-owl-slider owl-carousel owl-theme" data-slider-items="3" data-slider-items-md="2" data-slider-items-sm="3" data-slider-items-xs="2" data-slider-items-xxs="1">

and the result will be looks like:

For an example check this file index-hotel.html

To add a thumbnail to the slider instead of the dots:

1- add data-slider-thumbs="true" attibute to <div class="gfort-owl-slider owl-carousel owl-theme">, it will be looks like:

<div class="gfort-owl-slider owl-carousel owl-theme" data-slider-thumbs="true">

2- you have to add an image for each slide, add data-slide-thumb="Path of the thumbnail image" to each gfort-owl-slider-item

<!-- gfort owl Slider -->
<div class="gfort-owl-slider owl-carousel owl-theme" data-slider-thumbs="true">


    <!-- gfort owl Slider Item -->
    <div class="gfort-owl-slider-item" data-slide-thumb="Path of the thumbnail image">
        item 1
    </div><!-- /End gfort owl Slider Item -->


    <!-- gfort owl Slider Item -->
    <div class="gfort-owl-slider-item" data-slide-thumb="Path of the thumbnail image">
        item 2
    </div><!-- /End gfort owl Slider Item -->


    <!-- gfort owl Slider Item -->
    <div class="gfort-owl-slider-item" data-slide-thumb="Path of the thumbnail image">
        item 3
    </div><!-- /End gfort owl Slider Item -->


</div><!-- /End gfort owl Slider -->

and the result will be looks like:

As we explained before in responsive section that there are some attributes makes the slider responsive, also in thumbnail slider has it's own attibutes to make the thumbnail slider responsive and it works like the normal slider, but these attributes only for the thumbnail images not the main slider.

PS: you will have also to add the normal slider attributes (think about 2 seperated sliders)

data-slider-thumbs-items for screen size >= 1200px

data-slider-thumbs-items-md for screen size >= 992px > 1200px

data-slider-thumbs-items-sm for screen size >= 768px >992px

data-slider-thumbs-items-xs for screen size >= 480px > 768px

data-slider-thumbs-items-xxs for screen size >= 0 > 480px

To make it more clear, we will create a slider with 3 items, 2 items per slide and 30px space between the items, also the slider will contain a thumbnail images (for now it will be 3 items)

The code will looks like:

<!-- gfort owl Slider -->
<div class="gfort-owl-slider owl-carousel owl-theme" data-slider-autoplay="true" data-slider-dots="true" data-slider-items="2" data-slider-items-space="30" data-slider-thumbs="true" data-slider-thumbs-items="3">


    <!-- gfort owl Slider Item -->
    <div class="gfort-owl-slider-item" data-slide-thumb="images/owl-slider-thumbs.jpg">
        <div class="demo-owl-slider-item">
            item 1
        </div>
    </div><!-- /End gfort owl Slider Item -->


    <!-- gfort owl Slider Item -->
    <div class="gfort-owl-slider-item" data-slide-thumb="images/owl-slider-thumbs.jpg">
        <div class="demo-owl-slider-item">
            item 2
        </div>
    </div><!-- /End gfort owl Slider Item -->


    <!-- gfort owl Slider Item -->
    <div class="gfort-owl-slider-item" data-slide-thumb="images/owl-slider-thumbs.jpg">
        <div class="demo-owl-slider-item">
            item 3
        </div>
    </div><!-- /End gfort owl Slider Item -->


</div><!-- /End gfort owl Slider -->

and the result will be looks like:

As you can see the thumbnail images are 3 and the slider have 2 items, but the thumbnail images are hudge so we have to change the number of displayed images to a bigger number, for example 10.

The code will looks like:

<!-- gfort owl Slider -->
<div class="gfort-owl-slider owl-carousel owl-theme" data-slider-autoplay="true" data-slider-dots="true" data-slider-items="2" data-slider-items-space="30" data-slider-thumbs="true" data-slider-thumbs-items="10">


    <!-- gfort owl Slider Item -->
    <div class="gfort-owl-slider-item" data-slide-thumb="images/owl-slider-thumbs.jpg">
        <div class="demo-owl-slider-item">
            item 1
        </div>
    </div><!-- /End gfort owl Slider Item -->


    <!-- gfort owl Slider Item -->
    <div class="gfort-owl-slider-item" data-slide-thumb="images/owl-slider-thumbs.jpg">
        <div class="demo-owl-slider-item">
            item 2
        </div>
    </div><!-- /End gfort owl Slider Item -->


    <!-- gfort owl Slider Item -->
    <div class="gfort-owl-slider-item" data-slide-thumb="images/owl-slider-thumbs.jpg">
        <div class="demo-owl-slider-item">
            item 3
        </div>
    </div><!-- /End gfort owl Slider Item -->


</div><!-- /End gfort owl Slider -->

and the result will be looks like:

The result is much better because we increase the number of the images per slide, but if you resize the browser you will find the images returned to 1, so you have to add the remening thumbnail slider attributes data-slider-thumbs-items-md, data-slider-thumbs-items-sm, data-slider-thumbs-items-xs and data-slider-thumbs-items-xxs.

As you can see we have used about 10+ owl slider in the same page all have the same JS function but they are a little bit different in the HTML code, below you can find the attributes and what they are do.

data-slider-autoplay="true" if set to true the slider will be autoplayable.

data-slider-dots="true" if set to true the slider will have the clickable dots.

data-slider-arrows="true" if set to true the slider will have the clickable arrows.

data-slider-items-space="30" add 30px space between the items (change 30 to any digit number)

data-slider-items="1" number of items per slide, for screen size >= 1200px (change 1 to any digit number)

data-slider-item-md="1" number of items per slide, for screen size >= 992px > 1200px (change 1 to any digit number)

data-slider-items-sm="1" number of items per slide, for screen size >= 768px >992px (change 1 to any digit number)

data-slider-items-xs="1" number of items per slide, for screen size >= 480px > 768px (change 1 to any digit number)

data-slider-items-xxs="1" number of items per slide, for screen size >= 0 > 480px (change 1 to any digit number)

data-slider-thumbs="true" if set to true, it will add another slider, and it will act like thumbnail slider, but you have to add the thumbnail image to each item.

data-slider-thumbs-items="1" number of items per slide, for screen size >= 1200px (change 1 to any digit number) (this attribute for the thumbnail slider only not the main slider)

data-slider-thumbs-items-md="1" number of items per slide, for screen size >= 992px > 1200px (change 1 to any digit number) (this attribute for the thumbnail slider only not the main slider)

data-slider-thumbs-items-sm="1" number of items per slide, for screen size gt;= 768px >992px (change 1 to any digit number) (this attribute for the thumbnail slider only not the main slider)

data-slider-thumbs-items-xs="1" number of items per slide, for screen size >= 0 > 480px (change 1 to any digit number) (this attribute for the thumbnail slider only not the main slider)

data-slider-thumbs-items-xxs="1" number of items per slide, for screen size >= 0 > 480px (change 1 to any digit number) (this attribute for the thumbnail slider only not the main slider)

By default the header is fixed, which means the header will be always visible when you scroll down, for an example check this file header-1.html

To make the header fixed open the HTMl file and add fixed-header class to header-section class.

It will be looks like:

<header class="header-section fixed-header">

And if you want the header to stick to the begining of the page and will not be visible, remove the fixed-header class from header-section class

For an example check this file header-13.html

To make the header act like sidebar menu open the HTMl file and add sidebar-header class to header-section class.

It will be looks like:

<header class="header-section sidebar-header">

For an example check this file header-14.html

It's a combination from fixed header and sidebar menu, to make the header act like fixed sidebar menu open the HTMl file and add fixed-header and sidebar-header classes to header-section class.

It will be looks like:

<header class="header-section fixed-header sidebar-header">

By default the logo image height is 50px, but if you wan to increase for example 60px, open css/style.css file and find this class:

.navbar-brand > img {
    margin: 0 auto;
    max-width: 100%;
    max-height: 50px;
}

change max-height: 50px; to max-height: 60px;

Note that the header section height is 80px, and the previous modification will make the header height 90px that means the header height increased by 10px, to fix this problem open css/style.css file and find this class:

.navbar-brand {
    padding: 0;
    height: auto;
    color: #212121;
    font-size: 30px;
    font-weight: 700;
    line-height: 50px;
    margin: 15px auto;
    text-transform: uppercase;
}

change margin: 15px auto; to margin: 10px auto;, and this will make the header height return again to 80px

Like normal list you will add a li element inside a nested ul element, but the nested ul should have the class submenu

For example:

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>
        ...
        <ul class="submenu">
            <li>...</li>
            <li>
                ...
                <ul class="submenu">
                    <li>...</li>
                    <li>...</li>
                    <li>...</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

If you have a sub menu and you want to convert it to a mega menu, by adding megamenu class to li parent element will convert the sub menu to mega menu.

For example the normal sub menu:

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>
        ...
        <ul class="submenu">
            <li>...</li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
</ul>

By adding megamenu class to the parent li element will convert it to mega menu.

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li class="megamenu">
        ...
        <ul class="submenu">
            <li>...</li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
</ul>

By adding data-scroll attribute will make the clickable link smoothly goto the required section.

For example if you click on this Link will make the page goto welcome section, without changing the browser URL and the page will not jump to that section immediately.

<a href="#section-1" data-scroll>Link</a>

But if you click on this Link the page will jump to welcome section and the browser URL will add an extra word (#section-1).

<a href="#section-1">Link</a>

By adding parallax-section class and assign a background-image attribute to gfort-section, will make the back ground image for that section a parallax background.

<!-- gfort Section -->
<div class="gfort-section parallax-section" style="background-image: url(images/parallax.jpg);">
    ...
</div><!-- /End gfort Section -->

The basic HTML structure for the countdown timer is:

<!-- downTime Counter Block -->
<div class="downtime-counter-block" data-downtime-year="2019" data-downtime-month="11" data-downtime-day="4" data-downtime-hour="6" data-downtime-min="13" data-downtime-UTC-offset="2" data-downtime-message="downTime Counter is finished">
    <!-- downTime Counter Block Container -->
    <div class="downtime-counter-block-container">

        <!-- days -->
        <div class="downtime-col">
            <span class="days">00</span>
            <p>DAYS</p>
        </div><!-- /days -->

        <!-- hours -->
        <div class="downtime-col">
            <span class="hours">00</span>
            <p>HOURS</p>
        </div><!-- /hours -->

        <!-- minutes -->
        <div class="downtime-col">
            <span class="minutes">00</span>
            <p>MINUTES</p>
        </div><!-- /minutes -->

        <!-- seconds -->
        <div class="downtime-col">
            <span class="seconds">00</span>
            <p>SECONDS</p>
        </div><!-- /seconds -->

    </div><!-- /End downTime Counter Block Container -->
</div><!-- /End downTime Counter Block -->

Where:

data-downtime-year represent the year

data-downtime-month represent the month

data-downtime-day represent the day

data-downtime-hour represent the hour

data-downtime-min represent the minutes

data-downtime-UTC-offset represent the UTC offset

data-downtime-message represent the message that will appear when the countdown timer finished

The previous example means the countdown timer will end on 4/11/2019 at 6:13:00 and when it finished, the message "downTime Counter is finished" will appear instead of the countdown timer.

If you don't have a Twitter account you can create one from Twitter website.

Twitter feed has 2 parts PHP and HTML.

To authorize your twitter feed you will need 4 keys:

1. Consumer Key.
2. Consumer Secret.
3. Access Token.
4. Access Token Secret.

To get these values follow these steps:

1- Log into twitter apps website.

2- click on Create New App button.

3- Fill all the required fields and check Yes, I have read and agree to the Twitter Developer Agreement box, then click on Create your Twitter application button.

4- After that you will redirect to the app settings.

5. From this page click on Keys and Access Tokens tab.

6- click on Create my access token button.

7- A new fields with some values will appear.

8- Don't close the new page and move on to the next steps.

9- open js/plugins/tweetie/api/config.php file and find these lines

// Consumer Key
define('CONSUMER_KEY', 'Your Consumer Key (API Key)');
define('CONSUMER_SECRET', 'Your Consumer Secret (API Secret)');

// User Access Token
define('ACCESS_TOKEN', 'Your Access Token');
define('ACCESS_SECRET', 'Your Access Token Secret');

10- Replace Your Consumer Key (API Key) with Consumer Key (API Key) generated from step 7 without removing the single quote.

11- Replace Your Consumer Secret (API Secret) with Consumer Secret (API Secret) generated from step 7 without removing the single quote.

12- Replace Your Access Token with Access Token generated from step 7 without removing the single quote.

13- Replace Your Access Token Secret with Access Token Secret generated from step 7 without removing the single quote.

The basic HTML code structure is:

<!-- Twitter Feed Block -->
<div class="twitter-feed-block" data-twitter-username="graphicfort" data-twitter-feed-count="2">
</div><!-- /End Twitter Feed Block -->

Where:

data-twitter-username is your twitter username.

data-twitter-feed-count is the number of feed count you want to display.

This is a combination between OWL Slider section and Twitter feed section.

Adding twitter-slider class to twitter-feed-block will convert the feed to a slider. (You will have to add the number of items per slide as we did in owl slider section)

<!-- Twitter Feed Block -->
<div class="twitter-feed-block twitter-slider" data-twitter-username="graphicfort" data-twitter-feed-count="2" data-slider-items="1" data-slider-dots="true" data-slider-autoplay="true">
</div><!-- /End Twitter Feed Block -->

If you don't have a Facebook account you can create one from Facebook website.

If you don't have a Facebook page you can create one from here.

You have to create an app because you will need an app id to create the facebook page feed widget, to create an app follow these steps:

1- Goto this website.

2- click on Add a New App button.

3- Fill all the required fields and click on Create App ID button.

- After creating an app goto Page Plugin.

Add your facebook page URL and customize the widget the way you would like, then click on Get Code button.

Copy the 2 codes and add them to the page you would like to display the widget, for example check this file top-footer.html.

If you don't have an instagram account you can create one from instagram app on App Store or Google Play.

You will have to create an APP to get the access token and user id, to make the feed work, and to do that follow these steps:

1- Goto this website and make sure you are logged in.

2- Click on Register Your Application button.

3- Click on Register a New Client button.

4- Fill all the input boxes.

5- Click on Security tab.

6- Uncheck Disable implicit OAuth and click on Register button.

7- After that you will get a new blue box click on manage button and from the next page copy Client ID and Client Secret, also click on Security tab and copy Valid redirect URIs: as it is, without missing any single letter.

8- You will need to goto this URL https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token but you will need to change:

- CLIENT-ID with the one you get from step 7.

- REDIRECT-URI with the one you get from step 7.

9- Copy the final URL to your browser after changing the values then hit enter.

10- From the new page click on Authorize button.

11- You will be redirect to your REDIRECT-URI along with code, it will be something like http://your-redirect-uri#access_token=2546719702.d9ac2e9.d35b2fa3fd0b41048d0717d100e21964

12- This code 2546719702.d9ac2e9.d35b2fa3fd0b41048d0717d100e21964 will be the Access Token, and the first part of that code 2546719702 will be the User Id.

Keep these values because you will use them in the HTML code in the next HTML structure

The next code is the basic structure for instagram feed.

<!-- Instagram Feed Block -->
<div class="instagram-feed-block mb-0" data-instagram-userid="2546719702" data-instagram-feed-count="10" data-instagram-accesstoken="2546719702.d9ac2e9.d35b2fa3fd0b41048d0717d100e21964"></div><!-- /End Instagram Feed Block -->

Where:

data-instagram-userid your User ID, replace 2546719702 with your value from step 12.

data-instagram-feed-count the number of feed count (images) you want to display.

data-instagram-accesstoken your Access Tocken, replace 2546719702.d9ac2e9.d35b2fa3fd0b41048d0717d100e21964 with your value from step 12.

PS: for your security goto this website and click on manage button, then Security tab and check the Disable implicit OAuth box and click on Update Client button.

PLUME comes with Mailchimp integration and to add you subscribe list follow these steps:

1- Log in to Mailchimp and if you don't have an account you can create one.

2- Goto your lists and if you don't have one, you can create a new list and fill all the fields, then return back to your lists.

3- Click on the small arrow behind the Stats word.

4- Choose Signup forms.

5- Select Embedded forms.

6- Scroll down till you reach a text box labeled by Copy/paste onto your site.

7- Find the form action URL and copy it.

<!-- Subscribe Form Block (Mailchimp) -->
<div class="form-block subscribe-form-block mailchimp-form-block" data-form-url="//Graphicfort.us11.list-manage.com/subscribe/post?u=dffe9a5d2b472dbe0cc471e1b&id=4150cd2f12">
    <!-- Form Block Container -->
    <div class="form-block-container">
        <!-- Form -->
        <form method="post" action="#">


            <!-- Email Address -->
            <div class="col-md-12">
                <!-- Form Group -->
                <div class="form-group">

                    <label>Email Address</label>
                    <input type="email" class="form-control subscribe-email" name="EMAIL">

                </div><!-- /End Form Group -->
            </div><!-- /End Email Address -->


            <!-- Submit Button -->
            <div class="col-md-12">
                <!-- Form Group -->
                <div class="form-group">

                    <button type="submit" class="btn btn-gfort">SUBSCRIBE</button>

                </div><!-- /End Form Group -->
            </div><!-- /End Submit Button -->


        </form><!-- /End Form -->
    </div><!-- /End Form Block Container -->
</div><!-- /End Subscribe Form Block (Mailchimp) -->

8- Change //Graphicfort.us11.list-manage.com/subscribe/post?u=dffe9a5d2b472dbe0cc471e1b&id=4150cd2f12 with the value you get it from step 7.

To activate the disqus follow these steps:

1- Log in to disqus website and if you don't have a disqus account you can create one from disqus website.

2- Create a new website from here

3- Fill all the required fields and choose the category, then click on Create Site button.

4- From the next page scroll down and click on I don't see my platform listed, install manually with Universal Code.

5- Copy the code inside the text box labeled by Place the following code where you'd like Disqus to load: and insert it in the HTML file you want to show the comments in it.

For an example check blog-center-single-quote.html.

To add google maps to your website, you will need to know the latitude and longitude to the location you want to display the maps for, and also an API key to make the map work.

To get the latitude and longitude follow these steps:

1- Goto google maps website.

2- Click on Show your location button from the bottom right corner.

3- The browser URL will change and will be something like https://www.google.com/maps/@48.8628277,2.3523733,15z?hl=en.

The numbers 48.8628277 will be the latitude and the numbers 2.3523733 will be the longitude.

To create an API key follow these steps:

1- Goto this website.

2- Click on GET A KEY button

3- Select a Create a new project, and click on ENABLE API button.

4- From the next pop-up copy the text box labeled by YOUR API KEY.

After you get the latitude, longitude and APi key, we will add them to the HTML code.

<!-- Google Map Block -->
<div class="google-map-block mb-0" data-zoom="16" data-lat="48.8628277" data-lng="2.3523733" data-api-key="AIzaSyBDGULVau4J4Chpc4DmyfwKoz3XRUwsEOQ">
    ...
</div><!-- /End Google Map Block -->

data-zoom is the map zoom, you can change it from 3 to 21, the heigher the number, the more zoom you will get.

data-lat the map latitude, copy the value you get it from step 3 (22.1- Longitude and Latitude) and replace it with 48.8628277.

data-lng the map longitude, copy the value you get it from step 3 (22.1- Longitude and Latitude) and replace it with 2.3523733.

data-api-key the API key for google map, copy the value you get it from step 4 (22.2- API Key) and replace it with AIzaSyBDGULVau4J4Chpc4DmyfwKoz3XRUwsEOQ.

You can add unlimated marker, all you need is the longitude and latitude for the marker.

<!-- Google Map Marker -->
<div class="google-map-marker" data-marker-image="images/google-map/marker.png" data-marker-lat="48.8628277" data-marker-lng="2.3523733">

    <img src="images/google-map/001.jpg" alt="Office">
    <h4>Main office</h4>
    <p>6 rue Saint-Martin, 12345 Paris, France</p>

</div><!-- /End Google Map Marker -->

data-marker-image is the map marker image.

data-marker-lat the map marker latitude.

data-marker-lng the map marker longitude.

and

<img src="images/google-map/001.jpg" alt="Office">
<h4>Main office</h4>
<p>6 rue Saint-Martin, 12345 Paris, France</p>

Is the map marker content (this content will be displayed when the visitor click on the map marker).

For eample of single map marker check contact-us-1.html, for multi map marker check this file index-wedding.html.

To add google recaptcha to your website, you will need to know your site key and secret key.

To get your site key and secret key follow these steps:

1- Goto Google reCAPTCHA website.

2- If you don't have have any sites registered to use the reCAPTCHA API you have to fill the form, and choose Validate users with the "I'm not a robot" checkbox. then click on Register button.

3- After that you will be redirect to a page which contains the Site key and Secret key.

4- Copy secret key value and open php/contact.php and find this line:

$secret_key = "6LdHCQwTAAAAAE3YmyHwSxYuvyw5jXrdejFEbmds";

Change 6LdHCQwTAAAAAE3YmyHwSxYuvyw5jXrdejFEbmds with the copied value.

5- Copy site key value and open the HTML file which container the form and find this line:

<div class="gfort-recaptcha" data-sitekey="6LdHCQwTAAAAAK0HvYvQJ5oA_9W-vlv5A41xBEGp"></div>

Change 6LdHCQwTAAAAAK0HvYvQJ5oA_9W-vlv5A41xBEGp with the copied value.

The form validation is driven by jQuery Validation Plugin

For more details you can check the the documentation and demos.

Small tip: If you want to add a sepecific error message like the download packadge, you have to assign a name for the field you want to validate and add the message in js/scripts.js file.

HTML code:

<input type="text" class="form-control" name="form_name" id="form_name">

JS code:

jQuery(elForm).validate({
    rules: {
        form_name: 'required'
    },
    messages: {
        form_name: 'Your name is required.'
    }
});

But if you want to make the validation in general meassage (This field is required) all you have to do is adding reuired attribute to the field you want ot validate.

<input type="text" class="form-control" name="form_name" id="form_name" reuired>

To add your email address (this email address you will receive the emails when the visitor send you an email from your website) open php/contact.php file and find this line:

$email_address = "example@example.com";

Change example@example.com to your email address without removing the double quote.

For SMTP server:

If you are using SMTP server then you will not get any emails even if you add your email address, due to the server configuration, to solve this problem:

1- you have to create a gmail email and don't activate the 2-Step Verification.

2- open php/contact.php file and find these lines

$SMTP_Username = "Gmail E-mail";
$SMTP_Password = "Gmail E-mail Password";

Change Gmail E-mail to your gmail email address.

Change Gmail E-mail Password to your gmail email address password.

3- From the same file uncomment these lines:

/*
    $mail->isSMTP();
    $mail->SMTPDebug = 0;
    $mail->Debugoutput = 'html';
    $mail->Host = 'smtp.gmail.com';
    $mail->Port = 587;
    $mail->SMTPSecure = 'tls';
    $mail->SMTPAuth = true;
    $mail->Username = $SMTP_Username;
    $mail->Password = $SMTP_Password;
*/

It should be looks like:

    $mail->isSMTP();
    $mail->SMTPDebug = 0;
    $mail->Debugoutput = 'html';
    $mail->Host = 'smtp.gmail.com';
    $mail->Port = 587;
    $mail->SMTPSecure = 'tls';
    $mail->SMTPAuth = true;
    $mail->Username = $SMTP_Username;
    $mail->Password = $SMTP_Password;

And you can receive the emails from your website.

PLUME uses the most famous jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable (Fancybox) worth $29, and you don't have to purchase a licence to use it, as we already did.

- To create a lightbox, you have to add data-gfort-lightbox attribute to the link:

<a href="images/fancybox/001.jpg" title="This is a title" data-gfort-lightbox>
    <img src="images/fancybox/001.jpg" alt="Image" />
</a>

- To create a lightbox group, you have to add data-gfort-lightbox-group attribute to the link and add the group name:

<a href="images/fancybox/001.jpg" title="This is a title" data-gfort-lightbox data-gfort-lightbox-group="gallery-1">
    <img src="images/fancybox/001.jpg" alt="Image" />
</a>
<a href="images/fancybox/002.jpg" title="This is a title" data-gfort-lightbox data-gfort-lightbox-group="gallery-1">
    <img src="images/fancybox/002.jpg" alt="Image" />
</a>

For more details check fancybox website.

PLUME uses the most famous Filter & sort magical layouts (Isotope) worth $25, and you don't have to purchase a licence to use it, as we already did.

For more details check isotope documentation.

Adding an item:

To add an item to portfolio section:

1- You have to add data-filter name.

<a href="#" title="New filter name title" data-filter=".isotope-new-filter-name">New filter name</a>

to isotope-filter block.

<!-- isotope Filter -->
<div class="isotope-filter">
    <!-- isotope Filter Container -->
    <div class="isotope-filter-container">

        <a href="#" title="All" data-filter="*" class="active-item">All</a>

        <a href="#" title="Design" data-filter=".isotope-design">Design</a>

        <a href="#" title="Graphics" data-filter=".isotope-graphics">Graphics</a>

        <a href="#" title="Media" data-filter=".isotope-media">Media</a>

        <a href="#" title="Web Development" data-filter=".isotope-web">Web Development</a>

        <a href="#" title="New filter name title" data-filter=".isotope-new-filter-name">New filter name</a>

    </div><!-- /End isotope Filter Container -->
</div><!-- /End isotope Filter -->

2- You have to add a block which has the same data-filter name to portfolio-items-wrapper block.

<!-- Portfolio items Wrapper -->
<div class="portfolio-items-wrapper portfolio-col-1 isotope-masonry">


    <!-- Portfolio item -->
    <article class="portfolio-item isotope-item isotope-design">
        <!-- Portfolio item Container -->
        <div class="portfolio-item-container">
            ...
        </div><!-- /End Portfolio item Container -->
    </article><!-- /End Portfolio item -->


    <!-- Portfolio item -->
    <article class="portfolio-item isotope-item isotope-new-filter-name">
        <!-- Portfolio item Container -->
        <div class="portfolio-item-container">
            ...
        </div><!-- /End Portfolio item Container -->
    </article><!-- /End Portfolio item -->


</div><!-- /End Portfolio items Wrapper -->

PLUME uses 2 google fonts: Montserrat (for the heading) and Poppins (for the body text).

To change these fonts follow these steps:

1- Goto google font website.

2- Pick up any font you would like to use.

3- Replace this line in HTML file with the ones you get from step 2.

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700%7CPoppins:400,500,600" rel="stylesheet">

4- open css/style.css file and find these lines:

/* Montserrat Font
============================================================================= */
.btn,
.badge,
.label,
.onsale,
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.ribbon-block,
.navbar-brand,
.navbar-toggle,
.rs-heading-title,
span.number-block,
.downtime-col span,
ul.navbar-nav li a,
ul.shop-products li a,
ul.header-btns > li > a,
.secondary-menu ul li a,
.gfort-navigation-block,
.isotope-filter-container,
nav.navigation-block ul li a,
.header-language-menu ul li a,
.gfort-tabs .nav-tabs > li > a,
.gfort-page-preloader-container,
.shop-item-body .shop-item-button,
.gfort-block-body .gfort-block-btn,
.blog-item-body .blog-item-read-btn,
.event-item-body .event-item-read-btn,
.event-item-container .event-item-date,
ul.blog-posts li a.blog-item-small-title,
.pricing-table-block-head .price-duration,
ul.events-blocks li a.event-item-small-title,
.process-block.gfort-block .process-block-number,
.events-blocks .event-item a.event-item-small-title,
ul.portfolio-projects li a.portfolio-item-small-title,
.social-icons-block ul li a:nth-child(2) span:last-child,
.twitter-feed-block .twitter-head .twitter-user-screen-name span.twitter-username a {
    font-family: 'Montserrat', sans-serif;
}

/* Poppins Font
============================================================================= */
.rs-subtitle,
.tooltip-inner {
    font-family: 'Poppins', sans-serif;
}

/* Body
============================================================================= */
body {
    margin: 0;
    padding: 0;
    color: #666666;
    font-weight: 400;
    overflow-x: hidden;
    background-color: #ffffff;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font: 16px/26px 'Poppins', sans-serif;
}

Change Montserrat and Poppins with the fonts families you pickecd it from step 2.

You have 2 options:

1- Change the colors from webiste (scroll down to Change Primary and secondary color with just one click) section and choose the primary and secondary color then click on Download button, and in return you will get a file (style.css) replace it with css/style.css file.

PS: the script is included in the downloaded packadge but it must be run from localhost or live server to work.

2- You can open css/style.css file and change the main (Primary) and alt (Secondary) colors from the file it self but replacing it's values.

Note that:

- Some demos it's style.css file location not directly under css folder but you can find it in css/index folder, for example the index-app.html demo, you can find it's own css file in css/index/app/style.css

- Also the images, some demos have it's own images in different location, for example the index-app.html demo, you can find it's own images under images/index/app folder not directly in image folder. For example the logo for index-app.html demo location not images/logo.png, but you can find it in images/index/app/logo.png

To change the template from LTR to RTL follow these steps:

1- open the HTML5 file and add this line:

<link rel="stylesheet" href="css/style-rtl.css">

after this line

<link rel="stylesheet" href="css/style.css">

and this line

<link rel="stylesheet" href="css/responsive.css">

after this line

<link rel="stylesheet" href="css/responsive-rtl.css">

The result will looks like

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style-rtl.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/responsive-rtl.css">

2- open js/scripts.js file and find this line:

pageDirection = 'ltr'

change ltr to rtl, it will looks like:

pageDirection = 'rtl'

This line in 2 different locations, it means you have to change both of them.

PS:

1- you can copy the content of css/style-rtl.css to the end of css/style.css file and the content of css/responsive-rtl.css to the end of css/responsive.css.

2- If you have a template version 1.0 (You can check the template version from css/style.css file) replace the new files (from downloaded package) css/style.css and js/scripts.js files with version 1.0 css/style.css and js/scripts.js files and goto step 1 to convert the template to RTL.

3- To convert the revolution slider to RTL:

3-a: To change the arrows position add this line:

rtl: true

to arrows block

arrows: {
    rtl: true
}

3-b: To change the bullets position add this line:

rtl: true

to bullets block

bullets: {
    rtl: true
}

3-c add this class rtl to the body tag

<body class="rtl">

4- Note that some elements not styled in the new RTL modifictation for example:

We have a block and his block in the left hand side (Block 1 LTR) it will be in the right hand side (Block 1 RTL) and this is normal or it supposed to be like that.

But this block have an animation fadeInLeft and this animation should fade the block from left to right (in LTR this will work normal and it will looks good but in RTL it will be not good at all) so you have to open the HTML file and change fadeInLeft to fadeInRight.

- Pixabay https://pixabay.com.

- unsplash https://unsplash.com.

- StockSnap https://stocksnap.io.

- dreamstime https://www.dreamstime.com.

Premium images:

- Graphicfort http://graphicfort.com

- Google Fonts https://fonts.google.com/.

- Font Awesome Icons http://fontawesome.io

- jQuery https://jquery.com.

- Bootstrap http://getbootstrap.com.

- Modernizr https://modernizr.com.

- animsition http://blivesta.github.io/animsition.

- chosen https://github.com/harvesthq/chosen.

- cookie https://github.com/js-cookie/js-cookie.

- countTo https://github.com/mhuggins/jquery-countTo.

- downCount https://github.com/sonnyt/downCount.

- easy pie chart https://rendro.github.io/easy-pie-chart/.

- fancybox http://fancyapps.com/fancybox.

- fitvids http://fitvidsjs.com.

- infobox https://code.google.com/archive/p/google-maps-utility-library-v3/wikis/Libraries.wiki.

- isotope http://isotope.metafizzy.co.

- matchHeight http://brm.io/jquery-match-height.

- Owl Carousel https://github.com/OwlCarousel2/OwlCarousel2.

- Pace http://github.hubspot.com/pace/docs/welcome/.

- Parallax http://www.ianlunn.co.uk/plugins/jquery-parallax/.

- Prettify https://github.com/google/code-prettify.

- scrollTo https://github.com/flesler/jquery.scrollTo.

- Slider Revolution https://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848.

- Tweetie https://github.com/sonnyt/Tweetie.

- Typed http://www.mattboldt.com/demos/typed-js.

- jQuery Validation Plugin http://jqueryvalidation.org/.

- Videojs http://videojs.com.

- waypoint https://github.com/imakewebthings/waypoints.

- WOW http://mynameismatthieu.com/WOW.

VERSION 1.3

- Added: 4 404 pages (404-1.html, 404-2.html, 404-3.html and 404-4.html)
- Added: 4 UNDER CONSTRUCTION pages (under-construction-1.html, under-construction-2.html, under-construction-3.html and under-construction-4.html)
- Added: 4 MAINTENANCE pages (maintenance-1.html, maintenance-2.html, maintenance-3.html and maintenance-4.html)

1. copy css folder and replace it with the old css folder.
2. Copy the new image images/misc/032.jpg to images/misc folder.

VERSION 1.2

- Added: 4 SIGN IN pages (sign-in-1.html, sign-in-2.html, sign-in-3.html and sign-in-4.html)
- Added: 4 SIGN UP pages (sign-up-1.html, sign-up-2.html, sign-up-3.html and sign-up-4.html)
- Added: 4 Lost Password pages (lost-password-1.html, lost-password-2.html, lost-password-3.html and lost-password-4.html)


- Updated: Improvements to main menu on mobile devices.

1. copy css folder and replace it with the old css folder.
2. copy js/scripts.js file and replace it with the old js/scripts.js file.
3. Copy the new images images/misc/029.jpg, images/misc/030.jpg and images/misc/031.jpg to images/misc folder.

VERSION 1.1

- RTL is now supported

VERSION 1.0

- initial release

Once again thank you for purchasing one of our products, if you need help beyond this documentation please feel free to contact us from here.

Sincerely,
Mohammed.