Edit Mode

Last Updated: Sep 29, 2023
documentation for the dotCMS Content Management System

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.

A screenshot of the Edit Mode view of the dotCMS Demo Site's home page.

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.

A screenshot of the plus-button that populates Containers.

Hovering a cursor over content placed inside a Container will display several buttons at its upper-right corner:

A screenshot of the buttons that appear over content placed in a Container.

ButtonAction
< > (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.
xRemove 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.

A screenshot of the Content Palette seen on the Demo site.

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.

Dialog with choice to content for this page or all pages.

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.

On this page

×

We Dig Feedback

Selected excerpt:

×