Comment modifier le design de son site WordPress avec Divi Builder ?

Pour offrir une bonne expérience aux visiteurs de votre site internet et montrer à Google que vous faites des efforts dans la construction et la mise en page de votre site pour faciliter leur navigation, il est important d’utiliser des outils comme Divi Builder.

Divi builder est une extension ou plugin permettant de construire et mettre en forme des pages web originales sur le CMS WordPress.

L’avantage d’utiliser un constructeur de pages comme Divi Builder, est sa compatibilité avec tous les thèmes WordPress est son utilisation relativement intuitive.

Dans cet article nous allons vous expliquer comment modifier le design de votre site wordpress avec le plugin constructeur de pages Divi Builder que vous retrouverez ici.

Une fois installé, vous pourrez voir dans votre back office l’option Activer le Visual Builder: 

Nous verrons ensemble dans cet article: 

Pour pouvoir effectuer les modifications que nous allons vous montrer, vous devez au préalable, cliquer sur le bouton Activer le Visual Builder sur une page.

Comment fonctionne le constructeur de pages Divi Builder ? 

Avant de vous expliquer plus en détail, comment faire les modifications, vous devez comprendre que Divi Builder fonctionne avec un système de bloc: 

Divi Builder est organisé en 3 niveaux de blocs modifiables: 

Quel que soit le bloc sur lequel vous allez travailler, vous retrouverez les options pour faire vos modifications: 

Le premier bouton en forme de flèche permet de déplacer le module et modifier l’emplacement de votre contenu où vous le souhaitez sur une page.

Le deuxième onglet en forme de roue dentée permet de modifier le contenu du bloc.

Le troisième bouton en forme rectangulaire permet de dupliquer le bloc sur lequel vous travaillez.

Le cinquième onglet en forme de poubelle permet de supprimer un bloc.

Pour enregistrer vos modifications, vous avez 2 options: 

• Cliquer sur le petit bouton violet en forme de cercle avec 3 petits points > puis sur le bouton vert sauvegarder qui s’affichera
• Cliquer directement sur Quitter le visual builder > Puis sur Sauvegarder et quitter

Quelles sont les modifications possibles avec divi builder ? 

Divi builder permet d’effectuer de nombreuses mises en forme et modification de vos pages mais pour que vous puissiez modifier un bloc spécifique à une page vous allez devoir tout d’abord cliquer sur la roue dentée du bloc comme ici: 

Une fois que vous avez cliqué sur la roue dentée, une nouvelle fenêtre s’ouvrira comme cecis: 

Les modifications des blocs spécifiques à une page 

Comme nous avons pu le voir juste avant, en cliquant sur la roue dentée d’un bloc, une nouvelle apparaît et permet de faire des modifications de différents types.

On peut notamment modifier les éléments spécifiques au bloc suivants: 

• Le titre
• Le texte et le lien d’un bouton 
• Le corps du texte (mise en gras, italique, ajouter ou supprimer du texte…) 

Une fois que vous avez fait toutes vos modifications ,n’oubliez pas de les valider en cliquer sur le bouton vert pour enregistrer.

Les blocs communs (par exemple pied de page) 

Il existe aussi des blocs spéciaux qui peuvent être rattachés à plusieurs des pages de votre site, par exemple le bloc de pied de page: 

Ce bloc de couleur vert fluo, fonctionne néanmoins de la même façon que les autres blocs au niveau de la modification, à l’exception près que lorsque vous faites des modifications sur celui-ci elles se retrouveront aussi sur les autres pages qui ont ce bloc.

Par exemple si nous modifions le titre de ce bloc en enlevant le point d’interrogation, celui-ci disparaîtra du bloc sur toutes les pages.

Editer une image 

Vous avez aussi la possibilité d’éditer vos blocs images en cliquant toujours sur la roue dentée pour pouvoir changer des éléments comme l’image ou le lien de l’image.

Comment copier un gabarit de page ? 

L’éditeur de page Divi Builder permet de modifier et copier la mise en forme de vos pages mais aussi de vos articles si vous le souhaitez.

Par exemple, si vous souhaitez récupérer le gabarit de page d’un article, vous pouvez procéder de la manière suivante: 

Commencer par cliquer sur créer un article

1. Puis éditer votre nouvel article en y ajoutant un titre et une catégorie par exemple puis cliquer sur le bouton utiliser le divi builder.
2. Ensuite sélectionner l’option cloner une page existante

1. Enfin sélectionner la page existante dont vous souhaitez dupliquer le modèle et modifier les éléments textes, images…

Il est possible toutefois que la mise en page ne soit pas exactement identique, mais vous pouvez corriger cela en cliquant sur modifier l’article, puis en vérifiant les paramètres de la page Divi (par exemple le modèle de page qui peut être sur pas de barre latérale alors que le modèle de page cloné est sur pleine largeur).

Nous espérons que ce tutoriel vous a plu et vous a permis de mieux comprendre comment modifier le design de votre site WordPress rapidement et facilement avec Divi Builder.

Si vous avez des questions ou souhaitez aller encore plus loin dans le design de votre site, notre équipe de web designer est à votre écoute, n’hésitez pas à les contacter.