Le module de code de Divi

Définition

Introduction

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.

Procédure

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 DiviLocalisez 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.

 

 

Le module de code de Divi

Maintenant le bouton rebondit lors du chargement de la page.

Le module de code de Divi

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

  1. Ajoutez des blocs de code javascript ou des bibliothèques qui ne s'appliquent qu'à votre page.
  2. Intégrer des plugins tiers comme le curseur de révolution.
  3. 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...
  4. Ajouter un menu d'action flottant
  5. Créez une annonce de barre supérieure coulissante.
  6. 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.

Vidéos

Vidéo de présentation du module de code de Divi

 

Trucs et astuces

Conclusion

Merci d'avoir suivi ce tutoriel !

Le module de code est un moyen supplémentaire de personnaliser et d'animer au mieux votre site Internet grâce à l'ajout de cette touche dynamique.

À bientôt pour un prochain tutoriel ;)

Pour aller plus loin

Pour en savoir davantage sur Elegant Themes Divi et son utilisation

Le module de commentaires de Divi

Gérer le module de formulaire de contact de Divi

> Consultez notre rubrique d'aide Elegant Themes Divi

Notez cet article


Vous avez noté 0 étoile(s)

Cet article vous a-t-il été utile ?

Merci !

N'hésitez pas à commenter nos pages afin de nous aider à les améliorer si besoin.

Vous n'avez pas trouvé votre réponse ?

Envoyez nous un message afin d'avoir une réponse rapidement



Top