Set Background for Column Inside Row

Adding a background to a column enhances your design flexibility, enabling you to create visually distinct sections that align with your store’s branding. It helps separate content effectively, improve readability, and highlight key elements.

GemPages already supports setting background colors for row element easily. You can leverage this feature to set backgrounds for columns within rows by following the simple methods below.

Option 1: Setting Backgrounds by Nesting Rows within Columns

Step 1: Drag and drop a Row element, for example, create a Row with three columns.

Step 2: Nest a new Row inside each Column. Add content to each Column as needed.

Step 3: Set the background color for the Nested Rows you created in Step 2.

Option 2: Setting Backgrounds for Columns Using Custom Code

This method involves adding custom code to set the background color for each column individually. 

Follow these steps:

Step 1: Add a Nested Row inside each Column. Add content to each Nested Row as needed.

Step 2: Right-click on the label of the main Row and select Custom Code.

Step 3: Add the following custom code:

[data-component-tag=”Col”] {

  background-color: #yourdesiredcolor;

}

Replace #yourdesiredcolor with your desired color code.