Understanding Blocks, Rows, Columns & Widgets

Pages, Popups, Funnels, and Circles are built using four main structural levels:

Blocks → Rows → Columns → Widgets

Understanding what each level does makes it much easier to build clean layouts, control spacing and create pages that work well on both desktop and mobile.

The basic structure

Think of the builder as a set of containers inside other containers:

Block

↳ Row

↳ Column

↳ Widget

A page can contain multiple blocks, each block can contain multiple rows, rows can contain multiple columns, and columns contain your widgets.

Blocks – the main sections of your page

A block is the largest content section inside the page.

Typical blocks include:

• Hero
• Introduction
• Benefits
• Testimonials
• Pricing
• FAQ
• Contact section
• Final call to action

Block-level controls are useful when something should affect the entire section, such as:

• Background color
• Background image
• Video background
• Gradient
• Overlay
• Background pattern
• Shape divider
• Vertical spacing
• Visibility
• Slideshow mode

Rows – horizontal layout groups

Rows sit inside blocks and provide another level of structure.

Use another row when content belongs inside the same visual section but needs a different horizontal layout.

For example, one block could contain:

• Row 1 → Heading
• Row 2 → Three feature columns
• Row 3 → Button

You don't need three separate blocks just because those elements use different column structures.

This keeps the page easier to maintain.

Columns – control the layout

Columns divide a row horizontally.

You can create layouts such as:

1 column

[ Content ]

2 columns

[ Image ][ Text ]

3 columns

[ Feature ][ Feature ][ Feature ]

A row can contain up to five columns.

Columns are also where you control how the widgets inside them align and how much space exists between the content and the column edges.

Widgets – your actual content

Widgets live inside columns.

They can contain everything from basic text to complex interactive elements.

Examples include:

• Text
• Headings
• Buttons
• Images
• Videos
• Forms
• Galleries
• Testimonials
• Pricing
• Timelines
• Charts

Each widget has its own settings, while common controls such as copying, animation and alignment are available across many widget types.

Where should I control spacing?

Spacing can exist at several different levels, and choosing the right one keeps layouts easier to manage.

Use Block spacing when:

You need more or less space above or below the entire section.

Use Column spacing when:

You need space between widgets and the edges of their column.

Use widget spacing when:

Only one specific element needs adjustment.

Keep structure separate from styling

A good page should have a logical structure even before decorative styling is added.

Use:

• Blocks for sections
• Rows for layout groups
• Columns for horizontal structure
• Widgets for content

Then use Global Styling and the individual design controls to change how those elements look.

This makes responsive design much easier.

What happens on mobile?

Desktop layouts may contain several columns side by side, while mobile screens have much less available space.

Recrevio automatically maintains the responsive structure, and you can further adjust mobile-specific spacing and layout settings.

Even when using Free Move for creative desktop layouts, the original grid structure can remain available for the mobile layout.

When to use Free Move

The column grid should be your default layout system.

Use Free Move when you intentionally want an element to:

• Overlap another element
• Float outside the normal layout
• Sit at a precise visual position
• Use a different stacking order

Free Move gives more creative freedom, but the regular grid is usually the better choice for ordinary page content.

Example structure

A typical landing page could look like this:

Block 1 – Hero

• Row
  • Column 1 → Heading, text, button
  • Column 2 → Image

Block 2 – Benefits

• Row 1
  • Column → Heading
• Row 2
  • Column 1 → Benefit
  • Column 2 → Benefit
  • Column 3 → Benefit

Block 3 – Testimonials

• Row
  • Column → Testimonials widget

Block 4 – CTA

• Row
  • Column → Heading, text, button

The structure remains simple even though the finished page may look visually sophisticated.

Best Practices

• Use blocks for meaningful page sections
• Keep related content inside the same block
• Use additional rows instead of creating unnecessary new blocks
• Use columns for your main horizontal layout
• Keep widgets inside the regular grid unless you specifically need Free Move
• Control spacing at the highest sensible structural level
• Check both desktop and mobile
• Avoid unnecessary nesting and complexity