Working with Columns

Columns are the containers that hold your widgets inside each row. A row can contain up to five columns, and each column can have its own width, spacing, alignment, background and visual styling.

Columns make it easy to create anything from simple text-and-image layouts to cards, pricing sections, sidebars and more advanced responsive designs.

⚡ Why it matters

Columns give you control over both structure and presentation. Instead of manually positioning every element, you can define the layout at column level and then place your widgets inside it.

Resizing Columns and Adjusting Spacing

When you select a column, handles appear directly in the Web Studio so you can adjust the layout visually.

• Drag the pink handles to change the width of a column.
• Drag the light blue handles to change the space between the column edge and its content. You can adjust this from the left, right and top.
• If you need extra space below the content, add a Spacer widget at the bottom of the column.

Changes appear instantly while you drag, making it easy to fine-tune the layout without entering exact values.

Column Actions

Click the three-dot menu next to a selected column to access the available column actions.

Depending on where the column is positioned, you can:

• Duplicate Column – creates a copy of the column in the same row.
• Move Left – moves the column one position to the left.
• Move Right – moves the column one position to the right.
• Delete Column – removes the column and its content.

The available actions automatically adapt to the layout. For example, the left-most column cannot be moved further left, the right-most column cannot be moved further right, and when a row contains only one column, Duplicate Column is the relevant structural action available.

A row can contain a maximum of five columns.

Column Settings

Click Column to open Edit Column Settings.

This is where you control the appearance and behavior of the selected column, including:

• Background image and color
• Gradient and overlay
• Glass blur background
• Top column margin
• Content alignment
• Border and shadow
• Tilted background effects
• Global columns
• Slider Mode
• Custom CSS classes

Backgrounds, Gradients and Overlays

A column can have its own visual background independently from the surrounding row or block.

Background Image

Use the image area at the top of Edit Column Settings to add a background image to the column.

This is useful for layouts such as:

• Image cards with text on top
• Feature panels
• Promotional sections
• Visual navigation cards

Background Color

Choose Background color to apply a solid color to the entire column.

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

Add Gradient

Enable Add Gradient to blend two colors across the column.

Just like gradients on blocks, you can control the colors and gradient settings to create anything from a subtle background transition to a stronger visual effect.

Add Overlay

Enable Add Overlay to place a color layer over the column background.

Overlays are especially useful on top of images, where they can improve contrast and make text easier to read. You can also combine an overlay with a gradient.

Content Alignment and Top Margin

Content Alignment controls where the widgets inside the column sit vertically:

• Top
• Center
• Bottom

This is particularly useful when several columns sit next to each other but contain different amounts of content.

For example, you can vertically center a short text block next to a larger image.

Top Column Margin adds additional space above the column and can be useful when you intentionally want one column to start lower than another.

Borders and Shadows

Columns can be styled like cards or panels using Border and Shadow.

Border

Click Change under Border to configure:

• Border color
• Border Size
• Border Radius

Increasing the border radius gives the column softer, rounded corners.

Shadow

Click Change under Shadow to add an inner or outer shadow and control its color, offset, blur and spread.

This works in the same way as shadows on rows and is useful when you want a column to stand out as a card or floating panel.

Glass Blur Background

Enable Glass blur background to blur content behind the column.

Use Blur amount to control the strength of the effect.

This works especially well together with transparent or semi-transparent backgrounds and can create a modern glass-style interface.

Tilted Background Effect

Enable Add Tilted Background Effect to add a decorative angled color area to the column.

You can choose:

• The Color
• Whether the tilt appears At Left or At Right
• Whether it should Start from the top or Start from the bottom

This can be useful for feature cards, highlighted content or sections where you want a more dynamic visual treatment without adding additional images.

Global Columns

Enable This is a global column when you want the same reusable column content to appear in multiple places.

Once enabled, you can either:

• Save current content as global column, or
• Select one of your Available global columns.

Global columns are useful for content that should remain consistent wherever it appears, such as:

• Navigation or resource panels
• Reusable calls to action
• Contact information
• Service navigation
• Repeated promotional content

Because the content is global, you can maintain the reusable version instead of rebuilding the same column manually in multiple places.

Slider Mode

Enable Slider Mode when you want multiple sets of content to rotate within a single column rather than displaying everything at once.

Once activated, slide controls appear for that column. You can add additional slides, duplicate existing ones and remove slides you no longer need.

The slider applies only to the content inside that column, while the rest of the row remains unchanged.

This is useful for things like:

• Testimonials
• Rotating offers
• Compact feature presentations
• Multiple pieces of content that should occupy the same area

Slider Mode follows the same general workflow as Slider Mode on blocks and rows, but at column level.

Custom CSS Classes

At the bottom of Edit Column Settings, click Add custom class name to this area to assign your own CSS class to the column.

This is intended for advanced customization when you want to target the column with custom CSS.

For most layouts, the built-in column controls are enough and are easier to maintain.

Troubleshooting

I can't move a column left or right

That option is only available when there is another valid position in that direction. The first column cannot move left, and the last column cannot move right.

I only see Duplicate Column in the column menu

If the row currently contains a single column, there are no other columns to move around or delete while maintaining the row structure. Duplicate it to create another column.

My content sits too close to the edge of the column

Drag the light blue spacing handle inward to increase the distance between the column edge and its content.

I need more space below the content

Add a Spacer widget underneath the last widget in the column.

My columns don't line up vertically

Open Edit Column Settings and check Content Alignment for each column.

My text is difficult to read over a background image

Add an Overlay, use a darker or lighter background treatment, and make sure there is enough contrast between the text and background.

Best Practices

• Start with the simplest column structure that supports your design.
• Use the pink handles to establish proportions before fine-tuning spacing.
• Keep spacing consistent between similar columns.
• Use Content Alignment instead of adding unnecessary Spacer widgets when you simply need vertical alignment.
• Use global colors wherever possible so future design changes are easier.
• Avoid excessive borders, shadows and visual effects—use them to create hierarchy rather than on every column.
• Check the mobile version after creating multi-column layouts. Recrevio automatically adapts your structure, but mobile spacing may still benefit from its own adjustments.
• Use Global Columns for genuinely reusable content rather than manually duplicating content you expect to maintain in several places.

Columns give you precise control over how content is arranged inside each row. Set the overall structure with column widths, use spacing and alignment for refinement, and then add visual effects only where they help clarify or strengthen the design.