Heading Text Widget

The Heading Text widget allows you to create a heading text element and add it to the landing page grid section or as a "child" element to another container widget such as the Carousel widget.

The Heading Text widget has two menus (see Fig 1 below).

Fig 1

Style menu

The Style menu for the Heading Text widget conforms to the general Style menu as described in this article: Style Menu Article, but also contains three additional features as described below.

  • The Scale feature (see Fig 2 below) allows you to scale the heading text up or down proportionately using a scaling factor from ".5" to "1.5". The actual scaling effects of this feature will depend on the starting size of the heading text and the text container as set by you.

Fig 2

  • The Used Typography feature (see Fig 3 below) allows you to change which of the default typography types you wish to apply to the heading text font.

Fig 3

Clicking the "Change" button will bring up a drop down list of your globally defined text types and their user-set default font sizes. See Fig 4 below. You can change the text type for your Heading Text widget by selecting any of the menu options.

Fig 4

  • The Used Font feature (see Fig 5 below) allows you to change which of the font families you wish to apply to the heading text font. To change the font family, click on the "Change" button. This will bring up a searchable drop down menu of the application's preset font families and any custom fonts you have imported. See Fig 6 below. Clicking the "Reset" button will reset the font family back to the user-defined default. 

Fig 5

Fig 6

Hover menu

The text Hover menu is essentially a clone of the text Style menu's stylistic features, and its purpose is to allow you to create a different style for the heading text element when a viewer moves their cursor over it in the browser.

The easiest way to illustrate the use of the Hover menu is with an example. Fig 7 below shows the browser-rendered version of a Heading Text widget that has been styled using the Style menu (See Fig 8 below). Figs 9 and 10 show the same browser-rendered Heading Text widget using the Hover menu and hovering the cursor over the heading text.

Fig 7

Fig 8

Fig 9

Fig 10