Standard Elementor billedwidget viser et billede og linker det et sted. Den gratis Avanceret billedwidget i Master Addons til Elementor gør mere: det skifter til et andet billede på hover, taber et hjørnebånd på toppen, åbner i en lysboks og tilføjer en 3D-hældning eller farvet skygge, alt sammen uden at røre CSS.
Du indstiller hovedbilledet, et valgfrit svævebillede, et bånd og en håndfuld effekter fra Elementor-panelet. Det gør det til en god pasform til produktoptagelser, porteføljeminiaturebilleder eller ethvert billede, der har brug for en etiket eller en smule bevægelse. Denne vejledning går gennem hver fane og indstilling.
Foretrækker du at se først? Denne korte tutorial går gennem Advanced Image widget ende til anden:
Hvad Advanced Image-widgetten gør #
I sin kerne viser det ét billede, men det lag ekstramateriale på toppen. Et svævebillede skifter ind, når markøren er over det, et bånd kalder en etiket som “NY,” og fanen Indstillinger tilføjer en lysboks, en vippeeffekt og en farvet skygge. Alt er konfigureret fra panelet, så det samme billede kan meget mere end et almindeligt.
Widgetten har fire faner: Indhold til billederne og båndet, Indstillinger for adfærd som lightbox og tilt, Stil til størrelse og farver og Avanceret til de sædvanlige Elementor-afstand og synlighedsmuligheder.
Før du starter #
- WordPress med Elementor installeret og aktiv.
- Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
- Et billede, der skal vises, og et andet, hvis du vil have svævebyttet.
Sådan tilføjes Advanced Image-widget #
I Elementor-editoren skal du åbne Elementer panel og søg efter Avanceret billede, eller rul til afsnittet Mastertilføjelser. Træk det over på din side. Det starter med en pladsholder, så det første skridt er at vælge et billede.
Indstil billedet #
I Content fanen, den Image sektion holder det grundlæggende. Klik på billedboksen for at vælge en fra Mediebiblioteket, indstil Billedopløsning WordPress skal tjene og tilføje en Billedlink hvis billedet skulle linke et sted.
Tilføj et svævebillede #
The Hover Image sektion er hvor widgeten tjener sit navn. Tænd Vis Hover Image og vælg et andet billede. På live-siden viser widgetten det første billede og crossfades til det andet, når nogen svæver, hvilket er praktisk til produktfronter og bagsider eller før-og-efter-optagelser.
Tilføj et bånd #
The Ribbon sektion tilføjer et hjørnebanner over billedet. Tænd Display Ribbon, indstille teksten, og vælge, hvordan det ser ud.
- Tekst: mærket, som NY eller SALG.
- Båndstil: Enkel, hjørne eller kors.
- Båndposition: placer den i ethvert hjørne, såsom øverst til højre eller nederst til venstre.
- Båndtykkelse og bredde: størrelse båndet, så det passer til teksten.
Indstillinger: lightbox, tilt, og skygge #
The Indstillinger tab er, hvor adfærden bor. Det er de ekstramateriale, der adskiller widgeten fra et almindeligt billede.
- Åbn i lightbox: klik på billedet for at åbne det i fuld størrelse i en popup. Hvis du tænder det, tilføjes en ikonisk knapindstilling (som et plusikon) over billedet.
- Justering: venstre, center eller højre inden for dens blok.
- Forindlæs billede: viser en pladsholder, mens billedet indlæses, f.eks. en sløret forhåndsvisning, en statusboksanimation eller en indlæsningsspinner.
- Tilt Effekt: tilføjer en 3D-hældning, der følger markøren for en smule bevægelse.
- Farvelagt skygge: dropper en skygge, der er tonet fra billedets egne farver. Bemærk, at den ikke er tilgængelig, mens svævebilledet er aktivt.
Style billedet og båndet #
The Style fane håndterer dimensionering og farver. Den Image afsnit sætter selve billedets udseende.
- Max bredde og Max højde: cap billedstørrelsen.
- Grænseradius: rundt om hjørnerne.
- Normal og Hover stater: indstil Box Shadow, Border og baggrund separat til hvile og svæve.
The Ribbon style-sektionen styrer bannerets udseende: baggrundsfarve, tekstfarve, typografi, skygger, positionsforskydninger og grænseradius.
Resultatet på siden #
Udgiv eller forhåndsvisning, og billedet gengives med dit bånd på plads, og effekterne live: hold markøren for at bytte billeder, hold markøren for hældningen, eller klik for at åbne lysboksen, afhængigt af hvad du tændte.
Almindelige brugstilfælde #
- Produkt skud med et svæveskift fra front til bagside eller alternativ vinkel.
- Porteføljeminiaturebilleder der åbner fuld størrelse i lyskassen.
- Promo billeder med et NYT eller UDSALG bånd i hjørnet.
- Feature grafik med en subtil hældning for bevægelse.
- Heltebilleder brug af den farvede skygge til dybde.
Tips til at arbejde med Advanced Image-widget #
- Brug matchende dimensioner til svævebyttet. Billeder i samme størrelse forhindrer crossfade i at hoppe.
- Vælg den rigtige billedopløsning. Servering af en fil i fuld størrelse i en lille slot bremser siden; en mellemstor eller stor størrelse er normalt nok.
- Hold båndtekst kort. Et ord passer rent til hjørnebåndet.
- Spring over farvet skygge, når du bruger hover swap. De to løber ikke sammen, så vælg en pr. billede.
- Gå let på tilt. En lille bevægelse trækker øjet; for meget føles gimmicky.
Ofte stillede spørgsmål #
Hvad er Advanced Image-widget i Master Addons?
Det er en Elementor-billedwidget med ekstramateriale indbygget: et hover-billedbytte, et hjørnebånd, en lightbox, en 3D-hældningseffekt og en farvet skygge. Du indstiller det hele fra Elementor-panelet, så et enkelt billede kan gøre langt mere, end standardbilledwidgeten tillader.
Hvordan laver jeg billedændringen på hover?
Åbn fanen Indhold, udvid sektionen Svæve billede, og slå Display Svæve billede til. Vælg derefter et andet billede. På live-siden viser widgetten det første billede og krydsfader til det andet, når en besøgende svæver over det.
Kan jeg tilføje et bånd eller badge til billedet?
Ja. Åbn båndet i fanen Indhold, og slå Display Ribbon til. Indstil teksten, vælg en Simple, Corner eller Cross stil, og vælg hjørnet. Fanen Style lader dig derefter indstille dens farve, typografi og position.
Hvad er tilt-effekten?
Vippeeffekten, der findes i fanen Indstillinger, tilføjer en 3D-hældning, der følger markøren, når den bevæger sig hen over billedet. Det giver et fladt billede en følelse af dybde og bevægelse. Brug det sparsomt, så det forbliver subtilt i stedet for at distrahere.
Understøtter Advanced Image-widgetten en lightbox?
Ja. Tænd Åbn i lightbox i fanen Indstillinger, og besøgende kan klikke på billedet for at se det i fuld størrelse i en popup. Du kan også tilføje en ikonisk knap, såsom et plusikon, der vises over billedet for at signalere, at det er klikbart.
Indpakning #
Widgetten Avanceret billede tager et enkelt billede og tilføjer de berøringer, der normalt tager brugerdefineret kode: et hover-swap, et bånd, en lysboks, en tilt og en farvet skygge. Indstil billederne, tænd for de ønskede effekter, og stil resultatet fra panelet. For flere billedværktøjer, se Image Hover Effects og Billedkarrusel widgets, gennemse hele Master Addons widgets og udvidelser, og se den Avanceret billede widget side til demoer.
