Introduction

Visual Editor lets you edit the content of a site separately from the code and instantly see the results.

You can now access Visual Editor under CMS/Pages. Simply select the Page you'd like to edit from the list and click the "Visual Editor" tab. We've made this move so that the Page Builder and Visual Editor tabs sit side by side and you can switch easily between the two tools as it suits you.

Visual Editor works best when your browser is on its default zoom setting.

Editing Text

Once you've opened the tab, you can get started straight away. Select the text you would like to edit and the selected Section will be outlined in blue. You can delete, edit and add text, inlcuding new lines using your keyboard.

Keep an eye on how the layout looks with different lengths of text, and pick what works for you.

The Toolbar

The Toolbar will display at the top of the active Section. Experiment with the different tools available to see their effects instantly.

For best practice and ease of use, we recommend the styling tools in the Toolbar are used sparingly for inline styles, or in other words, groups of words that need to be emphasised. Site-wide styles are most easily set by a developer in the page's CSS file.

  • Bold - Toggles bold tags around the selected text.
  • Italics- Toggles italic tags around the selected text.
  • Hyperlink - The "text" parameter is the text visible on the clickable link- it will be filled in by default. In the Url field, you can add either a relative link to one of your pages e.g. /about or an absolute link to an external site e.g. https://www.siteglide.com/. You can also control whether the link will open in a new window (default is the current window) and add a title to make your link more accessible.
  • Align - The selected Section will change its alignment. The options are left, center, right and full (which spaces out content as much as possible to fill the container).
  • Color - Set either the color or background-color of the selected text. Selecting a color from the palate will reveal more shades of the same hue.
  • Paragraph - Switch between paragraph and different levels of heading. Best practice avoids more than one Heading 1 in the page.
  • Font - Provides a selection of fonts from https://fonts.google.com/ A quick note on performance- for each font you use, the page will load the entire font- not just the characters you use. Use this tool carefully to keep a fast page speed.
  • Formatting - Provides a range of formatting options
  • List - Add a list¬†
  • Text Settings - Set the font-size, line-height or letter-spacing.
  • Image - There are three ways to add an image, drag-and drop, click to browse your device or enter the absolute URL of an image you have rights to on the web.

Editing Images

Clicking on an image opens a secondary Toolbar in the top-right hand side of the image and gives you three options.

  • Change Image - Select a different image from your device.
  • Link - You can make this image a clickable hyperlink. The first field "Source" will show the path to the image that is used. Add a title for accessibilty and a link.
  • Edit - This will allow you to crop the image. If you want to undo this, use change image to re-upload the original.

Background images are not currently supported in Visual Editor. They can be edited in the Page Builder view. 

Did this answer your question?