Included with this theme are the following:
The main page (index.html) of this template is structured as follows:
To edit the main menu, you have to look for the <ul id="main-menu">.
Each website section is contained in an <article class="section-wrapper"> tag inside the <section id="main-content">.
the template includes animation effects to create a smooth intro reveal effect when the user scrolls to each section,
the source code you can find in 'js/wow' folder.
As explained on the WOW website, you can add reveal animations to any html element:
The template already comes with animations set for the intro section at <div class="content-wrapper clearfix wow fadeInDown">. You can edit this or add other effects to any other HTML elements inside the page.
The template is designed to have at least one high-resolution page background image, which stretches along the whole page.
To set the default page background image you have to insert the image URL in the template <body> tag as the following:
Set "data-overlay" attribute to "false" to disable semi-transparent black overlay on top of the background. Set the opacity/transparency of this overlay in the "data-overlay-opacity".
The template allows you the possibility for the background image to change whenever a user scrolls to each section. You can set a different background image for each section by including the image URL in the "data-custom-background-img" attribute for each <article class="section-wrapper">. If no background image is specified for a section, the default background image is shown by default.
The template is intended to show only one background image on mobile in order for the site to load faster and minimize the data being transferred. Although not recommended, you can still enable the background changes on scroll, on mobile in /assets/js/initialise-functions.js file:
The template allows to include more content in popup windows. To add a new popup, create a <div class="content-to-populate-in-modal"> anywhere inside the page, give it a unique id and then insert content as below:
To link a button or link to the popup you have to add onClick event to the button as the following:
To initialise a custom JS function after the popup is opened in the JS file /assets/js/initialise-functions.js, add the following in the initialise_document_ready_functions():
If you want to initialise a custom JS function after the popup is closed: In the JS file /assets/js/initialise-functions.js, add the following code in the initialise_document_ready_functions():
In one of the sections the template includes a Bootstrapped carousel (<article id="carousel">).
Each carousel within the page, should consist of the following (taking our example as guide):
The template has an option to include Owl Images Carousel, the responsive carousel allows you to create elegant image sliders.
In his template the Owl Carousel is placed inside of a popup (see section Content Popups above), and initialised when the popup is opened.
The content for the image carousel is placed inside the <div class="content-to-populate-in-modal"> as below:
Each Owl Carousel inside of a popup and has a class of ".popup-image-gallery" is initialised in the /js/initialise-functions.js when the popup is visible, using the Bootstrap "shown.bs.modal" carousel event handler:
The Owl Carousel parameters can be modified how you want, more information can be found on the Owl Carousel website: www.owlgraphic.com/owlcarousel
Since the carousel is located in a popup, an extra function in /js/initialise-functions.js destroys the carousel when the popup is closed and re-initialised when popup is re-opened. This is done using the Bootstrap "hide.bs.modal" carousel event handler and the Owl Carousel destroy() function:
The template also includes an alternative image gallery carousel inside a popup. Similar to the instructions mentioned above, the content for the alternative image carousel is placed inside the <div class="content-to-populate-in-modal"> as below:
Each alternative image gallery, which is located inside of a popup and has a class: ".popup-alt-image-gallery", is initialised in the /js/initialise-functions.js when the popup is visible, and it is using the Bootstrap "shown.bs.modal" carousel event handler.
Please note that you can still use Owl Carousel anywhere in the theme where you want, you just need to create a different carousel with different parameters, use the same HTML described above but remove the class ".popup-image-gallery". Then, intialise it in /js/initialise-function.js or at the footer of the page using the unique ID of that particular carousel instead of the class.
The templae Bootstrap Tabs section (<article id="tabs">) is ideal for content which can be categorised in multiple sections. More information about Bootstrap Tabs can be found on Bootstrap's documentation page.
The tabs can include Glyphicon or Font Awesome icons. Each tab's icon and text are structured as follows:
To hide text and show icons only on different viewports, for example on mobile devices only, you assign the following attributes to the <ul class="nav nav-tabs" text-hidden-xs="true"..>
For more information about which icons to use, see section Scalable Font Icons below.
In case you want to initialise a custom JS function when a tab is shown or hidden, you can use event handlers as described in Bootstrap's documentation.
For example, to initialse a function after a tab pane is shown, in the JS file /assets/js/initialise-functions.js, add the following in the initialise_document_ready_functions():
When installing this theme, it is very important to change the 2 email addresses at the top of the assets/php/mail.php file:
The form includes the following fields:
The form also includes a CAPTCHA, intended to filter spam. The captcha only works if a PHP server is set (locally you need to use a tool like XAMPP, WAMP, or MAMP).
The templae has an option of using two scalable font icon sets:
To add a Glyphicons icon, use the following code:
<span class="glyphicon glyphicon-[icon id]"></span>, OR:
<i class="glyphicon glyphicon-[icon id]"></i>
The full list of all available icons and their IDs can be found on: getbootstrap.com/components websie.
To add a Font Awesome icon, use the following code:
<span class="fa fa-[icon id]"></span>, OR:
<i class="fa fa-[icon id]"></i>
The full list of all available icons and their IDs can be found on: fortawesome.github.io/Font-Awesome/icons/ websie.
Remember that these icons should be treated as a "text" rather than an "image icon". This means that if, for example, you want to change their colour, you should use the CSS "color" rule, as you do to any text, or if you want to increase their size, you have to alter their "font-size" value... and so on.
To edit the social icons list, you have to look for the <ul class="social-icons">.
Get an access to all 97 items designed and developed by AS Designing team plus all the future items which will be released over the course of your club subscription. Price starting from $59.00