In this article, you will find all the customization options available in the design editor to create your Access walls for your mobile applications.
For those already familiar with the web version, the design editor should hold no secrets for you 🙂

However, you will find a few mobile-specific features highlighted here.

Getting Started...

An Access wall's appearance is built using the various components available to you. In Access, click on Appearances > "Create an appearance". In the block that appears, you can add a component by clicking the ⨁ icon.
You can then switch between the "Basic components" and "Dynamic components" tabs.

To access an element's options, click the [✏️] icon on the desired element. You can then modify the options within the 4 available tabs:

• Settings: Options specific to the component itself.
• Style: Management of various styling options (background color, spacing, borders, shadows, rounded corners...).
• Accessibility: Available for components requiring specific configuration to comply with RGAA standards. Full details in this article: How to configure wall accessibility on Access?
• Advanced: Add a condition to show or hide a component.

Basic Components

A component is a fixed element of your appearance. Using the various components provided, you can build your appearance block by block.

Row

This component is a block that spans the full width of the element.
Inside a row, you can:

• Add a component.
• Split it into multiple columns, which will host components, using the small [+] icons located on the sides.

This allows you to place multiple components side by side or stacked on top of each other within the same row.

⚙️ Row Options

• Column direction: Defines how components are positioned by setting the main axis (row or column) and direction (normal or reversed).
• • 👉 Possible values: Row (left to right) / Row reversed (right to left) / Column (top to bottom) / Column reversed (bottom to top)
• Horizontal alignment: Indicates how space should be distributed between and around components along the row's main axis.
• • 👉 Possible values:
  • • Left / Right / Center: Elements will be grouped to the left, right, or center.
    • Space between columns: Elements are distributed evenly; the edge of the first element is aligned with the start of the row, and the edge of the last is aligned with the end of the row.
    • Space around columns: Elements are distributed evenly; at each end, the space between the row edge and the first/last element is half the size of the space between each element.
• Vertical alignment: Defines the vertical alignment of components within the row along the main axis.
• • 👉 Possible values: Top / Centered / Bottom / Stretch
• Inter-column spacing: Enables/disables spaces between the columns and the row edges.
• • 👉 Possible values: Enabled / Disabled

⚙️ Column Options

• Size: Defines the width of a column relative to the entire "split" row.
• • 👉 Possible values:
  • • Flexible: Adapts to the available space.
    • Fit content: Adapts to its content.
    • x column(s): Fixed width of x column(s).

For more information on how to use rows, check out this article: How to use rows to structure your Engage element?

List

This component allows you to add a bulleted list.

⚙️ Options

• Image icon: Allows you to upload the icon for the list component.
• List options: Allows you to enter list items. To add an additional item, click [Edit].
• • 👉 Possible value: Any text of your choice.

Title

This component allows you to add a heading and choose its type (Heading 1, 2, etc.). It also allows you to style it (bold, colors, size, etc.).

App SDK Specificity: You can also load your own custom font for this component within your appearance options.

⚙️ Options

• Type: Selects the heading type from largest — Heading 1 (h1) — to smallest — Heading 6 (h6).
• • 👉 Possible values: Heading 1 (h1) / Heading 2 (h2) / Heading 3 (h3) / Heading 4 (h4) / Heading 5 (h5) / Heading 6 (h6)
• Content: This area allows you to insert your text and style it using standard formatting options.
• • 👉 Possible options: Bold/Italic/Underline, Color, Size, Alignment (Left/Centered/Right/Justified), Link.

Text

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

App SDK Specificity: You can also load your own custom font for this component within your appearance options.

⚙️ Options

• Content: This area allows you to insert your text and style it using standard formatting options.
• • 👉 Possible options: Bold/Italic/Underline, Color, Size, Alignment (Left/Centered/Right/Justified), Link.

Button

This component allows you to add a button and style the text inside it.
The button can trigger one of the following actions:

• Open a link
• Trigger a JavaScript event
• Submit a form (if a form field is loaded into your appearance)
• Completely destroy the element

App SDK Specificity: You can also load your own custom font for this component within your appearance options.

⚙️ Options

• Content: This area allows you to insert the text that will display on your button and style it using standard formatting options.
• • 👉 Possible options: Bold/Italic/Underline, Color, Size, Alignment (Left/Centered/Right/Justified), Link.
• Action: Selects the action performed when the button is clicked.
• • 👉 Possible values: Open a link / Trigger an event / Submit a form / Destroy the element
• Open a link: Allows you to enter the URL to which readers will be redirected after clicking the button.
• • 👉 Possible value: A URL of your choice.
• Trigger an event: Triggers a click event upon clicking the button.
• • iOS Technical Documentation:https://www.poool.dev/en/docs/engage/ios/events#evenement-destroy
  • Android Technical Documentation:https://www.poool.dev/en/docs/engage/android/events#click
• HTML element type: Selects the HTML element type for your button. Visually, your button will remain a button, but in your page's HTML code, it can be rendered as a button (`` HTML tag) or a link (<a> HTML tag).
• • 👉 Possible values: Button / Link

Clickable Content

Similar to the row component, but this one makes the entire content inside it clickable.

⚙️ Options

• Action: Selects the action performed when clicked.
• • 👉 Possible values: Open a link / Trigger an event / Submit a form / Destroy an element

The options described for the "Button" component apply to the clickable component as well.

Image

This component allows you to add an image, such as a logo.

⚙️ Options

• Image: Allows you to upload the desired image, which must be located on your computer.
• Image size: Defines the dimensions of the image.
• • 👉 Possible values:
  • • Fit content: The image adapts to the block size.
    • Actual size: The image retains its original dimensions.
    • Custom: Allows you to enter the desired width and height with a number in pixels, %, em, vh, vw, etc.
• Image alignment: Selects the horizontal alignment of the image.
• • 👉 Possible values: Left / Centered / Right

💡 If you want to make your image clickable, you can embed it directly inside a Clickable Content component.

Spacer

This component allows you to add an empty space; you can modify its height (in pixels).

⚙️ Options

• Size: Defines the height of the space.
• • 👉 Possible values: You can enter the size as a number in pixels, em, vh, or vw.

Accordion

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

⚙️ Options

• "See more" placement: Defines whether the label, once expanded, will be placed before or after the content.
• • 👉 Possible values: Before / After

Dynamic Components

A widget can be broken down into several elements. A dynamic component will change based on the widget configured in the scenario.
All text for these elements can be configured in the Dashboard:

1. In the "Messages" section.
2. Directively within the scenario, by editing the desired widget.

Dynamic Widget

This component displays all the elements of the widget.

Dynamic Title

This component displays the title of a widget.

⚙️ Options

• Type: Selects the heading type from largest — Heading 1 (h1) — to smallest — Heading 6 (h6).
• • 👉 Possible values: Heading 1 (h1) / Heading 2 (h2) / Heading 3 (h3) / Heading 4 (h4) / Heading 5 (h5) / Heading 6 (h6)
• Text alignment: Selects the alignment of the text.
• • 👉 Possible values: Left / Center / Right / Justified

Dynamic Text

This component displays the text of a widget.

⚙️ Options

• Text alignment: Selects the alignment of the text.
• • 👉 Possible values: Left / Center / Right / Justified

Dynamic Action

This component displays the action of a widget, meaning the button and its associated action (unlock, redirection, form, etc.).

Check out our best practices on using the Dynamic Action component: How to configure wall actions: dynamic action, button, and clickable component?

Dynamic Links

This component displays the links of a widget, meaning the "Subscribe", "Log in", and "No, thanks" links (if an alternative has been configured in the scenario).

⚠️ Note: Dynamic components are the only option that allows you to track click statistics on your wall based on the action chosen in the scenario. Button and clickable component performances are not tracked on Poool's end, meaning interactions with them will not be counted in the Dashboard.

Style Options

Padding (Marges internes)

Allows you to modify the spacing inside the element. For example, for a Row containing Text, this option lets you manage the space between the Row borders and the Text borders. You can configure each side individually (top, left, bottom, right).

• 👉 Possible values: You can enter padding with a number in pixels, %, em, vh, or vw.

Margin (Marges externes)

Allows you to modify the spacing around the element. You can configure each side individually (top, left, bottom, right).

• 👉 Possible values: You can enter margins with a number in pixels, %, em, vh, or vw.

Borders

Allows you to apply edges around an element. You can configure each side individually (top, left, bottom, right), as well as the border color, style, and border-radius.

• 👉 Possible values:
• • Borders: Edge thickness in pixels, %, em, vh, or vw.
  • Color: Define a color using the color picker or by entering the Hex code directly (e.g., #ff0000).
  • Style: solid, dashed, dotted, double, groove, ridge, inset, outset.
  • Rounded corners: Corner radius in pixels, %, em, vh, or vw.

Background Image

Allows you to add a background image to a component. To select an image, click the [+] button. The image must be located on your computer.

⚙️ Options

• Size: Selects the size of the image relative to its container (the component).
• • 👉 Possible values:
  • • Default: The image retains its default size.
    • Fill (Cover): The image is resized, maintaining its proportions, to cover the entire container.
    • Fit (Contain): The image is resized, maintaining its proportions, to fit as much of the container as possible (height or width). Any empty areas are filled with the background color.
• Positioning: Defines the position of the image relative to the container.
• • 👉 Possible values: Centered / Top / Bottom / Right / Left / Top Center / Bottom Center / Left Center / Top Left / Bottom Left / Right Center / Top Right / Bottom Right
• Repeat: If the image does not cover the entire container, this option allows the image to repeat to fill the entire space.
• • 👉 Possible values: No repeat / Horizontal repeat / Vertical repeat / Horizontal & vertical repeat

Background Color

This option defines the background color of the component.

• 👉 Possible values: You can define a color using the color picker or by entering the Hex code directly (e.g., #ff0000).

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

Box Shadow (Ombre portée)

Allows you to add a shadow effect to an element.

• 👉 Possible values:
• • X Offset: Position of the shadow on a horizontal axis.
  • Y Offset: Position of the shadow on a vertical axis.
  • Blur: The smoothness of the shadow, from blurry to sharp.
  • Spread: The size of the box shadow.
  • Color: Define a color using the picker or by entering the Hex code directly (e.g., #ff0000).

Advanced: Component Display Options

You can take your configuration further by using this "Advanced" section. This allows you to determine a display condition for a specific component (rather than your entire element).
Two options are available:

1. Based on a filter (according to the filters available to you).
2. Based on a variable.

There you go, you know it all! 🙂 Feel free to contact us if you have any questions regarding building your Engage appearance!

Updated on: 16/07/2026