Exploring Dynamic Layout Components

Objective

After completing this lesson, you will be able to explore the three layers of the Dynamic Layout of a ShoutOut.

Canvas

Styling

From the Styling tab, you can adjust the Corner Radius, Fill Color, Border Width, and Border Color.

You can also enable the Overlay and adjust the color. The Overlay is a semi-transparent layer that appears over the site while the ShoutOut is displayed.

The image shows a new dashboard interface update.

Interface section showcasing the new dashboard design with elements for navigation, notifications, and design adjustments.

Layout

Similar to ShoutOuts in Builder I, the position on the screen can be adjusted by selecting the section of the screen in the diagram in the right panel where you'd like the ShoutOut to appear. In addition, a custom position can also be set.

Watch the video to know more. Note that the video does not support audio.

Width

The width of the ShoutOut can be changed by stretching it directly from the Canvas or adjusting the value manually in the right panel.

The height will automatically adjust based on the amount of content.

Watch the video to know more. Note that the video does not support audio.

Note

Only the width of the Canvas can be resized. The height can be adjusted only by removing Frames or Widgets from the Canvas.

Inner Spacing

You can adjust the distance between the outer edge of the Canvas and the Frames inside the Canvas. The green highlighted portion indicates the size of the inner spacing.

By default, the same distance is set for each side. To apply a different value to one of the sides, click on the square borders icon to the right of the field.

When one of the sides has different value than the rest, the word "Mixed" will appear in the main field.

The image shows a canvas inner spacing configuration.

In this example, the spacing is 20px (pixels) on each side surrounding the two Frames highlighted in pink.
Z-Index

By default, WalkMe displays your item on top of all other elements. However, there may be scenarios where you want your ShoutOut to appear behind another element.

You can control the layer order by setting the Z-index value of the item. Keep in mind, the higher the Z-index value, the higher the item will be in layer order of the elements of your site.

The image shows adjusting overlay order with Z-index in WalkMe.

WalkMe interface for setting Z-index to control display order of a ShoutOut behind or in front of other site elements, showing an upgrade prompt with rocket icon.

Frame

Styling

Like the Canvas, from the Frame's Styling tab, you can also adjust the Corner Radius, Fill Color, Border Width, and Border Color for each Frame.

The image shows the frame styling adjustment panel.

A design interface showing options to customize frame styling, including corner radius, fill color, border width, and border color, alongside an Upgrade to the latest version notification.

Layout

Horizontal Alignment

You can align Widgets within the Frame either horizontally or vertically.

In the video, we are aligning the Widgets within the highlighted Frame horizontally.

Notice that the small text Widget in the center does not move. Because this Widget spans the entire width of the Frame, it cannot be moved.

Only Widgets that have a smaller width than the Frame are able to be aligned horizontally.

You can check a Widget's size relative to the Frame by hovering it and seeing the dark blue outline.

The video shows the options for what will occur once the Action button is clicked in the ShoutOut.

Watch the video to know more. Note that the video does not support audio.

Vertical Alignment

In the video, we're aligning the Widgets within the center Frame vertically.

Because the Widgets in the center Frame do not span the height of the Frame, we are able to align the Widgets vertically within the frame.

Only Widgets that have a smaller height than the Frame are able to be aligned vertically.

In the leftmost Frame, for example, we would not be able to align the Widgets vertically because the text is longer and takes up all the available height of the Frame.

Watch the video to know more. Note that the video does not support audio.

Inner Spacing

The distance between the sides of the frame and the widgets can be adjusted. Select the Frame and set the default distance for all the sides, or click on the borders icon – and control each side individually.

If one side has a different distance, the field will say "Mixed".

Watch the video to know more. Note that the video does not support audio.

If you have an image that is the same size as its frame, utilize the breadcrumbs tab in the top left of the Widget in order to select the Frame.

Watch the video to know more. Note that the video does not support audio.

Widget Spacing

Adjust the default vertical spacing between the Widgets inside the Frame.

It is also possible to set the Outer Spacing for a specific Widget at the Widget level.

Widget Spacing is set to 50px in the image.

In the image widget spacing is set to 50px.

Adding a Frame

Frames can be added by duplicating an existing Frame, or by clicking on the pink plus sign which appears when hovering outside the Canvas.

Watch the video to know more. Note that the video does not support audio.

Note

Up to four Frames can be added to a single row, but there is no limit on the number of Frames that can be added to a column.

A Frame must be at least 10% of the size of the Canvas.

Resizing your Frame

Frames can be resized horizontally in relation to another frame. To do so, position your mouse between frames and drag the side of the Frame you want to resize.

You can resize Frames only from a side that is shared with another Frame. You cannot resize a Frame from the Canvas side.

The Frame size is shown as a percentage based on the Canvas size.

Frames can't be resized smaller than the content that the Frame contains.

Watch the video to know more. Note that the video does not support audio.

Note

Frames can only be resized horizontally, not vertically.

Moving your Frame

Frames can be moved by dragging and dropping, either horizontally or vertically.

The video demonstrates moving a Frame, then resizing the Canvas.

Watch the video to know more. Note that the video does not support audio.

Widget

There are five different Widget types that can be added to a Frame:

  1. Text
  2. Image
  3. Button
  4. Line
  5. Webview

Adding a Widget

To add a widget, click the blue plus icon in the top right of the side menu, then drag your desired Widget onto the Canvas.

You will see a blue line that indicates where the Widget will be placed.

In this video a button Widget is added to the Frame and the Outer Spacing of the Widget is adjusted.

Watch the video to know more. Note that the video does not support audio.

Resizing a Widget

To resize a widget, select it, then click and drag near one of the outer edges.

Watch the video to know more. Note that the video does not support audio.

Stretching a Widget

A Widget can be stretched to fit the width of the Frame by clicking on the stretch icon.

Watch the video to know more. Note that the video does not support audio.

When aspect ratio is locked, the Widget's height will also be stretched proportional to its width.

When aspect ratio is unlocked, the Widget will stretch to take up the entire horizontal space available inside the frame without changing the height.

Watch the video to know more. Note that the video does not support audio.

Note

If you have Inner Spacing set for the right or left of the Frame, the Widget will only be able to stretch to the available space around the Widget that is not highlighted in pink.

Additionally, if two Widgets in the same row are both individually stretched, each Widget will take up 50% of the width of the Frame.

In this video two button Widgets in the same row are each stretched.

Watch the video to know more. Note that the video does not support audio.

Log in to track your progress & complete quizzes

Learning

SAP FacebookSAP YoutubeSAP LinkedIn