Here is the general structure of the HTML pages (index and item.html) :
The HTML head Tag contains meta data for SEO, CSS include and social networks meta data.
The header (at top) of a page is nested within a tag with class page-header. It includes the logo (left), the menu icon (right), the menu contents and the side bar naav.
The main content of the page is nested within a tag with a class page-main. Inside, each section (slide) is embeded within a div tag with a class section.
It contains one or several section, represented by div with class section
And the footer of the page, containing basic information such as copyright notice or social networks links. It is located within the footer tag with class page-footer.
The <head> tag contains the Title and description of the tag, used
by search engine to identify your website. It may also include, third-party meta,
such as social network meta (mainly Facebook and Twitter) helping them to describe your website.
Change the title and the description of your page by editing the title tag value, and the content value of the tag <meta name="description" content="YOUR DESCRIPTION">.
Additionaly, you can add Facebook Opengraph data or Twitter metadata for better compatibility with these social networks.
Required CSS are also included within the <head> tag with <link rel="stylesheet" href="...">.
The header , positioned at the top of the screen, are located within the div with a
header-top class.
It contains the menu icon (the
button tag with class
site-menu-icon), the logo (within the a tag with
nav-brand class), the main menu (within a nav with class
navbar-mainmenu) and the sidebar menu (The nav with class
navbar-sidebar).
Here is the structure of the
<header class="page-header ..."> tag :
Replace your
img/logo.png by your logo URL or go to img folder and replace logo.png sample image with yours.
The
button tag with class
site-menu-icon displays the menu icon. Within it, there is a span tag with class
menu-icon.
The main menu content is located within a nav with class navbar-mainmenu located under the all-menu-wrapper div.
Duplicate the li content to add more navigation items and links
The nav with class navbar-sidebar represent the sidebar menu positioned at left.
It is explained below :
Sidebar Navigation codes are located within the nav tag with a class
navbar-sidebar (which is embedded within the headerpage-header).
Each menu item is represented by a
li element with the following structure :
The tag <span class="txt">Your text</span> represents the text content.
li data-menuanchor= should have the same value as a href=
but without the #. This value will refer to a
section with a data-section of the same value.
You can anyway
use external URL for the link.
This part represents the fullscreen background image, background video or particles animations of the page. It is located within the tag with a class page-cover
Edit the data-image-src attribute of the cover-bg div to match to your background image url or source such as :
Replace bg_default.jpg by yours or with an image url
Mouse Parallax Effects
To obtain mouse parallax effects, add id="parallax-cover" to the div page-cover container, then add attribute data-depth="0.2" to cover-bg element.
Your page cover code will looks like this later:
Solid color as filter or background
To add a solid color layer as mask or as background of the page, add the following code within the page-cover div tag, and replace the data-bgcolor with a color value:
Add the following code within the previous page-cover div tag and edit the source url <source src="..." > to match to your video (replace the flower_loop.mp4 video under the vid folder by another one) :
Video background are deactivated on mobile device for performance reason. To activate it, just remove the d-none class.
Youtube, Vimeo Video as background
Add the following code within the previous page-cover div tag and edit the source url <iframe src="..." > to match to your youtube video url (just replace the ID_OF_VIDEO by the youtube video ID) :
For Vimeo or facebook video, replace the iframe by provided Vimeo or Facebook embed code.
The main content of the page is located within the div with a class page-main
For the main index.html file or index-XXX.html file, this main tag should have an id="mainpage". Class main-anim will enable animation on page scroll.
For the page item.html, the id of the main tag should be id="itempage".
And For the page gallery.html, this id should be id="gallerypage".
The <main class="page-main ..." id="...">is a combination of multiple components called Section.
A section is represented with a div or section tag with class section.
Check out the section list to see all available sections layout :
At bottom of the page (after the main tag), optional div with class site-footer embeds the social links (ul with class social-text), and additional website footer notice (such as copyright).