Visual Editor

Visual Editor is a tool in Dynamicweb empowering the user to create content in a visual way, by having the page as the workplace (3) and then dragging different building blocks – predefined rows (1) and columns (2) – onto it. In this way, the user can immediately see what the finished page would look like in frontend. 

At the bottom of the leftside panel (4) you can Show the page in frontend or Select another page.

You should be aware that the Visual Editor is a tool for creating content in a visual manner – it is not a tool for designing the website and change lots of styles & fine details, this is handled by the design itself.

The Visual Editor function as a special view inside the Dynamicweb administration (backend), available on all pages using a template which has been configured to use the visual editor. In a way you can consider it as an alternative view of the paragraph list we’re all used to work with (Figure 1.2).

Figure 1.2 Swtiching to the Visual Editor

Some basic concepts of the visual editor are illustrated in Figure 1.3:

  • A grid (1) is the overall design of a page – it consists of a collection of rows which can be added via the visual editor
  • A row (2) is a component inside a grid. Rows consist of multiple columns - usually 1-12 – which contain the content
  • A column (3) is a subdivision inside a row - each column can have content which comes from an item-based paragraph
Figure 1.3 Grid, Row & Column

To use the visual editor, your design must be configured for it – which means:

  • You must use the PageViewModel to render content in your master and page templates
  • In the page template, use the Grid-method where you want to render content from the grid

A very simple page template could look like this - please note that the master file referenced must also use the page viewmodel or you will see errors in frontend and inside the visual editior:

RAZOR
@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel> @Title("Grid page template") @MasterPageFile("Master/Main.cshtml") <div class="container"> <div class="row"> <div class="row col-md-12" id="grid"> @Model.Grid("grid", "Grid", "", "GridTest") </div> </div> </div>

As you can see in the API documentation, the Grid-method takes 4 parameters. The last parameter – gridTypeId – refers to a folder which must be named after the type and located under Templates/Designs/[YourDesign]/Grid containing:

  • Row definitions inside a file called RowDefinitions.json
  • Row templates in a /RowTemplates subfolder

The contents of RowDefinitions.json could look like this:

[ { "Id": "2-col", "Name": "2 column row", "ColumnCount": 2, "Template": "6-6column.cshtml", "ItemType": "", "Thumbnail": "/Files/Templates/Designs/Dynamicweb/Grid/GridTest/2columns.png" }, { "Id": "1-col-banner", "Name": "Banner row", "ColumnCount": 1, "Template": "12column.cshtml", "ItemType": "", "Thumbnail": "/Files/Templates/Designs/Dynamicweb/Grid/GridTest/banner.png" }, { "Id": "3-col", "Name": "3 column row", "ColumnCount": 3, "Template": "4-4-4column.cshtml", "ItemType": "", "Thumbnail": "/Files/Templates/Designs/Dynamicweb/Grid/GridTest/3columns.png" }, { "Id": "4-col-quotes", "Name": "Quote row", "ColumnCount": 4, "Template": "Quotes.cshtml", "ItemType": "", "Thumbnail": "/Files/Templates/Designs/Dynamicweb/Grid/GridTest/4columns.png" } ]

As you can see, a row is defined using the following properties:

  • Id – sets a unique identifier
  • Name – sets the display name shown when hovering above the row in the visual editor
  • Template – sets the template used to control the row layout, must refer to a template in the RowTemplates folder for the grid type
  • ColumnCount – sets the number of columns in this row – how exactly they are spaced & shown is controlled using the row template
  • Thumbnail (optional) – sets the image shown for the row in the visual editor row list
  • ItemType (optional) – sets the item type used to extend this row with additional properties, must refer to an item type enabled for Rows

A simple row template could look like this:

RAZOR
@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.GridRowViewModel> <div class="row col-md-12"> <div class="col-md-4"> @Model.Column(1).Output() </div> <div class="col-md-4"> @Model.Column(2).Output() </div> <div class="col-md-4"> @Model.Column(3).Output() </div> </div>

As you can see, you must still use grid-based column definitions befitting the design framework in addition to the ColumnCount parameter.

When the rows & row templates are defined you can open the Visual Editor and drag and drop some rows onto a page (Figure 3.1). The rows are empty, of course – so let’s talk content.

Figure 3.1 A grid

Download an example

You can download a very simple example grid type folder here

For a more advanced example using items please see the Pages row templates in Rapido 3.3+.

Content is created by dragging and dropping columns onto the grid – basically an item-type enabled for paragraphs. All paragraph item types available in the context where the Visual Editor is used will show up in the Columns panel (Figure 4.1).

Figure 4.1 The Columns panel

As soon as you drop a column on a space in the grid, the item type fields will be shown in an edit column view (Figure 4.2) – then you just use the item type like always. For Rapido this use is covered under the Creating content section of the configuration guide – but it is 100% dependent on the content model for a particular design.

Figure 4.2 Adding content to a column

Too many paragraph items?

You can limit the number of item types available in the Visual Editor by making the page itself an item type which only accepts some item types as children, see Rapido 3.3+ for inspiration.

If you hover over an existing column or row, a context menu appears (Figure 5.1).

The context menu can be used for the following, from left to right:

  • Drag the row/column to another place in the grid
  • Edit the row/column content – see below
  • Save row/column as preset – see below (admin & administrator only)
  • Link paragraph or Unlink paragraph (admin & administrator only, not available for rows)
  • Delete the row or underlying paragraph

Instead of a selection of empty item types, you usually want to deliver a set of predefined content blocks – content presets – alongside a design. This has many benefits:

  • It’s much easier to create content by modifying a preset than by starting from scratch
  • The content created will have a better chance of following the visual guidelines and design principles envisioned for a solution
  • Content presets look good and are very marketable

There are two kinds of content presets:

  • Row presets
  • Column presets

Both types of presets can be created by admins or administrators by hovering over an existing row or column and clicking the Save row as template/save column as template button (Figure 6.1).

Figure 6.1 Saving a preset

When clicked, you will be prompted to provide details about the preset (Figure 6.2).

Figure 6.2 Saving a row as a preset

You can:

  • Provide a name
  • Provide  a description (optional and currently not used)
  • Provide an image – this is the image the preset will have in the row or column panel
  • Add the preset to an existing or new category – presets are grouped by category in the row or column panel

Presets are saved to the content tree and can be found under Paragraph templates or Row templates as appropriate – with each category shown as subpages.

To edit a preset:

  • Open the preset category page
  • Right-click the preset and click
    • Edit (column presets)
    • Edit row/Row template settings (row presets)

The row template settings are empty except for a definition, unless an item type enabled for rows has been added to the row definition as described elsewhere in this article.

Both rows and columns are edited by clicking the Edit button in a context menu (Figure 7.1).

Figure 7.1 Editing content

For columns the edit button opens a modal with all the item fields of the underlying item type.

For rows the edit button opens any fields added to the row via an item type – here’s an example from Rapido (Figure 7.2).

Figure 7.2 Row settings come from an item type on the row definition