Skip to main content
All CollectionsAppearancesAdvanced appearances
What are the components of poool's design editor?
What are the components of poool's design editor?

All you have to know about the components of our design editor

Alexandre Santini avatar
Written by Alexandre Santini
Updated over a week ago

The 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

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

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 element].

👉 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

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.

Foldable

📚 Description

This component allows you to create a collapsible/expandable content block.

⚙️ Options

Placement of "see more"

Allows you to define whether the label, once expanded, will be placed before or after the content.

👉 Possible values: Before / After.

Clickable content

📚 Description

Similar to the row component, except that this one allows the entire content inside it to be clickable.

⚙️ Options

Action

Allows you to select the action performed when the button is clicked.

👉 Possible values: Open a link / Trigger an event

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

Allows you to specify the URL to which readers will be redirected after clicking the button.

👉 Possible value: Any URL of your choice

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

Allows you to define whether the click will open the link in a new tab or not.

👉 Possible values: Same window / New window

JavaScript Event Name (for the "trigger an event" action)

Allows you to trigger the custom JavaScript event customButtonClick upon clicking the button.

👉 Possible value: customButtonClick


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.


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

Borders

📚 Definition

Allows you to apply borders around an element.

You can individually configure each side (top, left, bottom, right), as well as the border color, style, and border radius.

👉 Possible values

Borders: Thickness of the borders in pixels, %, em, vh, or vw.

Color: Define a color using the color picker or by directly entering the Hex code of the color (e.g., #ff0000).

Style: Solid, dashed, dotted, double, groove, ridge, inset, outset.

Border Radius: Roundness of the corners in pixels, %, em, vh, or vw.

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.

Drop shadow

📚 Definition

Allows you to add a shadow effect to an element.

👉 Possible values

X Offset: Position of the shadow on the horizontal axis

Y Offset: Position of the shadow on the vertical axis

Blur: Gradualness of the shadow, from blurred to sharp

Spread: Size of the drop shadow

Color: Define a color using the color picker or by directly entering the Hex code of the color (e.g., #ff0000).

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?