10 étapes pour utiliser un nouveau pack de mise en page Divi pour votre prochain projet

Dans le cadre de l'initiative de conception Divi d'Elegant Themes, Kenny et l'équipe de conception nous gâtent chaque semaine avec de nouveaux packs de mise en page Divi GRATUITS. Les packs de mise en page peuvent être téléchargés à partir du billet de blog présentant le pack de mise en page tous les lundis. Beaucoup d'entre vous ont utilisé les packs de mise en page pour créer de tout nouveaux sites Web en une très petite fraction du temps que cela vous prendrait normalement.

Dans le post d'aujourd'hui, je vais vous montrer comment tirer le meilleur parti de ces mises en page en vous proposant 10 étapes clés à suivre lors de l'utilisation d'un nouveau pack de mise en page Divi pour votre prochain projet. J'ai également inclus quelques conseils moins connus pour gérer ces mises en page comme un pro.

Prendre plaisir!

Remarque : Comme toutes les étapes, celles-ci doivent être effectuées dans l'ordre dans lequel elles sont répertoriées. Par exemple, si vous ne définissez pas d'abord votre palette de couleurs par défaut, elle ne sera pas disponible lorsque vous modifierez votre couleur d'accent par défaut.

10 étapes pour utiliser un nouveau pack de mise en page Divi pour votre prochain projet

Abonnez-vous à notre chaîne Youtube

#1 Importez d'abord les mises en page dans votre bibliothèque Divi

La meilleure façon d'ajouter de nouvelles mises en page à votre thème Divi est de les importer d'abord dans la bibliothèque Divi. Ensuite, lors de la création d'une nouvelle page, vous pouvez ajouter la nouvelle mise en page à partir de votre bibliothèque.

Avant d'ajouter les mises en page à votre site Web, vous devez vous assurer de télécharger le pack de mise en page à partir de l'article de blog et de décompresser le fichier.

Depuis votre tableau de bord WordPress, accédez à Divi > Bibliothèque Divi et cliquez sur le bouton Importer & Exporter en haut à gauche de la page. Dans le modal de portabilité qui s'affiche, sélectionnez l'onglet Importer et cliquez sur Choisir un fichier. Recherchez le dossier du pack de mise en page décompressé et sélectionnez le fichier json avec « All » dans le nom de fichier. Cela téléchargera toutes les mises en page dans votre bibliothèque en même temps, au lieu d'avoir à faire chacune d'elles individuellement. Par exemple, si vous souhaitez télécharger le pack de mise en page de mode, vous devez choisir le fichier nommé Fashion_All.json dans le dossier de mise en page. Cliquez ensuite sur Importer les mises en page Divi Builder.

#2 Ajouter des mises en page aux nouvelles pages

Ce processus est assez simple. Depuis votre tableau de bord WordPress, accédez à Pages > Ajouter un nouveau. Entrez le titre de la page que vous devez créer. Cliquez pour utiliser le Divi Builder et déployer le Visual Builder. Ouvrez le menu des paramètres en bas de la page et cliquez sur l'icône "Charger à partir de la bibliothèque" plus sur la gauche. Dans le modal Charger à partir de la bibliothèque qui apparaît, cliquez sur l'onglet "Ajouter à partir de la bibliothèque" et sélectionnez la nouvelle mise en page dans la liste pour charger la nouvelle mise en page.

Répétez ce processus pour chaque nouvelle page, en ajoutant une nouvelle mise en page à chacune.

#3 Créez votre menu principal

S'il s'agit d'une nouvelle installation, vous commencerez à voir ces nouvelles pages dans votre barre de menu principale dans l'en-tête supérieur. C'est parce que vous n'avez pas encore créé de menu principal, donc par défaut votre menu sera rempli de toutes les pages et publications que vous ajoutez à votre site.

Pour créer votre menu principal, accédez au tableau de bord WordPress, procédez comme suit :

1. Accédez à Apparence > Menus.
2. Sélectionnez le lien « Créer un nouveau menu » en haut de la page.
3. Saisissez un nom de menu.
4. Sélectionnez vos éléments de menu dans la bascule de gauche sous Pages.
5. Cliquez sur Ajouter au menu
6. Organisez vos éléments de menu en les faisant glisser en place.
7. Dans le menu Paramètres en bas de la page, sélectionnez « menu principal » comme emplacement d'affichage.
8. Enregistrer le menu

#4 Définissez votre palette de couleurs par défaut

J'oublie souvent de faire cette étape et je le regrette à chaque fois. La définition de votre palette de couleurs par défaut rend très pratique la modification des couleurs à l'aide du constructeur Divi. Je ne peux pas vous dire combien de fois je dois revenir à un autre module pour trouver un code de couleur, ou inspecter un élément à l'aide d'outils de développement, ou utiliser mon extension de navigateur pipette pour trouver simplement la même couleur que j'ai utilisée et à nouveau. Ne vous faites pas ça !

Vous pouvez définir la palette de couleurs par défaut en accédant à votre tableau de bord WordPress et en naviguant vers Divi > Options du thème. Et là, dans l'onglet général, vous trouverez l'option répertoriée. Ajoutez-y les couleurs dont vous avez besoin. C'est toujours une bonne idée de garder la couleur blanche (#ffffff) et quelques couleurs sombres (comme #333333 ou tout ce que vous avez défini pour votre couleur de police sombre) à utiliser pour styliser facilement les arrière-plans et le texte.

#5 Définissez votre couleur d'accent globale

Vous trouverez probablement votre chemin vers le personnalisateur de thème assez tôt dans votre processus de personnalisation de votre nouveau site. Lorsque vous le faites, vous devez d'abord modifier la couleur d'accent global.

Pour modifier votre couleur d'accent globale, accédez au personnalisateur de thème et accédez à Paramètres généraux> Paramètres de mise en page et recherchez l'option Couleur d'accent de thème en bas.

Remarquez les nouvelles couleurs disponibles dans la palette de couleurs depuis que vous avez mis à jour la palette de couleurs par défaut dans vos options de thème.

Ensuite, une fois que vous l'avez modifié, enregistrez et publiez vos paramètres et actualisez votre page.

La couleur d'accent du thème mise à jour sera appliquée automatiquement à environ 20 autres éléments, c'est pourquoi il est important de la mettre à jour en premier.

Certains des éléments qui sont automatiquement mis à jour incluent :

Couleur du lien du corps
Couleur de l'en-tête du widget
Couleur de la puce du widget
Couleur de survol des icônes sociales du pied de page
Couleur par défaut des icônes
Couleur du lien actif du menu de pied de page
Couleur d'arrière-plan du menu secondaire
Couleur d'arrière-plan Slide In et Fullscreen Header Style
Icône de menu hamburger pour la couleur du menu mobile
Couleur du lien actif du menu principal
Couleur de la ligne du menu déroulant
Couleur d'arrière-plan du menu secondaire
Couleur d'arrière-plan du menu déroulant secondaire
Couleur d'arrière-plan du menu secondaire
Couleur du lien du menu principal actif
Couleur du lien actif du menu de pied de page

Si vous ne voyez pas que les modifications prennent effet sur ces éléments immédiatement, vous devrez peut-être enregistrer et quitter le personnalisateur, actualiser la page et revenir au personnalisateur.

#6 Stylez votre en-tête

Vous pouvez styliser votre en-tête à partir du personnalisateur de thème. Accédez simplement à votre tableau de bord WordPress et accédez à Divi > Personnalisateur de thème > En-tête et navigation.

Vous devrez certainement styliser votre en-tête pour qu'il corresponde à vos nouvelles mises en page. Tout d'abord, je déciderais du style d'en-tête que vous voulez en premier (par défaut, pleine largeur, centré, etc.), mais quel que soit votre choix, assurez-vous de faire correspondre le style de votre en-tête avec vos nouvelles mises en page. Et assurez-vous que les éléments de votre menu sont faciles à lire et à naviguer.

Vous disposez d'options pour vos menus de navigation principal, secondaire et fixe. Prenez le temps de styliser tout ce qui s'applique à votre site.

Si vous définissez votre couleur d'accent globale, certains des paramètres de couleur d'en-tête seront modifiés pour vous. C'est pourquoi il est important de définir cette couleur en premier.

#7 Stylez votre barre inférieure

Vous pouvez également styliser votre barre inférieure à partir du personnalisateur de thème. Accédez simplement à votre tableau de bord WordPress et accédez à Divi > Personnalisateur de thème > Pied de page > Barre inférieure.

La barre du bas ne doit pas être négligée. Combiné avec la barre de navigation en haut de votre page, il devient un serre-livres nécessaire qui encadre toute la page. Bien sûr, le fond noir par défaut peut à peu près « fonctionner » sur n'importe quel site, mais je l'expérimenterais un peu plus. Parfois, j'aime donner à la barre inférieure une couleur d'arrière-plan légèrement plus foncée que la couleur d'arrière-plan de la section de pied de page directement au-dessus.

#8 Utilisez des raccourcis pour apporter des modifications de conception à votre mise en page

Étant donné que vos mises en page sont livrées avec des paramètres de conception intégrés à vos modules, apporter des modifications à vos paramètres de conception à l'échelle mondiale (à l'échelle du site) peut être un peu fastidieux. Mais il existe quelques astuces pour accélérer le processus. Pour commencer, j'apporterais d'abord des modifications à une mise en page. De cette façon, vous pouvez enregistrer des éléments de la page modifiée pour les ajouter à vos autres pages qui nécessitent des modifications de conception. Voici quelques astuces pour accélérer le processus de modification de la conception d'une certaine mise en page.

Utilisation des options de clic droit

N'oubliez pas que vous pouvez utiliser les options du clic droit pour copier et coller les styles de module d'un module à l'autre tant qu'il s'agit du même type de module.

Restaurez les valeurs par défaut afin de pouvoir les contrôler à l'aide du personnalisateur de thème

Actuellement, certains paramètres sont disponibles pour les modules qui ne sont pas personnalisables par le personnalisateur de thème (comme l'ombre de la boîte par exemple). En règle générale, le personnalisateur de thème modifiera tout ce qui reste au paramètre par défaut dans un module, si ce paramètre est disponible dans le personnalisateur. Mais pour certains modules, il peut être judicieux de restaurer certains paramètres de conception à leurs valeurs par défaut afin que vous puissiez contrôler le style à partir du personnalisateur de thème.

Un bon cas d'utilisation pour cela serait les paramètres de corps de texte et de texte d'en-tête. Ainsi, par exemple, si vous avez un module de texte dans votre mise en page qui a une police, une couleur de texte et une taille de texte personnalisées, vous ne pourrez pas modifier ces éléments à partir du personnalisateur de thème tant que vous ne les aurez pas restaurés à leur état par défaut.

Utilisez le champ de recherche pour localiser les paramètres que vous souhaitez modifier

Identifiez facilement ce qui est défini par défaut

Lorsque vous recherchez les options que vous souhaitez modifier, vous remarquerez que certaines options sont accompagnées d'une icône « restaurer les paramètres par défaut ». Cela signifie qu'il a été modifié par rapport à la valeur par défaut.

Restaurez tous les paramètres de conception par défaut en un clic

Pour ceux d'entre vous qui aiment le constructeur visuel autant que moi, vous n'avez probablement pas encore découvert cette astuce utile. Si vous êtes dans le générateur principal, cliquez pour modifier les paramètres d'un module, puis sélectionnez l'onglet Conception. Vous remarquez quelque chose ? Il s'agit d'une petite icône/bouton "Restaurer par défaut" situé dans l'onglet.

En cliquant dessus, vous serez invité à confirmer que vous souhaitez perdre ces paramètres. Si vous sélectionnez oui, tous les paramètres de votre onglet de conception reviendront à leur état par défaut. Cela sera bien sûr ajouté au constructeur visuel à l'avenir.

#9 Enregistrer les éléments clés pour créer de nouvelles pages ou de nouveaux articles

Parfois, vous devrez créer des pages ou des articles supplémentaires qui nécessitent une mise en page différente. Vous souhaitez peut-être une mise en page plus générale avec un en-tête, une section de contenu et une section de pied de page. Ou peut-être souhaitez-vous créer une page de destination plus élaborée. Vous pouvez même créer une mise en page personnalisée pour vos articles de blog. Le moyen le plus simple d'y parvenir est d'utiliser des éléments des mises en page dont vous disposez déjà pour en créer de nouvelles. Et c'est le moyen le plus efficace de garder votre conception cohérente sur l'ensemble du site. Passons en revue quelques-uns des éléments de base que vous devriez envisager d'utiliser pour créer des mises en page supplémentaires.

En-tête de page

C'est une évidence. Chaque page a besoin d'un en-tête. Je garderais certainement une section d'en-tête pour votre bibliothèque. Je suggérerais de trouver une version plus générique de vos en-têtes afin qu'elle s'adapte à n'importe quel type de page. Habituellement, la mise en page de contact est un bon candidat pour cela, car elle comporte généralement un titre, un sous-titre et une couleur d'arrière-plan de base centrés.

En-têtes de section

C'est aussi une bonne idée d'enregistrer une version de vos en-têtes de section. De cette façon, lorsque vous ajoutez plus de contenu à vos nouvelles pages, vous aurez un nouvel en-tête stylisé et prêt à être utilisé.

Section de contenu

Dans de nombreux cas, un simple module de texte avec un fond blanc est tout ce dont vous avez besoin pour cela, mais parfois vos nouvelles mises en page ont des sections de contenu uniques. Il peut s'agir d'un module de texte avec une zone d'ombre ou de plusieurs modules de présentation stylisés d'une manière unique. Afin de conserver la cohérence, enregistrez ce dont vous avez besoin dans la bibliothèque pour une utilisation future.

Boutons (à la fois clairs et foncés)

Vous devrez probablement ajouter d'autres boutons au fur et à mesure que vous créez de nouvelles pages. Avoir une version sombre et claire de votre bouton disponible dans votre bibliothèque est extrêmement pratique. Je suggère d'enregistrer un module de boutons pour les versions sombres et claires.

Section de pied de page

Chaque mise en page est généralement accompagnée d'une belle section de pied de page qui se trouve juste au-dessus de la barre inférieure de votre page. Certaines mises en page ont des versions différentes de cette section de pied de page. Ces sections incluent généralement des informations de contact, des options de courrier électronique et d'autres informations importantes. Trouvez-en un que vous souhaitez utiliser et enregistrez-le dans votre bibliothèque pour une utilisation future.

Désormais, chaque fois que vous voudrez créer une nouvelle page, vous aurez le choix entre ces sections, lignes et modules.

#10 Définir les éléments globaux

Global peut vous faire gagner beaucoup de temps lors de futures modifications de votre site, mais cela demande un peu de prévoyance. Vous devez identifier les éléments de vos mises en page qui seront fréquemment utilisés sur votre site et nécessiteront des mises à jour plus uniformes. Les bons candidats pour les éléments globaux seraient les sections de pied de page, les modules d'appel à l'action, les modules de boutons et les options d'e-mail, car ils doivent être dispersés sur votre site mais nécessitent le même style et le même contenu. De cette façon, la mise à jour d'un mettra à jour tout.

Dernières pensées

J'espère que vous avez trouvé ces étapes utiles. Mon objectif pour cet article était de fournir des directives générales ou des bonnes pratiques lors de l'importation de ces mises en page sur une nouvelle installation dans le but de créer un nouveau site Web. Suivre ces étapes dans l'ordre vous évitera de perdre du temps et vous donnera une bonne base sur laquelle bâtir.