Designing Dynamic Layout ShoutOuts

Objective

After completing this lesson, you will be able to explore the Dynamic Layout Design feature for designing ShoutOuts.

Dynamic Layout ShoutOut Design

Recall that ShoutOuts are designed to draw your user’s attention. ShoutOuts can be built with an action button that will launch another WalkMe item with just one click.

The action button can start a Smart Walk-Thru, play a video or access an article through a Resource, activate a Shuttle to another page, or open the Player Menu.

In this section, we will discuss the Dynamic Layout for designing ShoutOuts that is available in the Visual Designer.

Dynamic Layout provides more freedom and flexibility when designing and allows you to:

  • Designfully responsive ShoutOuts - adapt to the size of the screen.
  • Maintain consistent designs among different builders.
  • Create pixel perfect ShoutOuts faster.
  • Support multiple languages due to the responsiveness and adaptability.

The image shows a welcome interface with WalkMe introductory and dashboard tour options.

The image shows three sections of a welcome interface featuring a product tour, dashboard updates, and an introduction to WalkMe displaying cartoon characters interacting with tech devices on a dark blue background.
Divider

ShoutOut Theme Gallery

You can select a theme marked with a Dynamic label from the ShoutOut Theme Gallery as a starting template for your Dynamic Layout ShoutOut.

The ShoutOut Visual Designer will allow you to further customize your selection later on.

The image shows the overview of a ShoutOut theme gallery.

A screenshot displaying various dynamic themes from the ShoutOut Theme Gallery, including templates for Product Tutorial, Version Update, Welcome Tutorial, Popup, Updates, and Privacy, with a prompt to customize each theme.
Divider

The Dynamic Layout of a ShoutOut consists of 3 layers:

  1. Canvas – the body of the ShoutOut which gives an idea of how it will look on screen. Frames and widgets can be added to the canvas.
  2. Frame – a designated space on the canvas that can be moved around and designed. Widgets can be added inside the frame.
  3. Widget – an element inside the frame. Types of widgets: Text, Image, Button, Line, Webview.

The image shows notification for privacy practices.

In the Dynamic Layout, the Canvas is highlighted in green, Frames are highlighted in pink, and Widgets are highlighted in blue.

Log in to track your progress & complete quizzes