🚨 Advanced appearances are only available in the Enterprise plan.

The new design editor is based on the use of basic and dynamic components. In this article, we introduce you to each component and its settings.

To add a component, simply click on the ⨁ button. You'll then be able to navigate between the 'Basic Components' and 'Dynamic Components' tabs.

To access a component's settings, click on the [✏️] icon on your chosen component. You can then modify the options in the 3 available tabs:

  • Settings: component specific settings

  • Style: management of different style settings (background color, spacing etc.)

  • Responsiveness: management of compatibility with screen sizes

To make your navigation in this article easier :

Basic components

Dynamic components

Settings for displaying before/after unlocking content

Style settings

Responsive settings (or compatibility with screen sizes)


Basic components

Definition

A basic component will remain the same whatever widget is set in the scenario. It is a static element.

Here are the different basic components you can use:

Row

πŸ“š Description

This component is a block that takes up the entire width of the wall.

Within it, you can do several things:

  • add a component

  • split it into several columns, which can each contain components thanks to the small [+] on the sides

In this way, you can arrange several components in the same row, side by side or one below the other.

βš™οΈ Row settings

Column Direction

Defines how the components are placed: it defines the main axis (in a row or column) and the direction (normal or reversed).


πŸ‘‰ Available values: Row (left to right) / Reversed in row (right to left) / Column (top to bottom) / Reversed column (bottom to top)

Horizontal alignment

Specifies how the space should be distributed between and around the components along the main axis of the row.


πŸ‘‰ Available values:

  • Left / Right / Center: the elements will be grouped on the left, right or center

  • Space between columns: the elements will be evenly distributed, the edge of the first one is aligned with the beginning of the row and the end of the last one is aligned with the end of the row

  • Space around columns: elements will be evenly distributed, at each end, between the edge of the row and the first/last element, there will be a half space applied between each element

Vertical alignment

Sets the vertical alignment of the components in the row along the main axis.

πŸ‘‰ Available values : Top / Center / Bottom / Stretch

Inter-column spacing

Enables/disables the spaces between the column and the row edges.

πŸ‘‰ Available values: Enable/Disable

βš™οΈ Column settings

Size

Sets the width of a column relative to the entire row "sliced" into 12 columns.

12 columns = 100% of the width

6 columns = 50% of the width

πŸ‘‰ Available values:

  • Flexible: fits to the available space

  • Adapted to content: adapts to its content

  • x column(s): fixed width of x column(s)

πŸ“ Example

We created a row, which we divided into 2. On the right we inserted an image and on the left we stacked a title, text and button. The right column is 8 columns long and the left column is "Flexible" (so it takes up 2 columns because the right column takes up 8.)

Dashboard view

Reader view

List

πŸ“š Description

This component allow you to add a bullet list.

βš™οΈ Settings

List settings

Allows you to type the list items. To add an item, click on [Add an option].

πŸ‘‰ Available value: a text of your choice

Title

πŸ“š Description

This component allows you to add a title and choose its type (Title 1, 2 etc.) You can also define its style (bold, colors, size etc.)

βš™οΈ Settings

Type

Allows you to select the type of title from largest - Title 1 (h1) - to smallest - Title 6 (h6).

πŸ‘‰ Available values: Title 1 (h1) / Title 2 (h2) / Title 3 (h3) / Title 4 (h4) / Title 5 (h5) / Title 6 (h6)

Content

This space allows you to type your text and alter the style.

πŸ‘‰ Available options:

  • Bold/Italic/Underlined

  • Color

  • Size

  • Left/centered/right/justified alignment

  • Add a link

Text

πŸ“š Description

This component allows you to add a text. It also allows you to style the text (make it bold, alter the colors, size etc.)

βš™οΈ Settings

Content

This space allows you to type your text and style it with different classic options.

πŸ‘‰ Available options:

  • Bold/Italic/Underlined

  • Color

  • Size

  • Left/centered/right/justified alignment

  • Add a link

Button

πŸ“š Description

This component allows you to add a button and style the text within it.

The button allows to trigger an action:

  • open a link

  • or trigger a Javascript event

To add a link, you'll just need to add the URL in the link field.

To trigger a Javascript event, you'll just need to indicate the name of this event, previously integrated in the page's code. With this, you'll have a world of possibilities!

βš™οΈ Settings

Content

This space allows you to insert text that will be displayed on your button and style it with various classic options.

πŸ‘‰ Available options:

  • Bold/Italic/Underlined

  • Color

  • Size

  • Left/centered/right/justified alignment

  • Add a link

Action

Allows you to select the action performed by clicking on the button.

πŸ‘‰ Available values: Open a link / Trigger a javascript event

Link URL (for the "open a link" action)

Allows you to add a URL, redirecting a user who clicks on the button.

πŸ‘‰ Value: a URL of your choice

Name of the javascript event (for the 'trigger a javascript event' action)

Allows you to fill in the name of the javascript event which will be triggered after clicking on the button.

πŸ‘‰ Value: the name of the event must be exactly the same as the one indicated in the code (onButtonClick β‰  on-button-click β‰  onButtonclick etc.)

HTML element type

Allows you to select your button's HTML element type.

Visually, your button will remain a button but in the HTML code of your page, it may be a button (HTML tag <button>) or a link (HTML tag <a>).

πŸ‘‰ Available values: Button / Link

πŸ“ Example

Let's take the example of a button of HTML type "Link", to trigger a Javascript event named "jsEvent".

Code embedded in the page:

Dashboard setup:

Reader view:

When the reader clicks on the "Subscribe" button, the jsEvent will fire ✨

Image

πŸ“š Description

This component allows you to add an image, for example a logo.

βš™οΈ Settings

Image

Allows you to load the image you want, it must be downloaded on your computer.

Image size

Allows you to set the size of the image.

πŸ‘‰ Available values:

  • Adapted to content: the image fits the size of the block.

  • Real size: the image keeps its original size

  • Custom: allows you to set the width and height you want with a number, in pixels, %, em, vh, vw etc.

Image Alignment

Allows you to choose the horizontal alignment of an image.

πŸ‘‰ Available values: Left / Center / Right

Blank space

πŸ“š Description

This component allows to add an empty space, modifying its height (in pixels).

βš™οΈ Settings

Size

Allows you to define the height of the space.

πŸ‘‰ Value: you can set the size with a number, in pixels, em, vh or vw.


Dynamic components

Definition

A widget can be divided into several parts:

A dynamic component will change according to the widget set up in the scenario.

Here are the different dynamic components you can use:

Each of the texts for these are customizable in the Dashboard:

  • In the "Messages" section

  • Directly in the scenario, by modifying the widget

Dynamic widget

πŸ“š Description

This component allows you to display every part of the widget.

βš™οΈ Settings

There are no specific settings for this component.

Dynamic Title

πŸ“š Description

This component allows you to display a widget's title.

βš™οΈ Settings

Type

Allows you to select the type of title from the largest - Title 1 (h1) - to the smallest - Title 6 (h6).

πŸ‘‰ Available values: Titre 1 (h1) / Titre 2 (h2) / Titre 3 (h3) / Titre 4 (h4) / Titre 5 (h5) / Titre 6 (h6)

Text alignment

Allows you to select the text's alignment.

πŸ‘‰ Available values: Left/Center/Right/Justified

Dynamic text

πŸ“š Description

This component allows you to display a widget's text.

βš™οΈ Settings

Text alignment

Allows you to select the text's alignment.

πŸ‘‰ Available values: Left/Center/Right/Justified

Dynamic action

πŸ“š Description

This component allows you to display a widget's action, i.e. the button and the related action (unlock, redirect, form etc.)

βš™οΈ Settings

There are no specific settings for this component.

Dynamic links

πŸ“š Description

This component allows you to display a widget's links, i.e. the link "Subscribe", "Log in" and "No, thank you" (if an alternative has been setup in the scenario.)

βš™οΈ Settings

There are no specific settings for this component.


Settings for displaying before/after unlocking content

πŸ“š Definition

Another great aspect of this new aspect of our product is that, within the 'Settings' tab of each component, you can define whether a component will be visible before or after a user unlocks content.

βš™οΈ Settings

Display the block before content is unlocked

Allows you to configure the element's behavior before content is unlocked.

πŸ‘‰ Available values: Display / Hide

Display the block after content is unlocked

Allows you to select the element's behavior after the content is unlocked.

πŸ‘‰ Available values: Display / Hide

🚨 By default, elements are displayed before unlocking and hidden after unlocking.

πŸ“ Example

Let's take the example of a thank you text that we want to display after the item is unlocked.

After setting up our wall, we created a Row with a Text component in which we put our thank you message.

We set the wall to " Display " before unlocking and " Hide " after unlocking.

We set the thank you text to "Hide" before unlocking and "Display" after unlocking.


Style settings

Inside spacing

πŸ“š Definition

Allows you to change the spaces within the component.

For example, for a Row containing a Text, this option will allow you to manage the spaces between the borders of the Row and the borders of the Text.

You can set each space individually (top, left, bottom, right).

πŸ‘‰ Available values

You can set the spaces with a number, in pixels, in %, in em, in vh or vw.

Outside spaces

πŸ“š Definition

Allows you to change the spaces around the component.

You can set each space individually (top, left, bottom, right).

πŸ‘‰ Available values

You can set the spaces with a number, in pixels, in %, in em, in vh or vw.

Background image

πŸ“š Definition

Allows you to add an image to the background of a component.

To select an image, click on the [+] button.

The image must be on your computer.

βš™οΈ Settings

Size

Allows you to select the size of the image in relation to its container (the component.)

πŸ‘‰ Available values:

  • By default: the image will keep its original size

  • Fill: the image is resized, keeping its proportions, to cover the entire container

  • Fit: the image is resized, keeping its proportions, to cover a maximum of the container space (in height or width). Any empty areas are filled with the background color

Position

Allows you to define the position of the image in relation to the container.

πŸ‘‰ Available values: Centered / Top / Bottom / Right / Left / Center top / Center bottom / Center left / Top left / Bottom left / Center right / Top right / Bottom right

Repeat

In case the image doesn't cover the entire container, this option allows you to repeat the image to cover the entire space.

πŸ‘‰ Available values: No repeat / Repeat horizontally / Repeat vertically / Repeat horizontally & vertically

Background Color

πŸ“š Definition

This setting sets the background color of the component.

πŸ‘‰ Available values

You can set a color using the color picker or by providing the Hex code of the color (ex: #ff0000.)

🚨 For a button, the color will be applied to the button's container (wrapper) and not the button itself.

Additional CSS class

πŸ“š Definition

This setting allows you to add one or several CSS classes to your component. It'll appear in the HTML of your page, next to the other component classes.

This allows you to apply custom CSS rules to your component.

πŸ‘‰ Available value

Fill in the class name(s) (without . in front) and separated by a blank space.


Responsive settings (or compatibility with screen sizes)

πŸ“š Definition

🚨 The responsiveness is based on the width of the iframe in which the wall is contained. The iframe size adapts to the width of the screen (computer, cell phone, etc) but doesn't necessarily equal to it, it can be smaller.

These options allow you to accurately manage the behavior of each component for each screen size.

βš™οΈ Settings

*of the iframe

πŸ‘‰ Available values:

Depending on the component, some values won't be available

  • Visible/Hidden: the element will be visible or hidden

  • Flexible: the width of the element will adapt to the space available

  • Fit to content: the width of the element will fit to its content

  • x columns: the width of the element will be fixed

Did this answer your question?