Dans cet article, on vous donne le détail de toutes les options de personnalisation qui sont disponibles dans l'éditeur de design pour créer vos éléments Engage, selon vos envies.
Pour ceux qui sont déjà familiers avec poool Access, l'éditeur de design ne devrait pas avoir de secrets pour vous 🙂 Vous pourrez néanmoins découvrir ici quelques spécificités propres à Engage.
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".
Voici le détail de tous les composants à votre disposition.
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 4 onglets disponibles:
Paramètres : options propres au type de composant
Style : gestion de différentes options de style (couleur de fond, espacements, bordures, ombres, arrondis...)
Responsive : gestion de la compatibilité avec les tailles d'écrans
Avancé : ajouter une condition pour afficher/masquer un composant.
Les composants basiques
Définition
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.
Rangée
📚 Description
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é
⚙️ Option de colonne
Taille
Définit la largeur d'une colonne par rapport à l'intégralité de la rangée "découpée" en 12 colonnes.
12 colonnes = 100% de la largeur
6 colonnes = 50% de la largeur
👉 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)
Liste
📚 Description
Ce composant permet d'ajouter une liste à puces.
⚙️ Options
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
📚 Description
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
📚 Description
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
📚 Description
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
Pour une URL, il suffira de la renseigner dans le champ dédié.
Dans le cas d'un événement Javascript, il suffira d'indiquer le nom de l'événement customButtonClick, avec un listener préalablement intégré au code de la page. Cela vous permet de mettre en place une multitude de possibilités !
⚙️ 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
URL du lien (pour l'action "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
Nom de l'évènement javascript (pour l'action "déclencher un événement")
Permet de déclencher l'événement javascript customButtonClick suite au clic sur le bouton.
👉 Valeur possible : customButtonClick
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
Image
📚 Description
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
📚 Description
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
📚 Description
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.
Contenu cliquable
📚 Description
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
URL du lien (pour l'action "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
Cible du lien (pour l'action "ouvrir un lien")
Permet de définir si le clic déclenchera l'ouverture d'un nouvel onglet ou non.
👉 Valeurs possibles : même fenêtre / nouvelle fenêtre
Nom de l'évènement javascript (pour l'action "déclencher un événement")
Permet de déclencher l'événement javascript customButtonClick suite au clic sur le bouton.
👉 Valeur possible : customButtonClick
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
📚 Définition
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
📚 Définition
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
📚 Définition
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
📚 Définition
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
📚 Définition
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
📚 Définition
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).
Classe css additionnelle
📚 Définition
Cette option vous permet d'ajouter une ou plusieurs classe(s) CSS à votre composant.
Elle apparaîtra dans le HTML de votre page, à côté des autres classes du composant.
Cela vous permet d'appliquer à votre composant des règles de CSS personnalisé.
👉 Valeurs possibles
Renseignez le nom de la classe (sans "." devant) et séparée par un espace dans le cas où vous en renseigneriez plusieurs.
Les options Responsive (ou compatibilité avec les tailles d'écrans)
📚 Définition
Le responsive est basé sur la largeur de l'iframe dans laquelle apparaît le wall. Celle-ci s'adapte en fonction de la largeur de l'écran mais elle n'est pas nécessairement égale à la largeur de l'écran, elle peut-être plus petite.
Ces options vous permettent de maîtriser précisément le comportement de chaque composant pour chaque taille d'écran.
⚙️ Options
*de l'iframe
👉 Valeurs possibles :
Selon les composants, certaines valeurs seront indisponibles
Affiché/Caché : l'élément sera affiché ou caché
Flexible : la largeur de l'élément s'adaptera à l'espace disponible
Adapté au contenu : la largeur de l'élément s'adaptera à son contenu
x colonnes : la largeur de l'élément sera fixe
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 possible :
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 !