Avanceret billede
Et billede på dit websted bør gøre mere end bare at sidde der. Avanceret billede-elementet overlader det grundlæggende billede med smarte, interaktive funktioner. Opret iøjnefaldende “før-og-efter” svæveeffekter, tilføj stilfulde “NY” eller “SALG” bånd, anvend dynamiske tilt-effekter på musens bevægelse, og tilføj endda farverige skygger. Med fuld kontrol over lightboxes, links og alle aspekter af styling kan du omdanne ethvert billede til et engagerende stykke indhold, der guider besøgende og øger interaktionen. Perfekt til produktudstillingsvinduer, porteføljer eller fremhævede bannere.
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
Hvert billede kan være en gateway. Link dit billede direkte til en URL, som en produktside eller din prisplan. Alternativt skal du aktivere en Lightbox for at lade seerne fokusere på billedet i en smuk popup i fuld skærm. Vælg mellem forskellige lightbox-ikoner (som en plusknap) og styre dens justering. For ydeevne skal du bruge indstillingen Preload Image for at sikre hurtig indlæsning, især for svæveeffekter.
- Direkte opkald til handling: Link billeder til vigtige sider, hvilket gør visuel interesse til direkte trafik.
- Forbedret gallerioplevelse: Lad brugerne se billeder i detaljer med en elegant lysboks.
- Optimeret ydeevne: Forindlæs svævebilleder for at forhindre en forsinkelse eller “flash” på den første interaktion.
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.
Vil brug af Tilt Effect og Colorized Shadow bremse min side?
Disse effekter bruger CSS, som generelt er let. Men at bruge dem på et meget stort antal billeder på en enkelt side (som i et tæt gitter og 100+ billeder) kunne bidrage til en tungere belastning på brugerens enhed. Brug dem selektivt på nøglebilleder for den bedste ydeevne og effekt.
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 er den bedste anvendelse af indstillingen 'Preload Image'?
Aktiver Forhåndsindlæs billede (indstillet til 'Til'), når du bruger funktionen Svæve billede. Dette tvinger browseren til at indlæse det andet billede, når siden indlæses, selvom det er skjult. Dette forhindrer en mærkbar forsinkelse eller et tomt blink, første gang en bruger svæver over billedet, hvilket sikrer en jævn brugeroplevelse.
Trending Elementor Widgets & Udvidelser
Byg sofistikerede websteder på kortere tid.
Glasmorfisme
Container ekstraudstyr
Mønstre
Post/Page Duplicator
