Bienvenue dans la nouvelle expérience Brandguide ! Cet article ainsi que Commencer avec Brandguide et Personnalisation d'un Brandguide en utilisant CSS vous guidera dans la façon de migrer votre contenu vers la nouvelle expérience. La modification des fonctionnalités de votre Brandguide actuel disparaîtra le 1er septembre 2023. Le 1er décembre 2023, l’éditeur Brandguide ne sera plus disponible.
Cet article vous guidera dans la construction de votre Brandguide en utilisant des pages, des sections et des blocs.
Pages
Le plus haut niveau organisationnel d'un Brandguide. Les pages s'ajoutent pour créer des Brandguides.
Ajouter des pages
- Accédez à l'option Pages dans la barre latérale.
- Sélectionnez le bouton Ajouter une page.
- Nommez la page et définissez le Slug.
- Sélectionnez, Enregistrer et créer la page.
Suppression des pages
Dans les pages et les sections flyout, sélectionnez l'icône corbeille à côté de la page que vous voulez supprimer. Si une page est supprimée, l'action ne peut pas être annulée et les blocs et les sections logées dans la page ne peuvent pas être récupérés.
Sections
Les sections sont un niveau organisationnel d'un Brandguide qui est imbriqué dans les pages et se compose de blocs.
Blocs
Les blocs sont imbriqués dans les sections. Vous pouvez localiser des blocs dans le bloc volant sur le côté gauche. Les blocs sont des composants Brandguide comme les images, le texte, la couleur et le code qui vivent dans la zone de toile en tant que contenu.
Ajouter des blocs
- Naviguez vers la barre latérale de gauche et sélectionnez l'option de bloc.
- Cela produira un saut avec des options de bloc pour les images, le texte, le code et la couleur. Le contenu que tu peux ajouter aura une ligne pointillée autour de lui.
- Sélectionnez le bloc et faites-le glisser dans la zone de toile. Lignes violettes sur la toile indiquent une zone de dépôt approuvée.
- Relâchez le clic pour déposer le bloc dans la toile.
Suppression des blocs
- Sélectionnez l'icône de la corbeille sur le bloc. Notez que lorsque vous supprimez un bloc, il ne peut pas être récupéré.
Réorganiser les blocs
Deux solutions se présentent à vous :
- Glissez et déposez le bloc ailleurs sur la page.
- Utilisez la flèche à droite du contenu du bloc pour déplacer le bloc vers le haut et vers le bas de la page.
Blocs d'image
Les blocs d'images vous permettent d'ajouter le contenu de la bibliothèque à votre Brandguide. Cela signifie que si une ressource est mise à jour dans la bibliothèque, la ressource sera automatiquement mise à jour dans le Brandguide. Cette expérience est alimentée par CDN. Pour promouvoir la cohérence de la marque, vous ne pouvez pas télécharger directement des images en dehors de Brandguide. Ils doivent provenir de votre bibliothèque.
Types d'image pris en charge
- APNG
- AVIF
- GIF
- JPEG
- PNG
- SVG
- WebP
Ajouter des images
- Sélectionnez l'icôneimagedans le flyout à gauche.
- Une autre volée apparaîtra avec une expérience de la bibliothèque. La bibliothèque ou la collection qui est associée à votre Brandguide apparaîtra par défaut.
- Pour choisir une autre Bibliothèque ou Collection sélectionnez la flèche noire en haut de la flèche.
- Localisez l'image que vous voulez utiliser et ajoutez-la de l'une des façons suivantes :
- Glissez et déposezl'image sur la toile.
- Survolez l'image et sélectionnez le menu ellipses et choisissez [+] Placer.
- Survolez l'image et sélectionnez les ellipsis, choisissez les détails de la vue, puis choisissez [+] Placer.
- Survolez l'image et sélectionnez les ellipsis, choisissez les détails de la vue, puis faites glisser et déposez l'image.
Changer la taille de l'image
- Survolez l'image et sélectionnez l'ellipse.
- Choisissez les détails de la vue.
- Ouvrez les options de placement.
- Modifier la largeur et la hauteur de l'image.
- Sélectionnez Place.
Note : c'est actuellement la seule façon de manipuler la taille de l'image.
Blocs de texte
Ajouter du texte à votre Brandguide peut être fait en faisant glisser et en déposant un bloc de texte sur la toile.
Modifier les styles de texte
Lorsque les styles de texte sont modifiés au niveau des paramètres globaux, ils affecteront tout au niveau Brandguide. Lorsqu'il est modifié au niveau du bloc, il n'affectera que ce bloc spécifique.
Texte par défaut
- Accéder aux paramètres.
- Entrez votre code hexadécimal dans la zone de couleur du texte.
Cela affectera tout texte de la page, y compris les blocs de texte.
Texte au niveau du bloc
- Survolez le bloc texte.
- Un éditeur WYSIWYG apparaîtra pour modifier les polices, les tailles, les couleurs du texte et la mise en forme telles que l'ajout de puces ou de liens vers le texte.
- Les modifications apportées ici n'affecteront que le bloc sélectionné.
Typographie
Pour le moment,les utilisateurs ne peuvent pas télécharger ou synchroniser des polices avec une bibliothèque vers Brandguide. Les polices disponibles dans le menu déroulant sont issues de Google Webfonts. Les utilisateurs avancés peuvent ajouter des polices tierces en utilisant CSS. Pour plus d'informations, visitez la Personnalisation Brandguide en utilisant l'article CSS. L'équipe de support de la bibliothèque ne pourra pas vous aider à construire votre propre code.
Blocs de code
Le bloc de code fonctionne avec HTML / CSS standard. L'utilisation de ce bloc n'est recommandée que si vous avez des connaissances avancées en CSS. Le service client ne sera pas en mesure de vous aider lorsque vous implémenterez votre propre code dans Brandguide. Le code sera nettoyé dans un effort pour prévenir les attaques XSS.
Édition des blocs de code
Quand un bloc HTML/CSS est ajouté à la page, vous pouvez ajouter du code personnalisé au Brandguide. HTML sera ajouté à l'emplacement particulier de la page et CSS s'appliquera à toutes les zones de la toile qui sont spécifiées à affecter. Une fois terminé avec le code, sélectionnez l'icône de l'œilpour afficher les modifications.
Les CSS peuvent également être modifiés au niveau global dans les paramètres, étant donné qu'il est préférable de faire en sorte que ces styles soient fixés au niveau supérieur et en cascade bas.
Ajout de la vidéo en utilisant du HTML
Le bloc image flyout ne supporte pas l'ajout de blocs de contenu vidéo. Cependant, en utilisant le code d'intégration vidéo, la vidéo peut être ajoutée via des ressources HTML et vidéo personnalisées de la bibliothèque. Le service client ne sera pas en mesure de vous aider lorsque vous implémenterez votre propre code dans Brandguide.
- Ouvrir la modale de l'asset pour la vidéo.
- Naviguez vers l'onglet Intégrer.
- Localisez le code d'intégration vidéo, et sélectionnez Copier le lien.
- Collez le code dans le bloc HTML.
Blocs de code d'assainissement
Certains codes et éléments à l'intérieur seront nettoyés à des fins de sécurité contre les attaques XSS.
Suppression des blocs de code
Supprimer des blocs de code supprimera le bloc et tout le code écrit dans le bloc. Les CSS écrits au niveau des paramètres globaux resteront à moins d'être édités dans les paramètres flyout.
Blocs de code en mouvement
Le déplacement du bloc de code après l'écriture de HTML et de CSS a le potentiel de casser le bloc ou les effets prévus du code. Pour de meilleurs résultats, écrivez le code après que la position des blocs a été définie.
Ajouter des blocs de couleur à votre Brandguide peut être fait en faisant glisser et en déposant la couleur sur la toile.
Sources de couleurs
Le bloc de couleur provient de la bibliothèque ou de la collection associée au Brandguide. Si aucune couleur n'apparaît dans le Brandguide, cela signifie qu'aucune couleur n'a été ajoutée à la bibliothèque ou à la collection. Pour ajouter des couleurs, ajoutez-les comme ressource dans la bibliothèque.
Synchronisation des couleurs
Lorsqu'une modification est apportée aux couleurs au niveau de la bibliothèque, le changement se reflètera automatiquement dans le Brandguide. Si une modification est effectuée dans la bibliothèque et que le changement n'est pas reflété dans Brandguide, vous pouvez synchroniser manuellement en sélectionnant le bouton de synchronisation circulaire en haut à droite de la floue de couleur.
Modes de couleur
Vous pouvez modifier les modes de couleur qui apparaissent à la fois dans le flyout et dans la toile.
- Sélectionnez l'icône paramètres dans le coin supérieur droit de la floue de couleur.
- Sélectionnez les cases à cocher pour afficher HEX, RGB, et CMYK et sélectionnez Enregistrer.
- Une icône de copie apparaîtra à côté de la valeur de couleur.