Set a transparent background on a Row in Flow

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.

Steps to change the background fill color 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.

You can set a background fill color on any Section on a Flow page using these same steps.

Steps to edit the content in a Tab Set component.

When editing the content in Engage Components you enter a special Edit mode on the Stage.

When you are finished with the content edits you use the Exit button in the breadcrumb to leave the Edit mode.

Steps to edit the content in a Tab Set component.

Steps to add a Tab Set component from the Engage tab to an empty Placeholder on a Flow Page.

Engage components have their own internal responsive behavior when used in Flow pages. Tab Sets, for example, can change from a horizontal tab set to a vertical accordion menu based on breakpoint. This provides a better user experience on a narrower screen such a smartphone held in portrait orientation.

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.

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 Add a Caption to a Node within a Timeline component in Flow.

A walk-through on how to add a Custom Character Set and a Custom Background to the Scenario Builder widget.