Sales pages, landing pages, and other areas with lengthy content can become easier to read and scan when you separate sections visually. You can do this with divider lines (horizontal rules) and other decorative elements, but changing backgrounds is also a useful pattern.
Examples of alternating section backgrounds
Reasons to alternate backgrounds
Changing up the backgrounds just looks nice, which is often reason enough to do it. But you can use this pattern with specific intents too.
- Separate headers, footers, navigation elements, and comment sections from the rest of the content
- Visually signal transitions in the content’s subject matter
- Emphasize important sections (like headlines or signup forms)