Rows & Columns

Rows and columns control the grid layout of your content. They are filled with elements – the actual content of your page.

By default, a new row contains one empty column. It can be divided into up to four columns of equal or different widths. Each column can contain multiple elements. You can sort rows with drag and drop. Learn more about managing the layout and how to add and edit rows.

The following settings can be found in the Builder panel of YOOtheme Pro. Just click on the edit icon that appears right next to the row when hovering it to open the row settings.


Layout

The layout setting shows a preview image of the current column layout. To select the number of columns and their layout, click the preview image. It will open the available column layouts in a lightbox. There are three basic types of column layouts.

Type Description
Equal Layouts Split the row into up to four columns that all have the same width.
Variable Layouts Split the row into up to four columns of different widths.
Fixed Layouts Split the row into up to three columns where one column has a fixed width. The other column(s) will automatically fill the remaining space equally.
Whole

Whole

Equal Halves

Equal Halves

Equal Thirds

Equal Thirds

Equal Quarters

Equal Quarters

Thirds 2-1

Thirds 2-1

Thirds 1-2

Thirds 1-2

Quarters 3-1

Quarters 3-1

Quarters 1-3

Quarters 1-3

Quarters 2-1-1

Quarters 2-1-1

Quarters 1-1-2

Quarters 1-1-2

Quarters 1-2-1

Quarters 1-2-1

Quarters 2-1-1

Quarters 2-1-1

Fixed Left

Fixed Left

Fixed Right

Fixed Right

Fixed Inner

Fixed Inner

Fixed Outer

Fixed Outer

An option to set Fixed Width becomes available when using a fixed layout. Choose between different sizes or set it to Auto, which means the column will be as large as its content, e.g. a button or an image.

Fixed column width

Depending on the chosen layout, an Edit Column button appears to edit the settings of each column. See the column settings below.

Edit columns


Gutter

The Gutter setting defines the spacing between two columns. If you activate Display dividers between grid cells, a line between the columns is displayed. Both settings also apply when grid columns stack on smaller viewports.

Gutter


Max Width

Set the maximum content width for a row using the Max Width setting. The Default, Small, Large and Expand options add horizontal padding which adjusts to the viewport width. The None setting adds no padding, which is useful for fullscreen slideshows.

Important The section may already have a maximum width which the row cannot exceed. To edit as few settings as possible, it’s recommended only to set a maximum width for the section. Don’t set a maximum width for the row unless it’s smaller than that of the section.

Max Width


Height

Set the height of a row.

Setting Description
None By default, the height of a row is expanded to the height of its content.
Viewport If the row height is smaller than the viewport height, the row is expanded to fill the viewport height. A row that directly follows the header will subtract the header’s height from it.
Viewport (Minus 20%) This setting acts the same as Viewport but minus 20% in height.

Height

Important The section may already have a set height which the row cannot exceed.


Margin

Set the vertical margin of the row using the Margin setting. The first grid’s top margin and the last grid’s bottom margin are always removed. Define the spacing in the section padding settings instead.

Margin


Match Height

If you check the Match height of single panels option, all Panel elements with different heights will expand to the same height. To see this, it’s recommended to make apply a card look to them. You can do so in the settings of the Panel element.

Important This only works if there is just one Panel element in each column, and the columns are not centered vertically.

Match Height


Breakpoint

The Breakpoint setting defines the viewport sizes from which the columns will change to a stacked layout. On smaller screens grid cells will stack.

Breakpoint Description
None Grid columns never stack.
Small Grid columns stack on viewports smaller than phones in landscape mode.
Medium Grid columns stack on viewports smaller than tablets in landscape mode.
Large Grid columns stack on viewports smaller than desktops.
X-Large Grid columns stack on viewports smaller than large screens.

Breakpoint


Order

The Last item appears first option changes the visual order for the last item of the grid. This only applies to the selected breakpoint. When stacked, items will appear in the same order as they do in the source code.

Order


ID and Class

Some general settings for the HTML markup and CSS are at the bottom.

Setting Description
ID Define a unique identifier for the section. Use this identifier as a URL fragment in any link to navigate to this element, e.g. #myId.
Class Define one or more class names for the section. Separate multiple classes with spaces.

ID and Class


Column Vertical Alignment

Vertically align elements in the column. This will only have a visual effect if the columns have different heights or a height is set in the row.

Column Vertical Alignment


Column Style

By default, a column has no style or background. Selecting a style you can apply different colored columns like tiles. A tile is a column with a background color.

Style Description
None The tile has no background.
Default Adds the default background of your site – often white or light gray.
Muted Adds a muted background – often slightly darker than the default background.
Primary Adds a primary background – often a vibrant color.
Secondary Adds a secondary background – often dark gray.

Column Style

Note The Primary and Secondary styles usually result in tile backgrounds that contrast with the default style, and therefore use a light text color. Learn more about how to customize which tiles automatically recolor their content.


Column Image

If you select a background image for a column, a button for further image settings will appear.

Column Image

Setting Description
Width Height Set the width and height in pixels. Learn more about image dimensions and responsiveness.
Image Size Determine whether the image will fit the section dimensions by clipping it or by filling the empty areas with the background color. By default, the image will not be resized.
Image Position Set the initial background position relative to the column layer. By default, the image is centered.
Image Effect Add a parallax effect or fix the background with regard to the viewport while scrolling.
Image Visibility Display the image only on this device width and larger. This is useful to hide background images if the content becomes illegible on small viewports.

There are three options of how to recolor the image in a different tone.

Setting Description
Background Color Use the background color in combination with blend modes or a transparent image to fill the area if the image doesn’t cover the whole section.
Blend Mode Determine how the image will blend with the background color.
Overlay Color Set an additional transparent overlay to soften the image.

Column Text Color

By default, content looks great on any tile. You may want to adjust the text color for background images, however.

After picking a background image, you have to select the appropriate Text Color depending on whether it’s a dark or a light image. Only choose Light or Dark if Default doesn't look good.

Column Text Color


Column Padding

Set the padding of the tile using the Padding setting.

Column Padding


Custom CSS

The CSS field allows you to apply custom styling to any column. YOOtheme Pro provides the special class selector .el-column for each column. Custom CSS rules will only apply to this specific column.

Examples

/* Select this column */
.el-column { background: red; }

/* Select all direct child elements of this column */
.el-column > * { background: red; }

/* Select all child elements with the uk-button class of this column */
.el-column .uk-button { background: red; }

YOOtheme Pro