Skrifttype

Feltet Skrifttype føjer en skrifttypefamilie-rullemenu til en brugerdefineret widget, du bygger med Master Addons Widget Builder. Redaktører vælger en systemskrifttype eller en Google Font i Elementor, og widgetten anvender den på det element, du vælger. Det ændrer kun skrifttypen. Størrelse, vægt og linjehøjde forbliver i din CSS.

Skrifttype er et af de felter, du kan bruge i den gratis versions Widget Builder. Det gratis plugin indeholder en begrænset Widget Builder, og det fulde sæt af felter leveres med Master Addons Pro.

Hvad feltet Skrifttype gør #

• Tilføjer en søgbar dropdown til din widgets panel i Elementor. Listen har en Default mulighed, a System gruppe (Arial, Tahoma og så videre) og en Google group.
• Gemmer familienavnet som tekst, for eksempel Playfair Display.
• Skriver a font-family regel for de elementer, du angiver under CSS-vælgere. Når valget er en Google Font, indlæser Elementor den skrifttype på siden for dig.
• Giver dig også et token, som {{ quote_font }}, der udskriver efternavnet.

Ny hos bygherren? Læs den Widget Builder oversigt først, så kom tilbage med en widget åben.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Den installationsvejledning covers opsætning.
• En widget åben i Widget Builder. Eksemplet i denne vejledning er en “Pull Quote” widget: en Textarea navngivet quote_text, et Tekstfelt med navnet quote_author, og et Skrifttypefelt med navnet quote_font det sætter citatets skrifttype.

Sådan tilføjes et skrifttypefelt #

1. Gå til Master Addons > Widget Builder og åbn din widget.
2. Klik på Style tab og tilføj et afsnit, for eksempel “Citatstil”.
3. Type font i feltsøgefeltet til venstre.
4. Drag Skrifttype ind i sektionen. Klik på blyanten på feltet for at åbne dens indstillinger.

Stil er, hvor redaktører forventer at finde skrifttypeindstillinger, men feltet fungerer også i en sektion med indhold eller avanceret.

Skrifttypefeltindstillinger forklaret #

• Etiket: teksten over dropdown i Elementor, for eksempel “Citat Font”.
• Navn: feltets unikke id og navnet på dets token. Brug kun bogstaver, tal og understregninger, f.eks quote_font.
• Beskrivelse: et tip vist under dropdown i Elementor.
• Standardværdi: familien en ny kopi af widgetten starter med. Skriv navnet nøjagtigt som det vises i Elementors liste, for eksempel Playfair Display.

Under Fælles indstillinger finder du Vis etiket, Etiketblok, Separator og Betingelser, som fungerer på samme måde som på andre felter. Den indstilling, der får dette felt til at fungere, er CSS-vælgere.

Anvend skrifttypen med CSS Selectors #

Rul ned til CSS-vælgere og klik Tilføj vare. Hver række har to kasser:

• CSS Selector: elementet, der får skrifttypen. For pull-citatet er det .pq-quote. Du behøver ikke at skrive {{WRAPPER}}, fordi bygherren tilføjer det for dig og holder reglen inde i denne widget.
• CSS-egenskaber: reglen om at skrive. {{VALUE}} erstattes med den plukkede familie.

font-family: "{{VALUE}}", Georgia, serif;

En ny række kommer fyldt med eksempeltekst, .text-1, .text-2 og color: {{VALUE}};. Udskift begge. Hvis du går color i boksen egenskaber ender skrifttypenavnet som en farveværdi, og skrifttypen ændres ikke.

Citaterne omkring {{VALUE}} hold navne med mellemrum, som Playfair Display, i gang. Georgia, serif er tilbagefaldet, mens skrifttypen indlæses. Hvis du vil angive flere elementer, skal du klikke på Tilføj element igen og tilføje en anden række.

Forlad sletten Vælger boks nederst tom. I vores prøver skrev den color: Lora; for dette felt, som ikke indstiller en skrifttype.

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

Hvorfor ikke sætte tokenet i CSS-panelet? #

Tokenet virker der. font-family: "{{ quote_font }}", Georgia, serif; udskriver det rigtige navn. Problemet indlæses. I vores test blev en Google Font, der kun blev brugt via tokenet, ikke indlæst på frontenden, så besøgende så fallback-skrifttypen. En CSS Selectors-række giver Elementor de oplysninger, den har brug for for at indlæse skrifttypen, og det samme valg kom korrekt igennem.

Behold tokenet for steder, hvor du har brug for navnet som tekst, såsom en klasse eller en etiket i HTML.

Brug kontrolelementet Skrifttype i Elementor #

Føj widgetten til en side, eller genindlæs editoren, hvis siden allerede var åben. Vælg widgetten, og åbn Style fane. Klik på dropdown under din etiket og begynde at skrive for at filtrere listen. Hvert familienavn er tegnet i sin egen skrifttype, hvilket gør plukning lettere.

Vælg en familie og forhåndsvisningsopdateringerne. På den offentliggjorte side indlæser Elementor Google Font sammen med widgettens typografier.

At vælge Default rydder valget. Widgetten falder derefter tilbage til den skrifttype, dit CSS-panel eller tema sætter for det element, så giv elementet en fornuftig skrifttype i CSS-panelet.

Almindelige brugstilfælde #

• Træk citater og vidnesbyrd, hvor kun citatteksten ændrer skrifttype.
• Vis overskrifter i helte- eller bannerwidgets med brødtekst alene.
• Prisnumre, badges eller etiketter, der bruger en brandvisningsskrifttype.
• Klientwebsteder, hvor redaktører skal vælge en skrifttype, men ikke røre størrelser og mellemrum.

Tips til at arbejde med feltet Skrifttype #

• Brug CSS Selectors i stedet for tokenet til styling. Det er det, der får Google Fonts til at indlæse.
• Tilføj altid en fallback stak efter {{VALUE}}, som f.eks Georgia, serif eller Arial, sans-serif.
• Sæt størrelse og vægt i CSS-panelet. Feltet Skrifttype indstiller kun familien.
• Har du også brug for størrelse, vægt og afstandskontrol? The Typografifelt er et Pro-felt, der bundter dem alle.
• Hver Google Font tilføjer en download. To eller tre familier pr. side er en rimelig grænse.

Ofte stillede spørgsmål #

Indpakning #

Føj feltet Skrifttype til en Style-sektion, angiv en standardfamilie, og tilføj en CSS Selectors-række, der peger font-family: "{{VALUE}}" på dit element. Redaktører får en søgbar skriftliste i Elementor, og Google Fonts indlæses på siden uden ekstra kode. For fuldtekst styling, se den Typografifelt, og kontrollere prissætning for hvad hver plan indeholder.