Change a Text Element's font color (Style) setting

Steps to change a Text Element's font type setting.

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 edit text in a Text Element.

The changes you make are saved once you leave the Text Element.

I am having trouble getting font style (specifically bolding) to show up consistently between operating systems. On Windows, the bolded font displays correctly. On Mac, however, the bolding is missing. The font is also switching to from Verdana to Times New Roman and another undefined font on Mac when I’ve selected “Theme Base Font”. I’m using Chrome for both operating systems. 

Editing text in a text element is almost exactly the same in Flow and Claro.

In both modes you double-click on the text element to be able to enter. When you're finished your edits you select either another element or a blank area of the page to leave the text element. At that point the changes you made will be saved.

In this example we change the default text in two elements previously added to the Flow page by adding a Section.

Steps to add an Icon to a text element.

The Icon collection is font-based, so it will take on all the text styling settings that you apply.

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.

Steps to move elements toward the back or the front of a Page in Claro.

As you add elements to a Page in Claro the most recent element is added at the top of the page above previously-added elements.

You can move elements toward the front or back of the page one position at a time or completely to the front or back position.

Steps to use the Show Variables setting to display either the default {x} variable placeholder or the full variable string in a text element.

You can display the value of a variable as part of a text element. In this lesson we'll set up a text element so it shows the text the learner types into a Text Input form control (their name) on the page as a simple example.