Visual Editor

Updated on May 6, 2020 Download as PDF

Brief Overview

Customizing ShoutOuts has gotten much easier with the help of the Visual Editor. Create beautiful designs without the need for CSS. Giving you easy control when creating and designing Shoutouts, with capabilities like:

• Drag and drop
• Add buttons, paragraphs, shapes, images
• Manage canvas layers
• Change alignment
• Rich text editing
• Dynamic text

For more information on ShoutOuts, see the dedicated ShoutOuts article here!

Below are further details about the options available to further customize your ShoutOut using the different Visual Editor tabs:

Top Bar

Select Screen resolution, Zoom level and Undo / Redo for any editing action (also supported by Keyboard shortcuts)

Add and Delete Objects

To add new items to your ShoutOut, Click the ADD NEW OBJECT Plus Icon and drag an object into the desired location. Once in place, you can edit the shape, contents, and location, and more. Selecting an object in the objects tree will select and indicate that object within the ShoutOut.

To delete an object from your ShoutOut, simply click on the object in the objects menu, and click on the trash can icon:

Alternatively, select your object directly from within the ShoutOut preview display and click on the side menu:

Format

When selecting a specific object within your ShoutOut, (text box, image, etc) the FORMAT tab provides you with a range of formatting options, specific to that selected object. Including the following capabilities and more:

• Changing the ShoutOut Canvas color, opacity, and corner radius.
• Adding a border to the ShoutOut and adjusting the width or the border.
• Text direction (left to right by default)
• Change font style, size, color, and height.
• Formatting text to bold, italic or underlined.
• Adjust the alignment of text from the center, left or right.

Close Button

Show or hide a close button on your ShoutOut:

Screen Overlay

Here you can decide to have a screen overlay behind your ShouOut, and you can set the Color and Opacity of your Screen Overlay.

Size & Position

Select where ShoutOut appears on the screen by choosing its position on the screen, either manually or automatic (default setting).

Adjust the size of your ShouOut with width and height properties.

Settings

Adjust the ShoutOut settings by clicking on the cog icon:

Translating Rich Text in Visual Editor