Basics: Ideas for using row and column background colors

The most basic row or column background is a solid color. Here's an example of a dark blue row background behind a Call to Action module.

Here are a few ideas for variations of the solid-color row background.

Change the opacity

If you're working with a defined color palette, try changing one of the row or column backgrounds in your palette to a slightly lighter opacity. Here the blue color from the previous screenshot is set to 80% opacity for a subtle difference.

If your row has an image background, you can add a color overlay to the row so the color gets dark or lighter and makes text easier to see, as in the following screenshot.

Add a border

Borders can be pretty boring, but there are ways you can use them to effect. If you have successive rows of color on your site, it helps to set off a row with a border. In this example, the button background color is used as a 5 px upper and lower border and set to Double and 50% opacity to keep it subtle.

Or a border can be used ostentatiously. In the following example, there's a 20 px upper and lower border of the same color as the button, set to Dashed and 80% opacity. To compensate for the large border, the row padding is increased to 40px. Notice how the bold effect draws the eyes toward the call to action.

Add a gradient

Give the background color more depth by adding a row gradient. Here are a couple examples of gradients you can generate at third-party sites:

Gradients require some CSS, and we show you how to do it in the Related Article below on gradients.

Add texture

Row backgrounds with both color and texture become even more interesting. The best way to add texture is to use an image for the row background. Choose Photo instead of Color in the row settings.

Set off content with a color column background

No matter what type of row background you have, you can always add a color background to a column in the row to set off the content. In the following screenshot, in the column settings, there's a white (#ffffff) color background of 20% opacity and right and left column margins of 40px.

Color overlays

If you're using an image or video as a row background, you can improve the legibility of text by using a background overlay color. For example, the following screenshot shows the difference in the legibility of the text without a row background overlay and with a row background overlay set to black (#000000) at 50% opacity.

As an alternative, you can set a background color on the column. In the following screenshot, the column has a background color set to #333333 at 50% opacity. You can vary the exterior and interior size of the column with margin and padding settings.