Le module de code est un canevas vierge que vous pouvez utiliser pour ajouter du code à votre page, tel que: B. Codes courts du plugin ou HTML statique. Si vous souhaitez utiliser un plugin tiers, par exemple Par exemple, un plugin de curseur tiers, vous pouvez simplement coller le shortcode du plugin dans un module de code standard ou pleine largeur pour afficher librement l’élément.

Comment ajouter un module de code à votre page

Avant de pouvoir ajouter un module de code à votre page, vous devez d’abord sauter dans Divi Builder. Une fois le thème Divi installé sur votre site Web, vous constaterez qu’un Utilisez Divi Builder Chaque fois que vous créez une nouvelle page, cliquez sur le bouton au-dessus de l’éditeur de publication. Cliquer sur ce bouton active le Divi Builder et vous donne accès à tous les modules de Divi Builder. Cliquez ensuite sur Utiliser le constructeur visuel Bouton pour démarrer le générateur en mode visuel. Vous pouvez également cliquer sur Utiliser le constructeur visuel Lorsque vous naviguez sur votre site Web, cliquez sur le bouton dans le front-end si vous êtes connecté à votre tableau de bord WordPress.

Module de code

Après être entré dans Visual Builder, vous pouvez cliquer sur le bouton gris plus pour ajouter un nouveau module à votre page. Les nouveaux modules ne peuvent être ajoutés que dans les lignes. Lorsque vous démarrez une nouvelle page, n’oubliez pas d’ajouter d’abord une ligne à votre page. Nous avons d’excellents tutoriels sur l’utilisation de Divi doubler et section Éléments.

Module de code

Trouvez le module de code dans la liste des modules et cliquez dessus pour l’ajouter à votre page. La liste des modules peut être recherchée. Ainsi, vous pouvez également taper le mot «code», puis appuyer sur Entrée pour rechercher et ajouter automatiquement le module de code! Une fois le module ajouté, vous serez accueilli avec la liste des options du module. Ces options sont divisées en trois groupes principaux: teneur, conception et Avancée.

Exemple de cas d’utilisation: ajout d’une feuille de style externe pour animer du contenu sur une seule page

Dans cet exemple, j’ajoute un script de lien à importer Animate.css pour ajouter des effets d’animation aux éléments de la page. Puisqu’il y a beaucoup de code dans le fichier Animate.css, il est logique de le charger uniquement sur la page où j’en ai besoin.

Ajoutez simplement une section régulière et une ligne pleine largeur (1 colonne) et ajoutez le module de code.

Module de code

Dans la zone de texte Contenu, ajoutez l’extrait de code.

Module de code

Il ne vous reste plus qu’à ajouter des classes CSS pour animer n’importe quel élément de votre page avec des classes CSS sur votre page. Dans cet exemple, le bouton sautera lors du chargement de la page.

Dans les paramètres du module de boutons de l’onglet Avancé, entrez les deux classes « animée » et « rebondir » dans la zone de texte « Classe CSS ».

Module de code

Maintenant, le bouton saute lors du chargement de la page.

Module de code

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 sont exactement ce qui a été appliqué à votre page.
  2. Intégrez des plugins tiers comment Curseur de révolution.
  3. Vous pouvez utiliser le module de code pleine largeur pour intégrer un Forme du type pour des questionnaires plus interactifs, des formulaires de contact, etc.
  4. Ajouter un menu d’actions flottant
  5. A … créer Indicateur d’insertion dans la barre supérieure.
  6. Ajouter un bouton d’action flottant.

Astuce: L’ajout de code avec des sauts de ligne peut parfois empêcher le code de fonctionner. La meilleure chose à faire est de créer votre code dans un éditeur de texte et de le concentrer (tout faire sur une seule ligne) avant de l’insérer dans le module de code.

Options de contenu du code

Dans l’onglet « Contenu », vous trouverez tous les éléments de contenu du module, par ex. B. Texte, images et symboles. Tout ce qui contrôle Quoi apparaît dans votre module et est toujours sur cet onglet.

Module de code

teneur

C’est ici que vous pouvez placer tout code HTML, CSS ou JavaScript que vous souhaitez afficher sur la page à son emplacement actuel. Seuls les éditeurs et les administrateurs sont autorisés à publier du code HTML non filtré. Cela signifie que le code peut être supprimé du module s’il est utilisé par un auteur ou un contributeur. Vous pouvez également insérer des shortcodes dans le module. Ces shortcodes sont rendus dans la colonne parente sans wrappers de module Divi supplémentaires.

Étiquette d’administrateur

Cela modifie le nom du module dans le générateur pour une identification facile. Si vous utilisez la vue WireFrame dans Visual Builder, ces étiquettes seront affichées dans le bloc de module de l’interface Divi Builder.

Options de conception de code

L’onglet Conception contient toutes les options de style du module, telles que: B. Polices, couleurs, tailles et espacement. Sur cet onglet, vous pouvez modifier l’apparence de votre module. Chaque module Divi a une longue liste de paramètres de conception que vous pouvez utiliser pour changer presque tout.

Module de code

Largeur maximum

Chaque valeur saisie ici limite la largeur du 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 dans laquelle il est contenu.

Options avancées de code

L’onglet Avancé fournit des options que les concepteurs Web expérimentés peuvent trouver utiles, telles que: B. Attributs CSS et HTML personnalisés. Ici, vous pouvez appliquer du CSS personnalisé à l’un des nombreux éléments du module. Vous pouvez également attribuer des classes CSS et des ID personnalisés au module que vous pouvez utiliser pour personnaliser le module dans le fichier style.css de votre thème enfant.

Module de code

ID CSS

Entrez un ID CSS facultatif à utiliser pour ce module. Un identifiant peut être utilisé pour créer un design CSS personnalisé ou pour créer des liens vers des sections spécifiques 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 Divi Child ou dans le CSS personnalisé que vous ajoutez à votre page ou site Web en utilisant Options de thème Divi ou les paramètres de page de Divi Builder.

CSS personnalisé

Le CSS personnalisé peut également être appliqué au module et à tous les éléments internes du module. Dans la section CSS personnalisé, vous trouverez une zone de texte dans laquelle vous pouvez ajouter du CSS personnalisé directement à n’importe quel élément. L’entrée CSS de ces paramètres est déjà incluse dans les balises de style, il vous suffit donc de saisir des règles CSS, séparées par des points-virgules.

Visibilité

Cette option vous permet de contrôler les appareils sur lesquels votre module est affiché. Vous pouvez désactiver votre module individuellement sur les tablettes, les smartphones ou les ordinateurs de bureau. Ceci est utile lorsque vous souhaitez utiliser différents modules sur différents appareils ou lorsque vous souhaitez simplifier la conception mobile en supprimant certains éléments de la page.





Source link

Recent Posts