Heading Text Widget

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


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

Fig 1

General menu

The General menu for the Heading Text widget is rather simple in that it has only one feature, the "Marker Style" tool. This tool allows you to set the list marker type for both unordered and ordered lists (See fig 2 below).

Fig 2


The default marker for ordered lists will be numerals, and for unordered lists, small dark circles. The initial setting for the tool will be "Default", but clicking into the "Marker Style" input field will reveal a drop-down menu with several choices (See Fig 3 below).


Fig 3


  • The "Shape" option will replace the small dark circle with a star marker as a default starting marker, but it can be changed into one of several other shapes by clicking on the marker icon in the right-hand menu or by clicking on the "Change" button. See fig 4 below.


Fig 4


  • Clicking on either the shape or "Change" button will bring up this model (see Fig 5 below). There are three options, however, the "user defined" option is currently unavailable. The "basic" option presents you with various standard shapes to choose from. The "polygon generator" will allow you to generate a shape based on your desired side count, whether you want the side intersections to be rounded, and whether you want the shape to be outlined or filled in. After you have completed your design, click the "Insert" button to apply your marker to the list. See Fig 6 below.

Fig 5

  

 Fig 6


  • The "Image" option will replace the small dark circle with a grey circle with a "+" sign in the center of it as a default starting marker, but it can be changed into an image of your choosing by clicking on the marker icon in the right-hand menu or by clicking on the "Change" button. See fig 7 below.


Fig 7


  • Clicking on either the shape or "Image" button will bring up this modal (see Fig 8 below for example). There are three options, however, the "Shared images" option is only available to Enterprise customers who wish to share images across multiple accounts. The "My Image" option presents you with your Site Builder's image repository and the "Pexel Images" options allows you to choose from a vast selection of Pexel images to use as markers. (Please see the Image Widget article for a more complete explanation on using your Site Builder's image repository).  

Fig 8


  • The "Text" option will replace the small dark circle with a "push pin" emoji as a default starting marker, but it can be changed into any text character or emoji of your choosing by entering the characters in the "Marker Content" input in the right-hand menu. See fig 9 below.


Fig 9


The General menu also provides a feature, "Marker Size", which when toggled to "On", allows you to increase / decrease the size of the marker. See Fig 10 below. 


Fig 10


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 additional features as described below.

  • The "Marker Color" feature (see Fig 11 below) allows you to change the color of the marker when set to shapes or non-emoji text characters by using a color palette tool. 


Fig 11

 

  • The Scale feature (see Fig 12 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 text and the text container as set by you.

Fig 12

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

Fig 13


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 14 below. You can change the text type for your Heading Text widget by selecting any of the menu options.

Fig 14

  • The Used Font feature (see Fig 15 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 15

Fig 16

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 17 below shows the rendered version of a Heading Text widget that has been styled using the Style menu. Fig 18 shows the same rendered Heading Text widget using the Hover menu if hovering the cursor over the heading text.

Fig 17

Fig 18

In addition to the primary menus, all textual widgets (Text, Heading Text, Paragraph Text, and Button labels) have access to a text style toolbar. This toolbar can be accessed by double-clicking the text or button widget (In the case of a Button widget label, this toolbar will have a subset of the controls discussed below). Fig 19 below shows an example of the toolbar.


Fig 19



From left to right, the control icons represent the ability to modify:


  • Font family
  • Font size
  • Line height
  • Letter spacing (kerning)
  • Word spacing
  • Normal font weight vs bold
  • Italicization
  • Underlining
  • Create unordered and ordered lists
  • Font color
  • Horizontal justification (However, we suggest using the right side menu's Content Alignment feature instead - improves Mobile Mode rendering capability)
  • Vertical justification
  • Setting text as a link
  • Removing the link
  • Erasing styles and setting back to default