Row Settings

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

Hover a row and click the Edit button top right corner to open the row settings.


Layout

A newly created row has one column taking up the whole width. To change the number of columns and their layout, click the preview image. Available column layouts will open in a modal. To load a layout, simply click on it. There are three basic types of column layouts.

Type Description
Equal Layouts Split the row into up to five columns that all have the same width.
Variable Layouts Split the row into up to five 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

Fifths

Equal Fifths

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

Fifths 2-3

Fifths 2-3

Fifths 3-2

Fifths 3-2

Fifths 1-4

Fifths 1-4

Fifths 4-1

Fifths 4-1

Fifths 3-1-1

Fifths 3-1-1

Fifths 1-1-3

Fifths 1-1-3

Fifths 1-3-1

Fifths 1-3-1

Fifths 2-1-1-1

Fifths 2-1-1-1

Fifths 1-1-1-2

Fifths 1-1-1-2

Fixed Left

Fixed Left

Fixed Right

Fixed Right

Fixed Inner

Fixed Inner

Fixed Outer

Fixed Outer


Edit Layout

For multi-column layouts an Edit Layout button appears that allows further customizations of the column widths. Mind that choosing another column layout will reset all customizations.

Edit layout

Each column has an option to set its width for the different device widths.

Widths Description
None If no column width () is selected, the width of the next smaller screen size is applied.
Fraction Layouts Choose Halves, Thirds, Quarters and Fifths as fraction widths. The combination of widths should always take the full width.
Fixed Layouts Choose Small, Medium, Large, X-Large or 2X-Large as a fixed width, Auto to base the width on the content, or Expand to fill up the available space. A fixed layout always needs at least one Expand width so the row takes the full width.

Column width

There is an additional option to change the column order. Select the breakpoint from which columns will start to appear before other columns. On smaller screen sizes, the columns will appear in their natural order.

Column order first


Edit Columns

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

Edit columns


Gap

The Column Gap option defines the size of the gap when the columns are aligned side by side while the Row Gap option defines the size of the gap when columns stack on smaller viewports. Click Show dividers to display a line between the columns.

Gap


Max Width

Set the maximum content width for a row. Choose between the Default, Small, Large and X-Large to set a fixed max width. Expand takes the full width including a small padding while None has no padding at all. Additionally, you can remove the horizontal padding of the row.

Max width

Important The section may already have a max 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 max width for the row unless it’s smaller than that of the section.


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 option. The first grid’s top margin and the last grid’s bottom margin are always removed. Define these spacings in the section padding option instead.

Margin


Match Height

The Match height option expands the height of all panel elements which are styled as card to the same height.

Match height


Status

Disable your row and publish it later. It will only be shown to the editor while the customizer is open.

Status


ID and Classes

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

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

ID and classes

Attributes

Define one or more attributes for the row. Separate attribute name and value by = character. Use one attribute per line.

Attributes


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. Select the background style for the column. Each style can be edited in style customizer.

Style Description
None The column has no background.
Default Adds a default background, 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


Column Image

Select a background image for a column. A button appears to edit further image settings.

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 or video will blend with the background color.
Overlay Color Set an additional transparent overlay to soften the image or video.
Gradient Set the gradient to the overlay color.

Column Text Color

By default content looks great on any column. There are two cases when you might want to adjust the text color.

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

The Primary and Secondary styles often result in a colorful or dark column, and therefore use a light text color. Checking the Preserve color option will disable automatic text recoloring. For example, cards have their own background color. So, when using cards inside columns, you may not want their content to be recolored. Learn more about how the theme style automatically recolors content.

Preserve Color


Column Padding

Set the padding of the column.

Column padding


Column ID and Classes

As with the row, the column also has an option to add the ID and Classes.

Attributes

Just like the row, the column has an option to add custom attributes.

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 Documentation