04 How to Work with Rows and Columns in WPBakery

Rows and columns are the foundation of your page layout. Understanding how they work gives you full control over your page structure.

What Are Rows and Columns?

  • Rows stretch horizontally across your page
  • Columns divide rows into vertical sections
  • Every piece of content sits inside a column, which sits inside a row

[SCREENSHOT PLACEHOLDER: Simple diagram showing Row containing Columns containing Elements]

Editing a Row

  1. Hover over the row (look for the blue outline)
  2. Click the pencil icon to access row settings
  3. Common settings include:
    • Background color or image
    • Padding and margins
    • Row stretch options

Changing Column Layout

  1. Hover over the row
  2. Look for the column layout icons (usually shown as small grid patterns)
  3. Click to choose a different column arrangement (e.g., 1/2 + 1/2, 1/3 + 2/3, etc.)

[SCREENSHOT PLACEHOLDER: Show column layout selector]

Moving Content Around

  • To move an element: Click and drag it to a new position
  • To move a column: Click and drag from the column header
  • To move a row: Click and drag using the row's move handle

Duplicating Rows

If you have a row styled the way you like:

  1. Hover over the row
  2. Click the clone/duplicate icon (usually looks like two overlapping squares)
  3. Edit the duplicate as needed
  4. Delete the original if no longer needed

This is a safe way to experiment – always duplicate before making major changes!

Still stuck? Ask us in the portal and we will come back to you.