Quickly add the Text and Heading Elements to a Block by clicking or dragging from the Quick Acess Add Panel. You can also press the Alt+1, Alt+2, Alt+3, Alt+4, Alt+5, and Alt+6 hotkeys to insert Headings.
Please note that you can change the Heading style anytime on the Context Toolbar or in the Property Panel -> Font section.
Text Presets
You can insert the Text using the Presets, for example, Blockquote, Text With Icon, Lists, Title, Subtitle, Lead Text, or Small Text.
Rich Text
Go to the Quick Access Add Panel -> Text -> Rich Text to add the Rich Text Element. The Rich Text Element allows editing of long-text articles with inserted in-text images.
Text Context Toolbar
Customize the Text Element using the Context Toolbar. It contains the most used operations. You can modify all properties in the Property Panel to the right.
Change Text Style
You change the style in the Context Toolbar of the Text Element.
Font Size, Bold, And Color
In the Context Toolbar, you can edit the Text Size, Color or enable and disable the Bold emphasis.
Add Icon To Text
Add an Icon to the Text Elements by clicking the Icon on the Context Toolbar. You can also edit the Icon in the Text Element in the Property Panel.
You can also use the Preset to insert the Text With Icon from the Add Panel.
Clear Formatting
Reset Text Elements to the default styling by clicking the Clear Formatting icon in the Context Toolbar.
Move Text
You can move the Text Element up and down by clicking on the Arrow icons. You can also drag and drop it on the placeholder.
Edit Selected Text
Stylize the part of your Text by selecting it and setting the Properties in the Context Toolbar or Property Panel.
Auto / Fixed Text
Switch the Width of the Text Element from Auto to Fixed in the Context Menu to improve its placement and alignment on the layout.
You can change this value in the Property Window.
Text Properties
Edit all the properties of the Text Element in the Property Panel.
Text Width
Set the Width of the Text Element in pixels.
Text Margins
Edit the Top, Bottom, Left, and Right Margins for the Text Element in the Property Panel.
Text Style
Change the Styles of the Text Element, including Heading 1, Heading 2, ..., Title, Lead Text, Blockquote, Ordered List, еtс. in the Property Panel.
Click the Edit link to access the Font Theme Settings.
Text Color
You can edit the Text Color in the Property Panel. You can select the Dark, Light, and Theme Colors, which you can modify in the Theme Settings. Also, the Additional Colors are automatically built from the primary palette.
You can add a New Color if needed. You can access the Theme Colors from the Color Picker dialog.
Text Font Family, Size, And Weight
Select the Font Family, Size, and Weight for the Text Element in the Property Panel.
Theme, Popular, Google, and Custom Fonts
For convenience, the Fonts are sorted in the Font Family property. Start with the Theme Fonts. You can also use the Popular, over 900 Google Fonts, and upload a Custom Font if needed.
Basic Formatting And Alignment
Set the Text's Basic Formatting, including Bold, Italic, and Underline in the Property Panel. Also, choose one standard Text Alignment: Left, Center, Right, or Justify.
Text Line Height and Letter Spacing
Set the Line Height in percentage and Letter Spacing in pixels for the Text Elements.
Text Uppercase
Make all letters in the Text Elements upper case by clicking the UP icon.
Text Strikethrough
You can set the Strikethrough Style in the Text's Font Weight and Style dropdown list.
Text Lists
Add the Numbered and Bulleted Lists to itemize the Text Element in the Property Panel.
Bullet Icon And Item Spacing
You can change the default Bullet for an Icon in the Bulleted List. You can also set its Color and Size. You can edit the Spacing for the List Items and Bullet Icons of the Text List Element.
Link Text Elements
You can link the whole Text Element in the Property Panel. You can also connect the selected part using the Context Toolbar.
Text Shadow
Add the Text Shadow by clicking the checkbox and selecting a Preset. You can customize the Text Shadow in the Settings Tab.
Responsive Modes
Edit the Size of the Text Elements in each responsive mode.
## Summary
- Overview
- Video Lesson
- Add Text Elements
- Text Presets
- Rich Text
- Text Context Toolbar
- Auto / Fixed Text
- Text Properties
- Text Lists
- Link Text Elements
- Text Shadow
- Responsive Modes
## Overview
Use the Text Elements to output text content on a web page. Texts provide visitors with information and help to promote a website on the Internet.
!text-element.png!
## Video Lesson
##
<iframe width="600" height="340" src="https://www.youtube.com/embed/miiI25AOCPw?controls=0" title="Video Lesson: Text Element" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
### See Also
[More video lessons](page:1318)
## Add Text Elements
Quickly add the Text and Heading Elements to a Block by clicking or dragging from the Quick Acess Add Panel. You can also press the **Alt+1, Alt+2, Alt+3, Alt+4, Alt+5,** and **Alt+6** hotkeys to insert Headings.
!add-text-headings.png!
Please note that you can change the Heading style anytime on the Context Toolbar or in the Property Panel -> Font section.
### Text Presets
You can insert the Text using the Presets, for example, **Blockquote**, **Text With Icon**, **Lists**, **Title**, **Subtitle**, **Lead Text**, or **Small Text**.
!text-presets.png!
### Rich Text
Go to the Quick Access Add Panel -> Text -> [Rich Text](page:107186) to add the [Rich Text](page:107186) Element. The Rich Text Element allows editing of long-text articles with inserted in-text images.
## Text Context Toolbar
Customize the Text Element using the Context Toolbar. It contains the most used operations. You can modify all properties in the Property Panel to the right.
!context-toolbar.png!
### Change Text Style
You change the style in the Context Toolbar of the Text Element.
!text-style-context-toolbar.png!
### Font Size, Bold, And Color
In the Context Toolbar, you can edit the Text Size, Color or enable and disable the Bold emphasis.
!text-bold-size-color-context-toolbar.png!
### Add Icon To Text
Add an Icon to the Text Elements by clicking the Icon on the Context Toolbar. You can also edit the Icon in the Text Element in the Property Panel.
!icon-in-text-context-toolbar.png!
You can also use the Preset to insert the Text With Icon from the Add Panel.
### Clear Formatting
Reset Text Elements to the default styling by clicking the Clear Formatting icon in the Context Toolbar.
!text-clear-formatting.gif!
### Move Text
You can move the Text Element up and down by clicking on the Arrow icons. You can also drag and drop it on the placeholder.
!text-move-context.gif!
## Edit Selected Text
Stylize the part of your Text by selecting it and setting the Properties in the Context Toolbar or Property Panel.
!stylize-selected-text.gif!
### Auto / Fixed Text
Switch the Width of the Text Element from Auto to Fixed in the Context Menu to improve its placement and alignment on the layout.
!auto-fixed-text-width.png!
You can change this value in the Property Window.
## Text Properties
Edit all the properties of the Text Element in the Property Panel.
### Text Width
Set the Width of the Text Element in pixels.
!text-width.png!
### Text Margins
Edit the Top, Bottom, Left, and Right Margins for the Text Element in the Property Panel.
!text-margins.png!
### Text Style
Change the Styles of the Text Element, including Heading 1, Heading 2, ..., Title, Lead Text, Blockquote, Ordered List, еtс. in the Property Panel.
Click the **Edit** link to access the Font Theme Settings.
!text-style.png!
### Text Color
You can edit the Text Color in the Property Panel. You can select the **Dark**, **Light**, and **Theme Colors**, which you can modify in the Theme Settings. Also, the **Additional Colors** are automatically built from the primary palette.
You can add a **New Color** if needed. You can access the **Theme Colors** from the Color Picker dialog.
!text-color.png!
### Text Font Family, Size, And Weight
Select the Font Family, Size, and Weight for the Text Element in the Property Panel.
!font-family-size-weight.png!
### Theme, Popular, Google, and Custom Fonts
For convenience, the Fonts are sorted in the Font Family property. Start with the Theme Fonts. You can also use the Popular, over 900 Google Fonts, and upload a Custom Font if needed.
!theme-popular-google-custom-fonts.png!
### Basic Formatting And Alignment
Set the Text's Basic Formatting, including Bold, Italic, and Underline in the Property Panel. Also, choose one standard Text Alignment: Left, Center, Right, or Justify.
!font-basic-formatting-alignment.png!
### Text Line Height and Letter Spacing
Set the Line Height in percentage and Letter Spacing in pixels for the Text Elements.
!text-line-height-letter-spacing.png!
### Text Uppercase
Make all letters in the Text Elements upper case by clicking the UP icon.
!text-uppercase.png!
## Text Strikethrough
You can set the Strikethrough Style in the Text's Font Weight and Style dropdown list.
!strikethrough-style.png!
## Text Lists
Add the Numbered and Bulleted Lists to itemize the Text Element in the Property Panel.
!text-lists.png!
### Bullet Icon And Item Spacing
You can change the default Bullet for an Icon in the Bulleted List. You can also set its Color and Size. You can edit the Spacing for the List Items and Bullet Icons of the Text List Element.
!text-list-icon-spacing.png!
## Link Text Elements
You can link the whole Text Element in the Property Panel. You can also connect the selected part using the Context Toolbar.
!link-text-elements.png!
## Text Shadow
Add the Text Shadow by clicking the checkbox and selecting a Preset. You can customize the Text Shadow in the Settings Tab.
!text-shadow.png!
## Responsive Modes
Edit the Size of the Text Elements in each responsive mode.
##
