Working with Sections with Image Backgrounds

Tips for controlling the display and design of Image Banner, Image & Text and Image & Motion sections

When you are adding Sections to a Flow page, there are several options which add a Section that includes an image in the background of the Section, including:

When you've added a Blank Page you can select Image Banner on the Add Your First Section options below the page itself
On any page you can select Image & Text and Image & Motion options on the Add to your Page panel

Once you've added one of these Sections to your page, there are a lot of design options you can take advantage of.

Here are several lessons to get you started.

Adjusting the Height and Content Alignment of a Section

You can adjust the display height of a Section on a Flow page as well as set how the Section's content will align vertically within the Section's display height.

This is really helpful for creating full-height "hero" sections, as they're known in the web design world.

Adding additional elements to a Group

You can add more elements to the default Group in the Section.

You might want to add a sub-heading or introcution text, for example.

Setting a transparent background fill color on a Row

Adding a transparent background color helps text stand out out more clearly from a busy image background.

This lesson shows you how to do that at the Row level so the color background completely fills from one side of the page to the other.

You can also set a transparent background color at the Element or Group level which have different design effects based on padding and alignment.