Rows

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 in the top right corner to open the row settings which are grouped into general Settings and Advanced settings tabs.


Row 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

Halves

Halves

Thirds

Thirds

Quarters

Quarters

Fifths

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.

Option Description
None Expand the height of a row by the height of its content.
Viewport Expand the height of a row to fill the viewport height. A row that directly follows the header will subtract the header’s height from it.
Viewport (Minus 20%) Expand the height of a row to the viewport height and subtract 20% of the 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 in the section padding option instead. Choose if you want to remove the top or bottom margin altogether.

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


Advanced Row Settings

The Advanced tab contains row settings for the HTML markup and CSS.

Option Description
Status Disable the row and publish it later. It will only be shown to the editor while the customizer is open.
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.
Attributes Define one or more attributes for the row. Separate attribute name and value by = character. Use one attribute per line.

Columns

Columns contain elements which in turn display actual content. Click the Edit Column icon in the row settings to open the column settings. Settings are divided into three tabs: Content, Settings and Advanced.

Tab Description
Content Contains content fields shown in the layout.
Settings Contains appearance, layout and behavior settings.
Advanced Contains administrative and HTML attribute settings.

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 Background

By default, a column has no style. Select the background style or image 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

The Primary or Secondary column styles often result in a colorful or dark column and require a light text color. Check the Preserve text color option to disable automatic text recoloring. For example, cards have their own background color. So when using cards inside columns, select this option so their content is not recolored. Learn more about how the theme style automatically recolors content.

Additionally, a background image for the column can be selected. A button appears to edit further image settings.

Column image

Option Description
Width and Height Set the width and height in pixels. Learn more about image dimensions and responsiveness in the files and images documentation.
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 may be necessary if the content becomes illegible on small viewports.

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

Option 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.
Gradient Set an additional transparent overlay to soften the image by setting a color or a gradient.

Text Color

By default content looks great on any column style. However, there might be cases when the text color needs to be adjusted. For example, when using a background image or video, select the appropriate Text Color depending on whether it’s a dark or a light image or video. Only choose Light or Dark if Default doesn’t look good.

Column text color

Padding

Set the padding of the column.

Column padding


Advanced Column Settings

Option Description
Dynamic Content Set the fields source for the dynamic content.
ID Define a unique identifier for the column. 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 column. Separate multiple classes with spaces.
Attributes Define one or more attributes for the column. Separate attribute name and value by = character. Use one attribute per line.
CSS Enter your own custom CSS.

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