Changing the Background Fill Color on a Section with a Divider on a Flow Page

Steps to change the top or bottom dividers on a Section in a Flow Page.

For this lesson the page has a Decorative Header section added to the top of the Page from from the Add Your First Section options on a blank page plus a second section added below that.

Any Section on a Flow page can have top and/or bottom decorations, so you can use these steps to add top and bottom decorations on any section. (In general sections added to a Flow page have the top and bottom decorations turned off/se...

Steps to set a background (fill) color on an element.

Setting a background color can be used for many visual effects.

In this example, we have a text element over an image and it's difficult to read the text.

We can add a background or fill color to help the text stand out more.

Giving the background color a slight transparency allows the image to still be seen through the text element, which can be an interesting visual design effect.

Steps to set a background (fill) color on an element.

Setting a background color can be used for many visual effects.

In this example, we have a text element over an image and it's difficult to read the text.

We can add a background or fill color to help the text stand out more.

Giving the background color a slight transparency allows the image to still be seen through the text element, which can be an interesting visual design effect.

Adding a background image to a Section on a Flow page is a great design idea. But images are often very complex visually and it can be hard to read text over them.

One way to help the text be more readable is to add a background color with a transparency setting to the text. The background helps the text stand out against the image while the transparency means the image can still be seen behind the text, providing an effect of added depth to your page.

In this lesson we’ll add a transparen...

Steps to change the Responsive behavior of a Section on a Flow Page.

In this example, we have a section that has a Header element and two body Elements.

We can set the body elements to switch to vertical orientation the Extra Small breakpoint range or at the Small breakpoint range.

After you've set up an Action you can change the Trigger at any time.

In this example we have previously set up an action to show a text element when Button 1 is clicked. We'll change it to be triggered by Button 2 instead.

A very dramatic responsive design idea is to use an image as the background behind a section.

If you add a parallax effect, as the user scrolls down the page the background image and the content over it will scroll at different speeds. This creates a sense of depth.

This lesson outlines the steps to add an image background to a Section on the Flow page and set it to a slow parallax effect.

Steps to replace an image used as a Section background

Tips for controlling the display and design of Sections with Dividers