Visual Editor

Updated on January 11, 2021 Download PDFDownload as PDF
Download 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!

Please note:

Multi-language is supported

The Visual Editor does not support:

  • Customizing using global or custom CSS
  • Emojis
  • Frameset sites – the content will not be drawn on them

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:


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 ShoutOut with width and height properties.


Adjust the ShoutOut settings by clicking on the cog icon:

Translating Rich Text in Visual Editor

If you would like to translate the rich text in the new Visual Editor for ShoutOuts (not classic ShoutOuts), the process required for this translation slightly varies from what is normally expected. Please see the instructions below for how to translate a portion of this text:
Step 1: Download the associated language .xliff file from your Text & Multi-language section:
Step 2: Unlike a normal field where we are expected to introduce a <target> *text* </target> for the translations, the Rich Text fields are constructed slightly differently and as a result, require a specific method:

  • Refer to the original text –
    •  <trans-unit id=”Type=SO_RCH_TXT, Id=eb49a45d-7f5e-4603-8e57-fe573fbf4cc6″>
    •             <source><![CDATA[<p><strong style=”color: rgb(0, 95, 135); font-family: Arial; font-size: 26px;”>What can I do in View and Markup?</strong></p>]]></source>
  • Copy the entire structure and just modify  the bolded portion:
    •  <target><![CDATA[<p><strong style=”color: rgb(0, 95, 135); font-family: Arial; font-size: 26px;”>translated text goes here</strong></p>]]></target>

Step 3: The end result for a whole field containing both it’s original text and translated text should resemble the example below:

  • <trans-unit id=”Type=SO_RCH_TXT, Id=eb49a45d-7f5e-4603-8e57-fe573fbf4cc6″>
    <source><![CDATA[<p><strong style=”color: rgb(0, 95, 135); font-family: Arial; font-size: 26px;”>What can I do in View and Markup?</strong></p>]]></source>
    <target><![CDATA[<p><strong style=”color: rgb(0, 95, 135); font-family: Arial; font-size: 26px;”>Test?</strong></p>]]></target>

Step 4: Save the updated file in the current folder it is located within, and import it back to the multi-language section onto the relevant language – no error should be experienced if the formatting syntax is identical and only the container was modified.

Was this article helpful?

Related Articles

< Back