Styling Rows, Columns and Widgets

6 min read Updated

Rows, columns and widgets each have their own styles. Use them to add backgrounds, borders, spacing, shadows and custom CSS without writing a stylesheet.

Find the Styles

Styles are in the sidebar of each edit dialog:

  • Row Styles: open the row’s settings menu and choose Edit Row.
  • Column Styles: in the Edit Row dialog, click a column in the row preview. The sidebar then shows the styles for that column, for example Column 2 Styles.
  • Widget Styles: open a widget to edit it.

The fields are grouped into sections: Attributes, Layout, Mobile Layout and Design. A Tablet Layout section also shows when Use Tablet Layout is enabled. Click a section heading to open it.

Some fields show only when they apply. The background image fields show after you set a Background Image. Border Thickness shows after you set a Border Color.

Size fields take a number and a unit, such as px, %, em, rem, vw or vh. Choose the unit from the dropdown next to the field. Fields such as Padding have four boxes, for the top, right, bottom and left sides.

Row Styles

Attributes

Row Styles, Attributes section

  • Row ID: a custom ID for the row. Use it for anchor links and custom CSS.
  • Row Class: a custom CSS class for the row.
  • Column Class: a CSS class added to every column in the row.
  • CSS Declarations: custom CSS for the row, one declaration per line, for example letter-spacing: 1px.
  • Mobile CSS Declarations: custom CSS that applies only at the mobile width and below.

Set the mobile width at SettingsPage BuilderLayout, in the Mobile Width field. The default is 780px.

Layout

Row Styles, Layout section

  • Bottom Margin: the space below the row. The default comes from the Row/Widget Bottom Margin setting, 30px unless you change it. The last row has no bottom margin unless you set one here or enable Last Row With Margin.
  • Gutter: the space between columns. The default comes from the Row Gutter setting, 30px unless you change it.
  • Padding: the space inside the row, around its columns.
  • Row Layout: how wide the row is. See Row Layout below.
  • Collapse Behaviour: Standard stacks the columns on small screens when Responsive Layout is enabled. No Collapse keeps them side by side on all screens.
  • Collapse Order: which column goes on top when the columns stack. Default puts the left column on top, or the right column on right-to-left sites. You can also choose Left on Top or Right on Top.
  • Column Vertical Alignment: aligns all columns in the row to the Top, Center or Bottom, or Stretches them to the same height. This field is hidden when Use Legacy Layout Engine is set to Always.

Row Layout

Row Layout has three options:

  • Standard: the row and its content stay inside your theme’s content area.
  • Full Width: the row’s background stretches to the full width of the page. The content stays inside the content area.
  • Full Width Stretched: the background and the content both stretch to the full width of the page.

Standard, Full Width and Full Width Stretched rows on the front end

Rows that used the older Full Width Stretched Padded layout now use Full Width Stretched and keep their padding. Page Builder updates them for you.

Design

Row Styles, Design section

  • Background Color: the row’s background color. You can set its transparency.
  • Background Image: choose an image from the media library, or enter an external URL.
  • Background Image Alt Text: describes the image for screen readers. Leave it empty if the image is only decoration.
  • Background Image Display: how the image fills the row. See Background Images below.
  • Background Image Size: which size of a media library image to load, such as Full or Large. Smaller sizes load faster. It has no effect on an external URL.
  • Background Image Opacity: how strongly the image shows. Lower values fade the image, and the Background Color shows through it.
  • Border Color: adds a border in this color.
  • Border Thickness: the border width on each side. The default is 1px.
  • Border Radius: rounds the corners.
  • Box Shadow: adds a shadow. Set its Color, Horizontal Offset, Vertical Offset, Blur and Spread, or make it Inset.
  • Box Shadow Hover: a shadow that shows when the pointer is over the row. It has the same settings as Box Shadow.
  • Full Height: makes the row at least as tall as the browser window.

SiteOrigin Premium adds Custom Palette, which adds your own colors to the color pickers in Page Builder and the Widgets Bundle.

Background Images

Background Image Display has these options:

  • Tiled Image: repeats the image to fill the row.
  • Cover: scales the image to cover the row. Some of the image can be cut off.
  • Centered, with original size: shows the image once, at its original size, in the center.
  • Contain: scales the image so all of it fits in the row. The image repeats to fill any space left over.
  • Fixed: covers the row, and the image stays in place while the page scrolls. On mobile, the image scrolls with the page.
  • Parallax: the image moves more slowly than the page as you scroll.

Rows that used the older Parallax (Original Size) option now use Parallax. To change how parallax works, or to turn it off on mobile, go to SettingsPage BuilderGeneral.

SiteOrigin Premium adds Video Background and Retina Background Images. They add a background video and a high-resolution background image to the Design section of rows, columns and widgets.

Column Styles

Column Styles in the Edit Row dialog

Attributes

  • Column ID: a custom ID for the column.
  • Column Class: a custom CSS class for the column.
  • CSS Declarations and Mobile CSS Declarations: custom CSS for the column, as for rows.

Layout

  • Padding: the space inside the column, around its widgets.
  • Vertical Alignment: aligns this column to the Top, Center or Bottom, or Stretches it. Use row setting follows the row’s Column Vertical Alignment.

Design

Columns have the same background, border and box shadow fields as rows. They don’t have Full Height. They also have:

  • Font Color: the color of text in the column.
  • Link Color: the color of links in the column.
  • Link Hover Color: the color of links when the pointer is over them.

Widget Styles

Widget Styles in a widget edit dialog

Attributes

  • Widget ID: a custom ID for the widget.
  • Widget Class: a custom CSS class for the widget.
  • CSS Declarations and Mobile CSS Declarations: custom CSS for the widget, as for rows.

Layout

  • Margin: the space around the widget, for each side.
  • Padding: the space inside the widget, around its content.

Design

Widgets have the same Design fields as columns: background, border, box shadow, Font Color, Link Color and Link Hover Color.

Some widgets have their own design settings in the widget form. Those are separate from Widget Styles.

Tablet and Mobile Styles

The Mobile Layout section sets padding and margins for small screens: Mobile Padding for rows, columns and widgets, Mobile Bottom Margin and Mobile Column Bottom Margin for rows, and Mobile Margin for widgets. The Tablet Layout section has Tablet Padding, Tablet Bottom Margin for rows and Tablet Margin for widgets. For how they work, see Responsive Layouts.

Styles From Themes and Plugins

Themes and plugins can add more style fields. They show in the sections above, in a Theme section, or in sections of their own.

For example, SiteOrigin Premium adds Animations and Link Overlay sections to rows, columns and widgets, and a Toggle Visibility section to rows and widgets. Use them to animate an item, make the whole item a link, or hide it by device, login state or schedule.

Next Steps