What is a Layout Block?
A Layout Block is a type of block that lets you arrange content in columns on your page. Think of it like creating a grid where you can place different types of content side-by-side.
The best part? Your layout automatically adjusts to look great on mobile devices without any extra work.
When should I use a Layout Block?
Use a Layout Block whenever you want to display content side-by-side, such as:
Showing customer testimonials in a row
Displaying pricing plans next to each other
Creating image galleries
Placing text alongside images
Building landing pages with professional layouts
How do I add a Layout Block to my page?
Open the block library
Look for "Layout Block" or browse the "Layouts" section
Click or drag the Layout Block onto your page
Start adding content to your columns
Working with Columns
How many columns can I create?
You can create up to 4 columns in a single Layout Block.
What type of content can I put in columns?
You can add any type of content block into your columns, including:
Text
Images
Videos
Buttons
And more
Simply drag the content blocks you want into each column.
What's the difference between pre-built templates and custom layouts?
Pre-built templates are ready-made layouts designed for common needs (like testimonial cards or image carousels). Just drag and drop them onto your page.
Custom layouts let you build your own column structure from scratch and add whatever content you want. This gives you complete control over your design.
Adjusting Column Width
What does "Auto-fill" mean?
Auto-fill means all your columns will automatically share the available space equally. For example, if you have 3 columns, each one will take up one-third of the width. This is the recommended setting for most layouts.
When should I use fixed width instead of Auto-fill?
Use fixed width (measured in pixels, like 250px or 300px) when you want your columns to be a specific size every time. This is helpful for:
Testimonial cards that should all be the same width
Product cards in a catalog
Any layout where consistent sizing is important
Creating horizontal scrolling layouts (fixed widths combined with horizontal mobile direction create swipeable rows)
How do I set a fixed width?
Select your Layout Block
Find the column width settings
Choose "Fixed width"
Enter your desired width in pixels (for example, 250px)
Managing Your Columns
Can I reorder my columns?
Yes! You can easily reorder columns by dragging them to a new position within your Layout Block.
How do I add or remove columns?
To add a column: Use the add column option in your Layout Block settings (remember, you can have up to 4 columns). You can also select the “+” button in the columns layout.
To remove a column: Select the column you want to delete and choose the red trashcan.
How do I control spacing between columns?
You can adjust the "gap spacing" setting in your Layout Block. This controls how much space appears between your columns. Increase the gap for more breathing room, or decrease it for columns that sit closer together.
Can I align content vertically within columns?
Yes! You can set vertical alignment to:
Top: Content starts at the top of each column
Center: Content is centered vertically in each column
Bottom: Content aligns to the bottom of each column
This is especially useful when your columns have different amounts of content.
Mobile Settings
How does my layout look on mobile?
By default, your columns will automatically stack vertically on mobile devices, making them easy to read on smaller screens. This means if you have 3 columns on desktop, they'll appear as 3 rows stacked on top of each other on mobile.
What is the mobile direction override?
The mobile direction setting lets you change how your columns appear on mobile devices:
Vertical (default): Columns stack on top of each other
Horizontal: Columns stay side-by-side and users can scroll horizontally
What is horizontal scrolling on mobile?
Horizontal scrolling creates a swipeable row on mobile devices, similar to how you swipe through photos. This is perfect for testimonials, product showcases, or image galleries where users can swipe left and right to see more content.
How do I create horizontal scrolling for mobile?
Set your columns to a fixed width (not Auto-fill)
Change the mobile direction setting to horizontal
Now your columns will be swipeable on mobile devices instead of stacking vertically.
Layout Width
What does "Max width" mean?
By default, your Layout Block stretches across the entire width of the screen or device. This means it uses all available space from left to right.
How do I stop my layout from being full width?
If you want your layout to be narrower (for example, centered on the page with margins on the sides):
Select your Layout Block
Find the "max width" setting
Set a maximum width (for example, 1200px)
This constrains your layout so it won't stretch beyond that width, even on large screens.
Quick Tips
💡Can I mix different types of content in the same Layout Block?
Yes! You can put different content in each column. For example, one column could have an image, another could have text, and a third could have a video.
💡What if I want to change my layout later?
You can always edit your Layout Block by selecting it and adjusting the column settings, adding or removing content, or changing the width settings.
Common Use Cases
Example 1: Testimonial slider (swipeable cards on mobile)
This is one of the most popular uses for Layout Blocks!
What you're creating: A row of testimonial cards that users can swipe through on mobile.
Steps:
Add a Layout Block to your page
Add 3-4 columns (one for each testimonial)
Set column width to fixed (250-300px works well for testimonial cards)
Set mobile direction to horizontal
Add your testimonial content to each column
Adjust gap spacing if needed
Result:
On desktop: testimonials appear side-by-side in a row
On mobile: users can swipe left and right to see all testimonials
Example 2: Image and text side-by-side
Add a Layout Block with 2 columns
Use Auto-fill for column widths
Add an image to one column, text to the other
On mobile, they'll automatically stack vertically
Example 3: Pricing tiers
Add a Layout Block with 3 columns (Basic, Pro, Premium)
Use Auto-fill for equal-width columns
Add pricing information to each column
Keep default mobile settings for vertical stacking