Comment utiliser Divi pour créer différentes maquettes de schéma de couleurs de vos pages

La création de maquettes de schémas de couleurs pour vos clients est une étape importante du processus de conception Web. Parfois, le client peut avoir déjà en place une palette de couleurs de marque que vous pouvez utiliser pour le site. Mais souvent, vous devrez proposer quelques schémas de couleurs suggérés qui, selon vous, conviendront à la fois à la marque de l'entreprise et auront fière allure sur leur site Web.

Avec Divi, vous pouvez facilement modifier le schéma de couleurs de n'importe quelle mise en page donnée à l'aide de fonctionnalités de conception telles que Rechercher et remplacer et les suggestions de couleurs dans le générateur visuel. Et vous pouvez également créer plusieurs versions d'une page (avec différents schémas de couleurs) pour votre client.

Dans ce tutoriel, je vais vous expliquer le processus d'utilisation de Divi pour créer de nouvelles maquettes de schéma de couleurs pour une page d'accueil. J'espère que vous apprendrez quelques astuces en cours de route.

Commençons!

Configurez votre nouvelle page

Je vais utiliser la mise en page de la page d'accueil Business Coach pour ce didacticiel. Donc, si vous ne l'avez pas déjà fait, créez une nouvelle page et déployez le générateur visuel. Sélectionnez ensuite « Choisir une mise en page prédéfinie ». Dans la fenêtre contextuelle Ajouter à partir de la bibliothèque, sélectionnez la présentation de la page d'accueil Business Coach.

Une fois la mise en page chargée sur la page, n'oubliez pas de la publier.

Nous allons utiliser cette mise en page d'accueil pour créer différentes maquettes de schéma de couleurs. Mais pour l'instant, nous devons choisir un nouveau schéma de couleurs.

Choisir votre palette de couleurs

Vous avez peut-être déjà un schéma de couleurs en tête, mais sinon, vous pouvez soit utiliser les suggestions de couleurs de Divi, soit un générateur de schéma de couleurs tiers. Pour plus d'inspiration, vous pouvez parcourir le Web pour rechercher des combinaisons de couleurs qui conviennent à votre secteur d'activité.

Utilisation de générateurs de palettes de couleurs tiers pour créer votre palette de couleurs

Il existe de merveilleux générateurs de schémas de couleurs tiers (et gratuits) sur le Web pour vous aider à choisir le schéma de couleurs parfait pour votre site. Certains de mes générateurs de palettes de couleurs préférés proviennent de Coolers.co, Canva et Adobe.

La plupart de ces générateurs de schémas de couleurs généreront au moins cinq couleurs. Assurez-vous d'enregistrer toutes les couleurs dont vous avez besoin pour composer votre nouveau jeu de couleurs.

Créer un jeu de couleurs à l'aide des suggestions de couleurs intégrées de Divi

Depuis le lancement du nouveau gestionnaire de couleurs et des suggestions de couleurs magiques de Divi, Divi garde automatiquement une trace de vos couleurs enregistrées et récemment utilisées auxquelles vous pouvez accéder lors de la modification d'une option de couleur dans le Divi Builder. Vous pouvez afficher chaque palette en cliquant sur l'onglet "Enregistré" ou "Récent".

Divi dispose également d'un outil de suggestion de couleurs simple et intelligent intégré directement dans le constructeur visuel. Je ne vais pas rentrer dans tous les détails de l'algorithme utilisé (pas sûr de pouvoir quand même), mais de manière générale, Divi va générer une palette de couleurs complémentaires (et analogues) en fonction de la couleur de base actuelle (la couleur sélectionné dans l'option). Cela vous aidera à choisir des combinaisons de couleurs harmonieuses pour votre design.

Pour afficher les suggestions de couleurs (ou color-scape), cliquez simplement sur l'icône color-scape (celle avec trois points) directement sous l'option de couleur sélectionnée. Vous y trouverez des palettes générées à partir de couleurs complémentaires et analogues de vos couleurs enregistrées et récemment utilisées. Chaque ligne a un nouveau schéma de couleurs étendu pour chaque couleur de votre palette de couleurs récente ou enregistrée.

Bien que cet outil de suggestion de couleurs soit conçu pour faciliter la sélection des couleurs au niveau de la section, de la ligne et du module, vous pouvez facilement utiliser la palette de couleurs suggérée comme nouveau jeu de couleurs pour chaque page.

Création d'un schéma de couleurs pour la mise en page de la page d'accueil Business Coach

Commençons maintenant à créer de nouvelles maquettes de schéma de couleurs pour la mise en page de la page d'accueil Business Coach que nous avons ajoutée à notre nouvelle page plus tôt. Cette mise en page prédéfinie a actuellement un schéma de couleurs de base. La couleur principale est évidemment le bleu foncé utilisé partout. Il a également différentes nuances de gris comme couleurs d'accent. Il s'agit également d'une couleur blanche standard pour les arrière-plans de contenu et d'une couleur noire pour le texte. Vous pouvez donc imaginer que si vous remplacez chaque instance de cette couleur bleu foncé primaire par une autre couleur, vous aurez un tout nouveau schéma de couleurs.

À partir du générateur visuel, ouvrez le paramètre d'en-tête pleine largeur dans la section supérieure de la mise en page et recherchez la couleur du texte du bouton One. Il s'agit de la couleur bleue principale utilisée par cette mise en page. Cliquez maintenant sur l'icône de paysage de couleur pour afficher les suggestions de couleurs pour cette couleur bleue actuelle. Ils se trouvent dans la palette de couleurs de la rangée tout en haut.

À ce stade, vous pouvez sélectionner n'importe quelle couleur de la palette pour voir de nouveaux schémas de couleurs, mais pour cet exemple, je vais m'en tenir au premier généré.

Enregistrement de votre palette de couleurs dans la palette de couleurs par défaut

Afin de rendre les choses beaucoup plus pratiques par la suite, vous souhaiterez mettre à jour les nouvelles couleurs de votre palette de couleurs pour remplacer la palette par défaut des sélecteurs de couleurs dans les options de thème. De cette façon, vos couleurs seront disponibles sous la palette de couleurs enregistrée dans Visual Builder pendant le reste de vos changements de couleur.

Dans un nouvel onglet, accédez à Divi > Options du thème. Vous verrez l'option de palette de couleurs par défaut sous l'onglet Général. Il n'y a pas de moyen vraiment simple de copier la palette de couleurs générée à partir des suggestions de couleurs pour notre couleur bleue. Je suggère d'ouvrir votre page avec le constructeur visuel actif dans une fenêtre et les options du thème Divi dans une autre fenêtre. Copiez ensuite chaque code de couleur dans la palette de couleurs par défaut.

Enregistrer les paramètres.

Astuce : vous ne voudrez peut-être pas remplacer les deux premières couleurs par défaut (noir et blanc) pour faciliter la modification du texte et des arrière-plans ultérieurement, mais si vous avez besoin de tous les emplacements de couleur, n'hésitez pas à les utiliser.

La palette de couleurs par défaut ne sera pas mise à jour sur votre page actuelle car elle a déjà hérité de la palette de couleurs par défaut précédente. Vous devrez à nouveau créer une nouvelle page avec la mise en page pour voir la nouvelle palette de couleurs enregistrée dans vos paramètres.

Si cela vous dérange trop, vous pouvez choisir de mettre à jour la palette de couleurs par défaut pour votre page actuelle uniquement. Pour ce faire, ouvrez le menu des paramètres et cliquez sur l'icône Paramètres de la page. Mettez ensuite à jour la palette sous l'onglet Conception.

Cela mettra à jour la palette de couleurs pour toute la page sans avoir à créer une autre page.

La raison pour laquelle j'ai choisi de mettre à jour la palette de couleurs par défaut pour le thème (au lieu de simplement la page) était d'éviter d'avoir à ajouter de nouvelles palettes de couleurs à chaque nouvelle maquette de page que je créerai.

Utiliser Rechercher et remplacer pour mettre à jour les couleurs de votre page

Revenez maintenant à la mise en page de la page d'accueil avec votre générateur visuel actif et accédez à l'option Button One Text Color sous les paramètres d'en-tête pleine largeur (au même endroit que vous étiez auparavant). Maintenant, votre mise en page enregistrée ne s'affiche pas encore, mais ce n'est pas grave. Assurez-vous que la couleur bleu foncé d'origine est sélectionnée, puis cliquez sur l'icône de paysage de couleur pour déployer les suggestions de couleurs. Cela montrera notre même schéma de couleurs dans la rangée du haut.

Sélectionnez la couleur marron foncé (#54381c).

Ensuite, ouvrez le sélecteur de couleurs pour afficher le code de couleur et copiez le code de couleur dans votre presse-papiers en le mettant en surbrillance et en appuyant sur ctrl + C (ou Cmd + C).

Étant donné que nous ne voulons pas encore effectuer le changement, cliquez sur le bouton d'annulation violet en bas du modal des paramètres pour ramener la couleur bleue d'origine que nous devons remplacer.

Maintenant, faites un clic droit sur la couleur bleue d'origine et cliquez sur l'option Rechercher et remplacer.

Dans la fenêtre contextuelle Rechercher et remplacer, collez la couleur marron sous « Remplacer par ». Puisque nous voulons remplacer la couleur sur toute la page, vous pouvez conserver l'option "Dans" comme "Cette page". Assurez-vous de sélectionner l'option « Remplacer tout » afin que la portée du changement de couleur ne se limite pas aux seules couleurs du texte du bouton 1. Cliquez ensuite sur Remplacer.

N'oubliez pas de sauvegarder vos paramètres.

Découvrez maintenant le nouveau schéma de couleurs.

Maintenant, allez-y et enregistrez la mise en page dans votre bibliothèque Divi en ouvrant le menu des paramètres et en cliquant sur l'icône Enregistrer dans la bibliothèque. Donnez à la mise en page un nom comme « Marron », puis cliquez sur Enregistrer dans la bibliothèque.

Cela vous permettra de déployer cette version de votre mise en page sur une nouvelle page.

Ajoutez votre nouvelle mise en page de schéma de couleurs à une nouvelle page

Pour ajouter votre mise en page enregistrée avec votre nouveau schéma de couleurs marron à une nouvelle page, vous devez d'abord créer une nouvelle page. Donnez ensuite un titre à votre page (quelque chose comme « Marron ») et déployez le constructeur visuel. Sélectionnez ensuite Choisir une mise en page prédéfinie. Dans la fenêtre contextuelle Charger à partir de la bibliothèque, cliquez sur l'onglet « Vos mises en page enregistrées » et sélectionnez la nouvelle mise en page que vous venez d'enregistrer dans votre bibliothèque.

N'oubliez pas de publier votre page.

Répétez maintenant le même processus de création d'une nouvelle page et d'ajout de la mise en page enregistrée à la page. Cette fois, nommez votre page « Violet ».

Une fois la mise en page ajoutée à la page, assurez-vous de la publier. Ensuite, ouvrez le générateur visuel et ouvrez les paramètres d'en-tête pleine largeur et recherchez la couleur du texte du bouton (comme avant). Vous devriez maintenant voir que la palette de couleurs du thème enregistrée a été mise à jour avec vos nouvelles couleurs. Cela vous sera utile. Faites un clic droit sur l'option de couleur (actuellement le marron foncé), puis cliquez sur Rechercher et remplacer. Ouvrez le sélecteur de couleurs sous « Remplacer par » pour sélectionner une nouvelle couleur dans la palette de couleurs enregistrée. Cette fois, sélectionnez la couleur violette (#5a5ae2). Sélectionnez ensuite l'option Remplacer tout. Et n'oubliez pas de sauvegarder vos paramètres.

Et comme par magie, vous avez un schéma de couleurs violet pour votre page !

Création d'une maquette de page de schéma de couleurs avancé

Avec votre nouveau schéma de couleurs disponible, vous voudrez peut-être expérimenter plusieurs couleurs sur votre page. Par exemple, vous pouvez choisir d'avoir une couleur différente pour chaque section de votre page. Cela peut également être facilement fait avec la fonction « Rechercher et remplacer ».

Pour cette prochaine maquette, créez une nouvelle page et nommez votre page quelque chose comme "Multicolore". Déployez ensuite le générateur visuel, sélectionnez « Choisir une mise en page prédéfinie » et importez la même mise en page enregistrée (marron) sur la page (comme vous l'avez fait auparavant). Dans le générateur visuel, ouvrez les paramètres de l'en-tête pleine largeur et recherchez la couleur du texte du bouton (comme avant). Faites un clic droit sur le bouton One Text Color et sélectionnez "Rechercher et remplacer". Ensuite, mettez à jour les éléments suivants :

Dans : Cette section
Remplacer par : #0f1f2e
Sélectionnez Remplacer tout

Cliquez ensuite sur le bouton Remplacer.

N'oubliez pas de sauvegarder les paramètres.

Cette mise à jour sur la section d'en-tête supérieure avec le schéma de couleurs bleu foncé.

Sautez maintenant la deuxième section (elle peut conserver la palette de couleurs marron) et passez à la troisième section. Trouvez le bouton au bas de la section avec le titre « Toujours pas sûr ? Entrer en contact". Ouvrez les paramètres du bouton, faites un clic droit sur la couleur d'arrière-plan du bouton et sélectionnez « Rechercher et remplacer ».

Ensuite, mettez à jour Rechercher et remplacer comme suit :

Dans : Cette section
Remplacer par : #366ba2
Sélectionnez Remplacer tout

Cliquez ensuite sur le bouton Remplacer. Et n'oubliez pas de sauvegarder les paramètres.

Sautez la cinquième section. Répétez ensuite le même processus pour remplacer la couleur marron dans la section 6 (celle avec « Entreprises et personnes avec qui j'ai travaillé ») par la même couleur bleu foncé dans la première section. Vous pouvez le faire en ouvrant le module de texte avec le gros texte de citation sous l'option Couleur du texte du texte.

Dans la dernière section, recherchez le module de texte dans la colonne de droite et ouvrez les paramètres du module de texte. Faites un clic droit sur la couleur d'arrière-plan et sélectionnez l'option Rechercher et remplacer. Mettez à jour les éléments suivants :

Dans : Cette section
Remplacer par : #5a5ae2 (la couleur violette)
Sélectionnez Remplacer tout

Cliquez ensuite sur le bouton Remplacer et enregistrez les paramètres.

Vous avez maintenant une maquette de page d'accueil avec plusieurs couleurs dans chaque section.

Création d'un menu pour prévisualiser chaque maquette de schéma de couleurs

La dernière étape consiste à créer un nouveau menu principal pour permettre aux clients de prévisualiser facilement chaque maquette de schéma de couleurs. Depuis votre tableau de bord WordPress, accédez à Apparence > Menus. Donnez ensuite un titre à votre menu, cliquez sur Créer un menu et ajoutez les pages que vous avez créées à votre nouveau menu. Assurez-vous ensuite de sélectionner Menu principal comme emplacement d'affichage. Et cliquez sur Enregistrer le menu.

Vous avez maintenant un site prêt à présenter vos maquettes de schéma de couleurs.

Dernières pensées

Avec les options de conception de Divi, vous pouvez facilement déployer des schémas de couleurs entièrement nouveaux pour vos mises en page à l'aide de suggestions de couleurs intégrées et de l'option « Rechercher et remplacer » avec Visual Builder. Cela facilitera la présentation de différentes maquettes de schémas de couleurs à vos clients. J'espère que ce tutoriel vous aidera à trouver le schéma de couleurs parfait pour votre prochain projet. J'ai hâte de vous entendre dans les commentaires.

À votre santé!