Elementor lader dig indstille en gradientbaggrund, men ikke en gradient på selve teksten. Standardoverskriftswidgetten tager kun en ensfarvet farve, så en flerfarvetitel betyder normalt at skrive din egen CSS med background-clip: text. Det er kløften den frie Gradient Overskrift widget i Master Addons til Elementor fylder.
Med denne widget vælger du to farver, vælger en lineær eller radial gradient, og teksten fyldes med den gradient, ingen kode. Du får også en valgfri tekstskygge og 13 blandingstilstande, der styrer, hvordan gradienten blandes med hvad der end sidder bag den. Denne vejledning dækker hver indstilling ved hjælp af widgetten, der sendes gratis med Master Addons.
Her er den slags gradienttekst, du vil bygge, en overskrift, der falmer fra en farve til en anden over et baggrundsbillede:
Før du starter #
- Elementor installeret og aktiv
- Master Addons til Elementor installeret og aktiv (installationsvejledning)
- En side eller skabelon, der er åben i Elementor-editoren
Trin 1: Tilføj Gradient Headline Widget #
I Elementor-editoren skal du søge i widgetpanelet efter Gradient Overskrift og træk det over på din side. Master Addons-widgets bærer “MA”-badget, så de er nemme at få øje på. Editoren åbner Rediger gradientoverskrift panel med tre faner: Indhold, stil og avanceret.
Trin 2: Indstil overskriftsindholdet #
På tilfreds fane, skriv din titel i Overskrift felt. Resten af felterne her er det grundlæggende:
- Overskrifts-url forvandler hele overskriften til et link.
- Justering indstiller den til venstre, i midten eller til højre.
- Titel HTML Tag vælger tagget: H1 til H6, eller div, span, eller p. Brug H1 til en sides hovedtitel og H2 til sektionstitler, så siden holder en ren struktur.
Trin 3: Vælg Gradientfarverne #
Skift til måde faneblad og åben Gradient stil. Behold Tekstfarve indstil til Gradient (Classic giver en almindelig enkelt farve). Gradienten løber mellem to farver:
- farve er den første farve, med en sted skyder (en procentdel), der indstiller, hvor den sidder langs teksten.
- Anden farve er slutfarven, med sin egen sted slider.
Indstil de to farver til din brandpalet, og skub derefter skyderne Placering til at bestemme, hvor meget af teksten hver farve dækker. Forhåndsvisningen opdateres, mens du trækker. Der er en separat normal og svæve fane også, så gradienten kan skifte, når nogen svæver overskriften.
Trin 4: Vælg Gradient Type, Lineær eller Radial #
de skrift dropdown indstiller gradientformen. Hver indstilling bytter den ekstra kontrol, der vises under den:
- radial spreder farverne ud fra et midtpunkt. Vælg en position (som Center Center) for at indstille, hvor det punkt sidder.
- Lineær kører farverne i en lige linje. Indstil Vinkel for at styre retningen: 180 peger gradienten lige ned, 90 sender den på tværs.
Radial er godt for en glød fra midten af teksten. Lineær er den, de fleste mennesker billede, når de tænker “gradient tekst,” en ren fade fra venstre mod højre eller top til bund.
Trin 5: Tilføj en tekstskygge (valgfrit) #
de Tekstskygge kontrol tilføjer dybde bag bogstaverne. Klik på blyanten for at indstille skyggefarven, sløringen og vandret og lodret forskydning. En blød skygge hjælper gradienttekst med at forblive læsbar, når den sidder over et optaget baggrundsbillede.
Trin 6: Prøv de 13 blandingstilstande #
de Blandingstilstand dropdown bestemmer, hvordan gradientteksten blandes med hvad der sidder bag det, som et baggrundsbillede eller farve. Der er 13 tilstande:
- Normal, Multiplicer, Skærm, Overlay
- Mørkere, lysne, farve Dodge, mætning
- Farve, Forskel, Udelukkelse, Farvetone, Lysstyrke
Normal holder gradienten som den er. Resten reagerer på baggrunden: Multiplicer mørkere, Skærm lysner, Forskel kan invertere farver for et slående udseende. Den hurtigste måde at vælge på er at bladre igennem dem og se forhåndsvisningen, da resultatet afhænger af farverne bag teksten.
Tune the Typografi for skrifttype og størrelse, mens du er her, klik derefter på Publicere (eller opdater) for at gemme siden.
Hvor Gradient Text Fungerer Godt #
- Heltens overskrifter, hvor en gradienttitel skiller sig ud mod et foto eller et mørkt afsnit.
- Afsnitstitler der har brug for lidt mere personlighed end flad tekst.
- Landingssider matchning af gradienten til et brands farveskema.
- Over baggrundsbilleder, hvor en blandingstilstand binder teksten ind i scenen.
Ofte stillede spørgsmål #
Kan du tilføje farveforløbsfarve til tekst i Elementor?
Ikke med standard-Widget'en Overskrift, som kun tager en ensfarvet farve. Master Addons Gradient Headline-widget'en tilføjer den: vælg to farver, vælg lineær eller radial, og teksten fyldes med gradienten, ingen brugerdefineret CSS nødvendig.
Hvordan laver jeg gradienttekst i Elementor uden CSS?
Tilføj widgetten Master Addons Gradient Headline, skriv din overskrift, og åbn derefter fanen Style, og indstil den første Color og Second Color. Vælg Lineær eller Radial under Type, og forløbet gælder for teksten automatisk.
Hvad er forskellen mellem lineær og radial gradienttekst?
En lineær gradient kører farverne i en lige linje, sat af en vinkel. En radial gradient spreder dem ud fra et centerpunkt, du vælger med Position control. Lineær passer venstre-til-højre falmer; radial passer til en glød fra midten.
Hvad gør blandingstilstandene?
Blandingstilstande styrer, hvordan forløbsteksten blandes med baggrunden bag. De 13 muligheder spænder fra Normal (ingen blanding) til Multiplicer, Skærm, Overlay, Forskel og meget mere. Effekten afhænger af farverne bag teksten, så forhåndsvisning af hver enkelt.
Har jeg brug for Elementor Pro til gradienttekst?
Nej. Gradient Headline-widgetten fungerer sammen med den gratis version af Elementor, så gradientfarverne, typerne, tekstskyggen og blandingstilstandene fungerer alle uden Elementor Pro.
Relateret læsning #
- Alle Master Addons Widgets og udvidelser
- Gradient Overskrift widget til Elementor
- Animeret Gradient BG udvidelse (Pro), for en bevægelig gradient bag en sektion
- Installation af Master Addons til Elementor
- master addons popup builder
