Typografi

The Typografifelt giver en brugerdefineret widget nøjagtig samme typografi panel Elementors kerne widgets brug: skrifttype familie med Google Fonts, størrelse, vægt, transform, stil, dekoration, linjehøjde, bogstavafstand, og ordafstand, alle lydhør pr. enhed. Inde i Master Addons Widget Builder, du tilføjer feltet én gang, peger det mod en CSS-vælger, og alle, der redigerer widgetten i Elementor, kan genstille teksten uden at røre kode.

Som enhver Widget Builder-kontrol understøtter Typography Betingelser, så du kan holde det skjult, indtil en brugerdefineret-styling toggle er tændt. Token output på tværs af bygherren løber gennem Twig-syntaks skabelon motor; begge vejledninger dækker detaljerne og begrænsningerne.

I modsætning til tekst- eller farvefelter bruger feltet Typografi ikke en kortkode i din CSS. Du fortæller feltet, hvilken vælger den styrer, og Elementor skriver typografitypografitypografierne til den vælger på egen hånd. Et felt, en vælger, udført.

Hvad Typografi feltet gør #

Et Typografi-felt gengiver Elementors typografigruppekontrol i din widgets indstillingspanel. Når nogen vælger widget og klikker på blyantikonet ved siden af feltets etiket, åbnes en popover med det fulde sæt tekstkontrolelementer:

• Skrifttypefamilie: en søgbar dropdown med systemskrifttyper, Google Fonts og eventuelle brugerdefinerede skrifttyper, der er registreret på webstedet.
• Skriftstørrelse: en skyder og input med px-, em-, rem- og vw-enheder, der reagerer pr. enhed.
• Skrifttype Vægt: 100 til 900 plus Normal og Fed.
• Transform, stil og dekoration: store og små bogstaver, kursiv og skrå, understregning og gennemstregning.
• Linjehøjde, bogstavafstand og ordafstand: hver med sit eget responsive input.

Globusikonet er der også, så widgetten kan følge webstedets Globale skrifttyper forudindstillinger i stedet for en engangsstil. Dette følger samme mønster som de andre Widget Builder-felter: slip feltet, navngiv det, forbind det. Den ene forskel er, hvordan det forbinder, gennem en vælger i stedet for en kortkode. Hvis du er ny til at bygge widgets, skal du starte med Widget Builder oversigt first.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
• En brugerdefineret widget åben i Widget Builder editor. Vores eksempel er en restaurant helt widget med en <h1 class="bfh-title"> overskrift og en <p class="bfh-lede"> introafsnit i sin HTML.

Sådan tilføjes et Typografi felt #

Rul feltpanelet til venstre i Widget Builder-editoren, indtil du finder Typografi felt, opført med de andre typografigruppefelter.

Træk feltet Typografi ind i en sektion under Content, Style, eller Advanced fane. Stil er det naturlige hjem for det, selvom det virker overalt. Når det lander, åbnes feltets muligheder til venstre.

Typografifeltindstillinger forklaret #

Vælg feltet Typografi for at åbne dets indstillinger.

• Etiket: teksten vist ved siden af kontrolelementet i Elementor, “Typografi” som standard. Med flere typografifelter i en widget skal du bruge navne som “Titeltypografi” og “Knaptypografi”.
• Navn: den entydige identifikator for feltet. Den skal kun indeholde bogstaver, tal og understregninger, for eksempel title_typography.
• Beskrivelse: valgfri hjælpetekst vist under kontrolelementet.
• Vælger: den CSS-vælger typografistilarterne gælder for. Dette er den ene indstilling, der får feltet til at fungere, dækket i næste afsnit.
• Standardværdi: link eventuelt feltet til en af Elementors Global Fonts-forudindstillinger — Primary, Secondary, Text, or Accent. Widgetten starter derefter med den forudindstilling, der er anvendt, og følger den, hvis webstedets globale skrifttyper ændres.
• Vis etiket og Separator: standardvisningen skifter plus betingelser længere nede for kun at vise feltet, når et andet kontrolelement har en bestemt værdi.

Peg feltet mod din vælger #

Her er den del, der snubler folk op, hvis de er vant til de andre felter: typografifeltet har ingen {{shortcode}} til din CSS. En typografiværdi er et helt bundt af egenskaber, ikke en enkelt værdi, så den kan ikke udskrive i én CSS-deklaration. I stedet udfylder du den Selector option og Elementor genererer stilarterne for dig.

For heltens introafsnit er vælgeren:

{{WRAPPER}} .bfh-lede

• {{WRAPPER}} står for widgetens egen beholder, så styles rammer kun nogensinde denne widget og lækker aldrig til resten af siden. Start altid vælgeren med den.
• .bfh-lede er det element inde i din widget HTML, som kontrollen skal style.
• For at drive flere elementer med én kontrol, skal du adskille vælgere med kommaer og give hver sin egen {{WRAPPER}}: {{WRAPPER}} .bfh-title, {{WRAPPER}} .bfh-lede.

Hvis du lader Vælgeren være tom, falder feltet tilbage til hele widgetens beholder, som styler hvert stykke tekst i widgetten på én gang. Det er normalt mere, end du vil. Indstil vælgeren, og klik derefter på Gem indstillinger.

Dit stylesheet på fanen CSS bliver ved med at fungere som widgetens startlook. Uanset hvad font-family eller font-size du skrev, at der forbliver på plads, indtil en bruger vælger noget i panelet; kontrollens værdier tilsidesætter det derefter.

Brug Typografi kontrol i Elementor #

Føj din brugerdefinerede widget til en side i Elementor, eller genindlæs editoren, hvis siden allerede var åben. Vælg widgetten, og kontrolelementet Typografi vises i panelet med den etiket, du indstiller, et globusikon til Globale skrifttyper og et blyantikon til brugerdefinerede værdier.

Vælg en skrifttypefamilie og størrelse #

Klik på blyantsikonet for at åbne typografipopoveren. Den Family dropdown søger systemskrifttyper og hele Google Fonts bibliotek, som du skriver. Under det, Størrelse tager en værdi i px, em, rem eller vw, og enhedsikonet lader dig indstille en anden størrelse pr. brudpunkt — en 96px desktopoverskrift kan falde til 48px på telefoner fra samme kontrol.

Indstil vægt, afstand og resten #

Den samme popover holder Vægt, Transform, Style, Dekoration, Linje Højde, Bogstavafstand, og Ordafstand. Hver ændring lander live i forhåndsvisningen, så du kan se overskriften stramme op, mens du trækker bogstavafstanden ned. Hvis intet synes at ændre sig, skal du kontrollere, at din vælger faktisk matcher et element i widget HTML; en tastefejl i klassenavnet fejler lydløst.

Eller følg webstedets Global Fonts #

Klik på globusikonet i stedet og vælg Primær, Sekundær, Tekst eller Accent. Widgettens tekst følger nu den globale forudindstilling, og når et redesign bytter webstedets skrifttyper, følger denne widget, uden at nogen rører ved den. Hvis du angiver en Standardværdi på feltet, er dette link allerede aktivt, når widgetten først slippes på en side.

I vores eksempel skifter overskriften til en scriptflade ved 98px, valgt direkte fra Google Fonts-listen, og forhåndsvisningen gentegner det øjeblik, skrifttypen indlæses.

Almindelige brugstilfælde #

• Overskrifter i helte- og bannerwidgets hvor hvert websted ønsker sin egen visningsskrifttype.
• Knapper det skal matche webstedets eksisterende knaptypografi.
• Korttitler og uddrag med separate felter for hver, så titler og brødtekst skaleres uafhængigt.
• Vidnesbyrd og citat widgets hvor citatet tager en kursiv serif, og tilskrivningen forbliver i brødteksten.
• Klientvendte widgets hvor redaktører bør restyle tekst frit uden nogensinde at åbne CSS.

Tips til at arbejde med Typografi feltet #

• Valgmuligheden Selector er hele forbindelsen. Der er ingen typografi-kortkode at indsætte i din CSS — indstil vælgeren og lad Elementor skrive typografierne.
• Start altid vælgeren med {{WRAPPER}}. Uden det stilarterne gælder for hver kamp på siden, ikke kun din widget. I en komma-separeret liste, hver del har brug for sin egen {{WRAPPER}}.
• Hold dine basistypografier i fanen CSS. De er, hvordan widgetten ser ud på en frisk dråbe; kontrollen tilsidesætter kun, hvad brugeren faktisk ændrer.
• Et felt pr. tekstrolle. Et titelfelt, et kropsfelt og et knapfelt giver redaktører ren kontrol. Et felt, der peger på hele widgetten, flader alt ud til en enkelt stil.
• Brug Global Fonts-standardindstillinger for klientwebsteder. Hvis du knytter feltet til Primær eller Sekundær, holdes brugerdefinerede widgets i takt med webstedets designsystem fra dag ét.

Ofte stillede spørgsmål #

Indpakning #

Feltet Widget Builder Typography udleverer redaktører det panel, de allerede kender fra Elementors egne widgets, med Google Fonts, responsive størrelser og globale forudindstillinger, på ethvert element i din brugerdefinerede widget. Navngiv feltet, indstil vælgeren til {{WRAPPER}} plus dit elements klasse, og hver skrifttypebeslutning bevæger sig ud af dit stylesheet og ind i panelet. Par det med Grænsefelt og the Tekstfelt sådan opbygger du et widgetpanel, der dækker indhold og stil på ét sted. Udforsk resten af Master Addons widgets og udvidelser, og se den prissætning side for hvad hver plan indeholder.