Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Avez-vous déjà créé une page Divi avec ça? En-tête pleine largeur Module et activé le Défiler vers le bas Bouton? On adore le style, surtout quand ça En-tête pleine largeur est réglé sur le mode plein écran. Alors c’est Défiler vers le bas Le bouton est un bon indicateur que la page a en fait plus de contenu.

Cependant, comme il s’agit d’un bouton statique, il n’attire pas autant d’attention. Ne serait-ce pas bien s’il y avait un moyen de changer cela? Un moyen de faire vaciller ou rebondir le bouton pour attirer l’attention de l’utilisateur? La bonne nouvelle est: il y en a! Et cela pourrait être plus facile que vous ne le pensez.

Ajouter une animation au bouton Afficher plus

Tout ce que tu as à faire pour donner ça Défiler vers le bas Une jolie petite animation ouvre la page ou le paramètre de publication et ajoute le CSS suivant:

.et_pb_fullwidth_header .et-pb-icon.scroll-down {
	animation: fullwidth-header-bounce 2.2s ease-out infinite;
}
@keyframes fullwidth-header-bounce {
  0% { transform:translateY(0%); }
  12.5% { transform:translateY(20%); }
  25% { transform:translateY(0%); }
}

Bien sûr, vous pouvez également l’ajouter à votre CSS personnalisé pour l’appliquer sur tout le site, mais nous préférons personnellement ne l’avoir que sur les pages où nous le voulons vraiment. Surtout quand nous les utilisons En-tête pleine largeur Module comme premier module sur cette page. Si nous l’utilisons ailleurs sur la page, il n’apparaîtra généralement pas Défiler vers le bas ou nous ne voulons pas qu’il soit animé car cela peut également distraire l’utilisateur du contenu.

Supprimer l’animation lors du défilement de la page

En parlant de ça. Ne serait-ce pas bien si nous pouvions en quelque sorte arrêter l’animation une fois que l’utilisateur a fait défiler? Une fois que l’utilisateur se rend compte qu’il y a plus de contenu disponible, nous n’avons pas à l’alerter sur le bouton d’animation, n’est-ce pas? De plus, cela pourrait nuire au bon côté qu’il était censé regarder. Comment pourrions-nous faire ça?

Laissez-nous vous montrer ce que nous avons développé pour résoudre ce problème. C’est en fait assez simple. Si vous connaissez une meilleure façon, nous aimerions en savoir plus. N’hésitez pas à nous laisser un commentaire si vous avez une meilleure solution. Du moins, c’est ainsi que nous procédons.

Ajouter une classe personnalisée

La première étape consiste à ajouter une classe personnalisée au En-tête pleine largeur Module afin que nous puissions mieux y répondre via CSS et JavaScript. Ne vous inquiétez pas si vous ne savez pas comment programmer, c’est très facile à faire et vous n’avez même pas à quitter Divi Builder. Ouvrez les paramètres du module, passez à l’onglet Avancé et ajoutez-le En-tête de la page d’accueil dans le champ de classe CSS. Enregistrez le module et vous avez terminé.

Changer le CSS

Ensuite, modifiez le CSS que vous avez ajouté dans la partie 1 de ce didacticiel. Au lieu de les cueillir et_pb_fullwidth_headernous pouvons maintenant utiliser notre propre classe CSS. Remplacez simplement l’élément comme suit:

.frontpage-header .et-pb-icon.scroll-down {
	animation: fullwidth-header-bounce 2.2s ease-out infinite;
}
@keyframes fullwidth-header-bounce {
  0% { transform:translateY(0%); }
  12.5% { transform:translateY(20%); }
  25% { transform:translateY(0%); }
}

Ajoutez la magie jQuery

La dernière étape consiste à ajouter du code JavaScript. L’idée est de supprimer ça En-tête de la page d’accueil Génial dès que l’utilisateur fait défiler. Cela provoque l’échec de notre sélection CSS et donc l’animation n’est plus appliquée. Cependant, avant de pouvoir ajouter du code JS, nous avons besoin d’un emplacement pour le coller. Nous vous recommandons de ne pas l’ajouter à l’échelle du site, la meilleure solution est donc d’en ajouter un code Module à côté du En-tête pleine largeur Module.

Dans ce module de code, ajoutez le code suivant. Assurez-vous d’inclure ces