Resizing Rows and Columns

You can reduce the size of any snippet block from the default 100% available width to a custom width, and align center, left, right either by drag-drop or by settings in the Style Editor popup.

Resizing Rows by drag-drop

  1. Click the required snippet block to highlight it
  2. Click and drag the blue handle that appears on the right side of the snippet to the max-width required
  3. Once completed, drag the snippet using the green 4-way arrow icon that shows top left of the snippet block.

 


Resizing Rows by Style Editor popup

You can set a specific width for your snippet block by setting the max-width value in the Style Editor Popup. To access the Style Editor, click the red COG icon that shows top-left above the snippet block.


1. Click the red COG icon to launch the Style Editor

2. Choose a value from the MAX WIDTH setting.

3. Once set an alignment option will appear allowing you to set the horizontal alignment.


Resizing Columns by dragging the Column edge.

You can resize a column by hovering near the edge of the column to bring up a drag-resize cursor. 

Dragging horizontally with this cursor will increase or decrease  the size of the column, changing the size of the column next to it to fit.

Choosing a column and direction to expand.

Column sizing after resize.

Adding spacing between Columns with Column Gap

You can add spacing between each Column without changing the Columns padding settings via the COLUMN GAP setting property.

The Column Gap Setting can be found in the SIZE AND SPACING tab when editing the row element.

You can also get there from the main Style Editor screen by clicking the current Column Gap value e.g. 36px in the screen to the right.

FAQ Topics

The Basics

Building your site

Advanced Page Types

E-Commerce

Email & Membership

Promoting your site

Advanced

Search for help:

> Home
 


Menu Sitemap
Categories