Et markeringsramme er indhold, der ruller kontinuerligt i én retning og aldrig stopper: ingen pile, ingen prikker, ingen glidegrænser. Den gamle <marquee> HTML-tag har været dødt i årevis, men effekten kom tilbage omkring 2021, og det er nu på halvdelen af de bureauwebsteder, du vil besøge.
Tre måder at bygge en i Elementor på: den frie Logo Slider widget til logoer, den Nyheder Ticker til tekst, eller omkring tolv linjer CSS, hvis du vil have det på noget, widgets ikke dækker. Et markeringsramme er virkelig en karrusel widget med stopperne fjernet, hvorfor to af de tre metoder starter fra en. Alle tre nedenfor, med den detalje, der afgør, om dine loops rent eller synligt snaps.
Den ene ting, der får et telt til at se ødelagt ud
Start her, for det er grunden til, at de fleste håndbyggede telte ser forkerte ud.
Et markeringsramme er en stribe indhold, der glider til venstre, indtil det er uden for skærmen, og derefter hopper tilbage til starten. Hvis der kun er én kopi af indholdet, får du et hul. Halen forlader, og der er tom plads, indtil hovedet kommer rundt igen.
Rettelsen er at duplikere sporet. To identiske kopier side om side, animeret på tværs af bredden af præcis én kopi. Når animationen nulstilles, sidder kopi to præcist, hvor kopi en var, og springet er usynligt.
Det er det. Det er hele teknikken. Hvert telt, du har set, som sløjfer jævnt, gør dette, og hver eneste, der stammer, er det ikke.
Metode 1: Logo markeringsramme med den gratis Logo Slider
Hvis du ruller klientlogoer, hvilket er det, de fleste telte er til, er Logo Slider widget gør det uden CSS. Det er i det gratis plugin.
- Træk Logo Slider over på siden og tilføj dine logoer i repeateren, en række hver, med et valgfrit link.
- Åbn Karruselindstillinger og tænd for Autospil, derefter Infinite Loop.
- Indstil autospil forsinkelse til 0. Dette er kontakten, der forvandler en karrusel til et telt. En forsinkelse på nul betyder, at den aldrig holder pause på et dias, så bevægelsen bliver kontinuerlig i stedet for at træde.
- Sæt farten til noget langsomt, 4000 til 6000ms. Markiser læses som rolige, når de er langsommere, end du ville forvente. Hurtige ligner en fejltilstand.
- Sluk for pile og prikker. Navigation på et telt er selvmodsigende; der er intet at navigere til.
- Sluk pause-på-hover hvis du vil have det virkelig kontinuerligt, eller lad det være tændt, hvis logoerne er klikbare.
Slides-per-view styrer tæthed. Seks på skrivebordet, tre på tablet, to på mobilen holder logoerne læselige. Lad være med at falde til en, for et markeringsramme, der viser et enkelt logo ad gangen, stopper med at læse som en strimmel.
Mere om stylinglogostrimler, herunder gråtonesvæverbehandlingen, og hvordan du udjævner uoverensstemmende logostørrelser: logokarruselgennemgangen. For hvad der ellers sidder i det frie niveau, se den gratis karrusel widget opdeling.
Metode 2: Teksttelt med News Ticker
For rulletekst (meddelelser, overskrifter, en strip med stock-ticker) er News Ticker-widget den specialbyggede mulighed. Det er en Pro-widget.
Den håndterer de ting, en håndrullet tekstmarkeringsramme tager fejl: den kan trække fra en postforespørgsel i stedet for en statisk liste, så en “seneste nyheder”-ticker opdaterer sig selv, og den har en fast etiketblok til venstre, der forbliver sat, mens indholdet ruller forbi det. Den etiket er den detalje, der får en ticker til at læse som en ticker snarere end som drivende tekst.
Indstil retningen, hastigheden og pauseadfærden i widgettens indstillinger. To ting, der er værd at gøre:
- Hold pause på svæve, på. Hvis overskrifterne er links, har folk brug for et stationært mål.
- Hold varer korte. En ticker med overskrifter på 90 tegn tager så lang tid at cykle, at ingen ser punkt fire. Afkort til omkring 50 tegn.
Hvis det, du faktisk ønsker, er at flytte tekst uden rullen, en overskrift, hvor ord roterer på plads, den Animerede overskrifter widget er den tættere pasform end noget telt.
Metode 3: Byg en med CSS
For alt, hvad widgets ikke dækker (en stribe af testimonial citater, en række ikoner, blandet indhold) en markeringsramme er tolv linjer af CSS. Sæt markeringen i en HTML-widget og CSS i Elementors brugerdefinerede CSS-felt eller dit barn tema.
<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>Bemærk indholdet vises to gange. Det er duplikatsporet fra tidligere, ikke en copy-paste fejl.
.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; }
}Fire ting derinde betyder noget:
translateX(-50%)flytter sporet med præcis én kopis bredde, fordi sporet er to kopier. Det er det, der gør løkken usynlig.linear, ikkeease. En lettet markeringsramme fremskynder og sænker hver cyklus, hvilket ligner en fejl.width: max-contentstopper flex track-indpakningen.- Forespørgslen med reduceret bevægelse er ikke valgfrit. Kontinuerlig vandret bevægelse er en dokumenteret migræne og vestibulær udløser, og et telt er den mest almindelige enkeltforbryder på det moderne web. Ær indstillingen.
For at vende retningen skal du animere fra translateX(-50%) til 0. For lodret, swap til translateY og indstil containerhøjden.
Hvor hurtigt skal et telt bevæge sig?
Langsommere end instinktet siger. Et godt udgangspunkt er 30 sekunder for en hel cyklus af et spor med seks elementer, som føles næsten for langsomt i editoren og læser som selvsikker på en live-side.
Testen: kan en besøgende læse ét element uden at spore det med øjnene? Hvis de skal følge bevægelsen, er det for hurtigt, og hele strimlen bliver noget at se væk fra.
Logoer kan gå hurtigere end tekst, fordi et logo genkendes frem for at blive læst. Tekst behøver omtrent det dobbelte af opholdstiden. En trappekarrusel er det modsatte tilfælde, hvor autoplay er normalt en fejl fordi elementerne er klikbare.
Er et telt dårligt for SEO eller tilgængelighed?
SEO, nej. Indholdet er ægte tekst i DOM, der kan crawles og indekseres. Duplikering af sporet betyder, at teksten vises to gange i kilden, hvilket er værd at være opmærksom på, men er ikke et duplikatindholdsproblem i denne skala, fordi det er en håndfuld ord inde i et element. Hvis det generer dig, skal du markere den anden kopi aria-hidden="true", hvilket du alligevel bør gøre.
Tilgængelighed er den egentlige overvejelse, og der er tre ægte spørgsmål:
- Bevægelsesfølsomhed. Håndteres af forespørgslen med reduceret bevægelse ovenfor. Ikke til forhandling.
- Moving link targets. Hvis elementer er klikbare, skal du holde pause ved svæve og på fokus. Et link, der glider væk, når nogen rækker ud efter det, svigter WCAG 2.2's forventninger til målstørrelse i ånden, hvis ikke i bogstav.
- Skærmlæsere læser den to gange. Det dublerede spor bliver annonceret to gange, medmindre du skjuler den anden kopi fra tilgængelighedstræet. En attribut løser det.
Intet af det gør et telt til en dårlig idé. Det gør en ukonfigureret til en dårlig idé.
Ofte stillede spørgsmål
Har Elementor en markeringsramme-widget?
Ikke i kernen. Elementor har ingen dedikeret markeringsramme eller ticker-widget i hverken det gratis eller Pro-plugin. Du får effekten fra en tilføjelse (den gratis Logo Slider med autospil forsinkelse sat til nul, eller News Ticker til rulletekst) eller ved at skrive CSS selv. Intet her sælges som en markeringsramme-widget; News Ticker (Pro) er den nærmeste specialbyggede ting, da rulning kontinuerligt er, hvad det er til, men det er formet omkring overskriftsstrimler snarere end vilkårligt indhold.
Hvordan får jeg tekst til at rulle kontinuerligt i Elementor?
To muligheder. News Ticker-widgetten håndterer den med indstillinger, herunder at trække overskrifter fra en postforespørgsel. Eller tilføj en HTML-widget med et duplikeret indholdsspor og en CSS-keyframe-animation translateX til -50% på en lineær uendelig løkke.
Hvorfor hopper eller stammer mit telt, når det sløjfer?
Sporet duplikeres ikke, eller animationsafstanden svarer ikke til en kopis bredde. Et markeringsramme har brug for to identiske kopier af indholdet og en animation, der bevæger sig præcis 50% af den samlede sporvidde. Enhver anden afstand, og du vil se et synligt snap på hver cyklus.
Hvordan sætter jeg et markeringsramme på pause på svæve?
Med Logo Slider-widgetten er det en skift i Karruselindstillinger. I CSS er det animation-play-state: paused på hover af beholderen. Tilføj :focus-within ved siden af :hover så tastaturbrugere får den samme pause.
Kan jeg lave et lodret markeringsramme i Elementor?
Ja. Animere translateY i stedet for translateX, indstille en fast container højde, og stable den duplikerede spor i en kolonne i stedet for en række. Lodrette markeringer passer til vidnesbyrd strimler og meddelelse feeds bedre end logoer.
Understøttes HTML-markeringsrammemærket stadig?
Browsere gengiver stadig <marquee>, men det er blevet forældet i årevis, det er ikke i HTML-specifikationen, og det giver dig ingen kontrol over lempelse, pause eller reduceret bevægelse. Brug CSS-animation i stedet: samme effekt, bedre adfærd, og det forsvinder ikke i en fremtidig browserudgivelse.
Hvilken metode skal man bruge
Logoer: den gratis Logo Slider, autospil forsinkelse nul. Udført i to minutter, og det håndterer responsive tæthed for dig.
Ingen af de tyve Widget Builder designs er et markeringsramme, så Logo Slider forbliver værktøjet til dette job. Den prissætning side viser, hvor News Ticker sidder, hvis du vil have den specialbyggede version.
Rullende overskrifter: Nyheder Ticker, fordi forespørgselskilden og den faste etiket er licensen værd alene.
Alt andet: CSS. Det er kort, det er din, og intet kan afskrive det. Standalone skyderbyggere kan også lave kontinuerlige spor, og slider plugin sammenligningen dækker hvad de koster siden.
Alle karrusel- og skyderwidgets, inklusive dem, der udfører teltpligt, samles på Elementor Carousel Widgets side, sammen med 20 importerbare karrusel- og skyderdesigns, 8 af dem gratis. Hvis dit markeringsramme opfører sig dårligt efter en caching-pluginopdatering, rettes ind fejlfindingsguiden til skyderen Swiper ansøg også her.
