In this article, we give you the details of all the customization options available in the design editor to create your Engage elements, however you like.

For those already familiar with Poool Access, the design editor should hold no secrets for you 🙂 You can nonetheless discover here some specificities unique to Engage.

Getting started...

The appearance of an Engage element is built using the different components at your disposal. In Engage, click on "Create an element". In the first block that appears, you can add a component by clicking on ⨁.

/

You can then navigate between the "Basic Components" and "Form Fields" tabs.

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

/

• Settings: component-specific options
• Style: management of different style settings (background color, spacing, borders, shadows, rounded corners...)
• Responsiveness: management of compatibility with screen sizes
• Advanced: add a condition to show/hide a component.

Basic components

Definition

A basic component is a static element of your appearance.

With the different components at your disposal, you can build your appearance.

Row

📚 Description

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

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 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 half the 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 columns 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)

List

📚 Description

This component allows you to add a bullet list.

⚙️ Settings

List settings

Allows you to enter 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 style it (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 style it with different classic options.

👉 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. You can also style the text (bold, 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 you to trigger an action:

• open a link
• or trigger a JavaScript event

For a URL, simply enter it in the dedicated field.

For a JavaScript event, simply indicate the event name customButtonClick, with a listener previously integrated into the page's code. This opens up a world of possibilities!

⚙️ Settings

Content

This space allows you to insert the 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 an event

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

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

👉 Available value: a URL of your choice

JavaScript event name (for the "trigger an event" action)

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

👉 Available value: customButtonClick

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 located 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 the image.

👉 Available values: Left / Center / Right

Blank space

📚 Description

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

⚙️ Settings

Size

Allows you to define the height of the space.

👉 Available 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.

⚙️ Settings

Placement of "see more"

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

👉 Available values: Before / After

Clickable content

📚 Description

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

⚙️ Settings

Action

Allows you to select the action performed when clicked.

👉 Available values: Open a link / Trigger an event

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

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

👉 Available value: a 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.

👉 Available values: Same window / New window

JavaScript event name (for the "trigger an event" action)

Allows you to trigger the customButtonClick JavaScript event upon clicking.

👉 Available value: customButtonClick

Form fields

In this section, you can directly select the form fields you want to integrate into your Engage element.

Here are the details of all available field types:

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 spacing

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

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.

👉 Available 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 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 located 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 (e.g., #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.

👉 Available 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 will 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 element 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

Advanced: component display options

You can go further in your settings by using the "Advanced" section. It will be possible to determine for a specific component (and not for your entire element) a display condition.

Two options available:

• Based on a filter (according to the filters at your disposal)
• Based on a variable

There you go, you know everything 🙂

Feel free to contact us if you have any questions about building your Engage appearance!

Updated on: 01/04/2026