Gratis Elementor Image Widget med Hover Swap, bånd og tilt
Advanced Image er en gratis Master Addons widget, der tilføjer ekstramateriale til et enkelt billede. Skift til et andet billede på hover, placer et Simple, Corner eller Cross bånd i ethvert hjørne, åbn billedet i en lightbox med en valgfri plusknap, og tilføj en tilt effekt, der følger markøren eller en farvet skygge. Mens billedet indlæses kan du vise en sløret pladsholder eller en spinner. Style normal og hover tilstande med kant, baggrund og boks skygge.
Sådan tilføjes en Hover Image Swap i Elementor
Du skal bruge Elementor og det gratis Master Addons plugin fra WordPress.org.
- Kontrollér, at Avanceret billede er slået til under Master Addons, Widgets.
- I Elementor-editoren skal du søge efter Avanceret billede og træk det ind på siden.
- Vælg hovedbilledet og et billedlink, hvis det er nødvendigt.
- Tænd Vis Hover Image og vælg det andet billede, ideelt set i samme størrelse.
- Tilføj et bånd, lysboks, tilt eller farvelagt skygge fra sektionerne Indhold og indstillinger. Farvelagt skygge fungerer ikke sammen med svævebilledet.
- Style tilstandene Normal og Hover på fanen Style.
Hver indstilling er dækket af Avancerede Image widget indstillinger.
Hover Image & Smarteffekter
Opret øjeblikkelige “før-og-efter” sammenligninger eller simpel hover afslører. Upload dit hovedbillede, og aktiver derefter Hover Image for at uploade et andet billede. Når besøgende svæver, skifter billedet problemfrit. Tilføj et lag af raffinement med Tilt Effect, som får billedet til at vippe lidt, når musen bevæger sig hen over det, og tilføj en subtil 3D-følelse. For ekstra dybde skal du aktivere Colorized Shadow for at placere en blød, farvet skygge bag billedet, så det springer ud af siden.
- Interaktive sammenligninger: Perfekt til at vise et produkt før og efter, eller en dag/nat visning af en ejendom.
- Engagerende tilt-effekt: Tilføjer et moderne, interaktivt lag, der reagerer på markørens bevægelse.
- Visuel dybde: Brug den farvede skygge til at skabe adskillelse og fokus uden ekstra designelementer.
Brugerdefinerbare bånd og etiketter
Få dine billeder til at skille sig ud med professionelle bånd. Aktivér funktionen Bånd for at tilføje en etiket som “NYT DESIGN,” “BESTSELLER,”eller “UDSOLGT.” Vælg mellem forskellige båndestile (som Hjørne eller Kryds eller Enkelt), og indstil positionen (øverst/nederst, venstre/højre). Tilpas båndets farver, typografi og tykkelse fuldt ud for at sikre, at det supplerer dit billede og dit brand perfekt.
- Fremhæv nøgleoplysninger: Kommuniker øjeblikkeligt status, kampagne eller kategori direkte på billedet.
- Fleksibel positionering: Placer båndet i ethvert hjørne for at undgå at dække vigtige dele af billedet.
- Komplet stylekontrol: Match båndets baggrund, tekstfarve og skrifttype til dit websteds designsprog.
Tilføj Link & Lightbox Integration
Tilføj en Billedlink at sende besøgende til et produkt eller en side, eller slå til Åben i lightbox så et klik viser billedet i fuld størrelse. Den Ikonisk knap option tilføjer et plusikon over billedet. Tænd Forindlæs billede sådan viser du en pladsholder, mens billedet indlæses: en sløret forhåndsvisning, en statusboks eller en blå, lys eller mørk spinner.
- Link til en produktside, eller åbn en lysboks i fuld størrelse.
- Venstre, midterste eller højre justering i sin kolonne.
- En indlæsningspladsholder til store billeder.
Detaljeret styling & størrelseskontrol
Få komplet designkontrol over dit billedes præsentation. Indstil nøjagtig Max Bredde og Max Højde. Anvend Border Radius individuelt på hvert hjørne for unikke former. Style Normal og Hover staterne separat med kanter, baggrunde og boks skygger. Dette sikrer dit billede ser perfekt ud i hver sammenhæng og under hver interaktion.
- Responsive Sizing: Styr billedets dimensioner præcist uden at stole på uforudsigelig automatisk størrelse.
- Brugerdefinerede figurer: Opret cirkulære billeder, afrundede rektangler eller unikke asymmetriske kanter.
- Tilstandsspecifik styling: Tilføj kun en kant eller skygge på svæve for visuelt at angive, at billedet er interaktivt.
Ofte stillede spørgsmål til avanceret billede
Er Hover Image-effekten kompatibel med mobile berøringsskærme?
Ja, men det virker lidt anderledes. På touch-enheder, vil det første tryk ofte udløse hover effekt (bytte billedet), hvis du ikke har aktiveret lightbox. Men hvis du har aktiveret lightbox så lightbox vil få mere prioritet og på tryk det første billede vil åbne i lightbox.
Er widgetten Avanceret billede gratis?
Ja. Advanced Image er en del af det gratis Master Addons plugin med svævebilledet, båndene, lightbox, tilt, farvelagt skygge og alle styling muligheder.
Hvordan er dette forskelligt fra Elementors grundlæggende Image-widget?
Elementors grundlæggende widget lader dig tilføje et billede, et link, en billedtekst og noget enkel styling. Avanceret billede-elementet tilføjer en række professionelle funktioner: Hover Image swap, Bånd/etiketter, Tilt Effect, Colorized Shadow, separat Normal/Hover state styling og mere granulære lightbox-kontroller. Det er designet til at skabe mere engagerende, interaktive billedpræsentationer.
Kan jeg bruge båndfunktionen uden et svævebillede eller andre effekter?
Absolut! Hver funktion er uafhængig. Du kan kun have et billede med et bånd, eller bare et billede med en tilt effekt. Du kan blande og matche funktioner, som du vil. Aktiver kun dem, du har brug for til dit specifikke designmål.
Hvad gør indstillingen Preload Image?
Forhåndsindlæsningsbillede viser en pladsholder, mens billedet indlæses, så besøgende ikke ser et tomt rum. Vælg Tomt, et sløret pladsholderbillede, en igangværende boksanimation eller en blå, lys eller mørk indlæsningsspinner. Det er mest nyttigt til store billeder.
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
