How to Use DuoBuild in the Zibster Website Builder
Overview
DuoBuild allows you to place two supported blocks side by side in the Zibster Website Builder. This gives you a clean, two-column layout without selecting a separate page template or changing the overall page layout.
This guide explains which blocks support DuoBuild, how to place two blocks next to each other, how to separate them again, how DuoBuild responds on mobile devices, and how block styling and Website Builder block limits apply.
What Is DuoBuild?
DuoBuild is a built-in layout feature available for specific block types in the Zibster Website Builder. It is not a separate block, page template, or setting.
When you place two supported blocks next to each other, they automatically snap into an equal-width, two-column layout.
Each block continues to function independently and keeps its own content and design settings.
A DuoBuild layout can contain two blocks only. You cannot add a third block to the same DuoBuild row.
Any supported DuoBuild block can be paired with any other supported block. You can also place two blocks of the same type next to each other.
Blocks That Support DuoBuild
The following Zibster Website Builder blocks support DuoBuild:
- Text Editor Block
- Text + Image Block
- Images Block
- List Block
- Banner Block
- Video Block
- Form Block
- Button Block
- HTML Block
Only blocks on this list can be placed side by side using DuoBuild.
Blocks that do not support DuoBuild remain full width and stack vertically on the page.
Supported Block Combinations
There are no pairing restrictions between supported DuoBuild blocks.
You can combine two different supported block types or two blocks of the same type.
Common DuoBuild combinations include:
- A Text Editor Block next to an Images Block
- A Form Block next to a Banner Block
- A Video Block next to a Text Editor Block
- A Button Block next to an HTML Block
- Two Text Editor Blocks
- Two Images Blocks
If both blocks appear in the supported DuoBuild list, they can be placed together in a two-column layout.
STEP ONE
Log into your Zibster account and click WEBSITE in the left-side menu.
This opens the Website Builder, where you can manage your website pages and content.
STEP TWO
Open the page where you want to create a DuoBuild layout.
Click an existing page in your page list, or click NEW PAGE to create a new page.
DuoBuild can be used on any page where supported Website Builder blocks can be added.
STEP THREE
Add two DuoBuild-compatible blocks to the page.
Add the first supported block, then add the second supported block near it.
You can use two different supported block types or two blocks of the same type.
If both blocks are already on the page, you can reposition the existing blocks instead of adding new ones.
Each block remains an individual Website Builder block and counts separately toward any applicable page block limit.
STEP FOUR
Click and hold one of the supported blocks, then drag it horizontally over the other supported block until the placement indicator appears.
Release the block when the placement indicator shows that the two blocks can be placed together.
The blocks automatically snap into an equal-width, two-column DuoBuild layout.
The block displayed on the left will appear first when the layout stacks vertically on mobile devices. The block displayed on the right will appear below it.
If the blocks do not snap into place, confirm that both block types support DuoBuild.
FINAL STEP
Click into each block and customize its content and available design settings.
Use the desktop and mobile preview options in the Website Builder to review the completed layout.
On desktop screens, the two blocks should appear next to each other in equal-width columns.
On mobile devices and smaller screens, the blocks automatically stack vertically. The left block appears first, and the right block appears directly below it.
Make sure the order of the blocks makes sense when viewed vertically on mobile devices.
Click Save Changes when you are finished. Your saved changes are automatically applied to your website.
How to Remove a DuoBuild Layout
You can separate two DuoBuild blocks at any time.
Click and hold one of the blocks, then drag it up or down until the placement indicator shows that the block will be placed by itself.
Release the block to return it to a full-width position on the page.
The other block will also return to its normal full-width layout.
Separating the blocks does not delete either block or remove its content or design settings.
Column Width and Block Styling
DuoBuild divides the available content area into two equal-width columns.
The individual column widths cannot be resized.
Each block keeps its own available settings, which may include:
- Layout
- Background
- Colors
- Fonts
- Spacing
- Content alignment
- Images
- Buttons
- Other block-specific settings
The available options depend on the type of block you are editing.
DuoBuild changes only where the blocks appear on the page. It does not combine their content, styling, or settings.
Because each block is styled separately, the two columns can have different backgrounds, fonts, colors, layouts, or spacing.
Edit each block individually if you want both sides of the DuoBuild layout to have a consistent appearance.
Responsive Mobile Design
DuoBuild uses responsive design and automatically adjusts for phones, tablets, and smaller screens.
You do not need to create a separate mobile version of the layout.
On smaller screens:
- The two columns stack vertically.
- The block displayed on the left appears first.
- The block displayed on the right appears below it.
- Each block keeps its own content and styling.
Use the mobile preview in the Website Builder to confirm that the stacking order supports the flow of your page.
For example, you may want introductory text to appear before a form, image, video, or call-to-action button when the page is viewed on a mobile device.
DuoBuild and Website Builder Block Limits
DuoBuild does not create a new block type or change the maximum number of blocks that can be used on a page.
Each block in a DuoBuild layout continues to count as an individual block.
Website Builder blocks that are subject to the combined 30-block page limit still count toward that limit when used in DuoBuild.
DuoBuild-supported blocks that count toward the combined limit include:
- Images Block
- List Block
- Banner Block
For example, placing two Images Blocks next to each other counts as two blocks toward the combined 30-block limit.
DuoBuild-supported blocks without a page limit remain unlimited.
Placing blocks side by side changes only their position on the page and does not change how the blocks are counted.
DuoBuild Design Ideas
DuoBuild can help you organize related content and reduce unnecessary vertical space on a page.
Common DuoBuild layout ideas include:
- A portrait or portfolio image next to an introduction
- Session information next to a booking or inquiry form
- A video next to supporting text
- Two service descriptions
- An image next to a call-to-action button
- A contact form next to business information
- Two groups of related information
For headings within a DuoBuild layout, use a Text Editor Block and apply the appropriate H2 or H3 heading format.
HTML Block Considerations
You can place an HTML Block in a DuoBuild layout, but custom or third-party embed code may include its own width or responsive settings.
Code that uses a fixed width may extend outside the DuoBuild column or display incorrectly on smaller screens.
If third-party content does not fit properly, review the embed settings or contact the third-party provider to determine whether they offer responsive embed code that can adjust to the available column width.
Zibster Support can help you locate the HTML Block and add code you already have. Zibster Support cannot create, edit, troubleshoot, or guarantee the performance of custom code or third-party services.
Troubleshooting DuoBuild
The Blocks Will Not Display Side by Side
Confirm that both blocks appear in the supported DuoBuild block list.
Unsupported Website Builder blocks cannot be added to a DuoBuild layout.
Drag the block horizontally over the placement area of the other supported block. Do not release the block until the placement indicator appears.
I Cannot Add a Third Block to the Row
This is expected.
A DuoBuild layout supports two blocks side by side only.
If you want another two-column section, create a separate DuoBuild pair elsewhere on the page.
The Blocks Appear in the Wrong Order on Mobile
The block displayed on the left appears first when the DuoBuild layout stacks vertically.
Return to the Website Builder and adjust the left-to-right order of the blocks, then check the mobile preview again.
The Columns Have Different Designs
This is expected.
Each block keeps its own background, colors, fonts, layout, spacing, and other available design settings.
Open each block separately if you want to create a more consistent appearance between the two columns.
An Embedded Form or Widget Does Not Fit
Third-party embed code may use a fixed width that is larger than the available DuoBuild column.
Review the embed settings or contact the third-party provider for responsive code that can adjust to the available width.
Want Help Building Your Website?
The Zibster We Build It For You service can help you organize your website pages and create layouts using your existing website content.
Learn more about Zibster We Build It For You.
Need Help?
Zibster Support Hours: Monday–Friday, 9am–6pm EST
Phone: 844.353.3412
Channels: Phone, Live Chat, Support Ticket
