Que vous utilisiez le thème Divi pour créer votre site personnel ou dans un environnement professionnel, passer plus de temps que nécessaire à effectuer des actions n’est jamais une bonne chose.
Voici donc plusieurs astuces qui, j’en suis certain, vous permettrons d’économiser du temps dans vos développements de sites Divi.

1/ Créer un blueprint

Comme Julien vous l’expliquait dans cet article, si vous concevez régulièrement des sites avec Divi, alors vous avez tout intérêt à créer un modèle de site WordPress incluant vos réglages et plugins habituels.

Le tuto de Julien expliquait comment procéder en développant en local sur votre machine avec Local by Flywheel, mais d’autres possibilités s’offrent à vous.

Via le cPanel de votre hébergeur

Si, comme moi, vous développez vos sites en ligne et que votre hébergeur utilise comme interface d’administration cPanel (comme O2switch pour ne citer qu’eux – cocorico !), l’application Softaculous y est donc installée.
Celle-ci vous permet de créer des instances de WordPress à la volée. Vous renseignez les champs requis pour paramétrer l’installation et en quelques secondes vous avez un WordPress prêt à l’emploi.
Ne vous reste plus qu’à installer Divi et les plugins de votre choix, puis faire les réglages qui vous conviennent.

Vous pourrez ensuite d’un simple clic dupliquer cette instance à chaque fois que vous débuterez un nouveau projet de site WordPress.

Avec Migrate Guru

Si l’instance de WordPress qui vous sert de blueprint est installée sur un hébergement en ligne et que vous devez travailler à un nouveau site sur un autre hébergement, vous pouvez utiliser le plugin Migrate Guru pour transférer rapidement et simplement votre modèle d’un serveur à l’autre.

Pour en savoir plus sur cet outil très pratique et efficace qu’est Migrate Guru, je vous invite à lire mon article sur le sujet.

Avec All-in-One WP Migration

Le plugin All-in-One WP Migration permet de créer une archive du contenu d’un site WordPress (base de données, thèmes, plugins, réglages, médias…) et de l’installer sur une nouvelle instance de WordPress.

Vous pouvez donc, à partir de votre blueprint, générer une archive qu’il vous suffira d’uploader sur l’instance de WordPress située en ligne sur l’hébergement de votre choix.

Notez bien qu’une archive de All-in-One WP Migration n’inclut pas WordPress mais uniquement son contenu, contrairement au plugin dont je vais vous parler à la section suivante.

Pour en savoir plus sur All-in-One WP Migration, je vous invite à lire ce tuto très complet écrit par Fabrice Esquirol sur son blog.

Avec Duplicator

Le plugin Duplicator permet lui aussi de générer une archive d’un site, mais contrairement à All-in-One WP Migration, il inclut WordPress en plus de son contenu.

Un installateur sera alors créé, qu’il vous faudra uploader sur le serveur qui accueillera votre site. Ensuite, il suffira de se laisser guider pour lancer le processus d’installation du site.

Pour en savoir plus sur Duplicator, vous pouvez lire ce tuto assez récent et bien détaillé.

2/ Utiliser un thème enfant

Dans une optique de réplication de projets, il est clair qu’un thème enfant est indispensable.

Son fichier style.css peut contenir tout un tas de règles CSS que vous utilisez couramment. Soit pour corriger des petits détails de Divi qui ne vous plaisent pas (par exemple la taille des balises <sup> pour ne citer que ça), soit pour ajouter des fonctionnalités utiles (par exemple pour centrer verticalement des éléments).

Son fichier functions.php peut lui aussi contenir un certain nombre de fonctions bien pratiques, comme pour charger la police d’icones FontAwesome ou encore des fichiers JavaScript personnalisés.

Pour en savoir plus sur les thèmes enfants pour Divi, je vous invite à lire mon article Tout savoir sur les thèmes enfants pour Divi.

Et si vous ne possédez pas encore de thème enfant pour vos sites Divi, vous pouvez télécharger gratuitement le thème enfant de Divi Community qui embarque plusieurs fonctionnalités utiles.

Enfin, je vous conseille d’utiliser les commentaires pour documenter vos fichiers styles.css et functions.php, afin de voir au premier coup d’œil à quoi servent telle ou telle règle ou fonction que vous aurez écrite.

3/ Utiliser les layouts

Quand je parle des layouts de Divi, je pense non seulement à ceux conçus par l’équipe d’Elegant Themes, mais aussi à ceux que l’on créé soi-même et que l’on sauvegarde dans la “Bibliothèque Divi”.

Ces layouts incluent des mises en pages complètes ou simplement des sections, lignes et modules.

Utiliser les layouts d’Elegant Themes

L’équipe de webdesigners d’Elegant Themes propose en moyenne chaque semaine un pack de layouts de plusieurs pages portant sur une thématique bien précise. Ils sont téléchargeables en quelques clics directement depuis le Divi Builder.

Ils sont utiles si on est en manque d’inspiration ou si on veut produire très rapidement des pages.
Mais il est utopique de croire que le layout qui colle parfaitement à ses besoins existe… Il vous faudra donc forcément consacrer un peu temps pour faire les ajustements nécessaires.

Créer ses propres layouts

Il est intéressant de se créer sa propre bibliothèque de layouts, avec par exemple des modèles de headers, de formulaires de contact, etc.
Vous pouvez préparer ceux-ci avec différents types d’effets ou encore des pré-réglages afin de ne pas avoir à les refaire à chaque nouveau site.

Lors de la réalisation d’un site, il est également utile de sauvegarder dans la “Bibliothèque Divi” les sections, lignes et modules que vous êtes susceptibles de réutiliser sur diverses pages.

De plus, pensez à la petite case à cocher En faire un élément global qui permettra de lier toutes les instances d’un élément. Ainsi, les modifications apportées à un de ces items seront automatiquement répercutées à tous ses clones.

Si vous voulez en savoir plus sur l’import / export des layouts, je vous invite à lire le tuto de Julien sur le sujet.

4/ Dupliquer les pages

C’est une méthode que j’utilise systématiquement quand je travaille sur mes sites Divi car je trouve que c’est un gain de temps formidable.

Imaginez que le site que vous avez à créer doive présenter plusieurs activités, à raison de une par page. Chacune sera donc mise en page sensiblement de la même manière.

Pour ce faire, 2 possibilités s’offrent à vous.

Importer les pages depuis le Divi Builder

Surtout, ne faites pas l’erreur de créer une première page, de l’enregistrer comme layout dans la “Bibliothèque Divi”, de créer une nouvelle page et d’importer le layout… vous perdriez votre temps et surchargeriez inutilement votre “Bibliothèque Divi”.

Il suffit de choisir Charger à partir de la bibliothèque et vous pourrez sélectionner le contenu de l’une de vos pages existantes. Avec la possibilité d’écraser ou d’ajouter du contenu à celui éventuellement présent.

Utiliser un plugin pour dupliquer des articles et pages

Pour ceux qui pensent “Encore une extension de plus…” : ne vous inquiétez pas, celle-ci ne surchargera pas votre site car cette option ne demande presque pas de ressources.

L’utilisation d’un plugin permet d’éviter d’avoir à créer une page pour ensuite y importer le contenu d’une autre page, comme expliqué dans la section précédente…
Ici, d’un simple clic on duplique une page ou un article.

En ce qui me concerne, j’ai pris l’habitude d’utiliser le plugin Duplicate Page dans sa version gratuite, mais si vous fouillez sur le dépôt d’extensions de WordPress.org, vous pourrez en trouver d’autres.

Duplicate Page est extrêmement simple à prendre en main. Il ajoute un lien Dupliquer dans les options des pages et articles, comme vous pouvez le voir sur la capture d’écran ci-dessous.

Ce qui est également intéressant, c’est que Duplicate Page fonctionne aussi avec les Custom Post Types. Ceci signifie donc qu’il est possible de dupliquer d’un seul clic des éléments enregistrés dans la “Bibliothèque Divi”.

5/ Faire du copier-coller

Le Divi Builder offre la possibilité de copier-coller ses divers paramétrages, ce qui évite d’avoir à répliquer manuellement la même configuration plusieurs fois.

Copier-coller les styles

Copier-coller tous les styles d’un élément

Un simple clic droit sur une section, une ligne ou un module affiche un menu contextuel avec l’option Copie Section Styles (ou Copie Ligne Styles, ou Copie Module Styles suivant l’élément choisi).

En un clic, vous allez donc récupérer tous les styles qui personnalisent l’élément en question. Un second clic droit sur un élément similaire affichera l’option Coller Section Styles (ou Coller Ligne Styles, ou Coller Module Styles, une fois encore suivant l’élément choisi).

Notez bien qu’avec cette méthode, il n’est pas possible de copier-coller des styles entre des éléments différents.
Vous ne pourrez donc pas copier-coller les styles entre une section et un module ou encore entre 2 modules différents. Ça fonctionnera par exemple entre 2 modules Résumé, mais pas entre un module Résumé et un module Formulaire.

Ce qui est logique étant donné que ces éléments n’ont pas les mêmes options de personnalisation.

Copier-coller une option spécifique d’un élément

Si, lorsque les paramètres d’un élément sont affichés, vous faites un clic droit sur une des rubriques (Fond par exemple), un menu contextuel s’affichera et vous proposera de copier les réglages de la rubrique en question.

Il vous suffira ensuite de faire un clic droit sur un autre élément pour coller ce réglage. Soit directement sur l’élément dans la page, soit en affichant ses paramètres.
Cette méthode offre à peine plus de souplesse car, étant donné qu’elle ne cible qu’un seul réglage, il est possible que celui-ci soit disponible pour tous les éléments (sections, lignes et modules), à l’instar du réglage Fond que j’ai pris en exemple.

Copier-coller les éléments du Divi Builder

Là où le copier-coller devient très intéressant, c’est qu’il est possible de copier-coller n’importe quel élément du Divi Builder (que ce soit une section, une ligne ou un module) dans le but de le cloner.

Un clic sur l’icone de duplication génère donc une copie de l’élément choisi juste à côté de son clone. À vous de le déplacer à la souris si vous souhaitez le positionner ailleurs.

Un clic droit sur un élément affiche, comme nous l’avons déjà vu, un menu contextuel qui propose également l’option Copie Section (ou Copie Ligne ou Copie Module).
Et lorsque vous afficherez de nouveau ce menu contextuel, apparaitra l’option Coller Section (ou Coller Ligne ou Coller Module). L’emplacement où l’élément viendra se coller dépendra de l’endroit ou vous aurez fait votre clic droit.

Enfin, le top du top est que les copier-coller d’éléments sont également possibles d’une page à une autre.
Ainsi, imaginez que vous ayez besoin de récupérer une section et son contenu sur une page pour l’utiliser sur une autre. Il vous suffit de faire un clic droit sur cette section en choisissant Copie Section, de vous rendre sur la page de destination et de faire un clic droit en choisissant Coller Section.
Pas besoin de passer par l’enregistrement dans la “Bibliothèque Divi” !

6/ Étendre les styles

Nous venons de voir que le copier-coller est utile pour transmettre des styles d’un élément à un autre sans avoir à refaire tous les réglages manuellement.
Mais si vous avez besoin d’appliquer ces styles à un grand nombre d’éléments, la fonction permettant d’étendre les styles est bien plus indiquée.

Imaginez que vous souhaitiez répliquer tous les styles que vous venez d’appliquer à une section à l’ensemble des sections présentes sur la page.
Il vous suffit de faire un clic droit sur la section concernée et de choisir Extend Section Style dans le menu contextuel qui apparait.

Le principe d’extension des styles fonctionne pour les sections, lignes et modules.
Et il est possible de filtrer précisément quels éléments devront recevoir les modifications de styles, comme le montre la capture d’écran ci-dessous.
Par exemple, vous pouvez ainsi ne cibler que les modules image présents dans la ligne contenant le module image source.

Enfin, si vous ne souhaitez étendre que le style d’une option spécifique, (comme le fond d’un élément par exemple) il vous suffit de faire un clic droit sur le réglage en question et choisir Extend Fond Styles.

Cette fonctionnalité permettant d’étendre les styles apporte un confort d’utilisation et un gain de temps bien réel.
Vous pouvez ainsi vous permettre de faire des ajustements de styles de dernière minute, même si la page contient des dizaines d’instances de votre élément, car vous savez qu’en un clic, vos modifications seront répercutées automatiquement.

7/ Utiliser le Visual Builder

Je suis conscient d’aborder là un sujet qui peut parfois être sensible car, même si la communauté Divi est relativement soudée, elle est tout de même composée de “Pro-Visual-Builders” et de “Pro-Backend-Builders”.

De mon point de vue de designer, je n’ai réellement trouvé un d’intérêt à Divi que lorsqu’il est sorti en version 3.0 et que le Visual Builder a été dévoilé.

Quand je conçois des mises en pages, j’aime voir ce que je fais. J’ai besoin d’apprécier le rendu en temps réel pour savoir si l’équilibre des espaces, des textes, des couleurs, etc. est juste.
Je n’ai pas envie de perdre mon temps à faire des aller-retours entre le Divi Builder en back-end et le rendu de la page en front-end et passer 10 minutes à ajuster à tâtons la taille de quelques éléments.
Alors que c’est tellement simple avec le Visual Builder…

Heureusement, en décembre 2018 Elegant Themes a réussi à réconcilier tous les utilisateurs de Divi. En effet, la sortie de WordPress 5 a vu la naissance d’un nouveau Divi Builder qui homogénéise les fonctionnalités de la version classique en back-end et de la version Visual Builder.

Ainsi, lorsque l’on édite une page en back-end, on a maintenant la possibilité de changer le mode d’affichage pour obtenir un rendu visuel.

Pour résumé, la différence qui existe aujourd’hui entre le Divi Builder en back-end et le Visual Builder en front-end est que, pour le premier, l’affichage par défaut correspond au mode Affichage filaire et pour le second au mode Vue du bureau.

8/ Utiliser les raccourcis clavier

En ce qui me concerne, depuis que je travaille sur ordi (et ça commence à faire une paire d’années !), je me sers des raccourcis clavier pour toutes les applications que j’utilise au quotidien. Moins je touche la souris, mieux je me porte… enfin, plus je suis rapide à exécuter des tâches.

Le Divi Builder propose tout de même une cinquantaine de raccourcis clavier. Vous pouvez voir la liste complète en cliquant sur l’icone de point d’interrogation (à droite, en bas dans le Visual Builder et en haut dans le Back-end Builder) ou tout simplement en appuyant sur ? puis en choisissant l’onglet keyboard shortcuts.

Des raccourcis clavier utiles

Pas évident de tous les mémoriser, mais voici ceux que je trouve les plus utiles (pour chacun d’eux, j’utilise la notation CTRL/⌘, mais à vous bien sûr d’appuyer soit sur la touche Contrôle, soit la touche Commande selon que vous travailliez sur PC ou sur Mac) :

• CTRL/⌘ + z pour annuler une action
• CTRL/⌘ + y pour rétablir une action
• CTRL/⌘ + s pour enregistrer la page
• CTRL/⌘ + e pour quitter le Visual Builder
• o pour ouvrir les paramètres de la page
• shift + w pour switcher entre le mode “Affichage filaire” et le mode “Vue du Bureau”
• CTRL/⌘ + c pour copier une section, une ligne ou un module
• CTRL/⌘ + x pour couper une section, une ligne ou un module
• CTRL/⌘ + v pour coller une section, une ligne ou un module
• CTRL/⌘ + alt + c pour copier tous les styles d’une section, d’une ligne ou d’un module
• CTRL/⌘ + alt + v pour coller tous les styles d’une section, d’une ligne ou d’un module
• c + 1 pour modifier les structures de colonnes d’une ligne
  • le chiffre correspond à la position du type de colonnage dans la liste disponible (1 = 1 colonne, 2 = 2 colonnes, etc.)
  • bien que le Divi Builder propose à aujourd’hui 18 structures de colonnes différentes, les raccourcis clavier ne fonctionnent que jusqu’au chiffre 9
• r + 1 pour ajouter une nouvelle ligne avec une structure de colonnes définie (ici aussi, utilisez un chiffre entre 1 et 9)
• s + 1 pour ajouter une nouvelle section où vous avez le choix entre :
  • 1 pour une section normale
  • 2 pour une section spéciale
  • 3 pour une section pleine écran
• shift + espace pour afficher les “Quick Actions”

9/ Utiliser les Quick Actions

Comme cadeau de Noël 2018, Elegant Themes nous offrait une nouvelle fonctionnalité permettant d’optimiser notre manière de travailler dans le Divi Builder : les “Quick Actions”.

Cette option s’inspire de ce qui existe déjà dans certains éditeurs de code. Je pense notamment à la “Command Palette” de Sublime Text ou d’Atom par exemple.

Comme vous l’avez certainement lu dans la rubrique précédente, la modale des “Quick Actions” s’affiche grâce au raccourci clavier shift + espace.
Vous pouvez aussi cliquer sur l’icone en forme de loupe (à droite, en bas dans le Visual Builder et en haut dans le Back-end Builder), mais c’est moins productif étant donné qu’il va falloir de toutes manières vous servir de votre clavier, les “Quick Actions” ayant été conçues pour cette utilisation.

Un exemple de Quick Action

Commencez donc à saisir un début de commande, Go to par exemple, et il vous sera demandé de choisir s’il s’agit d’une section, une ligne ou un module.
Puis, si vous avez renseigné des “Étiquettes admin” à vos éléments, vous les verrez apparaitre dans la liste.
Sélectionnez l’item qui vous intéresse en naviguant avec les flèches de votre clavier ou en continuant à saisir les premiers caractères de l’étiquettes concernée.
Validez enfin avec la touche Retour de votre clavier pour effectuer l’action. Ici, le focus se fera sur l’élément recherché et ses paramètres s’afficheront.

Des Quick Actions à retenir

Voici quelques “Quick Actions” qui sont réellement intéressantes à utiliser car elles font gagner un temps certain.

Notez que je donne ici les commandes en anglais car c’est plus rapide à saisir, mais certaines d’entres elles fonctionnent également en français (ouvrir, vue, réglages…)

• css : affiche les CSS perso de la page en cours
• open pages / open articles ou open + le nom d’un custom post type : affiche la liste des pages ou articles concernés et, en choisissant l’un d’entre eux, celui-ci s’ouvrira dans un nouvel onglet avec le Divi Builder activé
• open settings : vous propose de choisir entre les options du thème, le personnaliseur de thème, le personnaliseur de modules, l’éditeur de rôles et la bibliothèque Divi. En sélectionnant l’un de ces éléments, la page concernée s’ouvrira dans un nouvel onglet

Toutes les Quick Actions ne sont pas utiles

En effet, si comme venons de le voir, certaines “Quick Actions” permettent d’économiser du temps en mettant à portée de main certaines fonctions de Divi, d’autres ne sont pas du tout avantageuses car déjà accessibles avec un simple raccourci clavier.

Il y a par exemple une “Quick Action” permettant de quitter le Visual Builder. Pour l’activer, il faut donc afficher la modale des “Quick Actions” (shift + espace), saisir le terme Exit puis appuyer sur la touche Retour afin de valider l’action.
Ce qui fait donc 3 manipulations à effectuer, alors que nous avons vu précédemment que le simple raccourci clavier CTRL/⌘ + E donnait le même résultat…

Pour conclure

J’espère que tous ces astuces et retours d’expérience pour gagner du temps à l’utilisation du Divi Builder vous seront utiles dans votre quotidien.

Certains conseils, comme le blueprint ou le thème enfant, prennent un peu de temps à mettre en place au départ, mais c’est du temps bien investi car ça vous en fera gagner par la suite.

D’autres bonnes pratiques, comme les raccourcis clavier ou les “Quick Actions”, nécessitent un petit temps d’apprentissage. Mais là encore, les utiliser ne peut qu’être profitable à votre productivité.

Et vous, avez-vous des astuces à partager avec la communauté ?
Je vous invite à le faire en commentaires de cet article ou sur notre groupe Facebook d’entraide Support Divi Community.

Partager