Le module de code est un canevas vierge qui vous permet d’ajouter du code à votre page, comme des shortcodes de plugins ou du HTML statique. Si vous souhaitez utiliser un plugin tiers, par exemple un plugin de curseur tiers, vous pouvez simplement placer le shortcode 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 devez d’abord passer par 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 post chaque fois que vous créez une nouvelle page. En cliquant sur ce bouton, vous activerez le Divi Builder, ce qui vous donnera accès à tous les modules du Divi Builder. Ensuite, cliquez sur le bouton Utiliser le Visual Builder pour lancer le constructeur en mode visuel. Vous pouvez également cliquer sur le bouton Use Visual Builder lorsque vous parcourez votre site Web sur le front-end si vous êtes connecté à votre tableau de bord WordPress.
Une fois que vous êtes entré dans le Visual Builder, vous pouvez cliquer sur le bouton plus 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 rangée à votre page. Nous avons quelques excellents tutoriels sur la façon d’utiliser les éléments de rangée et de section 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 cliquer sur Entrée pour trouver et ajouter automatiquement le module de code ! Une fois le module ajouté, vous serez accueilli par la liste des options du module. Ces options sont séparées en trois groupes principaux : Contenu, Design 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 contient beaucoup de code, il est logique de le charger uniquement sur la page où j’en ai besoin.
Il suffit d’ajouter une section régulière et une ligne pleine largeur (1 colonne) et d’ajouter le module de code.
Dans la zone de texte du contenu, ajoutez l’extrait de code.
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 en sorte que le bouton rebondisse lors du chargement de la page.
Dans les paramètres du module de bouton, sous l’onglet Avancé, entrez les deux classes « animated » et « bounce » dans la zone de texte Classe CSS.
Désormais, le bouton rebondira lors du chargement de la page.
Voici quelques autres exemples de la façon dont vous pouvez utiliser le module de code :
- Ajoutez des blocs de code ou des bibliothèques javascript que vous souhaitez uniquement appliquer à votre page.
- Intégrez des plugins tiers tels que revolution slider
- Vous pouvez utiliser le module de code pleine largeur pour intégrer un Typeform
- Ajoutez un menu d’action flottant
- Créez une annonce de barre supérieure coulissante.
- Ajoutez un bouton d’action flottant.
.
pour des questionnaires plus interactifs, des formulaires de contact, etc..
Conseil : Parfois, l’ajout de code avec des sauts de ligne peut empêcher le code de fonctionner. Il est préférable de créer votre code dans un éditeur de texte et de le concaténer (le mettre sur une seule ligne) avant de le coller dans le module de code.
Options de contenu du code
Dans l’onglet Contenu, vous trouverez tous les éléments de contenu du module, tels que le texte, les images et les icônes. Tout ce qui contrôle ce qui apparaît dans votre module se trouve toujours dans cet onglet.
Contenu
Vous pouvez placer ici tout code HTML, CSS ou JavaScript que vous souhaitez afficher sur la page à l’emplacement actuel. Seuls les éditeurs et les administrateurs sont autorisés à publier du code HTML non filtré, ce qui signifie que certains codes peuvent être supprimés du module s’ils sont utilisés par un auteur ou un contributeur. Vous pouvez également placer des shortcodes dans le module. Ces shortcodes seront rendus à l’intérieur de la colonne parente sans aucune enveloppe de module Divi supplémentaire.
Label Admin
Cette option permet de modifier l’étiquette du module dans le constructeur pour faciliter son identification. Lorsque vous utilisez la vue WireFrame dans le Visual Builder, ces étiquettes apparaîtront dans le bloc du module dans l’interface de Divi Builder.
Options de conception du code
Dans l’onglet Conception, vous trouverez toutes les options de style du module, telles que les polices, les couleurs, la taille et l’espacement. C’est cet onglet que vous utiliserez pour modifier l’apparence de votre module. Chaque module Divi dispose d’une longue liste de paramètres de conception que vous pouvez utiliser pour modifier à peu près tout.
Largeur maximale
Toute valeur saisie ici limitera la largeur de tout contenu rendu dans le module de code à la valeur définie. Par exemple, si vous saisissez 50% dans le champ de saisie, le contenu du module de code sera réduit à 50% de la colonne qui le contient.
Options avancées du code
Dans l’onglet avancé, vous trouverez des options que les concepteurs Web plus expérimentés pourraient trouver utiles, comme les attributs CSS et HTML personnalisés. Ici, vous pouvez appliquer un CSS personnalisé à l’un des nombreux éléments du module. Vous pouvez également appliquer des classes et des ID CSS personnalisés au module, qui peuvent être utilisés pour personnaliser le module dans le fichier style.css de votre thème enfant.
ID CSS
Saisissez un ID CSS facultatif à utiliser pour ce module. Un ID peut être utilisé pour créer un style CSS personnalisé ou pour créer des liens vers des sections particulières de votre page.
Classe CSS
Entrez les classes CSS facultatives à utiliser pour ce module. Une classe CSS peut être utilisée pour créer un style CSS personnalisé. Vous pouvez ajouter plusieurs classes, séparées par un espace. Ces classes peuvent être utilisées dans votre thème enfant Divi ou dans le CSS personnalisé que vous ajoutez à votre page ou à votre site Web à l’aide des options de thème Divi ou des paramètres de page Divi Builder.
CSS personnalisé
Le CSS personnalisé peut également être appliqué au module et à tout élément interne du module. Dans la section CSS personnalisé, vous trouverez un champ de texte dans lequel vous pouvez ajouter un CSS personnalisé directement à chaque élément. Les CSS saisis dans ces paramètres sont déjà enveloppés dans des balises de style. Il vous suffit donc de saisir les règles CSS séparées par des points-virgules.
Visibilité
Cette option vous permet de contrôler les appareils sur lesquels votre module apparaît. Vous pouvez choisir de désactiver individuellement votre module sur les tablettes, les smartphones ou les ordinateurs de bureau. Cette option est utile si vous souhaitez utiliser différents modules sur différents appareils, ou si vous souhaitez simplifier le design mobile en éliminant certains éléments de la page.
