Construire et styliser un Brandguide

Pages

Le plus haut niveau organisationnel d'un Brandguide. Les pages s'additionnent pour faire des Brandguides.

Ajout de pages

1. Accédez à l'option Pages dans la barre latérale.
2. Sélectionnez le Bouton Ajouter une page.
3. Nommez la page et définissez le Slug. 
4. Sélectionner, Enregistrer et créer une page. 

Suppression de pages

Sélectionnez l'icône Corbeille en regard de la page à supprimer dans le menu déroulant Pages et Sections. Si une page est supprimée, l'action ne peut pas être annulée et les blocs et sections hébergés dans la page ne peuvent pas être récupérés. 

Sections

Les sections sont un niveau organisationnel d'un Brandguide imbriqué dans des pages et constitué de blocs. 

Les options Barre de navigation rémanente et Réduire les sections de page sont automatiquement activées pour votre Brandguide. Vous pouvez les régler dans les paramètres Pages & Sections vers le bas. 

Blocs

Les blocs sont imbriqués dans des sections. Vous pouvez localiser les blocs dans le menu volant situé à gauche. Les blocs sont des composants Brandguide tels que des images, du texte, des couleurs et du code qui résident dans la zone de dessin en tant que contenu.

Ajout de blocs

1. Accédez au barre latérale gauche et sélectionnez le option de bloc.
2. Cela produira un menu volant avec des images, du texte, du code et des options de bloc de couleur. Le contenu que vous pouvez ajouter est entouré d'une ligne pointillée. 
3. Sélectionnez le bloc et faites-le glisser dans la zone de travail zone. Lignes violettes sur la toile, indiquez une zone de dépôt approuvée. 
4. Relâchez le clic pour déposer le bloc dans la toile. 

Suppression de blocs

1. Sélectionnez le icône de la corbeille sur le pâté de maisons. Lorsque vous supprimez un bloc, il ne peut pas être récupéré. 

Réorganisation des blocs 

Deux options s'offrent à vous :

1. Glisser-déplacer le bloc ailleurs sur la page.
2. Utilisez le flèche à droite du contenu du bloc pour déplacer le bloc vers le haut et le bas de la page.  

Blocs d'image

Les blocs d'image vous permettent d'ajouter du contenu Brandfolder à votre Brandguide en toute transparence. Cela signifie que si un actif est mis à jour dans Brandfolder, il sera automatiquement mis à jour dans le Brandguide également. Le CDN alimente cette expérience. Pour promouvoir la cohérence de la marque, vous ne pouvez pas télécharger des images externes directement sur Brandguide. 

Types d'image pris en charge

• APNG
• AVIF
• GIF
• JPEG
• PNG
• SVG
• WebP
• PDF
• MP4
• Documents Microsoft Word
• Microsoft PowerPoints
• Fichiers Microsoft Excel

Ajout d'images

1. Sélectionnez le icône d'image dans le menu volant de gauche.
2. Un autre menu volant apparaîtra avec une expérience Brandfolder. Le dossier Brandfolder ou la collection associé à votre Brandguide apparaît par défaut. 
3. Pour choisir un autre dossier de marque ou une autre collection, sélectionnez la flèche noire en haut du volant.
4. Recherchez l'image à utiliser et ajoutez-la de l'une des manières suivantes :
   • Glisser-déplacer l'image sur la toile. 
   • Placez le curseur sur l'image, sélectionnez le menu ellipses, puis choisissez [+] Lieu.
   • Placez le curseur sur l'image, sélectionnez les points de suspension, choisissez Afficher les détails et puis choisissez [+] Place.
   • Placez le curseur sur l'image, sélectionnez les points de suspension, choisissez Afficher les détails et puis glisser-déplacer l'image. 

Modification de la taille de l'image

1. Pointer sur l'image et sélectionner les points de suspension.
2. Choisissez Afficher les détails.
3. Ouvrez le options de placement.
4. Modifier la largeur et la hauteur de l'image.
5. Sélectionner un emplacement. 

C'est actuellement la seule façon de manipuler la taille de l'image. 

Bloc de texte 

Pour ajouter du texte à votre Brandguide, vous pouvez faire glisser et déposer un bloc de texte sur le canevas.

Modification des styles de texte

Lorsque les styles de texte sont modifiés au niveau des paramètres globaux, ils affectent tout ce qui se trouve au niveau Brandguide. Lorsqu'elles sont modifiées au niveau du bloc, elles n'affectent que ce bloc spécifique.

Texte par défaut

1. Accédez aux paramètres.
2. 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 de niveau bloc 

1. Pointez sur le bloc de texte.
2. Un éditeur WYSIWYG apparaît pour modifier les polices, les tailles, les couleurs du texte et la mise en forme, par exemple en ajoutant des puces ou des liens au texte.
3. Les modifications effectuées ici n'affecteront que le bloc sélectionné.

Typography (Typographie)

Actuellement, les utilisateurs ne peuvent pas télécharger ou synchroniser des polices avec un dossier Brandfolder vers Brandguide. Les polices disponibles dans la liste déroulante proviennent de Google Webfonts. Les utilisateurs expérimentés peuvent ajouter des polices tierces à l'aide de CSS. Pour plus d'informations, consultez le Personnalisation de Brandguide à l'aide de l'article CSS. L'équipe de support de Brandfolder ne sera pas en mesure de vous aider à créer votre 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 une connaissance avancée de CSS. Le support client ne peut pas vous aider lors de l'implémentation de votre code dans Brandguide. Tout code sera désinfecté pour empêcher les attaques XSS. Sachez que nos développeurs peuvent apporter des modifications à notre code Brandguide à tout moment qui pourraient avoir un impact sur votre CSS et HTML.

Modification des blocs de code

Lorsqu'un bloc HTML/CSS est ajouté à la page, vous pouvez ajouter du code personnalisé au Brandguide. Le code HTML est ajouté à l'emplacement spécifique de la page et le code CSS s'applique aux zones de la zone de travail que vous avez définies pour affecter. Une fois terminé avec le code, sélectionnez l'icône en forme d'œil pour afficher les modifications. 

CSS peut également être modifié globalement sous paramètres car il est recommandé de définir ces styles au niveau supérieur et en cascade vers le bas. 

Ajout de vidéo à l'aide de HTML

Le bloc d'image de menu volant ne prend pas en charge l'ajout de blocs de contenu vidéo. Cependant, à l'aide du code d'incorporation de vidéo, la vidéo peut être ajoutée via des ressources HTML et vidéo personnalisées à partir de Brandfolder. Le support client ne peut pas vous aider lors de l'implémentation de votre code dans Brandguide.

1. Ouvrez le mode de l'élément pour la vidéo.
2. Accédez au Onglet Incorporer. 
3. Localisez le code d'intégration vidéo et sélectionnez Copier le lien. 
4. Collez le code dans le bloc HTML. 

Désinfection des blocs de code

Certains codes et éléments qu'il contient seront désinfectés à des fins de sécurité contre les attaques XSS.

Javascript n'est pas autorisé. 

Suppression de blocs de code 

La suppression des blocs de code supprime le bloc et tout le code écrit dans le bloc. Les CSS écrits au niveau des paramètres globaux resteront inchangés à moins d'être modifiés dans l'icône déroulante des paramètres.

Déplacement de blocs de code

Le déplacement du bloc de code après l'écriture du code HTML et CSS risque de rompre le bloc ou d'entraîner les effets escomptés du code. Pour de meilleurs résultats, écrivez le code après avoir défini la position des blocs. 

Blocs de couleur

L'ajout de blocs de couleur à votre Brandguide peut se faire en faisant glisser la couleur sur la toile.

Sources de couleur

Le bloc de couleur provient du dossier Brandfolder ou de la collection associée au Brandguide. Si aucune couleur n'apparaît dans le Brandguide, aucune n'a été ajoutée au Brandfolder ou à la collection. Pour ajouter des couleurs, ajoutez-les en tant qu'élément dans le dossier Brandfolder.

Synchronisation des couleurs

Lorsqu'une modification est apportée aux couleurs au niveau du dossier Brandfolder, elle est automatiquement répercutée dans le Brandguide. Si une modification est apportée dans Brandfolder et que la différence n'est pas reflétée dans Brandguide, vous pouvez synchroniser manuellement en sélectionnant la bouton de synchronisation circulaire en haut à droite de l'icône déroulante des couleurs.

Modes de couleur

Vous pouvez modifier les modes de couleur qui apparaissent à la fois dans le menu volant et dans la zone de travail.

1. Sélectionnez le icône paramètres dans le coin supérieur droit du menu volant de couleur.
2. Sélectionnez le cases à cocher pour afficher HEXADÉCIMAL, RVB et CMJN, puis sélectionnez Enregistrer. 
3. Une icône de copie apparaît en regard de la valeur de couleur.