Add an image as a Section background with parallax in Flow

Adding a background 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 so the effect is added depth to your page.

In this lesson we’ll add the transparent backgroun...

Steps to add a Label to an image.

Instead of adding text within an image file you can add Labels when authoring. This is great for identifying or naming parts of a diagram, for example.

If you move the image on a Claro page or if it moves or resizes in a Flow page the labels will stay in position in relation to the image.

The text in the labels is also included in Translation export files, making it easy to translate the text (much easier than editing the image in another application to ch...

Steps to add an oversized high res image to a page.

By default when you upload an image, if the width or height is greater than 1200 it will be resized to 1200px in the largest dimension as part of the upload.
We do this to help ensure that learners aren’t faced with slow download times for images that are much larger than their display size in the content you make.

But sometimes you will have a use case for an image that’s larger than 1200px, so there’s a special upload process for that.

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 use drag and drop to upload and add an image to a Page.

In Claro you can drop the image anywhere on the page. In Flow, you need to drop the image on an empty Placeholdeer.

The image upload process will allow you to add a Description and keyword Tags to help improve how the image appears in searches in the Media Library.

Steps to add a Hotspot to an image.

You can add hotspots as a layer over an image. If you move the image the hotspot will remain in the same location in relation to the image.

Once you have added a hotspot you can use it as a trigger for a wide range of Triggers and Actions such as showing or hiding content.

Steps to add a pre-made Section to a Flow page.

There is a wide range of available Sections that can be used by following these steps. This example shows adding a Section with a Title and Subtitle.

Adding multiple Sections to a Flow page is a great way to create a longer, scrolling experience for your learners.

In this lesson you will see how to use the media browser to add a description and tags to an image.

Steps to add an Assessment Question to a Project.

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.