En Elementor-billedboks er en widget, der parrer et billede med en overskrift og en kort beskrivelse i én sammenkædet blok. Det er, hvordan de fleste WordPress-websteder bygger tjenester, gitter, funktionsrækker og teamsektioner. Elementor sender en gratis; de seksten designs nedenfor erstatter det med layouts og bevægelse, som standardwidgetten ikke kan producere.
Fordi alle har den samme widget, er servicesektionen på en blikkenslagers websted i Leeds lagt identisk ud med en tegnestues i Lissabon. Samme tre kolonner, samme centrerede billede, samme 16px hul.
Så vi byggede seksten erstatninger. Hver enkelt er en fungerende Elementor widget, hver har en live demo, du kan åbne lige nu, og et downloadlink på denne side. Du behøver ikke at udlevere en e-mailadresse eller lave en konto for at få en.
På denne side
Indholdsfortegnelse
De 16 designs på et øjeblik
| # | Design | Hvad det gør | Bedst til |
|---|---|---|---|
| 01 | Lumen Image Boxes | En lyskilde følger din markør hen over kortet | Mørke websteder, tekniske tjenester |
| 02 | Verge Image Boxes | Offsetplader, der åbnes, når du ruller forbi | Redaktionel, guider, udendørs mærker |
| 03 | Aperture Image Boxes | Hvert billede åbnes fra en klippet blænde | Fotografering, print, seks-element gitter |
| 04 | Bascule Image Boxes | Kort tænder et hængsel og viser en bagside | Før og efter afslører spec |
| 05 | Cascade Image Boxes | Fire kort afregnes i rækkefølge, ikke alle på én gang | Procestrin, studio services |
| 06 | Filigran billedbokse | Små miniaturebilleder, fine regler, tæt to-kolonne liste | Lange servicemenuer, prislister |
| 07 | Frise Strip | En vandret strimmel, du trækker eller ruller igennem | Lange sekvenser, produktionslinjer |
| 08 | Gyre Image Boxes | Kort vipper mod markøren med en glans | Produkter, forarbejdede varer |
| 09 | Impulsbilledbokse | Kort trækker mod markøren som en magnet | Bookinger, kurser, leje |
| 10 | Kintsugi billedæsker | Billeder ankommer som skår og samles igen | Håndværk, glas, keramik, restaurering |
| 11 | Palisade billedbokse | Høje paneler bygget af lodrette lameller | Værksteder, snedkerarbejde, smalle søjler |
| 12 | Refract Image Boxes | En blandingstilstand farvevask sidder over hvert billede | Studier, musik, licensering |
| 13 | Riser Image Boxes | Kort stiger på plads med en læbe, der passer til dens tekst | Agenturer, produktion |
| 14 | Solhverv billedboks | Stort forskudt par med duotonebehandling | Kaffe, sourcing, historiefortælling |
| 15 | Tærskelbilledboks | Døre skilles ned i midten for at afsløre billedet | Avlere, planteskoler, afslører |
| 16 | Vellum Image Box | En blød sløring ryddes, når kortet klippes op | Binding, arkiver, rolige mærker |
Hvad du skal bruge for at køre disse
Elementor gratis er nok til selve siden. Designene er en anden sag.
- Alle seksten har brug for Master Addons. Hver eneste af dem er bygget på kontroller (repeater, typografi, dimensioner, kant, ikonvælger, faner), der er fulde Widget Builder giver. Det gratis plugin har en Widget Builder, men disse kontroller vises som låst.
- Downloadene på denne side er gratis og ugated. Grib JSON og holde det. Du kan ændre begrænsede muligheder i den gratis version. Men pro version unclock alt.
- Live demoerne koster slet ikke noget. Åbn en, ændre størrelsen på browseren, træk et kort, tab gennem med tastaturet. Det er den ærlige måde at bedømme, om en bevægelsesstil passer til dit indhold, og det er gratis.
Hvis du vil have designs, der kører på det gratis plugin, er de otte gratis widgets i vores Elementor skyderskabeloner samlingen bruger ingen Pro-kontroller, og flere af dem er kortlayouts i stedet for skydere.
01. Lumen Image Boxes
Live Demo Download Widget JSON
Fire kort på en næsten sort baggrund. Flyt markøren hen over dem, og et blødt lys bevæger sig med det, hvilket gør den del af billedet under din markør lysere og efterlader resten svagt. Kortet, du kigger på, er kortet, der er tændt.
Det, der får det til at fungere, er tilbageholdelsen. Kortene bevæger sig ikke eller skalerer på hover. Det eneste, der ændrer sig, er, hvor lyset falder, hvilket er tæt på, hvordan du rent faktisk ville se på genstande på et arbejdsbord under en lampe.
Brug den til: tekniske tjenester, websteder med mørkt tema, alt fotograferet mod en mørk grund.
Brug den ikke til: hvide baggrunde. Spotlyset har intet at arbejde imod og det hele lyder som en lidt uvoren svævetilstand.
02. Verge Image Boxes
Live Demo Download Widget JSON
To kolonner, bevidst ude af trit, så den højre kolonne sidder lavere end den venstre. Hver plade åbner, når den krydser ind i synet. Titler bærer en lille cirkulær pil, og under dem sidder en øjenbryn etiket i bogstaver-afstand hætter: SNOWCRAFT, TOPMØDER, TRAVERSER.
Den offset gør rigtigt arbejde. Et lige gitter fortæller øjet at scanne på tværs i rækker, og det holder op med at læse. Vakle kolonnerne, og det skal rejse ned på siden i stedet, hvilket er den retning, du rent faktisk ønsker.
Brug den til: redaktionelle sider, vejledninger, alt med fire til seks væsentlige punkter.
Brug den ikke til: mere end omkring otte genstande. Vaklen akkumuleres, og siden bliver meget høj, meget hurtig.
03. Blænde billedbokse
Live Demo Download Widget JSON
Seks kasser i to rækker af tre, på varmt papir-grå. Hvert billede er maskeret og masken åbner udad som rækken ankommer, den måde en linse blænde gør. Hvert kort bærer en lille SE DETALJER link under sin beskrivelse.
Dette er den, du skal nå ud til, når du har seks ting, og de er virkelig lige. De fleste billedbokslayout rangerer stille og roligt deres elementer efter størrelse eller position. Denne gør ikke.
Brug den til: mørkekammer og printtjenester, featuregitre med seks elementer, alt fotografisk.
Brug den ikke til: tre elementer. Den to-rækkede rytme er hele designet og en enkelt række af tre mister det.
04. Bascule Image Boxes
Live Demo Download Widget JSON
Opkaldt efter broen, ikke balancen. Hvert kort tænder et vandret hængsel, og der venter en rigtig bagside bagved, ikke et CSS-filter over det samme billede, men en faktisk anden side, du skriver kopi til.
En note fra at bygge det: flip slukker under et brudpunkt, og det er med vilje. En hængsel animation på en telefon betyder et tryk gør noget uventet, og rettelsen er ikke at gøre det snarere end at gøre det langsommere.
Brug den til: før og efter, spec ark, noget, hvor den anden information er lige så interessant som den første.
Brug den ikke til: din primære navigation ind på en side. Indhold bag et flip er indhold, de fleste besøgende aldrig ser.
05. Kaskade Billedbokse
Live Demo Download Widget JSON
Fire kort, der ankommer efter hinanden snarere end sammen, hver afregning et beat bag den sidste. Forskellen er lille, men du føler det. Afsnittet bliver uddelt til dig i stedet for bare at dukke op.
Hvert kort bærer et COURSE DATES-link, som er giveaway for, hvad dette layout egentlig er til: ting, der går igen, i en rækkefølge, hvor rækkefølgen betyder noget.
Brug den til: studie- og værkstedsydelser, kursusoversigter, procestrin.
Brug den ikke til: over folden. Forvræng indgangen til det første, en besøgende ser, og dit websted føles langsomt, selv når det ikke er.
06. Filigran Billedbokse
Live Demo Download Widget JSON
Den stille. Miniaturebilleder størrelsen af et frimærke, hårgrænse regler, to kolonner, fire elementer i rummet de fleste af disse designs bruger til en. Håndsæt type, polymerplader, udstansning, kant maleri: en handelsliste, lagt ud som en handelsliste.
Det er her, fordi ikke alle tjenester sektion fortjener en helt behandling. Nogle gange er der elleve ting, du gør, og den besøgende ønsker at scanne dem, ikke beundre dem.
Brug den til: lange servicemenuer, prislister, specialisthandler med en masse linjevarer.
Brug den ikke til: tre overskriftstjenester. Ved den optælling ser det ud til, at du har glemt at afslutte afsnittet.
07. Frise Strip
Live Demo Download Widget JSON
Den eneste her, der går sidelæns. Kort løber af højre kant af skærmen, og du trækker dem, ruller dem eller bruger de to runde pileknapper øverst til højre. En tynd regel nedenunder udfyldes, mens du går, så du altid ved, hvor meget der er tilbage.
Kamgarnspinding, vridning og strålende, dobbyvævning, stykkefarvning, efterbehandling. Fem stadier af en mølle i den rækkefølge, de sker. Et gitter ville have brudt den sekvens i rækker. En strimmel holder den på én linje, hvilket er, hvad en produktionssekvens faktisk er.
Brug den til: produktionssekvenser, lange lister, der ville ødelægge et gitter, alt med en iboende rækkefølge.
Brug den ikke til: fire elementer. Hvis alt allerede passer på skærmen, beder du folk om at rulle sidelæns for ingenting.
08. Gyre Image Boxes
Live Demo Download Widget JSON
Kort vipper mod, hvor som helst markøren er, og en glans krydser overfladen, mens de bevæger sig. Det er den effekt, alle prøvede i 2021, og de fleste mennesker overdrev. Hældningen her er et par grader, ikke femten.
Tastaturbrugere bliver håndteret korrekt, hvilket næsten intet gør. Tab til et kort, og du får løftet og glansen, men ingen rotation, fordi et tastatur ikke har nogen pointerposition at rotere mod, og det er noget sludder at forfalske et.
Brug den til: fysiske produkter, rammer, fremstillede varer, alt med en overflade, der er værd at fange lys.
Brug den ikke til: teksttunge kort. Vipning af et afsnit, mens nogen læser det, er fjendtligt.
09. Impulsbillede Bokse
Live Demo Download Widget JSON
Kort læner sig mod din markør, når den nærmer sig, og giver derefter slip, når den forlader. Trækket normaliseres mod halvdelen af kortet og klemmes, så når du er forbi kanten, holder det op med at stige i stedet for at slynge kortet hen over skærmen.
Hvert kort ender i en varm orange knap. Begynderkurser, coaching, bestyrelsesudlejning. Magnetisme er et bookingsidetrick, fordi det får knappen til at føles som om den vil trykkes ned, og den går til spilde overalt, hvor kortet ikke er en opfordring til handling.
Brug den til: lektioner, leje, bookinger, alt hvor hvert kort ender på en knap.
Brug den ikke til: informationskort uden klikmål. Du lover en interaktion, du ikke leverer.
10. Kintsugi Billedbokse
Live Demo Download Widget JSON
Billeder ankommer i stykker og samles igen. To brudmønstre leveres med det: tre høje stykker, som en rude revnet på tværs af dens højde, og seks kiler, der udstråler fra et punkt, der er sat off-center, som lyder som stød snarere end et rent brud.
Blæste fartøjer, støbt og ovn dannet, restaurering, undervisning bænk. Demoen er glas arbejde hele vejen igennem. Designet blev bygget til en varm butik, og det viser, men det lander overalt emnet er noget lavet, brudt, eller sat sammen igen.
Brug den til: glas, keramik, restaurering, reparation, konservering.
Brug den ikke til: hospitaler, forsikringer, alt, hvor “shattering” har en betydning, du ikke ønsker.
11. Palisade Image Boxes
Live Demo Download Widget JSON
Tre høje paneler, hver samlet af lodrette lameller, der ankommer i rækkefølge, et hegn bygges et bræt ad gangen. Lameltallet tilpasser sig panelets bredde, så en smallere søjle får færre, bredere brædder i stedet for det samme antal klemt tyndere.
Trapper, skydevinduer, indbyggede rum. Alle af dem er emner, du ville fotografere stående i stedet for at ligge ned, og det passer bedre til dette layout end et landskabskort nogensinde vil.
Brug den til: snedkerarbejde, arkitektur, interiør, høje produktbilleder.
Brug den ikke til: landskabsfotografering. Portrætpaneler beskærer billedet til en slot, og du mister skuddet.
12. Bryd billede Boxes
Live Demo Download Widget JSON
En farvevask sidder over hvert billede i blandingstilstand, så fire fotografier optaget på fire forskellige dage i fire forskellige lys kommer ud og ligner ét sæt. Det er det faktiske job her, og det er mindre glamourøst, end det lyder.
Placeringsoptagelse, foley og rekvisitter, restaurering, bibliotekslicens. Det er lydarbejde, hvor stockfotografering er uundgåelig, og billederne aldrig matcher, så vasken skjuler sømmene.
Brug den til: mixed source-billeder, stockfotos, alt, hvor du ikke kan genoptage.
Brug den ikke til: produktfarvenøjagtighed. En vask over en malingsprøve er et returproblem.
13. Riser Image Boxes
Live Demo Download Widget JSON
Kortene stiger nedefra med en læbe med billedtekst, der vises nederst. Læben måles mod teksten inde i den i stedet for at være indstillet til en fast højde, så en to-ords billedtekst og en to-linjers en sidder begge korrekt i stedet for en af dem klipning.
Skræddersyede kommissioner, omformulering, produktion af små partier. Tre varer, tre mørke billeder, minimal krom. Det er det mest konventionelle design i sættet. Nogle gange vil du have layoutet til at komme ud af vejen for arbejdet.
Brug den til: agenturer, produktionsselskaber, tre-service sider.
Brug den ikke til: lange beskrivelser. Læben er en billedtekst, ikke et afsnit.
14. Solhverv Image Box
Live Demo Download Widget JSON
De største kasser i sættet. To kolonner, dårligt ude af trit med vilje, billeder, der er store nok til rent faktisk at se på. En duotone behandling linker på tværs af billederne og kan droppes pr. kort, hvis et foto bekæmper det.
Engros ristning, grøn sourcing, espresso kalibrering. Tre tjenester givet pladsen på seks. Brug det, når du har få ting at sige, og de er værd en hel skærm hver.
Brug den til: to til fire premium-tjenester, historiefortællingssider, kaffe- og madmærker.
Brug den ikke til: seks eller flere varer. Dette design på seks varer er en meget lang side, ingen når bunden af.
15. Tærskelbilledboks
Live Demo Download Widget JSON
To døre sidder lukket over hvert billede og skilles ned i midten, når kortet kommer til syne. Dørene er bygget fra billedets egen kilde, så de aldrig mismatcher billedet bag dem.
Dyb grøn grund, fire kort: glashus samlinger, frøbank, vinterhave, studie kurser. Brug af døre til et afsnit om at komme ind i en have er indlysende, og i dette tilfælde er indlysende fint.
Brug den til: haver, spillesteder, åbninger, alt hvad en besøgende fysisk kommer ind i.
Brug den ikke til: tolv kort. Tolv sæt døre åbning er en masse døre.
16. Vellum Image Box
Live Demo Download Widget JSON
Hvert kort åbnes fra et klip, mens en blød sløring rydder af billedet, som papir, der trækkes væk. Hvert kort i sektionen er bevæbnet i en enkelt commit, hvilket betyder et layoutpas for hele rækken i stedet for et pr. kort.
Sag indbinding, bevarelse, kasser og kabinetter, udgave arbejde. Demoen er en bogbinderi. Dette er den blideste bevægelse i sættet og den mest tilbøjelige til at overleve en klient, der siger, at de hader animation.
Brug den til: arkiver, indbinding, konservering, rolige og dyre mærker.
Brug den ikke til: alt, der kræver uopsættelighed. Dette design har ingen og foregiver ikke at gøre det.
Hvad kan standard Elementor billedboks widget gøre?
Den gratis Elementor-billedboks giver dig et billede, en titel, en beskrivelse og et valgfrit link. I fanen Stil kan du indstille billedbredde, grænseradius, afstand mellem billede og tekst, justering og billedpositionen (øverst, til venstre eller til højre). Hover-effekter er begrænset til Elementors globale CSS-filtre og -transformationer.
Det dækker en masse websteder, og hvis det dækker din, skal du bruge det. Du behøver ikke en tilføjelse til at sætte et billede over en overskrift.
Hvor det løber ud er bevægelse og struktur. Der er ingen bagside, ingen per-kort sekventering, ingen vandret layout, ingen måde at få et kort til at opføre sig anderledes end sine naboer. Det er de huller, de seksten designs ovenfor udfylder.
Billedboks vs ikonboks: hvilken skal du bruge?
Brug en billedboks, når billedet er indholdet, som f.eks. et fotografi af værket, rummet eller produktet. Brug en ikonboks, når billedet er dekoration, og ordene bærer betydningen. Widgetsene er ellers næsten identiske: begge parrer en grafik med en overskrift og en beskrivelse i én sammenkædet blok.
Den praktiske test er, om du ville bemærke, om grafikken forsvandt. Hvis et servicegitter stadig læser fint med ikonerne væk, var de dekorative, og en ikonboks var det rigtige opkald. Hvis fjernelse af billederne efterlader dig med en liste over navne, havde du brug for en billedboks.
En tredje mulighed folk glemmer: a flipbox, som er en billedboks med en ryg. Bascule ovenfor er den idé genopbygget med et hængsel.
Hvordan tilføjer du en svæveeffekt til en Elementor-billedboks?
Vælg widget, åbn fanen Stil, udvid afsnittet Billede og skift til fanen Svæve. Du får opacitet, CSS-filtre (sløring, lysstyrke, mætning, kontrast, nuance) og en overgangsvarighed. For transformationer som skalering eller rotation skal du bruge fanen Avancerets svævekontroller.
Det er hele den indbyggede overflade. Alt ud over det, såsom et lys, der sporer markøren, et magnetisk træk eller en glans, der krydser på hældning, har brug for brugerdefineret CSS eller en widget, der sender adfærden.
Hvis det specifikt er tekst-over-billede-effekter, du leder efter, katalogiserede vi 25+ Elementortekst over billede svæve effekter separat, og de arbejder med aktiewidgetten.
Sådan importeres disse Elementor billedboksdesigns
Download JSON fra ethvert design ovenfor, og gå derefter til WordPress Master Addons → Widget Builder → Import Widget og upload filen. Widgetten vises i panelet Elementor under Favoritter, med sine egne kontrolelementer i fanerne Indhold og Stil.
- Klik Download Widget JSON på det design, du ønsker. Lynlåsen indeholder JSON og et eksempelbillede.
- Løsn den. Elementors egen skabelonimportør vil ikke læse denne fil, for den går til Widget Builder frem for til Skabeloner.
- Gå til Master Addons → Widget Builder og vælge Importer Widget.
- Upload JSON. Rediger enhver side med Elementor, og søg i panelet efter widgetnavnet.
- Erstat pladsholderbillederne og teksten. Kortene er en repeater, så tilføj eller fjern elementer der i stedet for at duplikere widgetten.
Den almindelige fejl er trin 2. Disse er Widget Builder widgets, ikke Elementor-sektionsskabeloner, så import af dem gennem Skabeloner → Import vil mislykkes, og fejlmeddelelsen forklarer ikke hvorfor.
Fungerer disse billedbokse på mobilen, og er de tilgængelige?
Ja til begge, med ét forbehold på designniveau. Hver widget her respekterer prefers-reduced-motion: hvis en besøgende har reduceret bevægelse aktiveret på OS-niveau, kører indgangsanimationerne ikke, og kortene gengives i deres endelige tilstand. Det håndteres i widgetten, ikke overladt til dig.
Pointerdrevne designs nedbrydes snarere end går i stykker. Gyres tilt og Impulses magnet har brug for en pointerposition, som en touchscreen ikke giver, så på mobilen gengiver kortene statisk, og alt forbliver læsbart og trykbart. Bascule skifter sit flip fra under et brudpunkt bevidst.
Gyre håndterer også tastaturfokus adskilt fra hover. Tab til et kort, og du får løftet og glansen uden rotationen. De fleste tilt effekter springer det over og efterlader tastaturbrugere med ingenting.
Hvilken Elementor billedboks skal du egentlig vælge?
Start fra din vareantal, ikke fra effekten.
- To til fire varer, hver vigtig: Solhverv eller kant.
- Præcis tre tjenester: Riser, Gyre eller Bascule.
- Fire varer: Lumen, Cascade, Kintsugi, Threshold eller Vellum.
- Seks lige store poster: Blænde.
- Otte eller flere: Frise Strip, hvis de er en sekvens, Filigran, hvis de er en liste.
- Høj, portrætbilleder: Palisade.
- Fotos, der ikke matcher hinanden: Refract.
- Hvert kort ender på en knap: Impulse.
Så tjek effekten mod dit emne. Kintsugi på et advokatfirma er en dårlig joke. Tærskel på en have er næsten for pæn. Hvis bevægelsen ikke siger noget om arbejdet, skal du droppe det og bruge Riser.
Ofte stillede spørgsmål
Er Elementor billedboks widget gratis?
Ja. Billedboksen leveres i det gratis Elementor-plugin med billede, titel, beskrivelse, link, billedposition og grundlæggende svævefiltre. De seksten designs på denne side er forskellige: de er Master Addons Widget Builder-widgets og har brug for Master Addons Pro til at redigere, selvom selve downloads er gratis.
Kan jeg tilføje en knap til en Elementor-billedboks?
Ikke i lager widget, som forbinder hele boksen i stedet for at give dig en separat knap. For at få en rigtig knap placerer du enten en Knap widget nedenunder inde i den samme beholder, eller bruger et design, der indeholder en. Impuls, Blænde, Kaskade og Gyre alle skib med en knap i kortet.
Hvordan laver jeg Elementor billedbokse i samme højde?
Sæt kasserne i en flexbeholder og indstil beholderens Align Items to Stretch, og indstil derefter hver billedboks kolonne til fuld højde. Ujævne tekstlængder er den sædvanlige årsag. Hvert design på denne side håndterer lige høje i sin egen CSS, så problemet ikke opstår.
Hvad er forskellen mellem en billedboks og en billedwidget?
En billedwidget placerer et enkelt billede med en valgfri billedtekst og et link. En billedboks er en sammensat: billede, overskrift, beskrivelse og link i én blok, stylet og med afstand som en enhed. Brug billedwidgetten til et selvstændigt foto, billedboksen til et kort i et gitter.
Har jeg brug for Elementor Pro til disse designs?
Nej. Elementor gratis er nok, fordi designene er bygget med Master Addons snarere end Elementor Pro widgets. Hvad du har brug for er Master Addons Pro, da hvert design bruger Widget Builder kontrol (repeater, typografi, dimensioner, kant, ikoner, faner), der er låst i det gratis plugin.
Hvor skal man gå næste
Hvis du vil have mere importerbare designs, vil 20 Elementor skyderskabeloner indsamling er den nærmeste søskende til denne side og otte af dem kører på det gratis plugin. For karruseller specifikt, se Elementorkarruselwidgets, eller hvad er faktisk gratis hvis licensspørgsmålet er det, du holder af.
For relaterede kortmønstre: image hotspots til anmærkning af et enkelt stort billede, teammedlemssektioner for mennesker frem for tjenester, og 3D flipbox animationer hvis Bascule fangede dit øje. Licensdetaljer er på prissætning side, og den fulde widgetliste er i 100+ bedste Elementor tilføjelser.
