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

[et_pb_section fb_built= »1″ _builder_version= »4.9.3″ _module_preset= »default »][et_pb_row _builder_version= »4.9.3″ _module_preset= »default »][et_pb_column type= »4_4″ _builder_version= »4.9.3″ _module_preset= »default »][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »17px » text_orientation= »justified » custom_margin= »-34px||||| » locked= »off »]

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

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure= »1_2,1_2″ disabled_on= »on|on|off » _builder_version= »4.9.3″ _module_preset= »default » width= »100% » custom_margin= »-51px|auto||auto|| » locked= »off »][et_pb_column type= »1_2″ _builder_version= »4.9.0″ _module_preset= »default »][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/07/christopher-gower-m_HRfLhgABo-unsplash.jpg » title_text= »programmation-htms-css-texte-defilant » _builder_version= »4.9.3″ _module_preset= »default » width= »70% » module_alignment= »center »][/et_pb_image][/et_pb_column][et_pb_column type= »1_2″ _builder_version= »4.9.0″ _module_preset= »default »][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/07/web-design-2038872_640.jpg » alt= »achats-en-ligne » title_text= »web-design-text-defilant » _builder_version= »4.9.3″ _module_preset= »default » width= »63% » filter_saturate= »58% » filter_brightness= »93% »][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »4.9.3″ _module_preset= »default »][et_pb_column type= »4_4″ _builder_version= »4.9.3″ _module_preset= »default »][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »15px » text_orientation= »justified »]

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.

[/et_pb_text][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/07/Video-moj-pour-larticle-3.gif » title_text= »Vidéo moj pour l’article (3) » align= »center » _builder_version= »4.9.3″ _module_preset= »default »][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »4.9.3″ _module_preset= »default » custom_margin= »|auto|-28px|auto|false|false » custom_padding= »1px||||false|false » border_width_all= »6px » border_color_all= »#322269″ global_module= »3908″ saved_tabs= »all » locked= »off »][et_pb_column type= »4_4″ _builder_version= »4.9.0″ _module_preset= »default »][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »16px » link_font= »|||||||| » ul_text_align= »center » text_orientation= »center » custom_margin= »12px||||| » custom_padding= »||0px||| »]

SOMMAIRE

Comment créer un module “Code” avec Divi ?

Comment insérer le HTML dans le module ?

Comment personnaliser le texte défilant ?

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »4.9.3″ _module_preset= »default » custom_margin= »30px||30px||true|false »][et_pb_column type= »4_4″ _builder_version= »4.9.3″ _module_preset= »default »][et_pb_text _builder_version= »4.9.10″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »15px » text_orientation= »justified » hover_enabled= »0″ sticky_enabled= »0″]

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)

[/et_pb_text][et_pb_text module_id= »ch1″ _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »15px »]

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

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure= »1_2,1_2″ _builder_version= »4.9.3″ _module_preset= »default »][et_pb_column type= »1_2″ _builder_version= »4.9.3″ _module_preset= »default »][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/07/nouvelle-section-divi.png » title_text= »nouvelle-section-divi » _builder_version= »4.9.3″ _module_preset= »default »][/et_pb_image][/et_pb_column][et_pb_column type= »1_2″ _builder_version= »4.9.3″ _module_preset= »default »][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/07/nouvelle-ligne-divi.png » title_text= »nouvelle-ligne-divi » _builder_version= »4.9.3″ _module_preset= »default » width= »44% »][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »4.9.3″ _module_preset= »default »][et_pb_column type= »4_4″ _builder_version= »4.9.3″ _module_preset= »default »][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » width= »73% »]

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

[/et_pb_text][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/07/largeur-ligne-divi.png » title_text= »largeur-ligne-divi » _builder_version= »4.9.3″ _module_preset= »default » width= »29% »][/et_pb_image][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| »]

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.

[/et_pb_text][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/07/code-parametres-divi.png » title_text= »code-parametres-divi » _builder_version= »4.9.3″ _module_preset= »default » width= »29% »][/et_pb_image][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »15px » background_color= »#FFFFFF » text_orientation= »center » custom_padding= »|10px||10px|false|false » border_width_all= »3px » border_color_all= »#09E1C0″ box_shadow_style= »preset2″ locked= »off »]

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

</div>

[/et_pb_text][et_pb_text module_id= »ch3″ _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » width= »73% »]

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”

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure= »1_2,1_2″ _builder_version= »4.9.3″ _module_preset= »default »][et_pb_column type= »1_2″ _builder_version= »4.9.3″ _module_preset= »default »][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »15px » background_color= »#FFFFFF » text_orientation= »center » custom_padding= »|10px||10px|false|false » border_width_all= »3px » border_color_all= »#09E1C0″ box_shadow_style= »preset2″ locked= »off »]

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%);

}

[/et_pb_text][/et_pb_column][et_pb_column type= »1_2″ _builder_version= »4.9.3″ _module_preset= »default »][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/07/element-principal-css-divi.png » title_text= »element-principal-css-divi » _builder_version= »4.9.3″ _module_preset= »default »][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »4.9.3″ _module_preset= »default »][et_pb_column type= »4_4″ _builder_version= »4.9.3″ _module_preset= »default »][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| »]

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

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

Plus d'articles

Comment Capitaliser les Titres de Produits sur WooCommerce?

Vous êtes un nouvel utilisateur de WordPress et vous cherchez à peaufiner l’apparence de votre boutique en ligne WooCommerce? L’une des astuces les plus simples

Pollution numérique, droit à la déconnexion : comment réguler la boîte de réception de sa boîte mail ?

Smartphones, applications, mails… Dans notre vie professionnelle, l’usage des outils numériques est devenu incontournable. Mais cette surcharge d’informations et de notifications peut rapidement apporter son

Comment récupérer/extraire une extension WordPress d’un site?

Pour extraire une extension d’un site WordPress et l’installer sur un autre site lorsque vous avez perdu le fichier ZIP d’installation, suivez ces étapes :

Créer/Modifier un utilisateur sur WordPress par la base de données avec phpMyAdmin

Il peut être utile de modifier le rôle d’un utilisateur en passant par la base de données, notamment lorsqu’on souhaite reprendre la main sur le

Alexandre Da Costa

26/05/2023

Simple et efficace et accessible à tous.

Quitterie Goyhenetche

20/05/2023

Très bonne expérience en tant qu’apprenante en SEO et rédaction web. Le fait de pouvoir suivre les cours à son rythme et d’avoir accès à vie à la formation est vraiment un plus. Les formateurs sont à l’écoute, les supports de cours sont riches et bien documentés. Je recommande Voltee sans hésiter !

Manuela Zimny

16/05/2023

De très bons contenus et la possibilité de suivre cette formation en toute autonomie

Augustin Baduel

15/05/2023

Equipe très professionnelle. J'ai bien progressé sur Shopify grâce à Voltee. Je recommande !

Nerd Spirit

03/04/2023

Superbe expérience, centre très professionnel qui s'adapte parfaitement aux besoins des apprenants. Je remercie encore les personnes qui se sont occupés de moi. Je recommande fortement.

Kevin BELLOC

09/03/2023

Très content de mon expérience chez Voltee et des formations et des coachings Amazon FBA que j'ai pu suivre. Une mention spéciale à Valentin, formateur Amazon FBA qui m'a tout appris et a suivi toute ma progression pour au final atteindre mes objectifs ! Un grand Merci !

Laboratoire E-Sciences

27/12/2022

super centre de formation ! Les cours en ligne sont très bien et les formateurs sont disponibles pour répondre à nos questions et nous guider !

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

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

Plus d'articles

Comment Capitaliser les Titres de Produits sur WooCommerce?

Pollution numérique, droit à la déconnexion : comment réguler la boîte de réception de sa boîte mail ?

Comment récupérer/extraire une extension WordPress d’un site?

Créer/Modifier un utilisateur sur WordPress par la base de données avec phpMyAdmin

Votre projet nous intéresse, on discute?

Une surprise dans la newsletter!

Formations

Pratique

Support