Getting Started with Editor

 

In this guide:

1. Editor the tool and Editor the role
2. Opening an experience as an Editor
3. Opening an experience as an Owner or Creator
4. Editor basics
5. Editing text and images
6. Publishing
7. Adaptive layouts
8. Keyboard shortcuts

 

Editor the tool and Editor the role

There are two sides to the same Ceros Editor coin. Both are equally important and necessary when editing experiences.

 

Editor the tool:

The Editor is a Studio add-on that allows any Ceros user to simply and quickly make edits to an experience without the risk of changing the original design. With Editor, users can modify text, swap out images, and publish experiences without even opening the Studio.

 

Editor the role:

The Editor role is a new role within Ceros’s roles and permissions. Team members that would fit well in the Editor role could include:

• Marketing managers,
• Email marketing specialists,
• Campaign managers,
• Copywriters,
• or anyone else looking to make quick edits to a Ceros experience

 

Opening an experience as an Editor

Though Owners and Creators can use the Editor product, team members in the Editor role do not have Studio access. To open an experience as an Editor:

1. Sign in to your Ceros account
2. Open a project in the Ceros Admin
3. Click on the experience you would like to edit
4. The experience will then automatically open in Editor

 

Opening an experience as an Owner or Creator

Owners and Creators open experiences in Editor a little differently than Editors; since those roles have access to Studio and Editor, they need to:

1. Sign in to your Ceros account
2. Open a project in the Ceros Admin
3. Click on the menu icon in the bottom right corner of an experience thumbnail
4. Select "Open in Editor"

 

Editor basics

Editor provides in-context editing for almost any Ceros content. Its simple interface is designed to allow a broad set of users to actively contribute to the creation process. Moreover, any changes you make will be automatically saved in the experience. Editor’s ease of use stems from its two simple modes:

Browse mode:

Navigate, interact, and engage with the experience, similarly to the Studio’s Preview mode.

Edit mode:

Change text and replace or alter images within an experience.

Editors can easily switch between modes by clicking on the toggle in the top bar or by pressing the spacebar.

 

Editing text and images

All text and image components are editable by default. Editable components are marked with a blue box and a text or image tag. At this time, Editors are not able to edit synced objects; we are working hard to support synced objects soon!

 

*Note that a Creator is able to control the edit-ability of certain elements (or the entire experience) via the Studio.

 

Editing text:

To edit text, click on any textbox within the experience and start typing. It’s important to note that editors can’t resize or reposition textboxes, so keep that in mind as you decide on the content you’d like to add to the textbox. 

To edit the font’s style and family, click on the dropdown to see the options. Note that not all font styles (bold, italic, etc.) will necessarily be available for every font family. Font style options are dependent on how a font family is configured in the Studio.

In addition to editing a textbox’s content, you’ll also be able to change the content’s color. However, keep in mind that you’ll be limited to the colors already being used in the textbox, as well as the experience colors set by the Creator.

You’ll also be able to edit the text’s size, add or remove underlining, and add or remove text links. When adding a text link, you'll need to specify whether or not you want the link to open in a new window.

 

*Quick Tip: If text is not currently editable within Editor, please ensure that your experience's Text Rendering Mode is set to Component within the Performance options inside the Studio's Settings panel.

 

 

Editing images:

Editors can edit images by replacing, cropping, and scaling them.

To replace an image:

1. Select the image you want to replace
2. Click the “Replace” icon on the image toolbar
3. Select the image you’d like to replace the original with

Note that this image will need to be the same size or larger than the original image. Additionally, the replacement image will be automatically cropped and sized according to the original image's dimensions.

To crop and scale an image:

1. Select the image to crop/scale while viewing the experience in "Edit" mode within Editor.
2. Select "Crop and Scale" from the image toolbar
3. Images can be scaled with the scaling slider that will appear. This scaling slider can be moved around the page if needed.
4. You can move the image within the crop frame to position it as needed.

For more information about this tool, please refer to the Editor - Image Crop and Scale guide.

 

To add/ change an Alt Tag to an image:

1. Select the image you want to add the alt tag to
2. Click on the “Alt Tag” icon on the image toolbar
3. Type the alt tag text into the popup window

You can also use the "Undo" and "Redo" buttons for editing text and replacing images. Note that you can only edit your own changes–not another user’s.

 

Editing hidden content:

By default, hidden content will not be visible or editable when opening an experience in Editor. To edit hidden content:

1. Enter Browse mode
2. Prompt the hidden content to make it visible
3. Return to Edit mode
4. Make the edits

It’s important to note that overlapping text and/or image components can be selected for editing by right-clicking while in Edit mode.

 

Publishing

After you’ve finished making changes, you can publish the experience just like in the Studio using the "Publish" button.

 

Adaptive Layouts

Adaptive layouts can be accessed via the button on the top right of Editor. If the variant has a pencil icon next to it, the Creator has created a specific design for that device variant.

Like in the regular desktop mode, you can toggle between Browse and Edit modes to bring about hidden content. All changes made in Edit mode will carry over into Browse mode using adaptive layouts. Similarly, all changes made in the Editor will be viewable in the Studio and updated in real-time. Editor also supports synced text across all devices.

Browse and Edit modes are functional across all adaptive layouts: Desktop, Tablet, and Mobile. When you select a layout, the screen will update to preview what the experience looks like in that view. 

In Browse mode, all interactions, animations, and object states are enabled. In Edit mode, only On-View interactions that trigger show or hide actions are enabled; hover and click interactions are disabled. 

 

Keyboard shortcuts

When you first launch the Editor, you will see the below callout for keyboard shortcuts displayed on your screen.

Important callouts to remember:

1. Press the spacebar to toggle between Edit and Browse modes
2. Right-Click to select from layered objects
3. Press the Control key to quickly see which layers are editable
4. Use cmd/ctrl + Z to undo edits
5. Use cmd/ctrl + shift + Z to redo rolled-back edits