Visual Editor

When using the Visual Editor you drag and drop predefined rows (1) and columns (2) to the content editor area (3) (Figure 1.1). It makes creating and maintaining your website easy, intuitive and visual.

Figure 1.1 Visual Editor example

At the bottom of the the left side panel (4) you can: 

  • Show the page in frontend
  • Open a responsive preview
  • Select another page

To access the Visual Editor interface for a page, navigate to the page in the backend and click Visual Editor in the ribbon bar (Figure 1.3).

Figure 1.3 Access Visual Editor

When using the Visual Editor there are some basic components (Figure 2.1) you should be familiar with - they are: 

  • Rows (1)
  • Columns (2)
Figure 2.1 Rows & Columns
  • Rows are components that decide the number and layout of columns before content is added. A row can consist of multiple columns which contain content. 
  • Columns are subdivisions of a row – a row contains between 1 and 4 columns, based on the familiar Bootstrap 12-column grid system.

You can add new rows & content to a page by dragging objects from the left-side panel and onto the page – Swift comes with the following default content objects:

  • A set of empty rows for creating the content grid
  • A set of empty column types for creating content from scratch
  • A set of row and column presets – preconfigured pieces of content which can be used as templates for creating content.

When you drop an empty column type onto a column slot you will be presented with a modal which contains the input fields and settings relevant for that particular type of content – for the column type Text this is a title, a subtitle, a text, a button label and a number of settings for controlling e.g. the layout and styling of the content block (Figure 2.2). When you click OK the content is immediately added to the visual editor view and you can see how it will look in frontend.

Figure 2.2 Creating content

When you drop a preset onto a row or column slot the preset is simply added as is – you can then use the built-in edit tools to modify the content, see below.

Both rows and columns can be edited by clicking the Edit button in a context menu (Figure 3.1).

Figure 3.1 Edit rows or columns in context menu

Editing a row opens the row settings which are used to control e.g. the width or the space between columns. Editing a column opens the configuration options for the specific column type. You can also use the context menu to:

  • Drag the row/column elsewhere
  • Save the column as a template (aka. a preset)
  • Delete the column/row
  • Link/Unlink paragraph (admin & administrator only)