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.
- Adding a Fluid Grid Block
- Container settings
-
Saving Fluid Grid Blocks to your library
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. Containers cannot be added or removed, as grid variations are pre-established.
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!
Instead, use px, %, or another unit type to ensure your page displays correctly in all modes.
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.
You can set up padding at both the block level and the container level, as well as margins for the elements within a container. They do not overwrite each other because they are independent of one another.
It is recommended to add a padding on the block level, of at least 20px, depending on your design, to both the right and left sides of the block, as shown below. In this way, in the tablet view, the content will look better and will not stick to the side of the screen.
Note: When you select a fluid grid block with a specific number of containers, they are fixed and can’t be deleted, nor can additional grid containers be added to it. In this case, you should add a new fluid grid block with the desired number of containers.
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.
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.