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:

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)

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:

📚 Description

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

Within it, you can do several things:

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:

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:

📝 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

📚 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

📚 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:

📚 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:

📚 Description

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

The button allows to trigger an action:

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:

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 ✨

📚 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:

Image Alignment

Allows you to choose the horizontal alignment of an image.

👉 Available values: Left / Center / Right

📚 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.

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:

📚 Description

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

⚙️ Settings

There are no specific settings for this component.

📚 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

📚 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

📚 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.

📚 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.

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.

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.

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.

📚 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.

📚 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.

📚 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:

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

📚 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.

📚 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.

🚨 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.
​

*of the iframe

👉 Available values:

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