Content Row Sections
Everytime you want to build content you need to create first a content row section and inside it add the shortcodes.
Code Example:
This section has the following option:
Options |
Description |
|---|---|
data-bgcolor="#fff" |
Set your desired color for this content row section |
light-section |
If you have set a lighter color background for it you need to this class to it |
dark-section |
If you have set a darker color background for it you need to this class to it |
change-header-color |
Add this class to change the header color when this content row section will overlap with it if it's necessary |
full |
makes the content row section full width |
small |
makes the content row section max width 780px |
row_padding_top |
Add top padding space to the content row section (8vw) |
row_padding_bottom |
Add bottom padding space to the content row section (8vw) |
row_padding_left |
Add left padding space to the content row section (8vw) |
row_padding_right |
Add right padding space to the content row section (8vw) |
text-align-center |
Set all the content inside this content row section align to center |
Columns
Column classes indicate the number of template columns. Widths are set in percentages so you always have the same relative sizing. The last column div should have the last class.
All the columns classes are located in style.css at General Styles section.
Code Example:
Code Example:
Code Example:
Animations
Scroll to reveal animations that are displayed when you scroll past them. Can be used on any element.
Code Example:
Options |
Description |
|---|---|
has-animation |
This class will make the element hidden and when will be reach the viewport the javascript will fade in |
data-delay="100" |
The delay duration in milliseconds after which the animation will be triggered. |
Pinned Section
This section will stay in frame until the side content will leave the viewport.
You can use only one pinned section inside a content row section.
Code Example:
If you wish to have the pinned section on the right and the scrolling content on the left use this structure code:
Code Example:
Hover Floating Image
This can be applied on a text paragraph word or syntax. The image will reveal once you will hover it.
Code Example:
Options |
Description |
|---|---|
has-hover-image |
This will generate a landscape image floating div |
vertical |
Adding this class will generate a portrait image floating div |
data-img="image.jpg" |
Set your floating image url here |
hide-ball |
Add this class if you want the circle cursor to be hidden on hover event |
The has-animation class effect can not be applied to this element.
Button Link
This can be applied on a text paragraph word or syntax. The image will reveal once you will hover it.
Code Example:
Options |
Description |
|---|---|
right |
This class will set the text first and the icon after it. Need to be added to these two component divs of the button |
left |
This class will set the icon first and the text after it. Need to be added to these two component divs of the button |
large-btn |
This class will increase the text font size of the button link |
Button Box
This can be applied on a text paragraph word or syntax. The image will reveal once you will hover it.
Code Example:
Options |
Description |
|---|---|
outline |
This class will make the button shape stroked with transparent background |
rounded |
This class will make the button edges rounded |
data-btncolor="#000" |
Set the button background color |
data-btntextcolor="#fff" |
Set the button text caption color |
Lightbox Popup
A responsive lightbox with focus on performance and providing best experience for user with any device.
Image Popup:
Youtube or Vimeo Popup:
Content Marquee
A responsive lightbox with focus on performance and providing best experience for user with any device.
Code Example:
Options |
Description |
|---|---|
data-text="" |
The text of the marquee shold be bigger than the viewport width |
big-title |
This class will increase the font size of the marquee |
Scroll Moving Titles
Interative text animated by the viewport vertical scroll.
Code Example:
Options |
Description |
|---|---|
title-moving-forward |
This class will translate the title from right to left |
title-moving-backward |
This class will translate the title from left to right |
big-title |
This class will increase the font size |
Icon Boxes
Interative text animated by the viewport vertical scroll.
Code Example:
Options |
Description |
|---|---|
inline-boxes |
This class will display the icon in the same row with the title |
block-boxes |
This class will display the icon above the title |
Parallax Image
Fullscreen parallax scrolling effect on image with content over it
Code Example:
The content is optional and you can remove it and use only the image:
Code Example:
Content Slider
Interative touch slider with hardware accelerated transitions and amazing native behavior.
Code Example:
Options |
Description |
|---|---|
light-cursor |
This class will make the cursor and the navigation dots in white color |
dark-cursor |
This class will make the cursor and the navigation dots in black color |
autocenter |
This class will scroll the page to set the slider in the center of the viewport |
Content Carousel
Interative touch carousel with hardware accelerated transitions and amazing native behavior.
Code Example:
Options |
Description |
|---|---|
content-looped-carousel |
This class will initialize the carousel with loop function |
content-carousel |
This class will initialize the carousel without loop function |
light-cursor |
This class will make the cursor and the navigation dots in white color |
dark-cursor |
This class will make the cursor and the navigation dots in black color |
autocenter |
This class will scroll the page to set the slider in the center of the viewport |
Justified Collage
Image gallery gird with various sizes of images, where all the images of a row to have the same height.
Code Example:
Video Player
A video player built from the ground up for an HTML5 format
Code Example:
Options |
Description |
|---|---|
data-src="image-cover.jpg" |
Set your video image cover url here: |
src="video.mp4" |
Video type mp4 or webm are supported. Set your video url here: |
autocenter |
This class will scroll the page to set the video player in the center of the viewport |
Team Members List
A team member list with floating image on hover
Code Example:
Options |
Description |
|---|---|
data-img="image01.jpg" |
Set your team member image here: |
team-member |
Video type mp4 or webm are supported. Set your video url here: |
Team Members Carousel
Interative touch carousel with hardware accelerated transitions and amazing native behavior./p>
Code Example:
Options |
Description |
|---|---|
light-cursor |
This class will make the cursor and the navigation dots in white color |
dark-cursor |
This class will make the cursor and the navigation dots in black color |
autocenter |
This class will scroll the page to set the slider in the center of the viewport |
Clients Table
A team member list with floating image on hover
Code Example:
Options |
Description |
|---|---|
no-borders |
Add this class to eliminate table borders |
Accordion
Displays collapsible content panels for presenting information in a limited amount of space.
Code Example:
Options |
Description |
|---|---|
bigger-acc |
Add this class to create a bigger version of this accordion |
Counter
Displays collapsible content panels for presenting information in a limited amount of space.
Code Example:
Options |
Description |
|---|---|
data-target="3000" |
Set the counter value that will reach at the end of timing |
Didn't find what
you were looking for?
If there’s anything unclear or you have some concerns
open a ticket on our forum and we'll get back to you.