Edit the content of your widget

portrait de l'auteur Julie Trenque

Written by Julie Trenque

Updated on 10/26/2022

4 min

Beginner

Was this content useful?

Add an element

In the “Add element” section, click on an element type to add it to your widget.

Several elements are at your disposal:

  • Heading
  • Text
  • Link
  • Image
  • iFrame
  • Video
  • Close cross
  • Countdown
  • Box
  • Button
  • Input

The added element appears in the list of the Content section. You can then edit its characteristics.

Design an element

In the “Content” section, design the elements of your widget.

Select an element

Click on an element in the center preview area to select it, or click on its name in the hierarchy panel on the left (it will highlight the linked element).

Hover over an element

On hover on an element in the left panel, secondary actions buttons are displayed. Click on the + icon to add an element below the selected one. Click on the 3 dots to edit, rename, duplicate, hide or delete the element.

Note: If an event is associated to one of your elements, you can’t delete this element. You will need to delete the event first.

Click on an element

On click on an element in, you access its settings. Depending on its type, some characteristics can be edited.

In the case of a child element, the container settings are also available.

To be able to add a link, you need to highlight a word, a group of words or the whole part of the text.

Note: To modify the URL associated with a text, you can also create a click event, and then associate a “URL” action with it.

Group

When you create a group with columns, there are different location and distribution options available to you.

Flex direction

This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.

Justify content

This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

Align items

This defines the default behavior for how flex items are laid out along the cross axis on the current line.

Upload your own font

You can add your own font to further customize your widgets. This way, they will match your site’s graphic charter.

First, create or select a text element in your widget.

Click on the “Font” menu. In the “Font family” section, click on “+ Add font”.

Give a name to your font family.

You can also indicate its source. This field is optional if the font is used on your site. However, if you don’t fill it, you will not be able to see the result on the widget editor. You will have to add this widget in a campaign and simulate it. In this case, the “Font Weight” field must also be filled in.

Then click on “Apply” to validate the addition. Once the font is added, you will find it in the Font family dropdown list.

Resize an element

You can easily change the size of your elements in the preview window (on the right). Position your cursor on one of the edges of the element and drag to edit its dimensions.

It is also possible to modify these dimensions in the left panel.

Constrain proportions

Once your element is resized, you can lock its dimensions to prevent mistakes when you continue editing the widget.

To do this, in the left panel when the item is selected, simply click on the padlock that appears at the hover over the item.

Move an element

If you want to move an element, you just have to drag-and-drop it in the preview.

Rotate an element

If you want to rotate an element, select it and enter the desired rotation angle in the rotation parameter located in the left panel.

Animate an element

You can add an animation directly on one of the elements of your widget.

When an element is selected, two parameters “Entrance animation” and “Exit animation” can be activated in the left panel.

You just have to choose an animation effect, a duration and optionally a delay.

Click on the “Previsualize” button to previsualize your animation.

Insert a custom data into an element

You can use custom data in your widget to create better personalization opportunities. With this option, you can insert a dynamic value in any text field.

Select a text element and click on the custom data option in the left panel.

It will add the value of a custom data at the position of your choice in the text.

Select a data source (a custom data you already created).

You can attribute a default value to your custom data. This default value will be displayed if the value of your custom data is undefined or null.

Click on “Validate”.

Then simulate how the custom data would be displayed in production.

  • In this article :