The MemberMouse landing page uses a great multi-colored row divider graphic that looks like this:

(opens in new window)

If you want to implement this same row divider image in your Live Editor pages please follow the instructions below.

Video Instructions:

Text Instructions:

(Note: you can also use your own row divider images. Dimensions should be 600x10.)

1. Open your Live Editor page and go to "Page Settings".
 

2. Select "Other Scripts" and click "Add New". 
 

3. Select "Custom CSS" and paste the following snippet in the field:

.color-bar-bottom {
 display: block;
 width: 100%;
 height: 100%;
 background: url( http://d3836ugdh0h8ze.cloudfront.net/wp-content/uploads/2015/09/color-bar.png ) bottom center repeat-x;
}

.color-bar-top {
 display: block;
 width: 100%;
 height: 100%;
 background: url( http://d3836ugdh0h8ze.cloudfront.net/wp-content/uploads/2015/09/color-bar.png ) top center repeat-x;
}

.row {
 margin-bottom: 0px;
}

Notice that we've defined two classes.

The first is a color bar that displays at the top of a row (color-bar-top).

And the second is a color bar that displays at the bottom of a row (color-bar-bottom).

Also note that some OptimizePress templates add a margin to the bottom of all rows by default, which is why I've added this bit at the end of the code snippet above:

.row { margin-bottom: 0px; }

Once you've pasted the CSS, click save changes.

4. Select a row that you'd like to add the color bar to and click on the pencil icon to edit that row.

 
5. Scroll down to "row class".

If you want to add the colored row divider at the very top of this row, then enter "color-bar-top" (no quotes).

If you want to add the colored row divider at the bottom of the row, the enter "color-bar-bottom" (no quotes).

6. Save changes and behold your new sexy colored row dividers!

To see this in action on a Live Editor page, check this out:

https://memberfix.rocks/done-for-you-membership-site/ (opens in new window)