Collapsing Layouts

Create flexible builder layouts which adapt according to their content.

YOOtheme Pro layouts which load dynamic content are fully collapsible. This means that layout parts with empty content collapse to prevent empty space.

Empty Content

Content which is loaded dynamically from a source other than the builder can be empty. For example, it could be a WordPress field, widget or widget area which has no content output. If this is the case, the layout adapts accordingly and collapses the available space.

Content Empty
Field Is empty if it's not filled out, or the user has no permission to see it.
Widget Is empty if it has no content output, is not assigned to the current page, or the user has no permission to see it.
Area Is empty if it has no widgets with content output.

Collapsing Cascade

The layout collapses in a cascade from smaller layout parts like elements and columns to bigger ones like rows and sections.

Layout Part Collapse
Element Collapses if its content is empty.
Column Collapses if all its elements are collapsed.
Row Collapses if all its columns are collapsed.
Section Collapses if all its rows are collapsed.

Collapsing Columns

Elements, rows and sections appear above each other. When they collapse, the following content moves up. Columns, on the other hand, appear in a grid side by side. If a column collapses, the remaining columns expand equally and take the newly available space. For example, if in a three-columned layout two of the three items collapse, the remaining column expands to take up the full width. If only one of the three columns collapse, the two remaining columns equally share the available space creating a two-columned layout. Of course, if all three columns collapse, the whole row collapses as well.

Collapsing columns

YOOtheme Pro Documentation