This tutorial shows how to create a new text element by selecting a styled on from a list of text templates.
Click on this button on the toolbar or select "Insert" > "Text From Templates" from the main menu. The following dialog will be opened.
Select one from a list of text templates. We choose the following one as an example.
To replace the image used by the template, you can select the option "Image" and choose one from the drop down menu in your website. The size of the image used by the template is shown at the bottom of the sample. You can use one with similar size. The template has a preset font for demonstration. If you want it to use the font already defined on your page, select the option "Use font family defined on the page". If the selected template supports adding shadow around the text element, you can select the option "Add shadow around element" to add a shadow around it. The look of the shadow can be customized later by changing the corresponding CSS style. Press the OK button to insert the text element.
The selected text element will be inserted on the page like the following. To change the text, double-click on the text element and open it in the Text Element Editor. Please note that rounded corner effect can only be seen when it is previewed in browsers.
As CSS styles are applied to the element, it is not so convenient for editing. Click on this button on the toolbar to disable the styles and this one to show heading and paragraph tags. It will look like below. You may like to start the text element editor with these two buttons turned on by default. Select "Tools" > "Preferences" from the main menu. Click on the item "Text Element Editor" and select the options on the right.
Then change the sample text to your own text. Double-click on the image and select another one to replace it. Double-click on the link and change the text of the link and also the link itself.
The CSS styles that are applied to the text elements are shown on the "CSS Styles" panel on the left when the text element is selected. To change them like the text color of headings and paragraph etc, you can double-click on the styles and change the corresponding values. For example, to change the text color of heading 3, double-click on the style "tt1-text-h3". Then change the color there as shown on the screen shot below. Other styles can be changed in similar way.
As there are several tabs for each style, you do not need to go through each of them to see if there are settings made. Just check out the name of the tab. The one with an asterisk before the name have values that are set.
To create another text element with similar styles, just copy the text element and paste it on the page. Then change the contents. For any styles that they do not share, duplicate them and replaced the copied styles with the new ones. For example, if only the color of heading 3 needs to be changed, duplicate the style "tt1-text-h3" and give it another name such as "tt2-text-h3". Replace the style "tt1-text-h3" of the copied text element with this one "tt2-text-h3". Use the same approach for any styles that they do not share. The CSS styles of these elements can also be applied to your existing text elements if they have the same content structure: an image followed by a heading 3 and then a paragraph and a link. Just use "Copy Style" and "Paste Style (Replace)" from the context menu to apply the styles to the existing text elements.
on the toolbar or select "Insert" > "Text From Templates" from the main menu. The following dialog will be opened.
on the toolbar to disable the styles and this one 
to show heading and paragraph tags. It will look like below. You may like to start the text element editor with these two buttons turned on by default. Select "Tools" > "Preferences" from the main menu. Click on the item "Text Element Editor" and select the options on the right.
