Note: The Page Viewing Modes of yesterday have been superseded by the Universal Visual Editor, which unifies the traditional page-editing tools of Edit Mode with the ability to perform in-context editing headlessly, likewise superseding Edit Mode Anywhere.
Edit Mode provides a back-end user permissioned view of the Page and the content displaying on the page. It allows you to make changes to the Page, such as adding and removing content within Containers, as well as inline editing of the content itself.
In addition, Layout Mode within Edit Mode allows you to change the layout of Containers, shifting to a custom, Page-specific Template layout.
Overview
To view a Page in Edit Mode, start by opening the Page asset to Preview Mode, and then clicking the Edit tab at the top.
Below the viewing mode tabs is a central content pane, displaying the Page's various Containers and the content, widgets, or forms they hold.
On the pane's right side lies the Edit Mode Content Palette, which allows the quick population of Containers.
At the top and rightmost edges of the screen are sets of controls — mode tabs, dropdown selectors, the Workflow “hamburger”, and the four navigation buttons to the right of the Content Palette — described in greater detail in the Page viewing modes overview, and common to all three modes.
Usage
In Edit Mode, each Container displays a “+” button through which you can populate the container with either content, a widget, or a form.
Hovering a cursor over content placed inside a Container will display several buttons at its upper-right corner:
| Button | Action |
|---|---|
< > (Brackets) | Shows a list of VTL files relevant to the Container's contents — including widget code, the VTL responsible for rendering in the case of a File-Based Container, and any others included through the #dotParse directive. |
= (Bars) | Drag this button to reorder content within the container. |
| ✏️ (Pencil) | Click to directly edit the contentlet or widget displayed in the Container. |
x | Remove the contentlet from the container. (This does not delete the contentlet from dotCMS.) |
The Content Palette
Clicking on any displayed Content Type in the Content Palette provides a list of contentlets of that type.
Drag and drop any item from this list to place it into a container. Alternately, you may drag and drop the Content Types themselves to create a new contentlet of that type and immediately place it in the container.
Content Palette Displayed Types
The Content Palette automatically shows all Content Types accepted by the Containers in the Page, as well as up to 100 widget types.
You may optionally exclude Content Types from the Content Palette, even if a Container would otherwise accept them, by assigning a comma-separated list of Content Type variables to the following environment variable (shown below in its default state):
DOT_CONTENT_PALETTE_HIDDEN_CONTENT_TYPES=Host,Vanityurl,Languagevariable,persona,forms
Editing Content as Copy
When selecting the Edit icon above a contentlet, a dialog will prompt the user whether this contentlet should be edited for all pages (default), or the current page only.
If “All Pages” is selected, then edits will be made directly to the contentlet, and will be visible on any other Page containing the content. If “This Page” is selected, the contentlet will be copied, and the copy will replace the original in the current page.
Publishing Changes
Changes made to the Page in Edit Mode are displayed automatically in Preview Mode, so you may switch back and forth between Edit Mode and Preview Mode to review how your changes will display once the Page is published. However, none of the changes made to the Page in Edit Mode are reflected “live” on the Page — either in Live Mode or on the front end of the Site — until the Publish Page button is clicked and/or the content on the Page is individually published.
Once your changes have been published, the Preview Mode and Live Mode displays will be identical.
