Un chapiteau est un contenu qui défile continuellement dans une direction et ne s'arrête jamais : pas de flèches, pas de points, pas de limites de diapositives L'ancien <marquee> Le tag HTML est mort depuis des années, mais l'effet est revenu vers 2021 et c'est maintenant sur la moitié des sites d'agences que vous visiterez.
Trois façons d'en construire un dans Elementor : le gratuit Widget Logo Slider pour les logos, le News Ticker pour le texte, ou environ douze lignes de CSS si vous le voulez sur quelque chose que les widgets ne couvrent pas Un chapiteau est vraiment un widget carrousel avec les arrêts supprimés, c'est pourquoi deux des trois méthodes partent d'une. Les trois ci-dessous, avec le détail qui décide si vos boucles s'enclenchent proprement ou visiblement.
La seule chose qui donne l’impression qu’un chapiteau est brisé
Commencez ici, car c'est la raison pour laquelle la plupart des chapiteaux fabriqués à la main ont l'air faux.
Un chapiteau est une bande de contenu qui glisse à gauche jusqu'à ce qu'elle soit hors écran, puis revient au début S'il n'y a qu'une seule copie du contenu, vous obtenez un espace La queue part, et il y a un espace vide jusqu'à ce que la tête revienne.
Le correctif est de dupliquer la piste Deux copies identiques côte à côte, animées sur la largeur d'exactement un exemplaire Lorsque l'animation se réinitialise, la copie deux est assise précisément là où se trouvait la copie un, et le saut est invisible.
C'est ça C'est toute la technique Chaque chapiteau que vous avez vu qui boucle en douceur fait ça, et tous ceux qui bégaient ne le font pas.
Méthode 1 : Marquee de logo avec le curseur de logo gratuit
Si vous faites défiler les logos des clients, ce à quoi servent la plupart des chapiteaux, le Widget Logo Slider le fait sans CSS C'est dans le plugin gratuit.
- Faites glisser le curseur de logo sur la page et ajoutez vos logos dans le répéteur, une ligne chacun, avec un lien optionnel.
- Paramètres du carrousel ouvert et activez la lecture automatique, puis la boucle infinie.
- Réglez le délai de lecture automatique à 0. C'est l'interrupteur qui transforme un carrousel en chapiteau Un retard de zéro signifie qu'il ne s'arrête jamais sur une diapositive, donc le mouvement devient continu au lieu de pas.
- Réglez la vitesse sur quelque chose de lent, 4000 à 6000 ms. Les marquis lisent comme calmes quand ils sont plus lents que ce à quoi on pourrait s'attendre Les rapides ressemblent à un état d'erreur.
- Éteignez les flèches et les points. La navigation sur un chapiteau est contradictoire ; il n'y a rien vers lequel naviguer.
- Éteignez la pause en vol stationnaire si vous le souhaitez vraiment continu, ou laissez-le allumé si les logos sont cliquables.
Diapositives-per-view contrôle la densité Six sur le bureau, trois sur tablette, deux sur mobile garde le logos lisible Ne pas tomber à un, car un chapiteau montrant un seul logo à la fois cesse de lire comme une bande.
En savoir plus sur le style des bandes de logo, y compris le traitement de vol stationnaire en niveaux de gris et comment égaliser les tailles de logo incompatibles : la procédure pas à pas du carrousel logo. Pour ce qui se trouve d'autre dans le niveau libre, voir la panne gratuite du widget du carrousel.
Méthode 2 : chapiteau de texte avec News Ticker
Pour le défilement du texte (annonces, titres, une bande de stock-ticker) le widget News Ticker est l'option spécialement conçue C'est un widget Pro.
Il gère les choses qu'un chapiteau de texte roulé à la main se trompe : il peut extraire d'une requête de publication plutôt que d'une liste statique, donc un téléscripteur de” de nouvelles le plus récent se met à jour, et il a un bloc d'étiquette fixe sur la gauche qui reste placé pendant que le le contenu défile devant lui. Cette étiquette est le détail qui fait qu'un téléscripteur est lu comme un téléscripteur plutôt que comme un texte dérivant.
Définissez la direction, la vitesse et le comportement de pause dans les paramètres du widget. Deux choses qui valent la peine d'être faites :
- Pause en vol stationnaire, allumé. Si les gros titres sont des liens, les gens ont besoin d'une cible stationnaire.
- Gardez les éléments courts. Un téléscripteur avec des titres de 90 caractères prend tellement de temps à parcourir que personne ne voit l'élément quatre. Tronquer à environ 50 caractères.
Si ce que vous voulez réellement, c'est déplacer du texte sans le parchemin, un titre où les mots tournent en place, le Widget Titres animés est-ce que l'ajustement est plus proche que n'importe quel chapiteau.
Méthode 3 : Construire un avec CSS
Pour tout ce que les widgets ne couvrent pas (une bande de citations de témoignages, une rangée d'icônes, un contenu mixte) un chapiteau est de douze lignes de CSS. Mettez le balisage dans un widget HTML et le CSS dans le champ CSS personnalisé d'Elementor ou votre thème enfant.
<div class="ma-marquee">
<div class="ma-marquee__track">
<span>Item one</span><span>Item two</span><span>Item three</span>
<span>Item one</span><span>Item two</span><span>Item three</span>
</div>
</div>Notez que le contenu apparaît deux fois C'est la piste en double de plus tôt, pas une erreur de copier-coller.
.ma-marquee {
overflow: hidden;
}
.ma-marquee__track {
display: flex;
gap: 3rem;
width: max-content;
animation: ma-scroll 30s linear infinite;
}
.ma-marquee:hover .ma-marquee__track {
animation-play-state: paused;
}
@keyframes ma-scroll {
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.ma-marquee__track { animation: none; }
}Quatre choses à l'intérieur comptent :
translateX(-50%)déplace la piste d'exactement une largeur de copie, car la piste est à deux copies C'est ce qui rend la boucle invisible.linear'non'ease. Un chapiteau facilité accélère et ralentit chaque cycle, ce qui ressemble à un bug.width: max-contentarrête l'emballage de la piste flexible.- La requête à mouvement réduit n'est pas facultatif Le mouvement horizontal continu est une migraine documentée et un déclencheur vestibulaire, et un chapiteau est le délinquant le plus courant sur le Web moderne. Honorez le décor.
Pour inverser la direction, animer depuis translateX(-50%) à 0. Pour vertical, échangez vers translateY et réglez la hauteur du conteneur.
À quelle vitesse un chapiteau doit-il bouger ?
Plus lent que ne le dit l'instinct Un bon point de départ est de 30 secondes pour un cycle complet d'une piste de six éléments, ce qui semble presque trop lent dans l'éditeur et se lit comme confiant sur une page en direct.
Le test : un visiteur peut-il lire un élément sans le suivre des yeux S'il doit suivre le mouvement, c'est trop rapide, et toute la bande devient quelque chose à détourner du regard.
Les logos peuvent aller plus vite que le texte, car un logo est reconnu plutôt que lu. Le texte a besoin d'environ le double du temps d'arrêt. Un carrousel à gradins est le cas inverse, où la lecture automatique est généralement une erreur parce que les éléments sont cliquables.
Un chapiteau est-il mauvais pour le référencement ou l'accessibilité ?
SEO, non. Le contenu est du texte réel dans le DOM, explorable et indexable La duplication de la piste signifie que le texte apparaît deux fois dans la source, ce qui vaut la peine d'être conscient mais n'est pas un problème de duplicata-content à cette échelle, car c'est une poignée de mots à l'intérieur d'un élément Si cela vous dérange, marquez la deuxième copie aria-hidden="true"[TRADUCTION], ce que vous devriez faire de toute façon.
L'accessibilité est la véritable considération, et il y a trois véritables questions :
- Sensibilité au mouvement. Géré par la requête à mouvement réduit ci-dessus. Non négociable.
- Cibles de liaison mobiles. Si les éléments sont cliquables, faites une pause sur le vol stationnaire et sur le focus Un lien qui glisse lorsque quelqu'un le cherche échoue dans l'esprit des attentes de taille cible de WCAG 2.2 sinon dans la lettre.
- Lecteurs d'écran le lisant deux fois. La piste en double est annoncée deux fois, sauf si vous cachez la deuxième copie de l'arborescence d'accessibilité. Un attribut le corrige.
Rien de tout cela ne fait d'un chapiteau une mauvaise idée Cela en fait une non configurée une mauvaise idée.
Questions fréquemment posées
Elementor a-t-il un widget de chapiteau ?
Pas dans le noyau Elementor n'a pas de marque dédié ou widget ticker dans le plugin gratuit ou Pro Vous obtenez l'effet d'un addon (le Logo Slider gratuit avec le délai de lecture automatique mis à zéro, ou le News Ticker pour le défilement du texte) ou en écrivant le CSS vous-même Rien ici n'est vendu comme un widget de chapiteau ; le News Ticker (Pro) est la chose spécialement conçue, puisque le défilement continu est ce à quoi il sert, mais il est façonné autour de bandes de titre plutôt que de contenu arbitraire.
Comment puis-je faire défiler le texte en continu dans Elementor ?
Deux options Le widget News Ticker le gère avec des paramètres, notamment tirer les titres d'une requête de publication Ou ajouter un widget HTML avec une piste de contenu dupliquée et une animation d'image clé CSS translateX à -50% sur une boucle infinie linéaire.
Pourquoi mon chapiteau saute-t-il ou bégaie-t-il lorsqu'il boucle ?
La piste n'est pas dupliquée, ou la distance d'animation ne correspond pas à la largeur d'un exemplaire Un chapiteau a besoin de deux copies identiques du contenu et d'une animation qui déplace exactement 50 % de la largeur totale de la piste N'importe quelle autre distance et vous verrez un claquement visible à chaque cycle.
Comment puis-je mettre un chapiteau en vol stationnaire en pause ?
Avec le widget Logo Slider c'est un toggle dans les Paramètres du Carrousel En CSS c'est animation-play-state: paused en vol stationnaire du conteneur Ajouter :focus-within aux côtés :hover les utilisateurs du clavier bénéficient donc de la même pause.
Puis-je faire un chapiteau vertical en Elementor ?
Oui. Animer translateY au lieu de translateX« , définissez une hauteur de conteneur fixe et empilez la piste dupliquée dans une colonne au lieu d'une ligne. Les chapiteaux verticaux conviennent mieux aux bandes de témoignage et aux flux de notification qu'aux logos ».
La balise HTML marquee est-elle toujours prise en charge ?
Les navigateurs rendent toujours <marquee>« , mais il est obsolète depuis des années, il ne figure pas dans la spécification HTML et il ne vous donne aucun contrôle sur l'assouplissement, la pause ou le mouvement réduit. Utilisez plutôt l'animation CSS : même effet, meilleur comportement, et elle ne disparaîtra pas dans une future version du navigateur. ».
Quelle méthode utiliser
Logos : le Logo Slider gratuit, délai de lecture automatique zéro. Fait en deux minutes et il gère la densité réactive pour vous.
Aucun des vingt Constructeur de widgets designs est un chapiteau, donc le Logo Slider reste l'outil pour ce travail Le page de tarification affiche où se trouve News Ticker si vous souhaitez la version spécialement conçue.
Titre défilant : News Ticker, car la source de la requête et l'étiquette fixe valent la licence à elles seules.
N'importe quoi d'autre : le CSS C'est court, c'est à vous, et rien ne peut le déprécier Les constructeurs de curseurs autonomes peuvent aussi faire des pistes continues, et la comparaison du plugin de curseur couvre ce qu'ils coûtent à la page.
Tous les widgets du carrousel et du curseur, y compris ceux qui effectuent le service de chapiteau, sont collectés sur le Widgets de carrousel d'éléments page, avec 20 modèles de carrousels et de curseurs importables8 d'entre eux gratuits Si votre chapiteau se comporte mal après une mise à jour du plugin de mise en cache, les correctifs sont intégrés le guide de dépannage du curseur Swiper postulez ici aussi.
