Editing pages

Use the Pages app to create and edit pages on a Magnolia author instance. When you are done editing, publish the changes to public instances.

Toolbars

Green toolbars identify editable page elements:

• Page bar allows you to choose a content entry language.
  
• Area bars are containers. Click the bar to add a component in the area.
  
• Component bars allow you to edit and move page components.
  

A dark green toolbar shows which element currently has the focus.

• In a freshly opened page all toolbars are light green. Nothing is selected so nothing is in focus.
  
• When you click an area it gets the focus. The area bar turns dark green.
  
• When you click a component bar it gets the focus. The component bar turns dark green. The parent area is now light green.
  

Templates

Pages are based on templates. A template gives the page structure which is important for presenting content in the right order and building a consistent looking site. A template defines what components editors can create, edit and move on the page. They also define how many components are allowed in a particular area of the page. Without a template it would be difficult to keep the site design consistent. See Templating for more.

Example: Choosing a template for a new page 

Components

Component is the smallest blocks of editable content. At its simplest, a component consists of a heading and some text but can contain almost anything.

• To add a component, select an area first and click Add component in the action bar.
• To duplicate a component, select it and click Duplicate component in the action bar.
• To move a component, drag it above another component in the same area.
• To delete a component, select it and click Delete component in the action bar.

Example: Adding a new component.

Dialogs

In Magnolia, you edit content in a dialog. A dialog typically contains a form. Editors type content into the form fields and the dialog stores the content in the repository. You can create your own dialogs.

Example: Editing a text and image component in a dialog.

Previewing pages

Click Preview page to see how the page looks like without toolbars. Use the dropdown in the page bar to switch between desktop, tablet or smartphone.

Preview in a separate tab

  Magnolia 5.4.9+  The Pages app provides a link on the page bar to open the current page in a new tab showing it not surrounded by the page editor.

 => 

Publication status

The page editor displays the publication status in the status bar at the bottom of the screen and on each component that has changed:

• Published (green, solid): Content was published from the author instance to the public instance. Identical content exists on both instances.
•  Modified (yellow/amber, two rings): Content was modified since publication. The author instance is not in sync with the public.
•  Unpublished (red, one ring): Content exists only on the author instance. It was never published.

Editing with a touch device

Touch devices such as tablets are first-class citizens in Magnolia. You can use a touch device for all editorial tasks such as managing and editing pages, and most administration tasks. See Certified stack for browser compatibility.

Example: Managing pages in a tablet.

Example: Editing a page in a tablet