Support
Welcome to WalkMe support

Please login in order to continue:

Work flows better with WalkMe
Work flows better with WalkMe.

Design Gallery

Last Updated March 14, 2024
Note

Design Gallery is only relevant for the classic ShoutOuts. For the new ShoutOuts, refer to the Template Gallery.

Brief Overview

Easily create ShoutOuts for different scenarios and update the design of your WalkMe balloons in minutes. The Design Gallery allows you to select pre-designed templates for your balloons and ShoutOuts:

The Design Gallery allows you to make quick and easy edits to balloon and ShoutOut templates. Design Gallery templates are applied from within a ShoutOut or balloon, and can be edited from an app's Interaction menu. The templates can also be customized using the Rich Text Editor and saved for future use.

How It Works

Apply a template by clicking the Change Template link from the Interaction tab of balloons and ShoutOuts. Clicking on the link will open the Gallery of available templates.

Selecting a template will allow you to easily re-use custom designs. The Interaction tab shows a preview of the template selected:

After selecting a template, the design will be applied to the related item. Behind the scenes, the template's custom CSS and BBcode is added to the item in the Rich Text Editor.

CSS

Every balloon and ShoutOut has a local custom CSS console. This enables you to apply a custom template without using the Item ID or entering CSS in the global CSS console.

Once a template is selected, the local CSS will be visible in the custom CSS console. Editing the local CSS (within a balloon or ShoutOut) will update the global CSS as well.

CSS Precedence

CSS rules have different levels of priority depending on where they are set:

  1. Any CSS applied at the local level using the Rich Text Editor will override any other design.
  2. CSS applied in the Customize menu's Balloon tab will be overridden if in conflicts with CSS on the local level.
  3. Finally, design applied through the global CSS console will get applied last.
Tip

You can copy designs in between systems. To do so:

  • Copy the design CSS from one system
  • Move to the other system
  • Open the CSS console of the new balloon
  • Paste the copied CSS into the console and save it as a new design

BBCode

Some templates use BBCode in addition to custom CSS to style a balloon or ShoutOut. BBCode applied by a template overrides any BBCode and text in the balloon before the template was applied. BBCode applied by a template cannot be reverted using the Reset button. Editing a template with BBCode can only be done on the local level.

Was this article helpful?

Thanks for your feedback!

Be part of something bigger.

Engage with peers, ask questions, share ideas

Ask the Community
×