Passer au contenu principal
Toutes les collectionsApparencesApparences avancées
Quels sont les composants de l'éditeur de design Poool Access ?
Quels sont les composants de l'éditeur de design Poool Access ?

Découvrez tous les composants de notre éditeur de design

Alexandre Santini avatar
Écrit par Alexandre Santini
Mis à jour il y a plus de 3 mois

L'éditeur de design poool Access repose sur l'utilisation de composants basiques et dynamiques. Dans cet article, on vous présente chaque composant et ses options.

Pour ajouter un composant, il suffit de cliquer sur les boutons ⨁. Vous pourrez ensuite naviguer entre les onglets "Composants basiques" et "Composants dynamiques".

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 type de composant

  • Style : gestion de différentes options de style (couleur de fond, espacements, bordures, ombres, arrondis...)

  • Reponsive : gestion de la compatibilité avec les tailles d'écrans

Pour faciliter votre navigation dans cet article :


Les composants basiques

Définition

Un composant basique restera le même quelque soit le widget paramétré dans le scénario. C'est un élément figé.

Voici les différents composants basiques mis à votre disposition:

Rangée

📚 Description

Ce composant est un bloc qui prend toute la largeur du wall.

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)

📝 Exemple

Nous avons créé une rangée, que nous avons coupée en 2. À droite nous avons inséré une image et à gauche nous avons empilé un titre, un texte et un bouton. La colonne de droite fait 8 colonnes et la colonne de gauche est "Flexible" (donc elle occupe 2 colonnes car la colonne de droite en occupe 8.)

Vue Dashboard

Vue Lecteur

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 composants dynamiques

Définition

Un widget peut être décomposé en plusieurs éléments:

Un composant dynamique changera en fonction du widget configuré dans le scénario.

Voici les différents composants dynamiques mis à votre disposition:

Tous les textes de ces éléments sont paramétrables dans le Dashboard :

  • Dans la section "Messages"

  • Directement dans le scénario, en modifiant le widget souhaité.

Widget dynamique

📚 Description

Ce composant permet l'affichage de l'intégralité des éléments du widget.

⚙️ Options

Il n'y a pas d'option propre à ce composant.

Titre Dynamique

📚 Description

Ce composant permet l'affichage du titre d'un widget.

⚙️ 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)

Alignement du texte

Permet de sélectionner l'alignement du texte.

👉 Valeurs possibles : Gauche/Centre/Droite/Justifié

Texte Dynamique

📚 Description

Ce composant permet l'affichage du texte d'un widget.

⚙️ Options

Alignement du texte

Permet de sélectionner l'alignement du texte.

👉 Valeurs possibles : Gauche/Centre/Droite/Justifié

Action Dynamique

📚 Description

Ce composant permet l'affichage l'action d'un widget, c'est-à-dire le bouton et l'action liée (déblocage, redirection, formulaire etc.)

⚙️ Options

Il n'y a pas d'option propre à ce composant.

Liens dynamiques

📚 Description

Ce composant permet l'affichage des liens d'un widget, c'est-à-dire les liens "Je m'abonne", "Je me connecte" et "Non, merci" (si une alternative a été paramétrée dans le scénario)

⚙️ Options

Il n'y a pas d'option propre à ce composant.


Les options d'affichage avant/après le déblocage du contenu

📚 Définition

Depuis l'onglet "Paramètres" de chaque composant, vous avez la possibilité de définir si un composant sera visible avant ou après le déblocage du contenu.

⚙️ Options

Afficher le bloc avant le déblocage du contenu

Permet de sélectionner le comportement attendu par l'élément avant le déblocage du contenu.

👉 Valeurs possibles : Afficher / Masquer

Afficher le bloc après le déblocage du contenu

Permet de sélectionner le comportement attendu par l'élément après le déblocage du contenu.

👉 Valeurs possibles : Afficher / Masquer

🚨 Par défaut, les éléments sont affichés avant le déblocage et masqués après le déblocage.


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

Avez-vous trouvé la réponse à votre question ?