Personnalisation avancée de l'image de marque du centre d'aide

Le logo, l'image principale, les liens de l'en-tête, la couleur de la marque et l'e-mail du support sont expliqués dans Personnaliser l'image de marque de votre portail. Cet article couvre tout le reste. Chaque modification s'enregistre automatiquement.

Favicon

Le favicon est la petite icône dans l'onglet du navigateur. Sous Image de marque, cliquez sur Importer à côté de Favicon et choisissez un PNG ou un WebP carré de 32 à 1024 pixels de large, jusqu'à 256 KB. Il s'affiche sur toutes les pages publiques de votre centre d'aide ; Retirer le favicon le supprime. Sans favicon, l'onglet affiche la première lettre du nom de votre portail sur la couleur de votre marque. Votre centre d'aide n'affiche jamais l'icône Deskwoot. Choisissez une icône simple qui reste lisible à 16 pixels.

Police de la page, des titres et de lecture

Sous Apparence, Police définit la police de tout le centre d'aide : Police du système par défaut (celle de l'appareil du visiteur), Instrument Sans, Inter, Roboto, Open Sans, Lato, Poppins, Montserrat, Nunito, Source Sans ou Plus Jakarta Sans. Deskwoot la charge pour vous, vous n'avez donc rien à héberger ni à importer.

• Police des titres définit les titres des pages et des sections. Identique à la police de la page est le réglage par défaut ; vous pouvez choisir n'importe quelle police de page.
• Police de lecture, sous Image de marque, définit uniquement le texte de vos articles. Literata est une police à empattements sobre, faite pour les longues lectures, et toutes les polices de page sont aussi proposées.

Une police à empattements pour le texte des articles avec une police sans empattements nette pour les en-têtes et les menus se lit comme un beau livre.

Clair, sombre ou automatique

Le Thème de couleur propose 3 options :

• Clair (par défaut) : surfaces claires, texte foncé.
• Sombre : surfaces sombres, texte clair, pour les marques aux couleurs sombres.
• Automatique (suit l'appareil du visiteur) : sombre pour les personnes qui utilisent leur appareil en mode sombre, clair pour tous les autres.

Le thème s'applique à toutes les pages publiques : accueil, collections, articles, recherche et la page affichée pour une adresse qui n'existe pas.

Vos propres couleurs

Sous Couleurs du thème, vous affinez la palette sans écrire de CSS : Page, Cartes, Bordures, Texte, Atténué (texte secondaire) et Titres, chacune en valeur hexadécimale. Il y a une palette pour le Mode clair et une pour le Mode sombre. Le thème Clair affiche la palette claire, Sombre la palette sombre et Automatique les deux, pour que vous puissiez régler les couleurs de chacune. Une couleur que vous ne modifiez pas reste celle d'origine, et Réinitialiser rétablit toute une palette. La couleur de votre marque reste utilisée pour les liens, les boutons et les touches de couleur.

L'image principale

Trois réglages sous Apparence déterminent comment le texte s'affiche sur votre image principale. Ils s'appliquent à la page d'accueil et au bandeau d'image de toutes les autres pages.

• Texte sur l'image : Clair ou Sombre. Un texte sombre convient aux images lumineuses ; les boutons et les pastilles sur l'image s'y adaptent.
• Voile sur l'image : Aucun, Léger (par défaut) ou Fort. Un voile plus fort garde le texte lisible sur les images chargées.
• Cadrage de l'image : Automatique, Haut, Centre ou Bas, la partie de l'image qui reste visible quand un bandeau n'en montre qu'une partie.

Coins, en-tête et icônes des collections

• Coins : Carrés, Doux (par défaut) ou Arrondis, pour les cartes, les boutons et les petites étiquettes.
• En-tête : Clair (par défaut) ou Couleur de la marque, la barre en haut de chaque page.
• Icônes des collections : ce qui s'affiche derrière l'icône de chaque collection dans la bibliothèque. Image montre une partie de votre image principale, Couleur de la marque une teinte de votre couleur et Icône seule l'icône toute seule. Sans image principale, Image affiche la couleur de la marque.

Pages d'article

Sous Pages d'article, vous activez ou désactivez chaque partie autour du texte, pour tout le centre d'aide :

• Barre latérale des collections sur les pages d'article, voir Navigation entre les articles du centre d'aide.
• Sur cette page : les titres d'un guide plus long sous forme de liens à côté du texte, ou au-dessus sur mobile.
• Ce guide vous a-t-il aidé ? : la question à la fin de chaque guide, voir Avis sur les articles d'aide.
• Précédent, suivant et Continuer la lecture : les liens vers le guide précédent et le suivant, et d'autres guides de la collection.

Vos propres titres de section

Dans l'onglet Design, Titres des sections vous permet de nommer vous-même les sections de la page d'accueil : le titre de la bibliothèque, le titre Les plus lus, le titre Besoin d'aide supplémentaire ? et le texte en dessous. Avec les onglets de langue (EN, DE, ES, FR, PT), vous donnez à chaque titre sa propre traduction. Un champ vide garde le titre d'origine, qui suit la langue du visiteur, et un titre sans traduction affiche votre texte en anglais.

Pied de page dans d'autres langues

Avec Utiliser un pied de page personnalisé, sous Pied de page personnalisé, vous créez jusqu'à 4 colonnes de liens et une ligne de copyright ou de mentions légales. Les onglets de langue de Langues du pied de page donnent à chaque titre de colonne et à chaque libellé de lien un texte en allemand, espagnol, français ou portugais. Un titre ou un libellé sans traduction s'affiche en anglais.

CSS personnalisé

Pour tout ce que les réglages ne permettent pas, ajoutez du CSS personnalisé (avancé) dans l'onglet Design. Il s'applique uniquement à votre centre d'aide public, jamais au tableau de bord, et il l'emporte sur les styles de Deskwoot sans !important.

• À l'enregistrement, les règles @import, les adresses javascript: et les autres éléments risqués du même genre sont supprimés.
• Jusqu'à 50 000 caractères, largement assez pour adapter votre marque.
• Les éléments portent des attributs data-hc stables (par exemple [data-hc="article"] ou [data-hc="category-grid"]), qui font de meilleurs sélecteurs que les noms de classe.

Votre propre HTML d'en-tête et de pied de page (Enterprise)

Avec Enterprise, une fois que votre centre d'aide fonctionne sur votre propre domaine actif, vous pouvez coller l'en-tête de votre site web comme HTML d'en-tête personnalisé. Il remplace alors l'en-tête du centre d'aide, et sur les pages intérieures, la recherche et le choix de la langue passent dans le bandeau d'image juste en dessous. Votre propre HTML de pied de page remplace de la même façon le pied de page en bas de chaque page.

Les deux sont nettoyés à l'enregistrement : les scripts, les gestionnaires d'événements, les blocs <style>, les iframes, les formulaires et les adresses javascript: sont supprimés. Les classes et les styles en ligne restent, vous pouvez donc finir le rendu avec du CSS personnalisé.

Historique du design

Chaque fois que vous modifiez la couleur de la marque, le titre de la page, le sous-titre, les liens de l'en-tête, le CSS personnalisé, les sections de la page d'accueil et leurs titres, le texte, le voile ou le cadrage de l'image principale, les coins, l'en-tête, les icônes des collections ou les parties des pages d'article, Deskwoot conserve l'état précédent. Le panneau Historique de l'onglet Design indique qui a modifié quoi, et un clic suffit pour revenir à un ancien rendu. Le logo, l'image principale, le favicon, les polices, le thème, les couleurs du thème et votre propre HTML d'en-tête ou de pied de page ne font pas partie de cet historique.

Questions fréquentes

Quelles options nécessitent le forfait Enterprise ?

La marque blanche et votre propre HTML d'en-tête et de pied de page, qui nécessitent aussi un domaine personnalisé actif. Tout le reste de ce guide est inclus avec le centre d'aide dès Startup.

Puis-je utiliser une police pour les titres et une autre pour les articles ?

Oui. Police définit tout le centre d'aide, Police des titres les titres des pages et des sections, et Police de lecture uniquement le texte des articles, par exemple Instrument Sans avec Literata.

Puis-je modifier les couleurs du thème clair ?

Oui. Couleurs du thème propose une palette Mode clair à côté de la palette Mode sombre. Avec Automatique, vous réglez les deux.

Mon image principale est lumineuse et le titre est difficile à lire. Que faire ?

Réglez Texte sur l'image sur Sombre, ou gardez un texte clair et choisissez Fort sous Voile sur l'image. Cadrage de l'image place la partie calme de l'image derrière le texte.

Puis-je masquer « Ce guide vous a-t-il aidé ? » ou « Sur cette page » ?

Oui. Désactivez-les sous Paramètres > Pages d'article. La modification s'applique à tous les articles du centre d'aide.

Mon centre d'aide affichera-t-il un jour le favicon Deskwoot ?

Non. Sans votre propre favicon, l'onglet du navigateur affiche la première lettre du nom de votre portail sur la couleur de votre marque.

Dois-je utiliser les réglages ou du CSS personnalisé ?

D'abord les réglages : ils ne demandent pas de code et continuent de fonctionner quand le centre d'aide évolue. Utilisez du CSS personnalisé uniquement pour ce que les réglages ne proposent pas.

Puis-je coller le menu de mon site web dans le centre d'aide ?

Oui, avec Enterprise et un domaine personnalisé actif, comme HTML d'en-tête personnalisé. Sinon, les liens de l'en-tête dans l'onglet Paramètres ajoutent des liens vers votre site web dans l'en-tête habituel.

Puis-je annuler une modification du design ?

Les modifications de la couleur de la marque, du titre de la page, du sous-titre, des liens de l'en-tête, du CSS personnalisé, des sections de la page d'accueil et de leurs titres, du texte, du voile et du cadrage de l'image principale, des coins, de l'en-tête, des icônes des collections et des parties des pages d'article peuvent être rétablies depuis le panneau Historique de l'onglet Design. En revanche, les polices, le thème, les couleurs du thème, le favicon, les images et votre propre HTML d'en-tête ou de pied de page ne peuvent pas être rétablis.