Nøgle takeaways
- Lodrette faner sætter titlerne i en kolonne til venstre eller højre, med panelet ved siden af dem. De passer til lange titler og seks eller flere sektioner, hvor en vandret strimmel ville ombrydes.
- Elementors egen Tabs-widget gør dette med Retningskontrollen indstillet til Start eller Slut. Ingen CSS nødvendig.
- de Master Addons Tabs widget har en forudindstillet Vertical Tabs-stil, som ankommer stylet i stedet for almindelig.
- Under omkring 768px er der ikke nok bredde til en sidesøjle, så begge ruter stables. Kun kernewidgeten bliver til en harmonika.
- Vælg kerne, hvis widgets går inde i panelerne, og tilføjelsen, hvis selve fanekolonnen har brug for ikoner eller et færdigt look.
Vandrette faner går i stykker, når titlerne bliver lange eller talrige. Seks titler på tværs af en 1.200 px kolonne ombrydes enten på to linjer eller krymper teksten, indtil ingen læser dem.
Lodrette faner vender strimlen på sin side: en smal kolonne af titler med det aktive panel ved siden af. Hver titel får en fuld linje, så “Fragt og returnerer” passer uden indpakning. Begge måder at bygge det følger.
Indholdsfortegnelse
Når lodret slår vandret
Lodret er det bedre layout, når nogen af disse er sande:
- Mere end fem sektioner, hvor en strimmel omslutter, men en søjle bare bliver højere.
- Titler længere end to ord. “Garanti og reparationer” har brug for en fuld linje.
- Paneler af meget forskellige højder, da titelsøjlen forbliver sat, mens panelet ændrer størrelse.
- Indhold, der lyder som en menu: dokumentationssektioner, servicelister, grupperede ofte stillede spørgsmål.
Hold dig vandret i tre eller fire korte titler. En sidekolonne spiser omtrent en fjerdedel af bredden, og med tre faner er den handel ikke det værd.
Metode 1: Elementors retningskontrol
Tabulatorwidgetten i Elementor håndterer dette uden en tilføjelse.
- Træk widgetten Tabulatorer over på siden.
- I Layout skal du indstille Retning til Start for titler til venstre eller Slut for titler til højre.
- Indstil Juster titel for at styre, om titelteksten sidder til venstre, i midten eller til højre inde i kolonnen.
- Byg hvert panel inde i sin beholder som sædvanligt.
Start sætter kolonnen til venstre i et venstre-til-højre sprog og vender automatisk for højre-til-venstre, hvorfor værdierne hedder Start og Slut i stedet for Venstre og Højre.
Resultatet er funktionelt og ustillet: teksttitler i en kolonne, panelet ved siden af dem og hver kant og farve, der er tilbage til fanen Stil.
Metode 2: forudindstillingen Lodrette faner
Master Addons-widgetten behandler layoutet som en forudindstilling i stedet for en retning, så stylingen følger med.
- Træk widgetten Tabulatorer ind.
- Indstil stilforudindstilling til lodrette faner.
- Tilføj et repeaterelement pr. sektion, hver med en fanetitel.
- Indstil ikontype til ikon eller billede, hvis titlerne har brug for en, og vælg derefter ikonet.
- Skriv panelindholdet, og skift Indstil som standard på den fane, der skal åbnes først.
Kolonnen ankommer med sin egen baggrund, afstand og aktive tilstand, så en brugbar blok tager et minut i stedet for en stylingsession. Grænsen er den samme, som tilføjelsen altid har: paneler holder editorindhold, så en formular eller et galleri inde i en fane betyder en gemt skabelon på Pro, eller kernewidgetten i stedet.
En mere støjsvag variant: venstre aktiv kant
Den tredje forudindstilling er værd at vide om. Venstre Active Border beholder den lodrette kolonne, men dropper det indrammede look: titler sidder på sidebaggrunden, og den aktive er markeret med en farvet bjælke på venstre kant.
Dette er den, du skal række ud efter på sider i dokumentationsstil, hvor en tung fane-kolonne kæmper mod brødteksten for opmærksomhed.
Hvad sker der på en telefon
En 390px skærm har ikke plads til en sidesøjle plus et panel, så begge ruter opgiver det lodrette layout.
Kernewidgetten stables til en lodret harmonika under det Breakpoint, du vælger i Yderligere indstillinger, hvor hver titel sidder direkte over sit eget panel. Addon-widgetten stabler titlerne i en kolonne i fuld bredde med panelet nedenunder, hvilket virker, selvom det ikke er en harmonika: det åbne panel forbliver under hele listen over titler.
Uanset hvad, så tjek telefonvisningen, før du udgiver. Det layout, du har designet på skrivebordet, er ikke det layout, en besøgende på telefonen ser.
Hvilken metode skal man bruge
| Situation | Metode |
|---|---|
| Formularer, gallerier eller prisborde inde i panelerne | Core Tabs, Retning indstillet til Start |
| Skal være harmonika på telefoner | Core Tabs |
| Titler til højre i stedet for venstre | Core Tabs, Retning indstillet til End |
| Ikoner eller billeder på titlerne | Addon, Vertical Tabs forudindstillet |
| Stilet kolonne uden Style-fanearbejde | Addon, Vertical Tabs forudindstillet |
| Almindelig dokumentationsstil sidenav | Addon, Venstre aktiv kant forudindstilling |
| Paneler tænder for svæve | Addon, Tab Effect indstillet til Hover |
Ofte stillede spørgsmål
Kan Elementor lave lodrette faner uden en tilføjelse?
Ja. Indstil Tabulatordiwidgetens Retningskontrol til Start eller Slut, og titlerne flyttes til en sidekolonne.
Hvorfor kaldes Retningsværdier Start og Slut, ikke Venstre og Højre?
Så layoutet vender korrekt i højre-til-venstre sprog. Start er den side, teksten begynder på.
Hvor mange faner fungerer i et lodret layout?
Seks til ti er behageligt. Forbi at kolonnen bliver højere end panelet ved siden af, hvilket ser mærkeligt ud.
Forbliver lodrette faner lodrette på mobilen?
Nej. Der er ikke nok bredde, så begge ruter stables. Kernewidgetten bliver en harmonika; addon stabler titler over panelet.
Kan jeg sætte en formular inde i en lodret fane?
Med kernewidgetten, ja, fordi hvert panel er en beholder. Med tilføjelsen peger det tilsvarende Indholdstype mod en gemt skabelon, som er en Pro-indstilling.
Endelige tanker
At gå lodret er, hvordan du løser et breddeproblem uden at forkorte titlerne. Elementors Retningskontrol gør det uden tilføjelse og holder beholdere i panelerne, hvilket betyder noget, hvis der går noget interaktivt indeni. Addonforudindstillingerne betyder noget, når titelkolonnen skal se færdig ud, uden at du styler den. Begge tager omtrent samme tid at bygge, så det, der bor i panelet, bestemmer det.
Relateret læsning
