Sådan oprettes faner i Elementor (kerne, indlejrede og tilføjelser)

Fire Elementor-faner med ikontitler og det første panel åbent

Nøgle takeaways

  • Elementor har to faneblads-widgets. Den oprindelige har båret en meddelelse om afskrivning siden version 3.8, og Nested Tabs-widgetten erstattede den.
  • Indlejrede faner sætter en beholder i hvert panel, så en formular, et galleri eller en pristabel kan leve inde i en fane.
  • Indlejrede faner skifter også til et lodret harmonika-layout under et brudpunkt, du vælger, hvilket er den adfærd, de fleste mennesker ønsker på telefoner.
  • En addon-widget såsom Master Addons Tabs widget er ruten, når selve tabulatorstrimlen er designproblemet: billedtitler, stilforudindstillinger eller tænd for svæve.
  • Vælg efter, hvad der går inde i panelet. Widgets inde betyder kerne. En stylet fane strip over tekst betyder en addon.

Faner gør et job: Hold en lang side kort. Specifikation, levering og garanti behøver ikke alle at være på skærmen på én gang, og en besøgende, der ønsker en af dem, bør ikke rulle forbi de to andre.

Elementor giver dig to widgets til dette og addons giver dig mere, hvilket er grunden til panelets søgning efter “faner” er forvirrende. Denne vejledning dækker alle tre ruter, hvad hver enkelt kan holde, og hvordan de opfører sig på en telefon.

Hvilke faneblade widget du faktisk har

Åbn widgetpanelet og søg efter faner. På en aktuel Elementor-installation får du Tabs-widget, og det du trækker i er den indlejrede version. Den gamle widget er stadig i koden for sider, der allerede bruger den, og den viser en meddelelse i panelet, når du redigerer en: enhver ny fane-widget, du trækker i, vil være den nye med indlejrede funktioner. Den meddelelse har været der siden Elementor 3.8.

Så i praksis er der tre ting, du måske bruger, og de er ikke ens.

widgetHvad går i et panelHvor det kommer fra
Faner (indlejrede)En container, så eventuelle widgetsElementor, gratis
Faner (gamle)Kun editorindholdElementor, forældet siden 3.8
Addon-faner widgetEditorindhold, eller en gemt skabelon med ProMaster Addons og andre

Rute 1: Nested Tabs-widgetten

Dette er standard og det rigtige udgangspunkt. Træk faner ind på siden, og du får tre faner, der hver holder en tom beholder.

Elementor Nested Tabs widgetpanel, der viser Tabs repeater med Oversigt, Specifikation og Levering elementer
Panelet Indlejrede faner. Hver repeaterrække er en fanetitel; panelindholdet er bygget på lærredet.
  1. Træk widgetten Tabulatorer over på siden.
  2. Omdøb hvert element i Tabs repeater. Titlen er alt, hvad repeateren holder, for indholdet bor i beholderen.
  3. Klik på en fane på lærredet, og byg derefter inde i dens beholder, som du ville andre steder.
  4. I Layout skal du bruge Retning til at flytte strimlen: Top, Bottom, Start eller End, hvor Start og End sætter titlerne i en sidekolonne.
  5. I Yderligere indstillinger skal du indstille Vandret rulle, hvis titlerne ikke passer, og indstille Breakpoint, hvor strimlen skal blive til en harmonika.
Tre Elementor Nested Tabs på forenden med Oversigt aktiv
Indlejrede faner på forenden. Almindelig som standard, fordi stylingen er din at indstille.

Beholderen er hele punktet. En kontaktformular, et galleri, en prissætningstabel eller et loopgitter fungerer alle inde i en fane, og intet andet på denne liste kan gøre det. Handelen er, at selve tabulatorstrimlen er ret almindelig: titler med et valgfrit ikon og ingen forudindstilling at starte fra.

Rute 2: en widget med addon-faner

Addon widgets findes for den anden halvdel af problemet, hvor strimlen er designet. Master Addons widget bygger hver fane fra en repeater række, der bærer sine egne felter.

Master Addons Tabs widgetpanel med Style Preset kontrol og tabulatorrepeateren
Stilforudindstilling sidder øverst: Vandrette faner, lodrette faner eller venstre aktiv kant.
Et åbent fanepunkt, der viser Ikontype med Ingen, Ikon og Billede, feltet Fanebladstitel og dropdownen Indholdstype
Pr. fane: Ikon Type (ingen, ikon eller billede), titlen og indholdstypen.

Byggeriet er:

  1. Træk widgetten ind, og vælg en forudindstilling af typografi.
  2. Tilføj et repeaterelement pr. fane med en fanetitel.
  3. Indstil Ikontype til Ingen, Ikon eller Billede, og vælg derefter ikonet eller upload billedet.
  4. Skriv panelindholdet i editoren eller på Pro point Content Type i en gemt sektion, widget eller sideskabelon.
  5. Indstil Tab Effect til Click or Hover, og skift Set as Default på den fane, der skal åbnes først.
Fire faner med ikontitler på frontenden, Oversigt aktiv, med en overskrift og et afsnit i panelet
Ikontitler og en forudindstilling, uden at style noget i hånden.

Det, du giver op, er beholderen. Paneler tager editorindhold, så en formular inde i en fane betyder enten Pro-ruten med en gemt skabelon eller kernewidgetten.

Rute 3: den gamle Tabs-widget

Hvis du redigerer en side, der er bygget for et par år siden, ser du muligvis på den originale widget: en Tabs Items-repeater med en titel og et indholdsfelt plus en Positionskontrol for vandret eller lodret. Det virker stadig, og Elementor sender det stadig, så gamle sider ikke går i stykker.

Der er ingen grund til at starte en ny side med det. Hvis du allerede er derinde, er spørgsmålet, om genopbygningen af blokken som Nested Tabs er de få minutter værd, og normalt er det, fordi du får harmonika breakpoint og beholderen.

Hvilken rute passer til jobbet

Hvad du har brug forBrug
En formular, galleri eller prissætningstabel inde i en faneIndlejrede faner
Faner, der bliver til harmonika på telefonerIndlejrede faner
Et billede på hver fanetitelAddon widget
En designet strimmel uden styling fra bundenAddon-widget via forudindstillingerne
Skift paneler på hoverAddon widget
Den samme gemte skabelon genbrugt i flere faneblokkeAddon widget på Pro
Redigering af en side bygget før Elementor 3.8Den gamle widget, eller genopbyg den

Fem ting, der er værd at få ret

  • Hold titler på et eller to ord. Lange titler ombrydes, og en omviklet strimmel holder op med at læse som en strimmel.
  • Fire faner er et behageligt maksimum på skrivebordet, og tre er bedre, når titlerne bærer ikoner.
  • Beslut hvad der åbner først. Kerne widget åbner altid fane et, så sæt panelet de fleste mennesker ønsker der.
  • Alt, hvad en besøgende skal læse, hører hjemme på siden i stedet for bag et klik i fane fire.
  • Tjek telefonvisningen, før du udgiver, for de to ruter opfører sig forskelligt der.

Ofte stillede spørgsmål

Har Elementor en faneblads-widget i den gratis version?

Ja. Tabs-widgetten er i det gratis plugin, og den aktuelle version er den indlejrede, som sætter en beholder inde i hvert panel.

Hvad skete der med den gamle Tabs-widget?

Det er forældet. Siden Elementor 3.8 panelet viser en meddelelse, når du redigerer en, og enhver ny faneblade widget du trækker i er den indlejrede version.

Kan jeg sætte en formular eller et galleri inde i en fane?

Med Indlejrede faner, ja, fordi hvert panel er en beholder. Med en addon widget panelet tager editor indhold, så det tilsvarende er en gemt skabelon på Pro.

Kan en fanebladstitel bruge et billede i stedet for tekst?

Ikke i kernewidgetten. Addon-widgets med et Icon Type-kontrolelement kan bruge et ikon eller et billede på titlen.

Hvor mange faner er for mange?

Forbi fire eller fem omslutter strimlen på bærbare computere og bliver ulæselig på telefoner. På det tidspunkt er en harmonika normalt det bedre layout.

Endelige tanker

Hvad der sidder inde i panelet bestemmer dette. Widgets i et panel betyder Indlejrede faner, hver gang. En strimmel, der skal ligne noget bestemt, med billedtitler eller hover switching, betyder en addon. Begge er en ti minutters build, når du ved, hvilken du er i.

Billede af Roy Jemee
Roy Jemee
Jeg er Roy Jemee, Content Wrangler og Marketer hos Pixar Labs, der arbejder på Master Addons for Elementor. Jeg skriver tutorials, optager videoerne og holder dokumentationen aktuel, så du altid ved, hvordan du bruger hver funktion. Jeg håndterer også support, så hvis du rammer en hage, er jeg den person, der hjælper dig med at rette det. Rigtige svar, fra en person, der bruger disse værktøjer hver dag.

Efterlad et svar

Din e-mailadresse vil ikke blive offentliggjort. Påkrævede felter er markeret *