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 (Carousel, Grid, Flex, etc.).


The Heading Text widget has three menus (Fig 1):

  • General 
  • Style
  • Hover 

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 (Fig 2).

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 (Fig 3).


Fig 3


  • The "Shape" option will replace the small dark circle with a star marker as the default starting marker (Fig 4). It can be changed into one of several other shapes by clicking either the marker icon in the right-hand menu or the "Change" button. 


Fig 4


  • Clicking on either the shape or "Change" button will bring up a modal with three options: (Fig 5). 
    • User Defined
    • Basic
    • Polygon Generator


Fig 5

  

  • User Defined lets users select their own graphic. 
  • Basic lets users select various standard shapes. 
  • Polygon Generator will allow you to generate a shape based on your desired side count, whether sides are rounded or not, 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. 

 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 (Fig 7). 


Fig 7


  • Clicking on either the shape or "Image" button will bring up a modal where you can select what kind of images you want (Fig 8):
    • Shared images option is only available to Enterprise customers who wish to share images across multiple accounts.  
    • My Image displays your with your Site Builder's image repository. 
    • 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 (Fig 9). 


Fig 9



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 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). 


Fig 11

 

  • The Scale feature allows you to scale the heading text up or down proportionately using a scaling factor from ".5" to "1.5" (Fig 12). 

Fig 12

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

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 (Fig 14). 

Fig 14

  • The Used Font feature allows you to change which of the font families you wish to apply to the heading text font (Fig 15). 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. Clicking the Reset button will reset the font family back to the user-defined default. 

Fig 15

Hover menu

The text Hover menu allows you to create a different style for the heading text element when a viewer moves their cursor over it in the browser.


In addition to the primary menus, all textual widgets (Text, Heading Text, Paragraph Text, Button) have access to a text style toolbar. This toolbar can be accessed by double-clicking the text or button widget. 

The Button widget has a toolbar with the following controls (Fig 19): 

  • 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 defaul


Fig 19