Flexible grid section is a blend of banner elements that you can use to create beautiful sections that look stacked together:
To activate this section you first have to add the section to your page. This can be done in a few small steps.
1) Click on 'add section' which can be found in your left sidebar
2) Scroll down, or search for 'Flexible Grid Section', then click on it.
3) Done, the section has been added.
General Settings:
Click on the section and you will see a list of options that will help you customizing this section:
Layout
Columns per row:
Control the numbers of column per row, and each banner can have different size.
Width:
Select the width of the section.
Banner height:
Control the height of the section banners.
Custom minimal height:
Enable this option to have custom height for your image banners in the flex section.
Space between banners:
Control the gap of banners using range slider.
Zoom effect:
Check this option to have zoom effect on hover.
Move animation:
Check this option to make the banners move on hover.
Select desired mobile layout; In rows and Swipe also controls the banner height differnetly
than the desktop.
Spacing:
Set the spacing on the bottom for desktop and mobile. That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.
Blocks in Flexible Section:
When you add the flexible section, it comes wit 5 image banners.
You can configure each image banner and view the available settings by clicking on the image banner:
Banner size:
No need to get confused by columns/rows, it actually controls how the banner expands.
The column increase the width let's say the following image is expanding in 3 columns and 1 row:
Subheading:
Here you can add a subheading to your banner and customize it.
Heading:
Here you can add the main heading and customize it to match your branding.
Text:
Add text in your banner and adjust the font size.
Button:
Insert a button link and customize the button colors.
Shop the look:
Enable this option to have a Shop the look icon visible on the banner. You can also add a label by enabling Show label checkbox and write your desired text.
Mobile Layout:
Add a separate image than desktop more optimized for mobile view.
If you have any questions about this section/block or anything click on the chat icon visible on the bottom right of your screens.