The drag-drop editor is one of the three main content editors available in the system, it allows you to create complex grid-based layouts using images, text and other media and reformats content automatically for viewing on mobile.
The editor uses rows of snippet 'blocks' - blocks of pre-formatted content that are used to build your page.
Snippet blocks are blocks of preformatted content that you can add, copy and move around the page. The blocks are made up of a Row element with Columns of content within it. There can be up to 8 columns within a row. Snippet blocks are not fixed in size, you can alter the appearance of a snippet block once it has been added to the page.
Columns can be set to different widths and you can add additional columns or take them away with the column tools that show when you hover over a column.
If you have formatted a snippet block with certain font sizes, colours or styling you can duplicate the existing block if you want to reuse it.
If you want to change the order the snippets appear in vertically you can drag-drop reorder their sequence when editing a page.
A selection of snippet blocks, including image sliders, enquiry forms, images and text, images with captions
Once the content laid out on the page, change out the text and images with your own content.
You can add Heading snippets, Heading 1, Heading 2, Heading 3 as new snippets or restyle existing paragraph text by highlighing the text with your mouse, and the choosing the H icon from the toolbar.
Hover over any image in the page to bring up the image options icons.
Clicking into text will highlight the top toolbar. Highlight some text with your mouse and then choose an option to change the text.
The row toolbar allows you to move, edit the snippet block as a whole.
Green 4-way Arrow Icon - Move Snippet Block Vertically, or align horizontally if no max-width.
Blue Code Icon - View HTML
Red Cog Icon - Launch Style Editor Popup
Blue Pallete Icon - Launch Colour Popup
Grey Plus Icon - Duplicate Snippet
Orange X Icon - Delete Snippet
With the Column tools you can move and change the size and number of columns.
Green 4-way Arrow Icon - Drag-drop move column left/right, or to another snippet
Grey Plus Icon - Duplicate column
Orange X Icon - Delete column
Light Blue Line - Click-drag to resize column
Clicking into any existing snippet block will bring up the green + Add Snippet Block button. Clicking this button will bring up a popup window with a range of preset snippets available to add. Click the required snippet to add to the page and edit.
You can scroll down the list of default snippets using the scrollbar to the right hand side of the sidebar.
Click the > tab to hide snippet sidebar.
More snippets are available by clicking the Snippets.. dropdown at the top of the sidebar. Clicking the dropdown will show a list of categories, which will give you more layout options in each category.
You can enable a distraction-free mode that hides the column and section icons temporarily, this can be enabled/disabled by double-clicking the mouse when editing content.
The distraction-free mode can make it easier to edit small column content, allow you to edit link text that is below the button, or focus on editing text removing the ability to accidentally click buttons.