Nøgle takeaways
- Fire fanetitler, der passer til en 1.200px desktop kolonne har omkring 390px på en telefon, så de wrap, squash eller overløb.
- Elementors Tabs-widget har en Breakpoint-kontrol, der skifter strimlen til en lodret harmonika under den bredde, du vælger. Mobil er standard.
- Vandret rulle er den anden mulighed: titler forbliver i én række, og besøgende stryger gennem dem.
- de Master Addons Tabs widget stabler sine titler i en kolonne i fuld bredde på en telefon, med det åbne panel nedenunder. Det er læsbart, men det er ikke en harmonika.
- Tre eller færre korte titler overlever normalt en telefon uberørt. Forbi det, vælg harmonika eller rul bevidst.
Faner er et skrivebordsmønster. De antager vandret plads til flere titler plus et panel, og en telefon har omkring en tredjedel af den bredde.
Elementor giver dig to udveje, og addon widgets opfører sig anderledes igen. Telefonens skærmbilleder nedenfor er 390px fangster af en rigtig testside, så hvad du ser er, hvad indstillingen gør.
Indholdsfortegnelse
Hvad går galt
En fanebladsstrimmel vil have én linje. Giv den mindre bredde end titlerne har brug for, og du får et af tre resultater, ingen af dem gode:
- Titlerne ombrydes på en anden og tredje række, og striben holder op med at læse som en stribe.
- De squash i stedet, indtil hver etiket er et par pixels af ulæselig tekst.
- Eller den sidste flyder over kanten og bringer normalt en vandret siderulle med sig.
Tryk på mål gør det værre. Touch retningslinjer sætter et behageligt mål på omkring 44px, og en klemt titel er godt under det, så folk savner og rammer naboen.
Mulighed 1: skift til en harmonika
Dette er den adfærd, de fleste mennesker ønsker, og Tabs-widgetten gør det uden CSS.
- Vælg widgetten Tabulatorer, og åbn Yderligere indstillinger under fanen Indhold.
- Indstil Breakpoint til den bredde, hvor strimlen skal give op. Mobil er standard og er normalt det rigtige svar; tablet giver mening, når titlerne er lange.
Under den bredde sidder hver titel direkte over sit eget panel, og hvis du trykker på et, åbnes det. En titel pr. række betyder et trykmål i fuld bredde, og indholdet forbliver sammenklappet, så siden ikke bliver længere.
Mulighed 2: lad strimlen rulle
Slå Vandret rul til, og titlerne forbliver i én række i enhver bredde, hvor rækken ruller sidelæns. Besøgende stryger langs den for at nå dem, der er væk fra skærmen.
Dette passer til en strimmel, der læser som en sekvens, som måneder eller størrelser, hvor det at holde ordren synlig betyder mere end at se hver mulighed på én gang. Dens svaghed er opdagelse: en besøgende, der ikke bemærker, at rækken ruller, finder aldrig de senere faner. At lade den næste titel halv synlig ved kanten hjælper, fordi en afskæringsetiket er en åbenlys invitation til at swipe.
Scroll og harmonika-brudpunktet udelukker ikke hinanden, så hvis du indstiller begge dele, skal du beslutte, hvilken du rent faktisk vil have under brudpunktet og kontrollere resultatet på en telefon.
Hvad addon faner gør på en telefon
Master Addons-widgetten håndterer smalle skærme ved at stable: Titlerne bliver en kolonne i fuld bredde, og det åbne panel sidder under hele listen.
Hver titel får et trykmål i fuld bredde, som løser squashingen. Den parrer ikke hver titel med sit eget panel, så med seks eller syv faner ruller en besøgende forbi hele listen, før den når noget indhold.
Den praktiske regel: tilføjelsen er fin på en telefon med tre eller fire faner, og kernewidgetten med et brudpunkt er bedre, når der er flere.
Hvilken mulighed for hvilken side
| Situation | Indstilling |
|---|---|
| Tre eller fire korte titler, for det meste desktoptrafik | Lad det være, og tjek derefter på en telefon |
| Fem eller flere faner | Core Tabs med Breakpoint indstillet til mobil |
| Lange titler som “Forsendelse og returnering” | Core Tabs med Breakpoint indstillet til tablet |
| Titler, der læses som en sekvens, som måneder eller størrelser | Vandret rulle |
| Mest telefontrafik og lange paneler | En harmonika-widget i stedet for faner |
| Ikontitler, tre eller fire faner | Addon widget, stablet kolonne er fint |
Når faner holder op med at arbejde på mobil
“Faner, der ikke fungerer på mobil” viser sig normalt at være en af fire ting:
- En svæveeffekt. Svæve findes ikke på en berøringsskærm, så en fane, der er indstillet til at tænde svirre, har brug for et tryk, nogle gange to. Indstil effekten til at klikke på en hvilken som helst side med telefontrafik.
- Cachelagret CSS. Når du har ændret brudpunktet, skal du regenerere Elementors CSS og rydde sidecachen, eller telefonen bliver ved med at servere det gamle stylesheet.
- Et udskudt script. Aggressiv JavaScript-udsættelse holder tabulatorscriptet tilbage, indtil den besøgende interagerer med siden, så det første tryk ikke gør noget. Udeluk widgettens script i optimeringsplugin'et.
- Et for lille trykmål. Intet er brudt, titlen er bare mindre end en tommelfinger, og harmonika-brudpunktet ordner det.
Ofte stillede spørgsmål
Hvordan får jeg Elementor-faner til at blive til en harmonika på mobilen?
Vælg Tabs-widgetten, åbn Yderligere indstillinger og indstil Breakpoint. Under den bredde skifter strimlen til et lodret harmonika-layout, med mobil som standard.
Hvorfor overlapper mine faneblads titler på en telefon?
Strimlen har mindre bredde end titlerne har brug for. Indstil et harmonika-brudpunkt, slå Vandret rulle til, eller forkort titlerne.
Gør faner ondt mobil SEO?
Nej. Indhold inde i en fane er i HTML og bliver indekseret, uanset om panelet er åbent eller ej.
Skal jeg bruge faner eller en harmonika på mobilen?
Hvis det meste af din trafik er telefoner, og panelerne er lange, skal du bygge den som en harmonika fra starten. Faner med et brudpunkt er det bedre opkald, når skrivebordet er den primære visning.
Hvorfor gør mit første tryk ingenting?
Normalt en svæveeffekt eller et udskudt script. Indstil tabulatoreffekten til at klikke, og udeluk tabulatorscriptet fra JavaScript-udsættelse.
Endelige tanker
Intet af dette behøver CSS. Elementors Breakpoint-kontrol dækker det almindelige tilfælde, Horizontal Scroll dækker sekvenser, og addon-widgets stables i en læsbar kolonne. Åbn derefter siden på en faktisk telefon og tryk på hver titel, for det er det trin, folk springer over.
Relateret læsning
