Layout Elements
1. Color Section
The Color Section is a full-width element. You can set different heights of this element, but it takes 100% width of the page container. You can add media and content elements like images, sliders, videos, text blocks, etc within the color section. You can also use multiple color section elements to have a unique background like a parallax effect, solid color, a video, an image, for each section of your page.
2. Columns
A good web page is created by using a variety of content elements like blocks of text, images, videos, etc. Columns help you place the content elements on a web page in such a way that they visually relate to each other. For example, A block of text can be placed next to an image that is related to the text description.
In a mobile view where there is not enough space for all the columns to fit in one row. The columns are stacked below each other. The default breakpoints for tablets and mobiles are 989px and 767px respectively.
3. Grid Row
Grid element is extremely useful when it comes to building attractive box layout designs. A grid is a full-width element and lets you add any number of rows below each other. You can select the desired cell size by going to the tab Set Cell Size right under the Grid Row element. It also consists of a minimum of one and a maximum of 5 cells that are aligned beside each other. You can set an independent background color or image for each cell. Grid cells can accommodate buttons, videos, a block of text, images or other content elements.
4. Tab Sections
The Tab Section element is easy to setup. It is used to display the tabs and content in various styles (like text only, with an icon, below or above the tab section, with the image, and etc.). From setting an icon to title to the content, you can use, edit, and manage tabs without any hassle. You can add as many tabs as you want.