Le nouvel éditeur de design 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 etc.)
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 [Ajouter une option].
👉 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 cet événement, 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 javascript
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 javascript")
Permet de renseigner le nom de l'événement javascript à déclencher suite au clic sur le bouton.
👉 Valeur possible : le nom de l'événément doit être exactement le même que celui indiqué dans le code (onButtonClick ≠ on-button-click ≠ onButtonclick etc.)
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
📝 Exemple
Prenons l'exemple d'un bouton, de type HTML "Lien", pour déclencher un événement Javascript nommé "jsEvent".
Code intégré à la page :
Paramétrage côté Dashboard :
Affichage côté lecteur :
Lorsque le lecteur cliquera sur le bouton "Je m'abonne!", l'événement jsEvent se déclenchera ✨
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.
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
Grande nouveauté également, dans 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.
📝 Exemple
Prenons l'exemple d'un texte de remerciement que nous souhaitons afficher après le déblocage de l'article.
Après avoir paramétré notre wall, nous avons créé une Rangée avec un composant Texte dans lequel nous avons inséré notre texte de remerciement.
Nous paramètrons le wall sur "Afficher" avant le déblocage et "Masquer" après le déblocage.
Nous paramètrons le texte de remerciement sur "Masquer" avant le déblocage et "Afficher" 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.
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.
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