Working with Rows

Rows are the horizontal structure inside a block. Every row contains between 1 and 5 columns, and the columns are where you place your widgets and content.

You can use rows to create anything from a simple full-width text section to multi-column layouts, sliders, or clickable tabbed content. The same row tools are available wherever the builder is used, including Web Studio and Circles.

Working with columns inside a row

At the top of each row, you'll see the row controls.

The Column control shows how many columns are currently used in the row. Click it to split the row into between 1 and 5 columns.

Each column then acts as its own content area where you can add widgets.

For example:

• 1 column – ideal for headings, text, videos, forms, or centered content.
• 2 columns – useful for text + image layouts.
• 3–5 columns – useful for features, benefits, team members, pricing highlights, icons, or other compact content.

Row Settings

Click the gear icon in the row controls to open Edit Row Settings.

Here you can control the appearance and behavior of the entire row.

Background color

Set a background color for the row independently from the surrounding block.

This is useful when you want to create, for example:

• a highlighted content box,
• a card-style section,
• a contrasting area inside a larger block,
• or a visual background behind several columns at once.

Whenever possible, use colors from your Global Styling palette to keep the design consistent.

Column Gutter

Column Gutter controls the horizontal space between the columns in the row.

Increase the gutter when columns feel crowded, or reduce it when you want the content to sit closer together.

A gutter of 0px removes the gap completely.

Border

You can give the entire row a border by setting:

• Border color
• Border Size
• Border Radius

Border Radius rounds the corners of the row and is especially useful when creating cards or contained content sections.

Shadow

Click Change under Shadow to add depth to the row.

You can choose:

• No shadow
• Outer shadow
• Inner shadow

For the shadow, you can also control:

• Shadow color
• Horizontal offset
• Vertical offset
• Blur radius
• Spread radius

Glass blur background

Enable Glass blur background to blur content that appears behind the row.

Use Blur amount to control the strength of the effect.

This can be especially useful when the row sits over an image, gradient, or other visually rich background.

Slider Mode

Enable Slider Mode when you want the row to contain multiple slides instead of displaying all of its content at once.

Each slide can contain its own complete row layout, including different columns, widgets, text, images, and other content.

Once Slider Mode is enabled, slide controls appear directly in the builder so you can add, duplicate, switch between, and manage slides.

Slider Mode is useful for:

• testimonials,
• feature highlights,
• before/after stories,
• offers,
• image-and-text presentations,
• or any content where you want visitors to move through several layouts without making the page longer.

Slider Mode settings let you control how visitors navigate between slides and how the transitions behave.

Depending on your setup, you can configure options such as:

• arrows and their position,
• navigation bullets,
• transition animation,
• automatic sliding,
• autoplay speed and direction,
• transition easing,
• keyboard navigation,
• autoplay progress,
• and whether autoplay should be disabled on mobile.

Available animations include styles such as Slide, Fade, Zoom, Flip, Push, and Cube.

For autoplay, the direction can be set to Forward, Reverse, or Ping-pong.

Tabs Mode

Tabs Mode lets you build several complete row layouts and allow visitors to switch between them using clickable tabs.

This is useful when you have related content that belongs together but shouldn't all be displayed at the same time.

For example, you could use tabs for:

• different services,
• product features,
• membership levels,
• course topics,
• FAQs grouped by category,
• different audiences or use cases,
• or step-by-step information.

When Tabs Mode is enabled, controls appear in the builder for managing the individual tabs.

Use the controls to:

• switch between tabs,
• add another tab,
• duplicate an existing tab,
• and open the settings for the current tab.

Each tab can contain its own columns and widgets, so Tabs Mode isn't limited to changing a small piece of text – you can create completely different layouts inside each tab.

Styling your tabs

Open the settings for a tab to customize how the tab navigation appears.

For each tab you can add:

• Tab title
• Tab icon
• Badge pill – an optional small label such as New, Popular, or Recommended

You can also choose between several Tab styles:

• Pills
• Underline
• Minimal
• Outline

You can further customize:

• Tabs background
• Active tab background
• Tab text color
• Active tab text color
• Hover background
• Hover text color
• Font size
• Bold text
• Font family

Because the changes appear directly in the builder, you can immediately see how your tabs will look while you adjust them.

Slider Mode or Tabs Mode?

Both options let you place multiple content layouts inside the same row, but they are useful for different situations.

Use Slider Mode when:

• the content should be viewed sequentially,
• visitors can browse forward and backward,
• or you want content to rotate automatically.

Use Tabs Mode when:

• visitors should intentionally choose what they want to view,
• the categories have clear names,
• or users may need to jump directly between different types of content.

For example, a series of testimonials may work well as a slider, while Features / Pricing / FAQ may make more sense as tabs.

Troubleshooting

My columns feel too close together:

Increase Column Gutter in the Row Settings.

I want the entire group of columns to look like one card:

Add a background color, border radius, border, or shadow to the row rather than styling each individual column.

I want several layouts in the same place:

Use Slider Mode if visitors should move through them sequentially, or Tabs Mode if visitors should choose between named sections.

My tabs are getting crowded:

Shorten the tab titles, remove optional icons or badges, or reconsider whether all content needs to be in the same tab group.

My row doesn't stand out enough against the background:

Try a subtle background color, border, shadow, or Glass blur background rather than adding several strong effects at once.

Best Practices

• Start with the simplest layout that works and add columns only when needed.
• Use Column Gutter instead of trying to create spacing manually inside every widget.
• Keep border radius, shadows, and colors consistent with the rest of your site.
• Use Tabs Mode to reduce long pages, but don't hide essential information visitors should see immediately.
• Avoid putting too many slides into a slider. Important information shouldn't require excessive clicking.
• Check your layout on mobile after making structural changes.
• Use Global Styling wherever possible for colors and typography instead of creating unnecessary one-off styles.

Rows give you the structure between your blocks and columns. Once you understand how to combine regular rows, multiple columns, Slider Mode, and Tabs Mode, you can create much more advanced layouts without leaving the drag-and-drop builder.