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.
