Skip to main content
ZenBusiness

How to Use Rows, Columns, Widgets, and Theme Settings in Website Builder

  1. Last updated
  2. Save as PDF

In ZenBusiness Website Builder, every page is built from rows, columns, and widgets. Rows create horizontal sections, columns divide each row into layouts, and widgets add content like text, images, buttons, forms, maps, and social links. Use Theme Settings for site-wide fonts, colors, buttons, and headings so your site stays consistent.

The Website Builder Mental Model

Think of your website like a set of stacked sections. A row is a horizontal section that spans across the page. A column is a vertical container inside a row. A widget is the actual content inside a column, such as text, an image, a button, a contact form, a map, or a social icon group.

Most layout problems become easier once you identify which layer you are editing:

If you want to change... Edit this
Background color, section image, row spacing, full-width section layout Row
Side-by-side service cards, pricing boxes, image/text layout Column
Text, image, button, contact form, map, video, icon, link Widget
Global colors, fonts, headings, buttons, default spacing Theme Settings
Mobile/tablet/desktop appearance Device preview + row/column/widget settings

Use rows to organize major sections like Hero, Services, Testimonials, Contact, or FAQ. Use columns when content belongs side-by-side inside one row. Use widgets for the actual content visitors see or interact with.

Add, Move, and Arrange Widgets

Widgets are the building blocks of each page. Open the widget panel, search for the widget you need, then drag it into the row or column where it should appear. Common widgets include Text, Image, Button, Contact Form, Map, HTML, Social Icons, Video, Gallery, and Click to Call.

When placing a widget, pay attention to the highlighted placement area. Drop it inside an existing column if it belongs with that content. Drop it between rows if it should create or sit in a new page section. If the widget lands in the wrong place, use Undo, then drag it again more slowly until the correct container is highlighted.

For repeated content like service cards or pricing boxes, start by styling one version well. Then duplicate the widget or column if that option is available in your editor, or add a new column and copy the content into it. After adding or duplicating content, preview desktop, tablet, and mobile because a layout that looks balanced on desktop may stack differently on smaller screens.

Add Columns for Service Cards or Pricing Boxes

Use columns when you want content side-by-side, such as three services, four pricing tiers, or an image next to text. Select the row or an existing column, then use the add option to add a column to the current row. Duda's editor supports up to 4 columns per row on desktop and 2 columns per row on mobile in the classic row/column layout.

A practical workflow for adding a fourth service or pricing box:

  1. Select the row that contains the existing boxes.
  2. Add a new column to that row, or duplicate an existing column if your editor shows a duplicate option.
  3. Copy the structure from an existing box: heading, image or icon, description, button, and spacing.
  4. Edit the text and image for the new service or price tier.
  5. Open desktop, tablet, and mobile preview.
  6. Adjust spacing and stacking so the boxes stay readable on smaller screens.
  7. Click Publish when the layout is ready to go live.

If a row already has 4 desktop columns, add a new row below it rather than forcing more columns into the same section. Too many columns can make text narrow and hard to read.

Use Theme Settings for Site-Wide Design

Theme Settings control the default visual style across your site. Use them before editing individual widgets when you want consistent colors, headings, fonts, and button styles. This is the best place to make rebrand changes because linked elements update together instead of forcing you to change each widget manually.

Use Theme Settings for:

  • Heading fonts and sizes
  • Paragraph fonts and sizes
  • Primary and secondary button styles
  • Site color palette
  • Default row and column spacing where available
  • Default backgrounds and visual style rules

Widget-level design changes override theme styles. That is useful for a one-off callout, but risky if you use it everywhere. For example, changing one heading inside a Text widget only changes that one heading. Changing Heading 2 in Theme Settings updates every Heading 2 that still follows the theme style.

If you do not see Theme Settings, you may be in a limited editor view, a different editor experience, or an account that needs a permission/feature review. Contact support with a screenshot of your editor sidebar.

Make Layouts Work on Desktop, Tablet, and Mobile

Website Builder sites are responsive, but you still need to preview each device view before publishing. Some edits are device-specific, such as font size or spacing adjustments. Other edits affect all device views. Deleting an image or widget usually removes it from every device view, even if you were looking at mobile when you deleted it.

Before publishing a page, check:

  1. Desktop preview — rows and columns look balanced.
  2. Tablet preview — images and text do not overlap or crowd.
  3. Mobile preview — columns stack in a readable order.
  4. Buttons and links are large enough to tap.
  5. Important images are not cropped awkwardly.
  6. Forms remain easy to complete.

If a side-by-side layout looks cramped on mobile, simplify the row. Put the image above the text, reduce the number of columns, or split the content into multiple rows. For rows with multiple columns, check whether your editor offers column order or reverse-order controls for mobile.

Common Mistakes to Avoid

Do not use widget-level styling for every font, color, and button change. That creates inconsistent pages and makes future redesigns harder. Start with Theme Settings, then use widget-level styling only for intentional exceptions.

Do not add too many top-level navigation items. More than 7–8 top-level menu items can overwhelm visitors. Use dropdowns, folders, or simplified page names when the navigation grows.

Do not delete elements while viewing mobile unless you mean to remove them everywhere. Use hide/show controls when you want content to appear on one device but not another.

Do not assume saved changes are live. Website Builder auto-saves drafts in the editor, but visitors do not see changes until you click Publish.

Do not rely on custom HTML/CSS unless you are comfortable maintaining it. ZenBusiness can show you where supported code goes, but custom code and third-party widgets are not fully supported by ZenBusiness troubleshooting.

Frequently Asked Questions

What is the difference between a row, a column, and a widget?

A row is a horizontal section of the page, a column is a container inside that row, and a widget is the content inside the column. Use rows for major page sections, columns for side-by-side layouts, and widgets for text, images, buttons, forms, maps, social links, videos, and other visible page content.

How do I add a fourth service or pricing box?

Select the row that contains the existing service or pricing boxes, then add a new column to that row or duplicate an existing column if that option appears. Copy the same structure into the new column, update the text and image, then preview desktop, tablet, and mobile before publishing. Use a new row if the layout becomes too crowded.

Why did my mobile layout change when I edited desktop?

Rows, columns, and widgets are shared across device views, so many content changes affect desktop, tablet, and mobile. Some style settings are device-specific, but deleting a widget or image usually removes it everywhere. Use device preview before publishing, and use hide/show controls instead of deleting content when you only want a device-specific change.

Where should I change my site's fonts and colors?

Use Theme Settings for site-wide fonts, headings, colors, and button styles. That keeps your design consistent and makes future changes faster. Widget-level changes override the theme and should be used only for intentional exceptions, such as one special callout or hero section.

Why don't I see Theme Settings in my editor?

You may be in a limited editor view, a different editor experience, or an account that needs a permission or feature review. First confirm you opened Website Builder for the correct business and site. If Theme Settings is still missing, contact support with a screenshot of the editor sidebar and the site you are editing.

How many columns can I put in one row?

In the classic row/column layout, Duda supports up to 4 columns per row on desktop and 2 columns per row on mobile. If you need more than four content blocks, use a second row or simplify the layout. Too many columns make text narrow and harder to read, especially on mobile.

My boxes are not aligned. How do I make them consistent?

Use the same row and column structure for each box, keep images similar in size or aspect ratio, and use Theme Settings for fonts and buttons. If one box has much more text than the others, shorten the copy or split details into a separate page. Preview mobile because stacked boxes can look different from desktop.

Are my saved edits live automatically?

No. Website Builder auto-saves your draft work in the editor, but visitors do not see changes until you click Publish. After publishing, open the live site in an incognito/private window or hard refresh your browser if you still see the old version.

Can support fix my custom layout or custom code?

ZenBusiness support can help you understand the editor, publishing, domain setup, and where supported widgets or code areas are located. Support does not troubleshoot custom HTML/CSS, third-party widgets, iframe behavior, booking tools, review widgets, or external scripts. Contact the provider of the code or widget for code-specific issues.