Personnaliser le code de votre thème Extra

Définition

Introduction

Vous pouvez utiliser le module Code pour ajouter des codes HTML et/ou WordPress codes courts personnalisés à vos mises en page. Dans l'exemple ci-dessus, nous avons ajouté un formulaire d'opt-in par e-mail en utilisant un code court fourni par le plugin d'opt-in par e-mail, Bloom.

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

 

Personnaliser le code de votre thème Extra

 

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.

Personnaliser le code de votre thème Extra

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.

Personnaliser le code de votre thème Extra

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

 

Personnaliser le code de votre thème Extra

 

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.

 

Personnaliser le code de votre thème Extra

 

Maintenant le bouton rebondit lors du chargement de la page !

 

Personnaliser le code de votre thème Extra

Trucs et astuces

Conclusion

Merci d'avoir suivi ce tutoriel !

Grâce au module code, placez du code personnalisé sur votre page, comme HTML et JS, ou entrez des codes courts de tiers.

À bientôt pour un prochain tutoriel ;)

Pour aller plus loin

Pour en savoir davantage sur le thème Extra et son utilisation

Créer un blog avec le thème Extra

Le module de texte Extra

> Consultez notre rubrique d'aide Thème Extra

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



comments powered by Disqus
Top