The text editor tool features a toolbar in which you can customize all the elements regarding text. Therefore it is possibly to style text as preferred, including size, font family, color, line height, among many other options. If you wish to see a visual representation of this article, please watch the video below.
1.1. HTML Elements (H1, H2 etc.)
The Text Editor features HTML elements that allow you to organize your content. H stands for heading and P for paragraph. Think of H1 as your main header, H2 as a sub-header, and so on. This way your content will be optimized for search engines.
Remember that for SEO, you should really only have a single H1 on each page, which will allow you to focus on particular keyphrases. It's often considered wise to use synonyms in the H2 tags if possible.
To style your text you can either select a text style e.g. subtitle or you can style it locally by changing color, sizes etc. in the text editor. When selecting a text style you will assure that e.g. all subtitles look the same across the entire site. When you select a style the global styling will take effect, which means that from global styling you can style all e.g. subtitles at once. If instead you style it locally in the text editor, the global styling will no longer affect the text.
We recommend using global styling to do as much as you can, since this will make updates and maintenance of styles far easier. it will also make things easier if anybody has to take over control of the site. Read more about text global styling here!
1.3. Emphasis text elements
You can also emphasise a specific part of your text, including making the text bold, italic and/ or underlined.
1.4. Font Size
You can define and set the font size by either selecting pixels or use the slider function to drag and define pixels accordingly.
1.5. Text Align
You may align text elements by using the alignment features. Simply highlight the text elements and click the icon to align as intended.
You may define text color for your text or only a specific part of the text by using the color feature. Simply use the mouse to define a color, make it transparent etc. You may also insert a hex code for a specific color if you have a branded identity you'd like to keep consistent.
Again, here you will be able to use global colours which you have defined. This will make updates and any transition far easier in future.
It is possible to add small icons to your text. You can choose your preferred icon from the long list or you can filter to show only relevant icons, e.g. typing down in the field "arrow" will only display arrow icons. Don't forget to click on the Insert button to add the icon to the text. You can add as many icons as you wish and in any place within the Text Module.
In this section you can create links from your text. It is possible to link to an internal page, an external page, an email or a file. It is also possible to define whether the link should be opened in a new tab or not; note that by default, external links are always set to open in a new tab. It is also possible to set "nofollow" property on the link so that your your link will not affect the target's ranking in the search engine index.
You may add and edit global data directly in the Text Editor. Learn more about how to add Global Data tags here!
1.9.1. How to use Global Data?
After clicking on Globals, a new box will appear with two fields - Global Data Fields Available and Enter a Text. On the first field you can choose from the dropdown menu which Global Data tag you want to add, e.g. [company_name]. A preview of what you have previously defined in the Content area will show in the Enter a Text field. If that data is correct, finish by clicking on Insert; if not, edit it in the Enter a Text field and that will automatically update it everywhere that tag has been used.
1.10. Remove Style
The Text Editor makes it easy for you to style your text elements locally. If later on you want your text to use global styling instead of the local styling simply select the text by highlighting it and click the ‘Remove style’ icon in the text editor toolbar. Then your local styling will disappear.
1.11. Undo and Redo
You can undo and redo your latest actions with the Undo and Redo icons.
1.12. Font Family
Select a font family for your text if you'd like to differentiate this from the global styling already defined. Simply hover over the text, highlight it and select the preferred font family.
Note: The toolbar may show 'None' meaning that you have not styled the text locally and thus the text is styled accordingly to your global styling settings.
1.13. Letter Spacing
Define the spacing between letters (kerning) in your text. Select a predefined spacing or use the slider to define the spacing. To open up the second level of the toolbar click on the arrow on the right hand side of the toolbar and the text editor will expand.
1.14. Line Height
Style the line height by selecting a predefined height or using the slider to define a customized height.
1.15. Font Weight
To highlight your text or emphasize specific text elements, you may style the font by making it bold, light or normal.
It is possible to add a table in your Text Module, with an unlimited number of rows and columns. It is also possible to differentiate styling between the column head and the other cells. Real all about how to create a table here!
1.17. Unordered and Ordered List
You may order your text elements by listing them either in an unordered list or an ordered list. The unordered list orders your items with bullets and the ordered list orders your items by number.
2. Good to know - Extend the Toolbar
By default the toolbar only shows half of the functionalities but by clicking on the arrow on the right hand side of the toolbar it will extend to show all of the features.
3. Global Styling
You may also style the text by using the Global Styling area of the editor. Learn more about Global Styling here.