Que vous utilisiez un modèle ou que vous partiez de 0, nous vous détaillons ici quelques trucs et astuces pour tirer le maximum du nouvel éditeur de design.
Avant de vous lancer, n'hésitez pas à consulter notre article complet sur les composants 👉 Quels sont les composants du nouvel éditeur de design ?
Utiliser des rangées
Ce composant est un bloc qui prend toute la largeur du wall.
L'utilisation de rangées vous permet de compartimenter simplement votre wall.
Cela vous permettra de gérer plus facilement les espacements de vos blocs, le responsive, le comportement avant/après déblocage. Également, cela vous permettra de créer des colonnes et de gérer leur disposition horizontale et verticale.
Bref, la Rangée c'est LE composant qui vous facilitera la vie ✨
Lorsque vous ajoutez une rangée, cela vous donne une colonne.
Si vous découpez la rangée en 3 (à l'aide des petits [+] sur les côtés), vous pouvez ensuite insérer un ou plusieurs composants les uns en dessous des autres.
Définir la taille pour mes rangées
Plusieurs options possibles :
Flexibles (paramètre par défaut) => le composant occupera toute la largeur de l'espace disponible
Adapté au contenu => s'adapte selon son contenu
Taille de colonne définie => Définit une largeur fixe de colonne. la largeur d'une colonne par rapport à l'intégralité de la rangée "découpée" en 12 colonnes.
Exemple :
12 colonnes = 100% de la largeur
6 colonnes = 50% de la largeur
Si vous avez des composants ou des blocs entiers qui se répètent, vous pouvez simplement les dupliquer en cliquant sur l'icône [⧉] présente sur chaque élément.
Définir l'alignement
Dans les options de rangée, vous pouvez choisir la Direction des colonnes, elle définit l'axe principal (en ligne ou en colonne) et la direction (normale ou inversée).
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.
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.
4 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.
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
Gérer le responsive
Grâce aux options "Responsive" vous êtes en capacité de gérer l'affichage des éléments pour chaque taille d'écran. Vous pouvez facilement pour chaque rangée décider de l'affichage ou non affichage de celle-ci selon les tailles d'écran.
Pour gérer ces options, cliquez sur l'icône [✏️] de l'élément souhaité et rendez-vous dans l'onglet "Responsive".
Gérer l'affichage avant/après déblocage
Vous avez aussi la capacité de gérer le comportement de chaque élément avant et après déblocage de l'article.
Les éléments sont par défaut visible avant déblocage et masqué après.
Les éléments visibles après le déblocage apparaîtront en bas du contenu débloqué.
Pour gérer ces options, cliquez sur l'icône [✏️] de l'élément souhaité et rendez-vous dans l'onglet "Paramètres".
Consultez notre tutoriel en vidéo:
Si vous avez des questions, n'hésitez pas à nous contacter via le chat Intercom !