Frequently Asked Question

Using the Drag-and-Drop Page Editor
Last Updated 5 months ago

Please note that there is a tutorial/guide available on the screen of the page editor for the new drag-and-drop editor. If you have already read this and would like to use it again, please click on the "?" icon just above the right-hand toolbar on the page. This will give you the option to rerun the tutorial.

Alternatively, below is a short guide on how to use each section of the drag and drop editor.

Adding an element

An element is a section of your website that you can add to and edit in the page editor. This includes (but is not limited to) text boxes, headers, images, forms, banners, and even structural things such as columns. You can add as many elements to your page as required. First, go to the sidebar on the right of the page. This is where you can find all the elements you can add to your page. To add an element, click on it and drag it to where you would like to place it on your page.

image


Moving an element

You can move the element by clicking on it and dragging it to another position. You can also use the drag arrows in the tool bar.

image


Editing an element

To edit an element you can either double click on it or click the pencil icon to enable text editing. Once you have clicked on an element, you can edit the settings for it in the sidebar to the right.

image


Editing text

Whilst editing text, you can use the toolbar for basic editing functions like text alignment, bold etc.

image


Adding styles

Click the paintbrush button to create a new element from your highlighted text, and use the sidebar to add new styles for the selected text.

image


Adding links

Click the link button to create a link from the text you highlighted. You can then edit the details of this link in the sidebar.

image

Alternatively, you can turn a whole element into a link using the link button in this toolbar.

image


Settings

Once you have selected an element, you can change various settings in the sidebar depending on what you have chosen.

image


Adding new elements

Click the "+" button above the right sidebar to switch back to adding new elements.

image

Create a blank page.

If you wish to clear all elements and design on the page, you can click this button to remove all elements to start fresh.

image


Loading a page template

You can use this button to load a new page template (such as About Us or Contact) to replace the current page content.

image


Switch User Devices

You can easily switch between desktop, tablet and mobile view to see how your page will look on different devices by clicking on the device icons. Any style changes you make will only apply to that size device and smaller (eg desktop changes always apply, and tablet changes will also affect mobile).

image


Commands

Using these buttons, you can enable/disable outlines to help visualise your layout, go to fullscreen mode, undo/redo, import HTML, clear the canvas and view or edit the code for your page.

image


Basic Editor

If you previously used our basic Page Editor and would like to continue, you can revert to it by clicking here.

image

Please Wait!

Please wait... it will take a second!