Page Layout
Follows a simple coding structure that is easy to understand and implement. Make sure that you follow some of the Important Rules to avoid unexpected errors:
- Always enclose all the content inside the
#clapat-page-contentdiv - Validate on https://validator.w3.org/ your HTML code for errors.
Code Example:
Header
This page section is always fixed on top and contain the logo, the navigation and the burger menu:
Code Example:
Logo Settings
The template supports dual logo options and will be displayed the version depend on your color scheme set on each page.
Code Example:
If you wish to use a retina logo, make sure that you use double the size of your standard logo image.
Navigation Types
The classic navigation menu type:
Options |
Description |
|---|---|
classic-menu |
Set this class to header |
data-breakpoint="1025" |
Set this value to ul located inside the nav |
The fullscreen navigation menu type:
Options |
Description |
|---|---|
fullscreen-menu |
Set this class to header |
invert-header |
Set this class to header if you want to change the logo, menu burger and navigation color from dark to light |
data-menucolor="#171717" |
Set the background color for fullscreen menu and responsive menu |
data-breakpoint="10025" |
Set this value to ul located inside the nav |
Navigation Structure
The navigation supports up to two page sub menus.
Code Example:
Menu Burger Types
This is dysplayed on your fullscreen navigation menu and also on the responsive navigation menu:
Options |
Description |
|---|---|
burger-lines |
Set this class to display the three lines burger type |
burger-dots |
Set this class to display the three dots burger type |
The burger menu is displayed on your fullscreen navigation menu and also on the responsive navigation menu.
Hero
This page section contains the page title and subtitle.
Code Example:
Hero Options. All this classes are applied to #hero-caption div
Options |
Description |
|---|---|
content-max-width |
Set this class at to have the caption maximum width up to 1280px |
content-full-width |
Set this class to have the caption width like the viewport |
hero-full-caption |
Set this class to make hero caption full height |
text-align-center |
Set this class to have centered align caption |
parallax-scroll-caption |
This class will make your hero caption parallax on scroll |
The Project Page Hero have different structure and is explained on the Template Portfolio section.
Main Content
This page section contain the Main Page Content and Next Page Navigation.
Code Example:
Main Page Content
On this page section contains you can build all the page content.
Code Example:
This section has the following option:
Options |
Description |
|---|---|
content-max-width |
Set this class to have the content maximum width up to 1280px |
content-full-width |
Set this class to have the content width like the viewport |
Next Page Navigation
The section is optional and can be removed if it's not necessary.
Code Example:
This section has the following options:
Options |
Description |
|---|---|
text-align-center |
Set this class to have centered align caption |
content-max-width |
Set this class at to have the caption maximum width up to 1280px |
content-full-width |
Set this class to have the caption width like the viewport |
data-centerline="ABOUT US" |
Words displayed on the Mouse Circle Cursor hovering the next page title url |
Footer
This page section contain the Back to Top Button, Copyright Link and Social Links.
Code Example:
Social Links
You can set acronyms or icons for your social links profile
Acronym Code Example:
Icon Code Example:
All the brands icons you can find them on Fontawesome
Didn't find what
you were looking for?
If there’s anything unclear or you have some concerns
send us a message and we'll get back to you.