All Collections
Divi Release Tutorials
The New Column Options & Column Editing Interface
The New Column Options & Column Editing Interface

This update introduces a new powerful UI that gives you more control over reordering, duplicating, deleting and designing your columns.

Vlad avatar
Written by Vlad
Updated over a week ago

Visual Builder Add Column UI

Hovering over between the columns or over the row edges will display a vertical column line with a + icon that will let you quickly add a new column. When you add a new column all columns will be equal in size.

(click on the image to see the full size)

As easily, you can drag and drop a module between two columns or at the edges of the row to move the module and create a new column.

(click on the image to see the full size)

Row/Column Settings UI

The Row Settings modal will now display all the columns inside that row as sub-elements, just like other modules with sub-elements (ex: Slider, Accordion, etc.). Through this new interface you can easily add, edit, reorder, duplicate, remove a column and much more.

Drag to reorder
Previously if you wanted to all modules within a column you would have to select all modules and move them manually, now, it's as simple as dragging and dropping the column sub-element in the desired position.

(click on the image to see the full size)

Duplicate

As you would expect, the "Duplicate" action will duplicate the column with all the modules contained in it. 

(click on the image to see the full size)

Column Structure
With the Column Structure dropdown you will be able to adjust your row's column structure with one simple click.

(click on the image to see the full size)

Right-click Actions
Like with any other sub-element, you now have access to the right-click actions which include: Copy/Paste Styles, Reset Styles and Extend Styles.

(click on the image to see the full size)

Column Settings

Just like all other sub-elements, the Column Settings modal now has a tabbed interface for Content, Design and Advanced. You can adjust the following:

(click on the image to see the full size)

Update to the latest version and let us know what you think! ❤️

Stay tuned for more cool features coming your way! 

Did this answer your question?