Gratis Elementor Gradient Text Widget
Elementors Heading-widget tager kun en ensfarvet tekstfarve, så gradienttekst betyder normalt at skrive CSS med background-clip: text. Gradient Headline widget i det gratis Master Addons plugin gør det fra panelet. Skriv overskriften, vælg to farver, vælg en lineær eller radial gradient, og bogstaverne fyldes med den. Du får også en separat hover gradient, 13 blandingstilstande, en tekstskygge, et link og et valg af overskriftsmærke. Det passer til heltetitler, sektionsoverskrifter og salgsbannere.
Sådan tilføjes gradienttekst i Elementor
Du skal bruge Elementor og det gratis Master Addons plugin. Ingen brugerdefineret CSS og ingen Elementor Pro.
- Installer og aktiver Master Addons fra WordPress.org.
- Rediger din side med Elementor, søg i widgetpanelet efter Gradient Overskrift og træk den ind.
- Skriv din tekst ind Overskrift, og indstil derefter Titel HTML Tag og Justering.
- I Style, Gradient Style skal du vælge den første farve og den anden farve og justere deres placeringsskydere.
- Vælg Lineær og indstil Vinkel, eller Radial og indstil Position.
- Indstil typografien, prøv en blandingstilstand over din baggrund, og tilføj en Hover-gradient, hvis du vil.
Skærmbilleder af hvert trin er i gradienttekstguide.
To farve lineære eller radiale gradienter
I Stil, Gradient Style, sæt Tekstfarve til Gradient (eller Klassisk for en ensfarvet). Vælg den første Color og the Anden farve, og flytte hver Location skyderen til at bestemme, hvor den ene blander sig i den anden. Type skifter mellem Lineær, med en Vinkel (180 grader som standard kører top til bund), og Radial, med en Position som f.eks. Center Center. For en gradient, der bevæger sig bag en hel sektion i stedet for tekst, se Animeret Gradient BG udvidelse (Pro).
- Normal og Hover faner: indstil en anden gradient, der vises, når besøgende holder markøren over overskriften.
- Hver gradient bruger to farvestop. For tre eller flere farver skal du bruge brugerdefineret CSS.
- Standardindstillingerne løber fra lilla (# 9929ea) til rød (# FB083E), så skift dem til dine brandfarver først.
Elementoroverskrift med CSS vs Gradientoverskrift
Du kan lave gradienttekst med Elementors egen Heading-widget, hvis du er tryg ved CSS. Her er, hvad hver rute involverer.
| Feature | Elementoroverskrift + CSS | Master Addons Gradient Overskrift |
|---|---|---|
| Opsætning | Tilføj CSS med baggrund-klip: tekst i WordPress Yderligere CSS, Elementor Pro Custom CSS eller de gratis Master Addons Brugerdefineret CSS-udvidelse | Vælg farver i panelet |
| Gradienttyper | Alt hvad CSS tillader, inklusive tre eller flere farver | Lineær eller radial, to farvestop |
| Svævergradient | Ekstra CSS | Indbygget Hover-fane |
| Bland tilstande og skygge | Ekstra CSS | 13 blandingstilstande og en tekstskyggekontrol |
| Price | Gratis, hvis du selv skriver CSS | Gratis med Master Addons |
Skriv CSS, hvis du har brug for mere end to farver eller en animeret gradient. Brug Gradient Headline, når du vil indstille den visuelt på et minut. Relaterede gratis widgets: Dobbelt overskrift og Animerede overskrifter.
Typografi, blandingstilstande og tekstskygge
Hver fane har sin egen Typografi, så skrifttypen, størrelsen og vægten kan ændre sig på hover også. Blandingstilstand tilbyder 13 muligheder, fra Normal, Multiplicer og Skærm til Forskel og Lysstyrke, som blander forløbet med et billede eller en farve bag teksten. Tekstskygge tilføjer farve, sløring og forskydning for ekstra dybde eller læsbarhed over travle fotos.
- Gradienter er ren CSS, så der er intet billede at indlæse.
- Blandingstilstande reagerer på det, der sidder bag overskriften, så forhåndsvisning af dem på den rigtige baggrund.
- Hold nok kontrast mellem begge farver og baggrunden for læsbarhed.
Link, Overskrift Tag og Alignment
Tilføj en på fanen Indhold Overskrifts-url for at gøre hele overskriften til et link. Vælg den Titel HTML Tag (H1 til H6, div, span eller p) så overskriften passer til din sidestruktur, og sæt Justering til venstre, midt eller højre.
- Brug en H1 pr. side, normalt heltetitlen, og H2 til sektionstitler.
- En sammenkædet gradientoverskrift fungerer godt for et salgsbanner, der går til butikken.
- Overskriftsteksten understøtter inline-redigering i Elementor-eksemplet.
Ofte stillede spørgsmål til gradientoverskrift
Er Gradient Headline widget gratis?
Ja. Det er en del af det gratis Master Addons plugin og fungerer med gratis Elementor, så du behøver ikke Elementor Pro til gradienttekst.
Kan jeg bruge mere end to farver i forløbet?
Nej. Hver gradient har to farvestop, en første Farve og en Anden Farve. Flytning af Placeringsskyderne ændrer, hvor skarp eller blød blandingen er. For tre eller flere farver skal du tilføje din egen CSS til en almindelig overskrift.
Vil gradienttekst bremse min hjemmeside?
Nej. Gradienten er almindelig CSS på overskriftsteksten, så der er ingen billedfil at indlæse.
Kan gradienten ændre sig på hover?
Ja. Fanen Svæve i Gradient Style har sine egne farver, placeringer, type, vinkel eller position, typografi, blandingstilstand og tekstskygge, så overskriften kan skifte til en anden gradient, når besøgende holder markøren over den.
Trending Elementor Widgets & Udvidelser
Byg sofistikerede websteder på kortere tid.
Glasmorfisme
Container ekstraudstyr
Mønstre
![Master Addons Post/Page Duplicator udvidelse til Elementor: MA Duplicator række link i WordPress Pages liste oprettelse af en Landing Page - [Duplikeret # 128] udkast](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
