La personnalisation de la marque permet à tu de s'approprier l'ensemble de la plateforme en la personnalisant avec son logo, son favicon et ses couleurs afin que les clients voient la marque tu partout.
Pour ajouter une marque personnalisée :
-
Connectez-vous à votre compte pour accéder au tableau de bord.
-
Dans l'onglet Marque blanche, cliquez sur Marque personnalisée.
-
Dans le panneau latéral, cliquez sur Remplacer pour ajouter une image de logo. La résolution maximale de l'image du logo est de 43px par 227px (hauteur par largeur). Pour supprimer le logo, cliquez sur Supprimer. Le logo s'affiche sur la page de connexion, le tableau de bord, l'éditeur et les pages de prévisualisation.
-
Dans le panneau latéral, cliquez sur Remplacer pour télécharger une image de favicon. Pour revenir à l'image par défaut, cliquez sur Rétablir la valeur par défaut. Pour de meilleurs résultats, téléchargez un fichier .png, .jpeg, ou .ico 16x16 ou 32x32 px.
-
Dans la section Choose tu colors, cliquez sur une couleur pour en sélectionner une nouvelle ou saisissez une valeur HEX. Vous trouverez ci-dessous une description de chaque champ :
-
Barre supérieure est la couleur de la barre supérieure de votre client sur la plateforme. Nous vous suggérons d'utiliser une couleur proéminente, mais n'oubliez pas qu'il s'agit d'une barre d'outils. Choisissez donc une couleur qui ne submergera pas les utilisateurs lorsqu'ils chercheront les icônes ou le site tool dont ils ont besoin dans leur tableau de bord ou leur éditeur.
-
La couleur primaire est la couleur de fond du principal bouton CTA (appel à l'action) sur la plateforme ainsi que d'autres éléments proéminents.
-
Le texte sur la couleur primaire est la couleur du texte qui apparaît sur tout ce qui est personnalisé pour correspondre au paramètre de couleur primaire. Veillez à ce qu'il y ait un fort contraste entre les couleurs primaires et le texte sur les couleurs primaires.
-
La couleur secondaire est la couleur des éléments supplémentaires généralement cliquables qui ne constituent pas nécessairement l'action principale à l'écran. La couleur secondaire est utilisée pour les éléments affichés sur un fond blanc. Utilisez une couleur qui contraste bien avec un fond blanc.
-
-
(Facultatif) Cliquez sur HTML/CSS pour ajouter un code personnalisé. Pour en savoir plus, consultez la section Ajouter du HTML et du CSS personnalisés à la marque blanche.
-
Cliquez sur Enregistrer les modifications.
Pour ajouter des feuilles de style CSS ou HTML personnalisées à l'image de marque de votre plateforme en marque blanche :
-
Connectez-vous à votre compte pour accéder au tableau de bord.
-
Dans la navigation supérieure, cliquez sur White Label, puis sur Custom Branding.
-
Sous Modifier avec HTML/CSS, cliquez sur HTML/CSS.
-
Sélectionnez l'onglet approprié (HTML ou CSS).
-
Insérez votre code personnalisé dans le champ prévu à cet effet.
Remarque
-
Des CSS personnalisés peuvent être ajoutés au tableau de bord en marque blanche, à l'éditeur, à la page de réinitialisation du site, à l'aperçu et aux écrans de connexion.
-
Dans l'onglet CSS, cliquez sur les classes pré-fixées fournies pour éviter de faire des erreurs.
-
-
Cliquez sur Terminé.
-
Dans l'écran Custom Branding, cliquez sur Save Changes.
Pour consulter vos modifications, saisissez votre compte via votre domaine en marque blanche.
Remarque
-
Duda n'assure pas le dépannage des codes personnalisés. Nous vous recommandons de consulter un professionnel si vous n'avez que peu ou pas d'expérience dans la mise en œuvre de codes personnalisés.
-
Duda utilise déjà jQuery, il n'est donc pas nécessaire de réimporter la bibliothèque jQuery.
-
Nous vous recommandons de charger les scripts de manière asynchrone, afin que l'ensemble de l'éditeur se charge rapidement. Pour en savoir plus, consultez ce guide sur le chargement des scripts.
-
Nous vous recommandons d'attendre la fin de l'événement window.onload avant de charger un code javascript. Cela permet à l'utilisateur de commencer à modifier le site Web sans que votre code supplémentaire retarde l'expérience d'édition.