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
- Html
- Slider
- Click-to-copy
- Close cross
- Countdown
- Block
- Button
- Input
- Date
- Time
- Toggle
- Checkbox
- Radio button
- Select
- Text area
- Form error message
The added element appears in the list of the Content section. You can then edit its characteristics.
Note: The layer stack reflects the position of the elements in the foreground or background.
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.
You can also add emojis to your headings, texts and links.
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.
Smart guides
Smart guides will allow you to easily and accurately align and position elements both vertically and horizontally while editing your widget.
Distances between elements are also displayed when you move an element, to help you position and align it.
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.
Edit the HTML of a text element
You can select any text element in your widget and directly edit it in HTML.
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.
