Retrouvez dans cet article l'ensemble des options de personnalisation disponibles dans l'éditeur de design, afin de créer vos éléments Engage pour vos applications mobiles.

Pour ceux qui sont déjà familiers avec la version web, l'éditeur de design ne devrait pas avoir de secrets pour vous 🙂

Vous pourrez néanmoins découvrir ici quelques spécificités propres au mobile.

Pour bien commencer ...

L'apparence d'un élément Engage se construit grâce aux différents composants à votre disposition. Dans Engage, cliquez sur "Créer un élément". Dans le premier bloc qui s'affiche, vous pouvez ajouter un composant, en cliquant sur le ⨁.

Vous pourrez ensuite naviguer entre les onglets "Composants basiques" et "Champs de formulaire".

Pour accéder aux options d'un élément, cliquez sur l'icône [✏️] de l'élément souhaité. Vous pourrez ensuite modifier les options dans les 3 onglets disponibles:

• Paramètres : options propres au composant
• Style : gestion de différentes options de style (couleur de fond, espacements, bordures, ombres, arrondis...)
• Accessibilité : disponible pour les composants qui nécessitent un paramétrage spécifique, afin de respecter les normes RGAA. Le détail dans cet article : Comment configurer l'accessibilité des éléments sur Engage ?
• Avancé : ajouter une condition pour afficher/masquer un composant.

Les composants basiques

Un composant est un élément figé de votre apparence. Grâce aux différents composants mis à votre disposition, vous pourrez ainsi construire votre apparence bloc par bloc.

​

Rangée

Ce composant est un bloc qui prend toute la largeur de l'élément.

A l'intérieur, on peut faire plusieurs choses:

• ajouter un composant
• découper en plusieurs colonnes, qui accueilleront des composants, grâce aux petits [+] situés sur les côtés

Vous pouvez ainsi disposer dans une même rangée plusieurs composants côte à côte ou les uns en-dessous des autres.

⚙️ Options de rangée

Direction des colonnes

Définit la façon dont les composants sont placés : elle définit l'axe principal (en ligne ou en colonne) et la direction (normale ou inversée).

👉 Valeurs possibles : En ligne (de gauche à droite) / En ligne inversée (de droite à gauche) / En colonne (de haut en bas) / En colonne inversée (de bas en haut)

Alignement horizontal

Indique la façon dont l'espace doit être réparti entre et autour des composants selon l'axe principal de la rangée.

👉 Valeurs possibles :

• Gauche / Droite / Centre : les éléments seront groupés à gauche, à droite ou au centre
• Espace entre les colonnes : les éléments seront répartis équitablement, le bord du premier est aligné sur le début de la rangée et la fin du dernier est alignée sur la fin de la rangée
• Espace autour des colonnes : les éléments seront répartis équitablement, à chaque extrémité, entre le bord de la rangée et le premier/dernier élément on a la moitié de l'espace appliqué entre chaque élément

Alignement vertical

Définit l'alignement vertical des composants dans la rangée selon l'axe principal.

👉 Valeurs possibles : En haut / Centré / En bas / Etiré

Espacement inter-colonnes

Active/désactive les espaces entre le colonne et les bords de la rangée.

👉 Valeurs possibles : Activé/Désactivé

⚙️ Options de colonne

Taille

Définit la largeur d'une colonne par rapport à l'intégralité de la rangée "découpée".

👉 Valeurs possibles :

• Flexible : s'adapte à l'espace disponible
• Adaptée au contenu : s'adapte son contenu
• x colonne(s) : largeur fixe de x colonne(s)

Retrouvez plus d'informations sur comment utiliser les rangées dans cet article Comment utiliser les rangées pour structurer son élément Engage ?

Liste

Ce composant permet d'ajouter une liste à puces.

⚙️ Options

Icône de l'image

Permet de charger l'icône pour le composant liste.

Options de liste

Permet de renseigner les éléments de la liste. Pour ajouter un élément supplémentaire, cliquez sur [Editer].

👉 Valeur possible : un texte de votre choix

Titre

Ce composant permet d'ajouter un titre et de choisir son type (Titre 1, 2 etc.) Il permet également de le styliser (mettre en gras, couleurs, taille etc.)

⚙️ Options

Type

Permet de sélectionner le type de titre du plus grand - Titre 1 (h1) - au plus petit - Titre 6 (h6).

👉 Valeurs possibles : Titre 1 (h1) / Titre 2 (h2) / Titre 3 (h3) / Titre 4 (h4) / Titre 5 (h5) / Titre 6 (h6)

Contenu

Cet espace vous permet d'insérer votre texte et de le styliser grâce à différentes options classiques.

👉 Options possibles :

• Gras/Italique/Soulignement
• Couleur
• Taille
• Alignement à gauche/centré/à droite/justifié
• Lien

Texte

Ce composant permet d'ajouter un texte. Il permet également de styliser le texte (mettre en gras, couleurs, taille etc.).

⚙️ Options

Contenu

Cet espace vous permet d'insérer votre texte et de le styliser grâce à différentes options classiques.

👉 Options possibles :

• Gras/Italique/Soulignement
• Couleur
• Taille
• Alignement à gauche/centré/à droite/justifié
• Lien

Bouton

Ce composant permet d'ajouter un bouton et de styliser le texte qu'il contient.

Le bouton permet de déclencher une action:

• soit ouvrir un lien
• soit déclencher un événement Javascript
• soit soumettre le formulaire (dans le cas où un champ de formulaire est chargé dans votre apparence)
• soit détruire entièrement l'élément

⚙️ Options

Contenu

Cet espace vous permet d'insérer le texte qui s'affichera sur votre bouton et de le styliser grâce à différentes options classiques.

👉 Options possibles :

• Gras/Italique/Soulignement
• Couleur
• Taille
• Alignement à gauche/centré/à droite/justifié
• Lien

Action

Permet de sélectionner l'action réalisée par un clic sur le bouton.

👉 Valeurs possibles : Ouvrir un lien / Déclencher un événement / Soumettre un formulaire / Détruire l'élément

Ouvrir un lien

Permet de renseigner l'URL vers laquelle les lecteurs seront redirigés après avoir cliqué sur le bouton.

👉 Valeur possible : une URL de votre choix

Déclencher un événement

Permet de déclencher l'événement click suite au clic sur le bouton.

Documentation technique iOS : https://www.poool.dev/fr/docs/engage/ios/events#evenement-destroy

Documentation technique Android : https://www.poool.dev/fr/docs/engage/android/events#click

Soumettre un formulaire

Cette option est possible dans la mesure où vous intégrez dans votre apparence un champ de formulaire.

Permet de déclencher l'événement formSubmit

• Documentation technique iOS : https://www.poool.dev/fr/docs/engage/ios/events#evenement-form-submit
• Documentation technique Android : https://www.poool.dev/fr/docs/engage/android/events#formsubmit

Détruire entièrement l'élément

Le clic sur le bouton déclenchera la destruction entière de l'élément Engage.

Déclenche l'événement destroy

• Documentation technique iOS: https://www.poool.dev/fr/docs/engage/ios/events#evenement-destroy
• Documentation technique Android : https://www.poool.dev/fr/docs/engage/android/events#destroy

Type d'élément HTML

Permet de sélectionner le type d'élément HTML de votre bouton.

Visuellement, votre bouton restera un bouton mais dans le code HTML de votre page, il pourra être un bouton (balise HTML <button>) ou un lien (balise HTML <a>).

👉 Valeurs possibles : Bouton / Lien

Contenu cliquable

Similaire au composant rangée, à la différence que celui-ci permet de rendre cliquable l'ensemble du contenu présent à l'intérieur.

⚙️ Options

Action

Permet de sélectionner l'action réalisée par un clic sur le bouton.

👉 Valeurs possibles : Ouvrir un lien / Déclencher un événement / Soumettre un formulaire / Détruire un élément

Les options décrites pour le composant "Bouton" s'appliquent dans le cas du composant cliquable également.

Image

Ce composant permet d'ajouter une image, par exemple un logo.

⚙️ Options

Image

Permet de charger l'image souhaitée, elle doit être localisée sur votre ordinateur.

Taille de l'image

Permet de définir la dimension de l'image.

👉 Valeurs possibles :

• Adaptée au contenu : l'image s'adapte à la taille du bloc
• Taille réelle : l'image conserve sa taille d'origine
• Personnalisée : permet de renseigner la largeur et la hauteur souhaitées avec un chiffre, en pixels, %, em, vh, vw etc.

Alignement de l'image

Permet de choisir l'alignement horizontal de l'image.

👉 Valeurs possibles : Gauche / Centré / Droite

Espace vide

Ce composant permet d'ajouter un espace vide, on pourra modifier sa hauteur (en pixels).

⚙️ Options

Taille

Permet de définir la hauteur de l'espace.

👉 Valeurs possibles : vous pouvez renseigner la taille avec un chiffre, en pixels, em, vh ou vw.

Accordéon

Ce composant permet de mettre en place un bloc de contenu pliable / dépliable.

⚙️ Options

Placement du voir plus

Permet de définir si le label, une fois déplié, sera placé avant ou après le contenu.

👉 Valeurs possibles : Avant / Après.

Les champs de formulaire

Dans cette section, vous pouvez sélectionner directement les champs de formulaires que vous souhaitez intégrer à votre élément Engage.

Voici le détail de tous les types de champs disponibles :

Les options de Style

Marges internes

Permet de modifier les espaces dans de l'élément.

Par exemple pour une Rangée contenant un Texte, cette option vous permettra de gérer les espaces entre les bordures de la Rangée et les bordures du Texte.

Vous pouvez paramétrer individuellement chaque espace (haut, gauche, bas, droite).

👉 Valeurs possibles

Vous pouvez renseigner les marges avec un chiffre, en pixels, en %, en em, en vh ou vw.

Marges externes

Permet de modifier les espaces autour de l'élément.

Vous pouvez paramétrer individuellement chaque espace (haut, gauche, bas, droite).

👉 Valeurs possibles

Vous pouvez renseigner les marges avec un chiffre, en pixels, en %, en em, en vh ou vw.

Bordures

Permet d'appliquer des bords autour d'un élément.

Vous pouvez paramétrer individuellement chaque côté (haut, gauche, bas, droite), ainsi que la couleur de bordure, le type, et l'angle d'arrondi.

👉 Valeurs possibles

• Bordures : épaisseur des bords en pixels, en %, en em, en vh ou vw.
• Couleur : définir une couleur grâce au sélecteur de couleur ou directement en renseignant le code Hex de la couleur (ex : #ff0000).
• Style : solid, dashed, dotted, double, groove, ridge, inset, outset.
• Coins arrondis : arrondi des bords en pixels, en %, en em, en vh ou vw.

Image d'arrière-plan

Permet d'ajouter une image en arrière-plan d'un composant.

Pour sélectionner une image, cliquez sur le bouton [+].

L'image doit être localisée sur votre ordinateur.

⚙️ Options

Taille

Permet de sélectionner la taille de l'image par rapport à son contenant (le composant.)

👉 Valeurs possibles :

• Par défaut : l'image conserva sa taille par défaut
• Remplir : l'image est redimensionnée, en conservant ses proportions, pour couvrir l'intégralité du contenant.
• S'adapter : l'image est redimensionnée, en conservant ses proportions, pour couvrir un maximum d'espace du contenant (en hauteur ou largeur). Les zones éventuellement vide sont remplies avec la couleur d'arrière-plan.

Positionnement

Permet de définir la position de l'image par rapport au contenant.

👉 Valeurs possibles : Centré / En haut / En bas / A droite / A gauche / Centré en haut / Centré en bas / Centré à gauche / En haut à gauche / En bas à gauche / Centré à droite / En haut à droite / En bas à droite

Répétition

Dans le cas où l'image ne couvrirait pas l'intégralité du contenant, cette option permet de répéter l'image pour couvrir tout l'espace.

👉 Valeurs possibles : Pas de répétition / Répétition horizontale / Répétition verticale / Répétition horizontale & verticale

Couleur d'arrière-plan

Cette option permet de définir la couleur de l'arrière-plan du composant.

👉 Valeurs possibles

Vous pouvez définir une couleur grâce au sélecteur de couleur ou directement en renseignant le code Hex de la couleur (ex : #ff0000.)

Pour un bouton, la couleur sera appliquée au contenant du bouton (wrapper) et non au bouton lui-même.

Ombre portée

Permet d'ajouter un effet d'ombre sur un élément.

👉 Valeurs possibles

• Décalage X : Position de l'ombre sur un axe horizontal
• Décalage Y : Position de l'ombre sur un axe vertical
• Flou : Progressivité de l'ombre, de floue à nette
• Etalement : Taille de l'ombre portée
• Couleur : définir une couleur grâce au sélecteur ou directement en renseignant le code Hex de la couleur (ex : #ff0000).

Avancé : options d'affichage d'un composant

Vous pouvez aller plus loin dans vos paramétrages en utilisant cette section "Avancé". Il vous sera possible ainsi de déterminer pour un composant spécifique (et non pour votre élément entier) une condition d'affichage.

Deux options possibles :

• Basé sur un filtre (selon les filtres qui sont à votre disposition)
• Basé sur une variable

Voilà, vous savez tout 🙂

N'hésitez pas à nous contacter si vous avez la moindre question au sujet de la construction de votre apparence Engage !

Mis à jour le : 16/06/2026