Styling Your Content

Each article in your LiveWeb site is easily editable with the editor toobar. Most styling is controlled via your website tempate, so it isn't necessary to override heading styles or select typefaces. The editor toolbar offers further styling options to make your pages visually interesting. 

Make Edits in the Text Editor

editor toolbarThe editor toolbar appears on all articles and modules

Once the article editor is open, you can:

  • Edit text: Click inside the content area and type to update text.
  • format
    Format content:     Use the dropdown to add paragraphs, create headings, and more.
  • styles 
    Style content:     The Styles dropdown allows you to add template styles to your content.
  • column
    Add columns:      Separate your content into mobile-friendly columns. 
  • links 
    Add links:     Select text and click the link icon to insert a hyperlink.
  • images 
    Insert images:     Click the Insert Image button to upload and add images. You can also add folders and organise media from this window.
  • Screenshot 2026 01 12 at 14.59.47
    Add tables:     Add a ready-made table that will take the styling from your template. 
    • Tips

    - You can switch between 'Editor' and 'Code' tabs to move between visual editor and raw HTML mode if needed. 

    - To add a new line outside your columns, press ALT + Enter for Windows or OPTION + Enter for Mac
    - Quick find and replace text, press Ctrl + F for Window or Command + F for Mac

    Copying & Pasting Content 

    When copying and pasting content from an external source, hidden styling can also be copied that could break visual aspects of your site. You may notice text looks misaligned, has strange spacing, colours, or fonts.

    To avoid this from happening:

    1.  Click the 'Paste as Plain Text' button. This will open a text window.
    2. Paste in the window the text you want to insert. 
    3. The pasted text will now have any extra styles removed and is ready to be styled as needed. 
     Tips

    - Paste as Plain Text, press Ctrl + Shift + V for Window or Cmd + Shift + V for Mac

    Adding Custom Styling Classes

    1. In the editor, scroll to the bottom of the screen to view the element hierarchy.

    2. Click on the element to expand it.

    3. From within the section, click on the specific element you want to edit, e.g. Column.

      This will select the column directly in the editor.

      4. elementsThe element hierachy can be found at the bottom of the article editor window

    4. With the element selected, open the Styles dropdown panel.

      5. styles panelThe styles panel is located at the top of the editor toolbox

    5. Choose the required style from the list — for example, box-style--colour-2.
      styles expanded

    Once selected, the style will be applied immediately, changing the column’s colour (e.g. applying the purple background).

    Adding a Background Image to a Column

    1. In the editor, scroll to the bottom of the screen to view the element hierarchy.
    2. Click on the element to expand it.
    3. From within the section, select the specific Column you want to edit.
    4. With the column selected, click the “AA” (Styles) button in the toolbar.
      style button
    5. Switch to the Background tab.
      style background
    6. Upload or select your image.
    7. Click Apply, then Update to save changes.

     

    Editor View vs Live Website

    view editorEditor view

    view liveLive view

    Content may look slightly different in the editor compared to the live website.

    This is normal, as the editor uses simplified styling while the live site applies full design styles.

    Tips

    Always preview the page on the website after saving to check the final result.