Avanceret billede

Standard Elementor-billedwidgetten viser et billede og sammenkæder det et sted. Den Avanceret billede widget 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 til et diagonalt hjørnebånd eller Cross for et flag-stil tag.
• 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: indlæser billedet tidligere for pletter over folden.
• 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 #

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 kontrollere de prissætning side for hvad hver plan indeholder.