fbpx

Comment créer un texte défilant sur Divi ?

achats-en-ligne

Les textes défilants rendent votre page plus attractive et dynamique, ils engagent les lecteurs avec des extraits de contenu utiles. Ce genre de textes est souvent utilisé pour afficher un flux constant de mises à jour d’actualités en haut ou en bas d’une page. Habituellement, l’animation de défilement se fait avec une seule ligne de contenu en boucle afin que les informations soient affichées à plusieurs reprises.

 

Dans ce court tutoriel, nous allons vous montrer comment créer facilement un texte défilant sur Divi et le personnaliser.

Pour en créer un, il vous suffit d’avoir

– Le thème Divi installé et activé sur votre WordPress

– Une page en front end (visual builder)

Pour commencer, créez une section “Normale” et une nouvelle ligne vide.

Changez le largeur de la ligne en mettant les largeurs maximales respectivement 100% et 2560px. (Ligne Paramètres – Style – Dimensionnement – Largeur maximale)

Insérez un module “Code” dans votre ligne 

Copiez et collez le code HTML suivant sur l’onglet ouvert. Vous pouvez personnaliser le texte en ajoutant le contenu que vous voulez partager.

<div class= »scroll-left »>

<p>Offre spécial: -20% sur tous les produits </p>

</div>

Afin de rendre votre texte plus attractif et pour avoir l’effet de défilement, il vous faudra  personnaliser votre CSS en ajoutant une petite pièce du CSS sur l’onglet « élément principal” 

height: 50px; 

overflow: hidden;

position: relative;

}

.scroll-left p {

position: absolute;

width: 100%;

height: 100%;

margin: 0;

line-height: 50px;

text-align: center;

color: #f19cab;

text-shadow:  1px 1px; #f19cab;

/* Starting position */

-moz-transform:translateX(100%);

-webkit-transform:translateX(100%); 

transform:translateX(100%);

/* Apply animation to this element */ 

-moz-animation: scroll-left 20s linear infinite;

-webkit-animation: scroll-left 20s linear infinite;

animation: scroll-left 20s linear infinite;

}

/* Move it (define the animation) */

@-moz-keyframes scroll-left {

0% { -moz-transform: translateX(100%); }

100% { -moz-transform: translateX(-100%); }

}

@-webkit-keyframes scroll-left {

0% { -webkit-transform: translateX(100%); }

100% { -webkit-transform: translateX(-100%); }

}

@keyframes scroll-left {

0% { 

-moz-transform: translateX(100%); /* Browser bug fix */

-webkit-transform: translateX(100%); /* Browser bug fix */

transform: translateX(100%); 

}

100% { 

-moz-transform: translateX(-100%); /* Browser bug fix */

-webkit-transform: translateX(-100%); /* Browser bug fix */

transform: translateX(-100%); 

}

Évidemment, vous pouvez personnaliser le CSS aussi, en changeant la vitesse de déroulement de votre texte, la couleur, la taille, ajouter ou supprimer l’ombre du texte, etc. 

 

Voilà, maintenant vous avez votre texte défilant. Cependant, si vous avez des questions, n’hésitez pas à laisser un commentaire.

Loading...