Fluid Grid Blocks are a new block type that uses customizable, container-based grids to create landing pages that automatically adapt and scale to any screen size. When adding a Fluid Grid Block, you can choose from a range of predefined grid options with varying rows, columns, and widths, allowing you to precisely organize and structure your content to meet your design needs across all devices.
Table of contents
Adding a Fluid Grid Block
To add a new Fluid Grid Block while editing your page, click on Insert Block, then click on My Blocks and select Fluid Grid Block.
You can choose from different layout arrangements. The positions of the containers in the block relative to each other will be fixed, but each container will have individual arrangement settings.
After placing a Fluid Grid Block on a page, you can add the following elements to it:
- headlines
- paragraphs
- forms
- images
- buttons
- HTML
- video
- vertical & horizontal lines
It is not currently possible to place shapes (rectangle/circle) or timers on Fluid Grid Blocks. Please use a standard Instablock or a Global Block for them.
The container settings allow the Fluid Grid Block to automatically arrange your elements, resulting in a more responsive layout. There's no need to worry about manually fixing their positions!
Container settings
You can use each container’s settings to adjust padding and customize the orientation, alignment, and spacing of elements. These settings automatically apply to any screen size, including the mobile view, with the ability to adjust them as necessary. Additionally, each container is numbered to stack in ascending order when transitioning to mobile, making it effortless to create responsive landing pages.
1. Container padding
This setting will determine how much negative space will be allowed on the edges of the container. Your element(s) will be arranged to fit within that space.
You can set this padding in the following units of measurement: pixels (px), percentage (%), rem, em, vh, vw. Feel free to use the one that fits your existing design guidelines.
2. Element flow
These settings set the rules for how elements flow on the page in relation to each other and to the container they have been placed in.
- Flow: choose whether the elements will flow horizontally (left to right) or vertically (top to bottom)
- Justify and Align: align the elements relative to the container's margins. The padding set in the previous step will be respected. "Baseline" refers to the alignment of the baseline of the element to that of its parent (the container).
- Space between: define the amount of space that should be left between the elements. You may use the same units of measurement (px, %, rem, em, vh, vw) as for container padding.
3. Background
Here, you can customize the background of each container. You may add a simple background color or use an image. You can also add a border and round the corners.
Saving Fluid Grid Blocks to your library
Click the block, then click the three dots to open the menu that includes the options to Save, Duplicate, or Delete the block.
Save to My Blocks
Just like regular canvas Instablocks, Fluid Grid Blocks can be saved to your personal library to be reused on other pages in the same workspace. A copy/template of the block is saved.
Saved blocks will appear under My Blocks with the tag Fluid.
Save as a Global Block
A Global Block is the exact same block on every page it is inserted on. This means that any changes made to it on one page will be reflected on all of the other pages to which the block has been added.
Saved blocks will appear under Global Blocks with the tag Fluid.
When you are happy with the changes made to a Global Block, you can click Apply changes. You will see a pop-up with a list of the pages this block has been added to, including their draft/published status.
If the Global Block is present on a live page, Manager permission level is required to apply changes. Editors may only update Global Blocks that are not live.
NOTE: You can add a specific global block only once per page. You can have multiple global blocks on the same page as long as they are different global blocks. If you add the same global block multiple times on the same page, only the first instance of the block will load on the live URL of the page.
Disconnect a Global Block
Using this option will convert the instance of this Global Block on this page into a regular Fluid Grid Block. This allows you to make changes to it that will only be reflected on the current page. The newly resulting block can be saved to your library as usual.