Custom Row Colors

2 min read Updated

Page Builder lets you give each row a color in the editor, so you can find and group rows in a long layout. It comes with five colors. The Custom Row Colors addon lets you replace them with your own list. Your list takes over when you first save the addon settings. These colors show only in the Page Builder editor. They don’t change how your site looks to visitors.

Requirements

Go to SiteOriginPremium Addons and activate Custom Row Colors.

Manage Row Colors

  1. Go to SiteOriginPremium Addons.
  2. Find Custom Row Colors and click Settings.
  3. Add, change or remove colors in the Row Colors list.
  4. Click Save.

The Custom Row Colors settings with the Row Colors list and one color open

The list starts with the five Page Builder colors: Soft Blue, Soft Red, Grayish Violet, Lime Green and Desaturated Yellow. Click Add to add a color. Click a color to open it. Use the icons on the right to copy or delete it. Drag the colors to change their order. The order in the list is the order of the swatches in the editor.

Each color has these fields:

Name
The name of the color. Required.

Inactive Color
The background of the row’s columns. It is also the border of the swatch.

Active Color
The background of the selected column. It is also the fill of the swatch.

Column Divider
The color of the bar between two columns. You drag this bar to resize the columns.

Column Divider Hover
The color of that bar when you hover over it.

Set all four colors. Page Builder leaves out a color if one of its four colors is empty.

Each row stores a label made from its color’s name. If you rename or delete a color, rows that use it lose their color until you pick a new one. New rows get Soft Blue. If you delete Soft Blue, new rows have no color until you pick one, or until you change the default color (see below).

Apply a Row Color

  1. Edit a page with Page Builder, or with a SiteOrigin Layout block.
  2. Hover over the wrench icon on the right of a row.
  3. Click a color swatch below Delete Row.

The row’s columns take the new color at once.

The row color swatches in the Page Builder row menu below Delete Row

Advanced Customizations

To give new rows one of your own colors, use the Page Builder siteorigin_panels_admin_row_colors_default filter. It takes the color’s label: custom-row-color- plus the name in lowercase, with spaces changed to hyphens. The five Page Builder colors keep their plain labels, such as soft-blue. This example uses a color named “Brand Blue”. Add it to your child theme’s functions.php file or a code snippets plugin.

add_filter( 'siteorigin_panels_admin_row_colors_default', function() {
	return 'custom-row-color-brand-blue';
} );