Flex, Section & Grid Layouts

FlexBox

Flexbox layouts allow you to create different layouts in the format of two, three or four columns/grids that can be found in the Page/Panel Elements Dropdown.

"TwoFlex", "ThreeFlex", and "FourFlex" - pre-built column or grid structures

"Flex - Add New Box" - pre-built option to easily add a new box container

TwoFlex

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

ThreeFlex

FourFlex

Flex examples with different background styles applied

Background-Light

Background-Light & Border-Top

Background-Light & Border-Bottom

Background-Light-Gradient

Background-Light-Gradient & Border-Top

Background-Light-Gradient & Border-Bottom

Background-Light-2

Background-Light-2 & Border-Top

Background-Light-2 & Border-Bottom

Background-Light-Gradient-2

Background-Light-Gradient-2 & Border-Top

Background-Light-Gradient-2 & Border-Bottom

Background-Mid

Background-Mid & Border-Top

Background-Mid & Border-Bottom

Background-Mid-Gradient

Background-Mid-Gradient & Border-Top

Background-Mid-Gradient & Border-Bottom

Background-Primary

Background-Primary & Border-Top

Background-Primary & Border-Bottom

Background-Dark

Background-Dark & Border-Top

Background-Dark & Border-Bottom

Background-Dark-Gradient

Background-Dark-Gradient & Border-Top

Background-Dark-Gradient & Border-Bottom

Background-Dark-Gradient-Reversed

Background-Dark-Gradient-Reversed & Border-Top

Background-Dark-Gradient-Reversed & Border-Bottom

Section Layouts

Section layouts allow you to create different two column layouts.

"Section 20-80", "Section 25-75", "Section 33-66", "Section 50-50", "Section 66-33", "Section 75-25" and "Section 80-20" - pre-built section layouts

Additional styles that can be applied found in under Styles > Section layout styles

"Section-Divider" - adds a dividing line between the two sections
"Section-Align-Top" - aligns content to the top
"Section-Align-Bottom" - aligns content to the bottom
"Section-Reverse-On-Mobile" - about
"Section-Reverse-On-Desktop" - about
"Section-Add-Padding" - adds padding
"Section-Overlap-Left" - content on the right overlaps the left
"Section-Overlap-Right" - content on the left overlaps the right
"Section-Border-Radius-Left" - about
"Section-Border-Radius-Right" - about

Section 20-80

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 25-75

Section 33-66

Section 50-50

Section 50-50 with 'Section-Reverse-On-Mobile' style

Section 66-33

Section 75-25

Section 80-20

Grid Options

Grid 25-75, 2 Left - 1 Right

Replace with content or image to show to the right on large screens and show in the middle on small screens. Please make sure when you tab through your content the order of the content makes sense.

View Our CTA

Grid 50-50, 1 Left - 2 Right

Replace with content or image to show to the right on large screens and show in the middle on small screens. Please make sure when you tab through your content the order of the content makes sense.

View Our CTA

Grid 50-50, 2 Left - 1 Right

Replace with content or image to show to the right on large screens and show in the middle on small screens. Please make sure when you tab through your content the order of the content makes sense.

View Our CTA

Grid 75-25, 1 Left - 2 Right

Replace with content or image to show to the right on large screens and show in the middle on small screens. Please make sure when you tab through your content the order of the content makes sense.

View Our CTA