CMS Wordpress 12 Août 2021 Créé par 3mn de lecture

Le module de code de Divi

Lien de l'article

Sommaire

Procédure

Divi builder est inclus dans nos offres d'hébergement web Wordpress, si vous souhaitez un support pour DIVI builder il faut souscrire à une licence directement sur le site Elegent theme Divi

Introduction

LWS met à votre disposition 3 plugins premium de chez Elegant Themes (Divi, Bloom et Monarch). Ces derniers sont régulièrement mis à jour. Une fois client chez LWS, vous aurez accès gratuitement à ces plugins en choisissant la distribution 'Divi Builder' lors de l'installation du CMS Wordpress avec notre Auto-Installeur.

Si vous avez une formule cPanel ou que vous avez déjà effectué une installation de Wordpress avec cette distribution, mais que vous n'avez pas accès à l'ensemble des thèmes ou aux mises à jour, je vous invite à nous le signaler en nous indiquant les identifiants d'accès à l'espace d'administration de votre site Wordpress afin qu'un technicien mette à jour la licence.

Attention : vous devrez prendre une licence Elegant Themes pour bénéficier du support. LWS n'assure pas le support pour ces produits.

Qu'est-ce que le module de code de Divi?

Le module Code est un canevas vierge qui vous permet d'ajouter du code à votre page, comme des raccourcis de plugin ou du HTML statique. Si vous souhaitez utiliser un plugin tiers, par exemple un plugin coulissant tiers, vous pouvez simplement placer le code court du plugin dans un module de code standard ou pleine largeur pour afficher l'élément sans entrave.

Comment ajouter un module de code à votre page

Avant de pouvoir ajouter un module de code à votre page, vous devrez d'abord basculer dans le Divi Builder. Une fois que le thème Divi a été installé sur votre site Web, vous remarquerez un bouton Utiliser Divi Builder au-dessus de l'éditeur de messages chaque fois que vous créez une nouvelle page. Cliquez sur ce bouton pour activer le Divi Builder, ce qui vous donne accès à tous les modules de ce dernier. Ensuite, cliquez sur le bouton Utiliser Visual Builder pour lancer le constructeur en mode visuel. Vous pouvez également cliquer sur le bouton Utiliser Visual Builder lorsque vous naviguez sur votre site Web à l'avant si vous êtes connecté à votre tableau de bord WordPress.

Le module de code de Divi

Une fois que vous êtes entré dans Visual Builder, vous pouvez cliquer sur le bouton gris + pour ajouter un nouveau module à votre page. Les nouveaux modules ne peuvent être ajoutés qu'à l'intérieur des rangées. Si vous commencez une nouvelle page, n'oubliez pas d'ajouter d'abord une ligne à votre page.

Le module de code de Divi Localisez le module de code dans la liste des modules et cliquez dessus pour l'ajouter à votre page. La liste des modules est consultable, ce qui signifie que vous pouvez également taper le mot "code" et ensuite cliquer sur le bouton entrer pour trouver et ajouter automatiquement le module de code ! Une fois le module ajouté, vous serez accueilli avec la liste d'options du module. Ces options sont séparées en trois groupes principaux : Contenu, Style et Avancé.

Exemple de cas d'utilisation : Ajout d'une feuille de style externe pour animer le contenu d'une page individuelle

Dans cet exemple, je vais ajouter un script de lien pour importer Animate.css afin d'ajouter des effets d'animation aux éléments de la page. Comme le fichier Animate.css a beaucoup de code, il est logique de ne le charger que sur la page dont j'ai besoin.

Il suffit d'ajouter une section régulière et une ligne pleine largeur (1 colonne) et d'ajouter le module Code.

Le module de code de Divi

Dans la zone de texte du contenu, ajoutez l'extrait de code.

Le module de code de Divi

Maintenant, tout ce que vous avez à faire est d'ajouter quelques classes CSS pour animer n'importe quel élément de votre page de classes CSS à votre page. Dans cet exemple, je vais faire rebondir le bouton lors du chargement de la page.

Dans les paramètres du module de boutons, sous l'onglet Avancé, entrez les deux classes "animé" et "rebondissement" dans la zone de texte de la classe CSS.

Maintenant le bouton rebondit lors du chargement de la page.

Voici quelques exemples supplémentaires de la façon dont vous pouvez utiliser le module de code :

Ajoutez des blocs de code javascript ou des bibliothèques qui ne s'appliquent qu'à votre page.
Intégrer des plugins tiers comme le curseur de révolution.
Vous pouvez utiliser le module de code pleine largeur pour intégrer un formulaire type pour des questionnaires plus interactifs, des formulaires de contact, etc...
Ajouter un menu d'action flottant
Créez une annonce de barre supérieure coulissante.
Ajouter un bouton d'action flottante.

Astuce : Parfois, l'ajout de code avec des sauts de ligne fera que le code ne fonctionnera pas. Il est préférable de créer votre code dans un éditeur de texte et de le concaténer (tout sur une seule ligne) avant de le coller dans le module Code.