fbpx

12 juillet 2021

}

5 min. de lecture

Utilise DIVI comme une pro avec ces 3 astuces

Par Laure

Dans DIVI

Au cœur du succès du thème Divi, il y a le Divi Builder, l’interface en “drag&drop” (soit glisser-déposer en français) qui permet de construire des pages et des articles de blog en créant simplement un modèle et en y ajoutant du contenu… tout ça sans avoir à faire une seule ligne de code.

Et c’est vrai ! Pas besoin de savoir coder pour utiliser Divi. Cependant même si le Divi Builder est  bien pensé et intuitif, vous avez quand même certaines choses à apprendre. Dans cet article, je vais vous montrer comment rapidement dépasser le “J’ai acheté le thème Divi, maintenant je fais quoi ?” et apprendre à utiliser Divi comme un pro.

Malheureusement, même si ces astuces vous font gagner en temps et en efficacité, je ne peux pas apprendre Divi pour vous. Jouez avec le thème, faites des essais en créant des pages, consultez la documentation de Divi et regardez leurs vidéos, puis mettez en pratique. Recommencez si nécessaire pour obtenir le résultat attendu, puis admirez votre travail. Félicitez-vous d’avoir créé un si beau design

Astuce 1 : Créez vos pages avec le Divi Builder 

Créer une page Divi commence de la même manière que créer une page dans l’éditeur de WordPress.

Depuis votre tableau de bord, cliquez sur Pages > Ajouter et vous arrivez sur la page classique de WordPress.

La seule différence, si vous avez activé le thème Divi, est d’avoir deux boutons :

  1. Utiliser Divi Builder en violet 
  2. Utiliser mise en forme par Défaut en gris

Construire ses pages from scratch

Cliquez sur le bouton violet et l’interface du constructeur de page apparaitra. Choisissez bien de construire en front end, c’est-à-dire en construisant en visualisant le résultat instantané sur votre écran. Il vous demandera :

  1. de choisir si vous souhaitez construire votre page en partant de 0, 
  2. en vous servant d’un layout 
  3. ou en prenant une page enregistrée dans votre bibliothèque

Si vous avez une idée précise du design de votre page, cliquez sur le 1er bouton pour construire en partant de 0. 

À vous de jouer maintenant :

  1. Choisissez quel type de section vous souhaitez, 
  2. une fois choisie, vous choisirez combien vous souhaitez de colonnes dans votre rangée 
  3. enfin quel module vous voulez mettre dans votre première colonne.

C’est là que le fun va commencer ! Vous allez pouvoir enfin utiliser toute la puissance du builder.

Ajoutez d’autres sections, d’autres rangées, d’autres modules, dupliquez les éléments, modifiez l’ordre des sections ou des rangées en les glissant/déposant où bon vous semble.

Si vous avez activé la page en construction de votre site ou si vous travaillez sur une version de votre site en local, alors rassurez-vous personne ne voit rien. Vous pouvez faire tous les essais que vous voulez, vous ne casserez pas votre site.

Quand vous vous sentirez à l’aise est satisfaite de votre page, ajoutez votre contenu texte et images dans les modules pour avoir une véritable page. Créez-en quelques autres pour pouvoir ajuster le menu de navigation juste après et configurer d’autres petites choses.

Vous pouvez en apprendre plus et vous le devez pour arriver à un résultat satisfaisant. C’est ce que vous allez apprendre dans la formation Réussis ton Site WP comme une Pro.

Construire ses pages avec un layout

Si vous choisissez cette option, vous avez accès à tous les templates de Divi (un nouveau est mis en ligne chaque semaine accessible gratuitement pour les membres Divi).

Trouvez le template qu’il vous plait et c’est là que c’est intéressant…

Vous pouvez choisir un template de page unique ou choisir toutes les pages que le template Divi propose.

Par exemple : vous repérez un layout dont la page d’accueil vous plait, mais vous ne souhaitez pas les autres pages du layout. Sélectionnez la page que vous voulez et téléchargez-la en un clic. Vous pouvez ainsi choisir plusieurs pages de plusieurs layout différents pour construire vos pages. 

Vous pouvez même vous dire que vous aimez une section spécifique d’une page et pas toute la page et une autre section d’une autre page, vous téléchargez sur votre page les layouts qui vous conviennent et ensuite supprimer les sections que vous ne souhaitez pas.

Construire ses pages en prenant une page de votre bibliothèque

Pour cela, vous devez avoir déjà créé des pages que vous aurez enregistrées au préalable dans votre bibliothèque.

Cela peut vraiment être utile si vous avez des pages qui doivent se ressembler, ainsi vous ne construisez qu’une seule fois votre page et vous reprenez ce design pour d’autres pages. Il ne reste que le contenu à remplacer. 

Astuces 2 : Ajoutez votre logo, vos couleurs et arranger votre menu de navigation

Créer des pages ne fait pas de votre site un site complet.

Il vous faut un menu de navigation, votre logo et une cohérence visuelle.

Dans votre tableau de bord, allez dans Divi > Options du thème. Là vous allez pouvoir commencer la personnalisation de votre site Web et configurer votre identité visuelle.

Commencez par ajouter votre logo aux bonnes dimensions en 95×45 px maximum si vous voulez avoir un joli menu. 

C’est aussi ici que vous allez pouvoir ajouter votre code couleur pour les retrouver dans tous les éléments et avoir simplement à cliquer sur la couleur que vous souhaitez sans avoir à ressaisir les codes HTML.

Lisez et activez les champs nécessaires pour chaque onglet. 

Dans l’onglet navigation, c’est l’endroit parfait pour décocher les pages que vous ne souhaitez pas voir au menu comme les pages “merci” de votre formulaire de capture de mail.

N’oubliez pas l’onglet SEO et disposition.

L’onglet SEO pour mettre la méta description de votre site et le mot-clé principal qui définit votre site

Et l’onglet disposition où vous choisissez quelles informations vous souhaitez faire apparaître sur vos pages ou vos articles comme les commentaires, auteurs ou dates. Cela peut être intéressant si vous êtes plusieurs rédacteurs pour un même site ou si vous ne souhaitez pas faire apparaître la date pour ne pas donner une idée négative si votre article date de plusieurs années.

Astuces 3 : Servez-vous des éléments globaux Divi

Je crois qu’ils sont mon astuce préférée. 

Un élément global va être une section, une rangée ou un module que vous allez répéter sur plusieurs pages à l’identique.

Pourquoi perdre du temps à créer l’élément pour chaque page alors que vous pouvez le créer une seule fois et qu’il apparaisse sur toutes les pages en allant le chercher dans la bibliothèque ?

L’élément global a une subtilité bien particulière par rapport aux pages ou sections enregistrées dans la bibliothèque.

En effet, l’idée est de dupliquer une création existante pour la retrouver ailleurs sur votre site que ce soit un élément global ou pas.

Alors, cette subtilité c’est quoi ?

L’élément global vous permet d’avoir un design et un contenu identique partout où vous le placer. Et pour vous éviter des erreurs et une perte de temps assurée, quand vous modifiez un élément global, les modifications apparaissent immédiatement partout où vous avez cet élément global sur votre site.

Génial, non ?

Alors où retrouve-t-on un élément global ?

On s’en sert particulièrement pour des pieds de page, pour la sidebar, pour un formulaire de contact, pour un appel à l’action que vous voulez insérer à plusieurs endroits sur votre site.

Ce ne sont que quelques exemples, selon votre site et votre besoin, vous pouvez en imaginer d’autres.

Utiliser Divi comme une pro est à la portée de tout le monde

Ces 3 astuces pour utiliser Divi comme un pro vont surtout te faire gagner un temps fou et te permettre de construire un site Internet à ton image, donc unique comme toi. Les développeurs te font croire que c’est compliqué, alors qu’en réalité, Elegant Theme a pensé et conçu Divi pour permettre à tous tous de créer un site Web sans savoir coder et avoir une visibilité en ligne rapidement. Si tu veux d’autres astuces, savoir comment utiliser Divi simplement et efficacement, contacte-moi. Tu as une question ? Pose-la en commentaire.

Utiliser Divi comme un pro : découvrez 3 astuces pour apprendre à utiliser Divi le thème star d’Elegant Theme sans avoir besoin de coder.
Montrer / Cacher les commentaires (0 commentaires)
L

0 commentaires

Tout chaud !

Mon dernier article

Tu aimeras aussi

Pin It on Pinterest

Share This