Website Editor – Hints and Tips

Structure of the editor page

Depending upon how you last had the editor open, you may see it slightly differently when you open it the next time. Additionally if using it on different devices, e.g. a laptop and a phone, it may look different, as your browser is attempting to make best use of the space available.

Fundamentally, the editor has three “columns”:

Left-hand side navigator
  • This shows the structure of the post or page you’re editing as you build up the blocks, e.g. headings, paragraphs, columns, images, videos, etc.
  • You can toggle it on and off using the icon towards the top left that looks like three horizontal lines arranged like a set of steps.
  • You cannot adjust the width of this navigator at this time.
  • This navigator can be very useful in managing the structure of your post or page, for example if you want to reorder you paragraphs, you can simply select and move them in the navigator. No need for cutting and pasting.
The editor pane itself
  • This is where you enter and edit your content.
Right-hand side navigator
  • This made up of a series of widgets, which you can expand or collapse to see their content.
  • You can toggle it on and off using the icon that looks like a box divided into two columns, with the left one being twice the width of the right one.
  • You can adjust the width of this navigator by selecting the horizontal dividing line and moving it left or right.
  • It is very important to note that this navigator has two tabs:
    • Page or Post – Depending upon the type of artefact you’re creating, which will mostly be Posts. This tab has the widgets that define attributes for the entrie page or post you’re working on. For example, this is where you’ll find the widgets to assign a category, add a featured image, etc.
    • Block – This tab has the widgets for controlling the attributes for the block: heading, paragraph, column, image, video, etc. that you have selected in the editor pane at that moment.

The featured image

Featured images are very important when it comes to posts and events. Not so much for pages.

The reason for this is that posts and events can be displayed in list or grid views, where you want something eye-catching to draw the reader’s attention to your post or event.

Typically, due to the formatting of the list or grid view, smaller versions of images, know as thumbnails are used. Additionally they are typically forced to be a specific height and / or width, so that they page they’re diaplyed on looks neatly organised.

The images used for these list / grid views are known as featured images, and are set using a specific widget called “Featured image”, typically in the right-hand navigator of the editor view.

You are at liberty to also use the image within your post or event description, but you must specifically build it into your content to control how you want it to be displayed amongst the rest of your content.

In the “Featured image” widget, you’ll notice a checkbox where it says “Show featured image in the posts lists only, but hide it in the single post view”. It is essential that you check that box. If you don’t, your image will be displayed full size across the top of your post or event, completely messing up the formatting.

Scroll to Top