We’re here to help! Email us here.

Tutorials

loading...

The New Text Widget

We introduced the new and improved Text Widget into our Sitebuilder in 2014.  The new Text Widget is slicker and has simpler functions to format your text on your site.
 
Please note that, if you signed up with Yola prior to us releasing the new Text Widget, you will have access to both the new and old Text Widget - the choice is yours!  You will see the old Text Widget is labelled Text (old) in the Widgets tab.
 

Accessing the Text Widget

 
To use the Text Widget:
  1. Open the site in the Sitebuilder.
  2. Go to Widgets > Popular > Text.
  3. Drag and drop the Text Widget onto your page where you would like to add the text.
  4. The Text Widget will open up and you can type or paste text into the text area.
The most important feature of the Text Widget, is the Text Editing Toolbar.  It appears at the top of the page when the cursor is inside the Text Widget and looks similar to a toolbar that you might find on a Word Processing program, for example, Microsoft Word.  When you hover the cursor over any of the icons, the descriptive name of the icon appears below it to give you a hint of what it does when you click on it.
 

Using the features of the Text Editing Toolbar:


 

Undo / Redo

You can undo any text that you have added to the Text Widget.  For example, if you have deleted text that you want to re-add, then use the left-pointing arrow.
 
If you decide that something you’ve undone should be reversed, use the right-pointing arrow.  The “Redo” button adds back any text that had just been deleted.
 
These two arrows are an easy way to quickly remove or re-add any text quickly.

 

Make text bold

Highlight the text that you want to make bold and click on the B.  The highlighted text will become bold.
 

Italicize text

Italicize any text that is highlighted when you click on this icon.

 

Add links to text

Links in text are a great way to enhance the usability of the information on your site and makes it interactive for your web visitors.  More importantly, links help make your site more visible to search engines and will greatly improve your site’s SEO, if used correctly.  There are many articles on the web that will give you information about how to use links effectively and legitimately on your site which you may want to research in more detail.
 
To add links, highlight the text and click on the link icon.  This will open up the Link Editor and allow you to add a link in a number of ways.  Take a look at this tutorial for specific details about adding links : I want to add links to other sites, how do I do that? 


Text alignment

The options to align the text on your site are Left, Center or Right.  Each alignment option has it's own icon.  If you want to change the text's alignment, highlight it and click on on of the icons.  You will see the text adjust to the new alignment you have chosen.


Format paragraph text

The formatting is set up in the Style Designer.  Take a look at The Style Designer tutorial for steps on how to format the fonts and text styles.
 
To change the formatting of a paragraph of text, place the cursor anywhere in the paragraph.  When you click on the “Paragraph” button in the Text Editing Toolbar, you have the following options in the drop-down list:
  • Paragraph” is the default setting.  It takes the default text from the Style Designer’s paragraph settings.  You can use this option when you have changed the paragraph to one of the other settings and want to change it back to the normal text.
  • The other options, Heading 2 to Heading 6, changes the paragraph’s font to the settings that was set up in the Style Designer.  See the link above to see how to set up the Heading fonts.


Format a Blockquote

The Blockquote icon is shown as an inverted double comma.  Block quotes are used when quoting a specific piece of text and makes the paragraph stand out.  You can read more about it’s usage here : Block quotation.
 
To use the Blockquote, place the cursor anywhere in the paragraph and click on the icon in the Text Editing Toolbar.  You will notice the following changes to the text:
  • The paragraph indents automatically to the right
  • There is a vertical line to the left of the text.  
  • The text becomes italicized.
This tells your reader that the paragraph is a quotation.

Add a bulleted list of items

The bulleted list feature allows you to create a list of text with bullet points.  To use it, highlight text and click on the link.  This will add a bullet in front of the selected text and indent it.
 
To remove the bullet, place the cursor anywhere in the text on the bullet item and click on the Bulleted List icon again.
 
Placing the cursor at the end of a sentence that is part of a bullet point, will make the next sentence a new bullet point.

Add a numbered list

The numbered list - allows you to create a list of numbered items.  It functions in the same way as the Bulleted List (above), except that numbers will be displayed at the beginning of each point.

Indenting and Outdenting text

  • Indenting allows you to shift a paragraph of text so that it is not left aligned with the rest of the text on the page.
  • Outdenting moves an indented paragraph back to the original position before it was indented.
 

Adding a Picture

You can add a picture inside the Text Widget if you want it to form part of the text instead of using a Picture Widget.  For more options for adding pictures to your site, please see the How do I add pictures to my site? tutorial.
 
To add a picture in a Text Widget:
  1. Place the cursor where you would like to add the picture.
  2. Click on the the “Image” icon - it looks like a picture in a frame, on the Text Editing Toolbar.
  3. A screen will open up with a few ways in which to add a picture:
    • Upload a new images from your computer.
    • Use a picture that you have already added to your site.  Browse Uploaded Image.
    • Find Stock Images from a wide selection of pictures from the Fotolia Image Library for a professional look.
  4. Follow the steps to add the picture to your site, depending on which option you selected.  This will place the picture in the Text Widget.
 
Resizing the picture
You can adjust the size of the picture if needed.  Here’s how:
  1. Click on the picture. This will show the “handles” - the white blocks at the picture’s corners and along the sides and top.
  2. Click on any of the “handles” and drag it to make it smaller or larger.  The text will move to accommodate the change in size of the picture.
 

Wrapping text around the picture

You may want to wrap the text around the picture.  Follow the steps below to wrap the text : 
  1. Click on the picture.  This will highlight it.
  2. In the Text Editing Toolbar, you will see two icons to the right of the Image icon.  These will not be highlighted if you have not clicked on the picture.
    • Click on the “Float Left” icon to place the picture to the left.  The text below it will move to the right of the picture.
    •  Click “Float Right” to put the picture on the right and the text on the left.


Removing Text Formatting on a picture

To remove the text wrapping, click on the slanted Tx icon.  This feature places the text and picture on separate lines in the text so that it is not wrapped.
 

Formatting and styling the text

This feature allows you to style the text, fonts and layout of the site in the Style Designer.  See the Style Designer tutorial for specific details on using this feature.
 
 

Pasting text into the Text Widget

The new Text Widget allows you to paste text from anywhere, into your site.  It will strip out any formatting from other sources, allowing you to use the Text Editing Toolbar in the Text Widget, as well as the Style Designer, to format your text.