In this article, we provide details on all the customization options available in the design editor for creating your Engage elements, according to your preferences.

For those who are already familiar with Poool Access, the design editor should hold no secrets for you 🙂 However, you may discover some specific features unique to Engage here.

The appearance of an Engage element is built using the various 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 the ⨁.

You'll then be able to navigate between the 'Core Components' and 'Form fields' tabs.

Here are your different options:

Core components

Style settings

Responsive settings (or compatibility with screen sizes)

Advanced: add a condition to show/hide a component

It is a static element of your element.

Thanks to the various components provided to you, you can build your appearance.

📚 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

📚 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

📚 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

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

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

📚 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

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

Here are the details of all the available field types:

📚 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

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.

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

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

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

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

You can further customize your settings by using this 'Advanced' section. This will allow you to set a display condition for a specific component (and not for your entire element).

Two options are available: