There are many ways to add color and color effects to backgrounds. Here are some ideas.

All of these colors and effects except shape overlays are also available for column backgrounds. Background color and border effects are available in specific tools.

The most basic row or column background is a solid color. Here’s an example of a dark row background behind a Callout element.

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

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.

After you select the color box, use the scroll bar on the right to change the opacity.

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.

You can use color gradients in row backgrounds. Here’s an example of a radial gradient.

To learn more about adding gradients view the article on Colors.

You can add a shape to a row edge that is anchored in relation to the top or bottom border of the row. You can style and transform the shape in various was, such as flipping horizontally and vertically and changing the Y offset, so you can place the shape overlay just about anywhere in the row and give it some interesting effects.

Here’s an example of a concave overlay at the top border with a semi- transparent background color and radial gradient overlay that creates something of a halo effect. The background image is fixed, so the overlay allows the trees to peek through in the halo area as the page is scrolled.

Also see the article on Shape Overlays.

You can add a border and round the border corners or add a border shadow to any row, column, or tool that has a BORDERS section.

Here’s an example where the border is made a bit more interesting by using 5px on the left and top side and 10px on the right and bottom side.

In the following screenshot, a radius and shadow have been added in the same blue color as the row background.

Or you can make a border style become part of the design. 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.

To learn more, view the article on Borders.

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.

Here’s an example of an image with color and texture used as a background. This example has no border, but radius and shadow border effects were also applied to soften the corners.

No matter what type of row background you have, you can add a color background to a column (or sometimes a tool). In the following screenshot, a semi-opaque background color has been added:

If another background like an image completely hides the background color, the color may still be visible briefly while the image is loading.

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.