Everytime you want to build content you need to create first a content row section and inside it add the shortcodes.
This section has the following option:
Set your desired color for this content row section
If you have set a lighter color background for it you need to this class to it
If you have set a darker color background for it you need to this class to it
Add this class to change the header color when this content row section will overlap with it if it's necessary
makes the content row section full width
makes the content row section max width 780px
Add top padding space to the content row section (8vw)
Add bottom padding space to the content row section (8vw)
Add left padding space to the content row section (8vw)
Add right padding space to the content row section (8vw)
Set all the content inside this content row section align to center
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.
Scroll to reveal animations that are displayed when you scroll past them. Can be used on any element.
The delay duration in milliseconds after which the animation will be triggered.
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.
If you wish to have the pinned section on the right and the scrolling content on the left use this structure code:
This can be applied on a text paragraph word or syntax. The image will reveal once you will hover it.
This will generate a landscape image floating div
Adding this class will generate a portrait image floating div
Set your floating image url here
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.
This class will set the text first and the icon after it. Need to be added to these two component divs of the button
This class will set the icon first and the text after it. Need to be added to these two component divs of the button
This class will increase the text font size of the button link
This class will make the button shape stroked with transparent background
This class will make the button edges rounded
Set the button background color
Set the button text caption color
A responsive lightbox with focus on performance and providing best experience for user with any device.
The text of the marquee shold be bigger than the viewport width
This class will increase the font size of the marquee
Interative text animated by the viewport vertical scroll.
This class will translate the title from right to left
This class will translate the title from left to right
This class will increase the font size
This class will display the icon in the same row with the title
This class will display the icon above the title
Fullscreen parallax scrolling effect on image with content over it
The content is optional and you can remove it and use only the image:
Interative touch slider with hardware accelerated transitions and amazing native behavior.
This class will make the cursor and the navigation dots in white color
This class will make the cursor and the navigation dots in black color
This class will scroll the page to set the slider in the center of the viewport
Interative touch carousel with hardware accelerated transitions and amazing native behavior.
This class will initialize the carousel with loop function
This class will initialize the carousel without loop function
Image gallery gird with various sizes of images, where all the images of a row to have the same height.
A video player built from the ground up for an HTML5 format
Set your video image cover url here:
Video type mp4 or webm are supported. Set your video url here:
This class will scroll the page to set the video player in the center of the viewport
A team member list with floating image on hover
Set your team member image here:
Interative touch carousel with hardware accelerated transitions and amazing native behavior./p>
Add this class to eliminate table borders
Displays collapsible content panels for presenting information in a limited amount of space.
Add this class to create a bigger version of this accordion
Set the counter value that will reach at the end of timing
If there’s anything unclear or you have some concerns open a ticket on our forum and we'll get back to you.