Faner

Fanebladene feltgrupper styrer ind i en fanestribe i Elementor panelet, som fanerne Normal og Hover på Elementors egne knapstile. Du bygger det i Master Addons Widget Builder: tilføj fanerne, sæt felter inde i hver enkelt, og læs hver værdi i din HTML eller CSS med et tredelt token som f.eks {{ button_states.hover.bg }}.

Tabs er et Pro-felt. Det gratis plugin indeholder en begrænset Widget Builder, og det fulde sæt felter leveres med Master Addons Pro.

Hvad Tabs-feltet gør #

• Det tilføjer en række klikbare faner til en sektion af din widgets panel. Ved at klikke på en fane vises felterne inde i den.
• Hver fane har et navn, en etiket og sin egen liste over felter.
• Feltet Tabulatorer gemmer ingen værdi selv. Værdierne tilhører felterne inde i fanerne.
• Skabeloner læser disse værdier med {{ tabs_name.tab_name.field_name }}. To faner kan bruge de samme feltnavne, hvilket holder Normal og Hover regler let at sammenligne.

Hvis du ikke har bygget en widget endnu, så læs Widget Builder oversigt first.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor og Master Addons Pro, begge aktive. Den installationsvejledning covers opsætning.
• En widget åben i Widget Builder. Eksemplet i denne vejledning er en “Hover Button” widget: et Tekstfelt til knappen etiket, plus et Tabs felt navngivet button_states med en Normal og en Hover-fane. Hver fane indeholder to farvefelter, bg og text.

Sådan tilføjes et Tabulatorfelt #

1. Gå til Master Addons > Widget Builder og åbn din widget.
2. Klik på Style tab og tilføj en sektion, for eksempel “Knapstil”.
3. Type tabs i feltsøgefeltet til venstre.
4. Drag Faner ind i sektionen. Dens indstillinger åbnes i venstre sidebjælke, og sektionsvisning viser fanestriben.

Et nyt fanebladsfelt er navngivet tabs og kommer med to tomme faner, tab_1 og tab_2. Omdøb dem, før du skriver nogen tokens, fordi navnene bliver en del af hver sti.

Faner feltindstillinger forklaret #

• Label navngiver feltet inde i bygherren. I Elementor ser redaktører sektionstitlen og fanebladsetiketterne, ikke denne etiket.
• Name er den første del af hver token, så button_states giver {{ button_states.normal.bg }}. Kun bogstaver, tal og understregninger.
• Description er en note til dig inde i bygherren.
• Faner er listen over faneblade. Hver række har en Name (bruges i tokens, som f.eks hover) og a Label (vist på fanen, som f.eks. Hover). Klik Tilføj fane for en anden række, eller det røde kryds for at fjerne en.

Under fanelisten viser sidebjælken en Fanebladsfelt tabel pr. faneblad, med titlen med fanens etiket. Det er her felterne går.

• Name er den sidste del af tokenet. Du kan genbruge det samme navn i hver fane, som bg og text er her.
• Label er teksten ved siden af kontrolelementet i Elementor.
• Type indstiller kontrolelementet: Tekst, Tal, Textarea, WYSIWYG, Kode, Skjult, Switcher, Vælg, Farve, Skrifttype, Typografi, Dato Tid, URL, Medier, Galleri, Ikoner, Slider, Dimensioner eller Baggrund.
• Klik Tilføj felt for at tilføje en række til den fane.

De almindelige indstillinger længere nede (Vis etiket, separator, betingelser og resten) ændrer ikke, hvordan et fanebladsfelt vises i Elementor, så du kan lade dem være i fred.

Læs faneværdier i din skabelon #

Hver værdi inde i en fane læses med tre navne forbundet med prikker: feltet Tabulatorer, fanen og derefter feltet.

{{ tabs_name.tab_name.field_name }}

Du behøver ikke at skrive disse. Når du har gemt, viser panelet Dokumentation ved siden af HTML-editoren hver sti under fanefeltets etiket, og kopiikonet kopierer en.

Poletter fungerer i CSS-fanen samt HTML-fanen. Eksempelknappen holder sit basislook i én regel og læser fanebladsfarverne i de næste to:

.ma-btn {
  background: #652dd9;
  color: #ffffff;
}

.ma-btn {
  background: {{ button_states.normal.bg }};
  color: {{ button_states.normal.text }};
}

.ma-btn:hover {
  background: {{ button_states.hover.bg }};
  color: {{ button_states.hover.text }};
}

Den første regel er en fallback. Indtil en editor vælger en farve, udskriver et token intet, og linjen bliver background: ;. Browsere springer den ugyldige linje over, så farverne fra den første regel forbliver på plads.

Kun den fulde vej virker. I test, {{ bg }}, {{ hover.bg }} og {{ button_states.hover }} alle udskrev intet, mens {{ button_states.hover.bg }} udskrev farven. Hvis en værdi kommer tom ud, skal du først kontrollere for tre dele og nøjagtig stavemåde.

Klik Gem indstillinger når du er færdig.

Brug kontrolelementet Tabulatorer i Elementor #

Føj widgetten til en side, eller genindlæs editoren, hvis siden allerede var åben. Vælg widgetten, og åbn Style fane. Dit afsnit viser fanestriben med fanen Normal åben.

Indstil farverne på fanen Normal, og klik derefter på Hover og sæt det andet par. Flyt musen hen over knappen i forhåndsvisningen for at kontrollere svævefarverne.

Almindelige brugstilfælde #

• Normal og Hover farver til knapper, kort og links.
• Aktive og inaktive stilarter til filtre, skift og menupunkter.
• Lyse og mørke versioner af en komponent, redigeret fra ét afsnit.
• Indhold opdelt i grupper, såsom en fane For og Bag på et flip-kort, med tekst- og mediefelter i hver.

Tips til at arbejde med feltet Tabulatorer #

• Vælg fanerne feltnavn og fanenavne først. Omdøbning enten senere betyder opdatering af hver token, der bruger dem.
• Genbrug feltnavne på tværs af faner. normal.bg og hover.bg er lettere at læse end to ikke-relaterede navne.
• Undgå at ændre et felts Etiket, når widgetten er på live-sider. Elementor gemmer de gemte værdier under en nøgle, der er bygget ud fra etiketten, så en ny etiket kan få eksisterende værdier til at forsvinde fra disse sider.
• Sæt standardformater i en regel før tokenreglen, så en tom værdi aldrig bryder designet.
• Giv dine klasser et præfiks (som f.eks ma-btn). CSS fra widgetens CSS-fane gælder for hele siden, så generiske navne som .button kan støde sammen med andre stilarter.
• For en enkelt tænd/sluk-gruppe af indstillinger i stedet for faner, se Popover Toggle-felt. For en liste editoren kan tilføje rækker til, brug den Repeaterfelt.

Ofte stillede spørgsmål #

Indpakning #

Navngiv feltet Tabulatorer og dets faner, tilføj felter til hver fane, og læs dem med {{ tabs_name.tab_name.field_name }} i din HTML eller CSS. Hold en fallback-regel for tomme værdier, og slå dig ned på navne, før widgetten går live. Den Farvefelt doc dækker den farvekontrol, der anvendes i dette eksempel, og prissætning viser, hvad hver plan indeholder.