Text Widget

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


The Text widget has three menus (Fig 1):

  • General
  • Style
  • Hover

Fig 1

General menu

The General menu for the Text widget has the Marker Style tool. This tool allows you to set the list marker type for both unordered and ordered lists (Fig 2).

Fig 2


Ordered Lists have numerals as their default markers while Unordered Lists have bullets. will be numerals, and for unordered lists, small dark circles. 


There are several settings for the Marker Style (Fig 3):

  • Default
  • Shape
  • Image
  • Text 



Fig 3


  • Shape replaces the bullet with a star marker. Users can change this by clicking the Change button (Fig 4). 


Fig 4


If you want to customize the shape of your marker, you have three options:

  • User Defined
  • Basic
  • Polygon Generator



User Defined lets users upload their own graphic to use as their marker. Basic lets users choose for a variety of standard shapes.  Polygon generator lets users customize their own marker.  


Image replaces the bullet with a grey circle with a "+" sign in the center of it as a default starting marker. You can change this to an image of your choice by clicking on the "Change" button (Fig 5). 


Fig 5


The Image Menu has three tabs (Fig 6): 

  • Shared Images
  • My Images
  • Pexel Images


Shared Images is only available to Enterprise customers who wish to share images across multiple accounts. My Image displays your Site Builder's image repository. Pexel Images displays a vast selection of Pexel images for use as markers. (Please see the Image Widget article for a more complete explanation on using your Site Builder's image repository).  


Fig 6


Text replaces the bullet with a push pin emoji as a default starting marker. This can be changed into any text character or emoji by typing them into the Market Content field (Fig 7). 


Fig 7


Marker Size allows you to increase or decrease the size of the marker (Fig 8).


Fig 8


Style menu

The Style menu for the Text widget conforms to the general Style menus, but also contains additional including:

  • Marker Color allows you to change the color of the marker when it's set to shapes or non-emoji text characters by using a color palette tool (Fig 9). 


Fig 9

 

  • Scale (see Fig 12 below) allows you to scale the button and its label up or down proportionately using a scaling factor from ".5" to "1.5" (Fig 10). 

Fig 10

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

Fig 11

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

Fig 11

  • Used Font allows you to change which of the font families you wish to apply to the text font (Fig 12). Change the font family by clicking on the Change button. Clicking the "Reset" button will reset the font family back to the user-defined default. 

Fig 12

Hover menu

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


All of the textual widgets (Text, Heading Text, Text, Button) have access to a text style toolbar (Fig 13). This toolbar can be accessed by double-clicking the text or button widge.


Fig 13



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 
  • Vertical justification
  • Setting text as a link
  • Removing the link
  • Erasing styles and setting back to default