Elementor tekst over billede: 25+ Hover-effekter (gratis widget-tutorial)

Tilføjelse af tekst over et billede i Elementor lyder som et to-minutters job. Derefter prøver du det med standard widgets og ender med at bryde med negative marginer, absolut positionering og en Heading widget stablet på et baggrundsbillede, der går i stykker på mobilen. Der er en hurtigere måde. Den gratis Image Hover Effects widget fra Master Addons lægger en overskrift og beskrivelse oven på ethvert billede og afslører dem med en af 25+ hover animationer. Du rører aldrig CSS.

I denne tutorial vil du opsætte en Elementor tekst over billede sektion fra bunden: uploade billedet, vælge en hover effekt fra en dropdown, style overlay, og beslutte, hvad der sker, når nogen klikker. Hvert skærmbillede nedenfor kommer direkte fra Elementor editor, så du kan følge med klik ved klik.

Hvad denne vejledning dækker:

• Hvorfor tekst over billede har brug for en widget
• Image Hover Effects-widgetten på et øjeblik
• Sådan tilføjer du tekst over et billede (trin for trin)
• Styling af overlejringen: farve, opacitet, form
• Typografi for titel og beskrivelse
• Klik på handlinger: åbne en popup eller sammenkæde billedet
• Designtips, der holder teksten læsbar
• Andre Master Addons-widgets til billedeffekter
• Gratis vs Pro: hvad du rent faktisk har brug for
• Ofte stillede spørgsmål

Hvorfor tekst over billede har brug for en widget (ikke en CSS Hack)

Elementors egen dokumentation tyder på to løsninger til tekst over billede: indstil billedet som en sektionsbaggrund og slip en Heading-widget indeni, eller skub en overskrift opad med negative margener. Begge arbejder for en statisk billedtekst. Hverken giver dig en hover-afsløring, en animeret overlejring eller en klikhandling, og negativ-margin-tricket har en tendens til at falde fra hinanden ved tablet og mobile breakpoints.

Alt det løser en dedikeret widget på ét sted:

• Svæveafsløring indbygget. Billedet forbliver rent, indtil den besøgende svæver, derefter animerer titlen og beskrivelsen.
• Ét indstillingspanel. Billede, tekst, overlejringsfarve og typografi lever i en enkelt widget i stedet for tre stablede.
• Responsiv som standard. Overlejringen skalerer med billedet, så intet skifter malplaceret på mindre skærme.
• Klik handlinger. Hele billedet kan åbne et link eller en popup. Porteføljenet og servicekort afhænger af dette.

Det er derfor, tekst-over-billede-layouts dukker op overalt: porteføljefliser, der afslører projektnavnet, holdkort, der viser en bio på hover, bannere i blogkategori og gallerigitter, hvor billedtekster ellers ville rode i designet.

Billede Hover Effects Widget på et blik

Image Hover Effects afsendes i den gratis version af Master Addons, en bibliotek med 80+ widgets og udvidelser kører på 30.000 + aktive WordPress-websteder. Her er hvad du får i denne ene widget:

• 25+ navngivne svæveeffekter (Sadie, Chico, Marley, Ruby og venner), hver en anden afsløringsanimation
• Et overskriftsfelt med et valgbart HTML-tag (H1 til H6), så din overlejringstekst kan forblive SEO-korrekt
• Et beskrivelsesfelt for en kort støttelinje
• Overlejring af baggrundsfarve, billedopacitet og kontrolelementer til svæveopacitet
• Kanteradius, polstring, kasseskygge og separat typografi til titel og beskrivelse
• Tre klik adfærd: intet, åbne en popup, eller følg et link

Det hele fungerer uden en Pro-licens. Hvis du vil have den fulde indstillingsreference, skal Image Hover Effects dokumentation dækker enhver kontrol.

Sådan tilføjes tekst over et billede i Elementor (trin for trin)

Trin 1: Installer Master Addons

I dit WordPress dashboard skal du gå til Plugins > Tilføj ny og søg efter “Master Addons”. Installer og aktiver gratis plugin fra WordPress.org. Hvis noget snubler dig op, den installationsvejledning går igennem det. Du har brug for Elementor aktiv også, men den gratis version er nok.

Trin 2: Træk widgetten Billedhovereffekter ind på din side

Åbn enhver side med Elementor og søg efter “Billede Hover Effects” i widgetpanelet. Du vil få øje på det blandt de andre MA-badged widgets som Advanced Image, Image Hotspot, og Image Comparison. Træk det ind i din sektion.

Trin 3: Upload dit billede

Fanen Indhold åbnes med Effekter & Billede sektion. Klik Upload billede og vælg noget fra dit mediebibliotek. To indstillinger sidder lige under det:

• Billedstørrelse styrer de gengivne dimensioner. Standard fungerer for de fleste layouts.
• Billedopløsning vælger, hvilken WordPress-genereret størrelse indlæses. “Fuld” giver det skarpeste resultat. På en side med otte eller ti af disse fliser, drop til “Stor” i stedet; ingen ser forskellen på gitterstørrelse og siden indlæses mærkbart hurtigere.

Trin 4: Vælg en Hover Effect

Her er den sjove del. Åbn Hover Effekt dropdown og du får den fulde liste over navngivne effekter: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey, Oscar, Marley, Ruby, Milo, Dexter, Sarah, Zoe, Chico, Julia, Goliath, Hera, Winston, Selena, Terry, Phoebe, Apollo, Kira, Steve, Moses, Jazz, Ming, Lexi, og Duke.

Hvert navn er en anden kombination af overlay animation og tekst afsløring. Sadie glider en gradient op fra bunden. Marley dropper titlen ind med en understregning. Chico zoomer billedet lidt ud og indrammer teksten med en tynd kant. Editor forhåndsvisningen opdateres live, så klik gennem et par stykker og hold markøren over billedet for at teste. Her er Chico mid-hover:

En hurtig gruppering for at spare dig for at klikke gennem dem alle:

• Subtile falmer: Lily, Sadie, Layla, Zoe. Gode standardvalg for porteføljer.
• Retningsbestemte dias: Skat, Oscar, Romeo, Sarah. Tekst skubber ind fra en kant.
• Zoom og skaler: Chico, Bubba, Milo, Julia. Billedet bevæger sig, hvilket tegner øjet.
• Legesyg og fed: Marley, Ruby, Dexter, Goliath, Apollo. Stærkere bevægelse, bedst til kreative websteder.

Trin 5: Tilføj din overskrift

Åbn Overskrift sektion. Skriv din titel og vælg en HTML Tag. Dette betyder mere end det ser ud: Hvis billedet sidder i et gitter af tjenester, H3 normalt passer din side hierarki bedre end standard H2. Søgemaskiner læse dette tag som enhver anden overskrift på siden.

Trin 6: Skriv beskrivelsen

The Description sektion tilføjer den mindre linje, der vises under titlen på hover. Hold det til en eller to korte sætninger. Lange afsnit bliver afskåret på mindre billeder og besejrer punktet på en ren overlejring.

Styling af overlægningen: Farve, opacitet og form

Skift til Style fane. Den Image panel styrer, hvordan overlægningen ser ud:

• Baggrundsfarve toner den overlejring, der vises på hover. Vælg en farve fra din brandpalet; en HEXA-værdi som #DD5555 med reduceret alfa holder billedet synligt nedenunder.
• Billedopacitet indstiller hviletilstanden, og Hover Opacity indstiller, hvor meget billedet dæmpes, når overlægningen vises. Et mellemrum mellem de to (f.eks. 0,5 hvilende, 0,7 på svævende) får afsløringen til at føles bevidst.
• Billedfilter og Hover Billedfilter tilføj CSS-filtre som gråtoner eller slør for før/efter stemninger.

Under det, Grænseradius omformer hele blokken. Matchende værdier giver dig bløde afrundede hjørner; asymmetriske værdier (100 øverst til venstre, 0 øverst til højre, 100 nederst til højre, 0 nederst til venstre) skaber den bladform, du ser på en masse moderne agenturwebsteder.

Typografi for titel og beskrivelse

Stadig i fanen Stil, den Title og Description paneler får hver deres farve, typografi og afstandskontroller. Skrifttypefamilie, størrelse, vægt, transformation, linjehøjde og bogstavafstand er alle her, plus en tekstskyggeindstilling til beskrivelsen. Hvis dit billede er lyst, skal du skifte titelfarven til en mørk værdi, så teksten forbliver læsbar i begge tilstande.

Én læsbarhedsregel, der er værd at beholde: sigt efter klar kontrast mellem tekst og hvad der nu sidder bag. Hvis billedet er optaget, skal du læne dig op ad overlejringsfarven og opaciteten fra det forrige trin i stedet for at bekæmpe det med skrifttypens vægt alene.

Klik på Handlinger: Åbn en pop op-vindue, eller sammenkæd hele billedet

Tilbage i fanen Indhold, den Links eller Popup? kontrol bestemmer, hvad et klik gør. Tre muligheder sidder bag den lille ikon toggle: ingen, popup, og eksternt link.

Popup åbner et overlejringsvindue med det indhold, du vælger. Vælg en indholdstype, og skriv enten indhold direkte i WYSIWYG-editoren eller indlæs en gemt Elementor-skabelon. Porteføljenet bruger dette konstant: hver flise åbner et casestudie uden at forlade siden.

Link forvandler hele billedet til et klikbart kort. Indsæt URL'en i feltet Link URL, og hele svæveområdet peger der, hvilket slår et lille tekstlink til trykmål på mobilen.

Hvis du vil have flere popup-mønstre ud over denne widget (afslut hensigt, rulleudløsere, tidsindstillede popups), skal du se, hvordan du tilføj en popup i Elementor gratis.

Det færdige resultat

Hit preview og hold markøren over dit billede. Overlejringen toner ind, titlen og beskrivelsen afslører med den effekt, du valgte, og markøren signalerer klikhandlingen:

Samlet byggetid er omkring fem minutter. Og da hvert valg lever i widgetindstillingerne, kan du bytte effekten eller omfarve overlejringen næste måned uden at genopbygge noget.

Design Tips, der holder Tekst Over Billede Læsbar

• En effekt pr. gitter. Hvis du bygger en 6-fliser portefølje, give hver flise den samme hover effekt. Blandede effekter læses som utilsigtet.
• Kontrast først. Hvid tekst har brug for en mørk overlejring; mørk tekst har brug for et lyst billede eller en lys overlejring.
• Korte beskrivelser. Ti ord eller færre. Overlejringen er en teaser, ikke et afsnit.
• Test ved berøring. På telefoner afslører det første tryk overlejringen, og det andet tryk udløser klikhandlingen, så sørg for, at den afslørede tilstand ser komplet ud på en lille skærm.
• Match din grænseradius til resten af siden. En 100px bladform ved siden af kort med skarpe hjørner ser ud.

For bredere bevægelsesdesignvejledning, vores guide til Elementor animationseffekter dækker, når svæve-, rulle- og indgangsanimationer hver tjener deres plads, og Master Addons animationsfunktioner side viser, hvad plugin'et ellers kan animere.

Andre Master Addons Widgets til billedeffekter

Image Hover Effects er det rigtige værktøj til tekstafsløringer, men et par søskende-widgets dækker de tilstødende use cases:

• Avanceret billede føjer 3D-hældning, bånd og badges til et enkelt billede uden overlejringstekst.
• The Flipbox widget vender et kort til en fuldt designet bagside, bedre når du har brug for knapper eller ikoner i den afslørede tilstand.
• Billede Hotspot fastgør interaktive værktøjstipmarkører til bestemte punkter på ét billede, ideelt til produktudkald.
• The Billedkarrusel håndterer skyder med flere billeder, når en svæveflise ikke er nok.
• Billedsammenligning sætter en trækbar før/efter skyder på to versioner af et skud.

Gratis vs Pro: Hvad har du egentlig brug for?

For tekst over billede, intet ud over det gratis plugin. Alle 25+ hover effekter, overskriften og beskrivelse felter, overlay styling, popups, og links skib gratis. Master Addons Pro tilføjer det bredere premium widget sæt, skabelon kits, og ekstramateriale som Widget Builder, så det er værd at se, når du er ved at opbygge hele websteder snarere end en sektion. Der er en 14-dages pengene-tilbage garanti, hvis du prøver det og ændre dit sind.

Foretrækker du at se? Her er en hurtig gennemgang i Elementor:

Ofte stillede spørgsmål

Indpakning Up

En Elementor tekst over billede sektion tager fem minutter med den rigtige widget: drop i Image Hover Effects, uploade dit billede, vælge en effekt ved navn, og style overlay til at matche dit brand. Positionering og lydhør adfærd er allerede håndteret for dig, og den gratis version dækker alt i denne vejledning.

Grib det gratis plugin, gennemse resten af widget og udvidelsesbibliotek, og hvis du sidder fast den widget dokumentation har hver indstilling kortlagt.

Relateret læsning: Elementor animationseffekter, elementor Flipbox-widgetten, og tilføjelse af popups i Elementor gratis.