Nøgle takeaways
- Murværk betyder, at billeder bevarer deres egne proportioner i stedet for at blive beskåret til et ensartet kort, så et portrætfoto forbliver højt.
- Elementors gratis Image Gallery widget har ingen murværk mulighed. Dens layout kontrol er kolonner og mellemrum.
- Master Addons Filterable Image Gallery har en Masonry-kontakt, der stopper beskæringen, men front-end-scriptet lægger elementer ud i rækker, så høje kort efterlader et hul under de korte i samme række.
- Hvis du vil have tætpakkede kolonner uden mellemrum, er CSS-kolonner på en container den ærlige rute på en gratis installation.
- For produktbilleder og holdfotos læser et ensartet gitter normalt bedre end murværk, så tænd for billedformat i stedet.
Murværk er layoutet, hvor billeder sidder i deres naturlige højde og søjlerne vakler, formen Pinterest gjorde bekendt. Det passer til fotografering, hvor beskæring af en portrætramme til en firkant smider halvdelen af billedet væk.
Elementor kan komme tæt på dette på tre forskellige måder, og de producerer ikke alle det samme. En af dem har en kontakt mærket Masonry, der gør mindre end navnet antyder, hvilket er den del, der er værd at læse, før du bygger.
Indholdsfortegnelse
Murværk, gitter og berettiget: forskellen
| opsætning | Hvad det gør ved billederne | Læser bedst for |
|---|---|---|
| Gitter | Beskærer hvert billede til samme kortstørrelse | Produkter, holdfotos, logoer, alt hvad du vil have ryddeligt |
| Murværk | Holder hvert billedes højde, kolonnerne vakler | Blandet fotografi, portrætter ved siden af landskaber |
| Begrundet | Holder proportioner, men strækker hver række til samme højde | Fotoessays og kontaktark |
Murværk og berettiget begge beskytter den oprindelige afgrøde. Forskellen er, hvilken retning matematikken løber: murværk fikserer kolonnebredden og lader højden variere, berettiget fastsætter rækkehøjden og lader bredden variere.
Rute 1: Elementors Gallery-widget (Pro)
Elementors gratis Image Gallery widget har to layout kontrol, Kolonner og Afstand, og det beskærer til et ensartet kort. Galleri widget, som er Pro, har en Layout kontrol med tre værdier: Gitter, Retfærdiggjort og Murværk. Murværk der er den ægte vare, kolonner pakket med ingen huller, og Pro Portfolio widget har sin egen Murværk switch også. Hvis du allerede ejer Pro, det er den korteste vej, og der er intet at installere.
Rute 2: Murværkskontakten i det filtrerbare galleri
På en gratis Elementor-installation, Filtrerbart billedgalleri har en Masonry switch i sin Indstillinger sektion, ved siden af Image Aspect Ratio og Gutter.
Med Masonry tændt og Image Aspect Ratio slukket, holder billeder deres egne proportioner, så en portrætramme forbliver høj, og intet beskæres. Kolonnepakning er den del, du ikke får. I den aktuelle udgivelse arrangerer scriptet, der lægger gitteret, elementer i rækker, så et kort billede efterlader et tomt rum under det, indtil næste række starter.
Det er nyttigt, når dine billeder er nogenlunde ens i form, da intet bliver beskåret, og rækkerne forbliver pæne. For det pakkede Pinterest-look på en gratis installation er rute 3 svaret.
Rute 3: CSS-søjler på en container
CSS har et kolonnelayout, der pakker indhold, som murværk skal. Sæt dine billeder i en beholder, tilføj et par linjer CSS til det, og browseren gør arbejdet uden script.
selector {
column-count: 3;
column-gap: 24px;
}
selector img {
width: 100%;
margin-bottom: 24px;
break-inside: avoid;
}
@media (max-width: 767px) {
selector { column-count: 2; }
}de selector nøgleord er målrettet det element, du redigerer, så dette uddrag går i Custom CSS boksen på selve beholderen. På en gratis Elementor installere den boks kommer fra en addon som f.eks Brugerdefineret CSS, da Elementor markerer sit eget Custom CSS-felt som Pro.
Afvejningen er bestilling. CSS kolonner fylde top til bund i hver kolonne, så læserækkefølge løber ned kolonne et, derefter ned kolonne to. For et galleri ingen læser i rækkefølge, der er fint. For noget kronologisk det er ikke.
Billedstørrelser, der får murværk til at se rigtigt ud
- Upload i en ensartet bredde. Omkring 1.200px er rigeligt til et tre kolonne gitter og holder siden lys.
- Lad højderne variere og hold bredderne ens, da murværk fungerer ved at fastgøre søjlebredden.
- Indstil billedopløsning bevidst. Filer i fuld størrelse i et ni billedgitter er en langsom side uden visuel gevinst.
- Gutter skyderen er responsiv og kører fra 0 til 40px, så du kan stramme den på telefoner.
- Undgå én ekstrem ramme. Et enkelt meget højt panorama blandt firkantede billeder trækker øjet fra alt andet.
Når et ensartet gitter er det bedre svar
Tænd for billedformatforhold, og du får et ensartet gitter, hvilket er det, produktbilleder, teamfotos og logoer ønsker, sammen med alt andet, der skal ligne et sæt.
En enkel måde at vælge: Hvis billederne blev skudt i en session med ét kamera setup, beskære dem til et gitter. Hvis de kommer fra forskellige skud i forskellige orienteringer, lad dem holde deres form.
Ofte stillede spørgsmål
Har Elementor et murværk galleri?
Ikke i den gratis Image Gallery widget, som kun tilbyder kolonner og mellemrum. Elementors Gallery widget med layout muligheder er på sin Pro liste.
Hvorfor har mit murværk galleri stadig huller?
Fordi gitteret er lagt ud i rækker snarere end pakkede kolonner. Billeder holder deres naturlige højde, så et kort billede, der sidder i en række med en høj, efterlader plads nedenunder. CSS-kolonner er ruten til ægte pakning.
Arbejder murværk med filterfanerne?
Ja. Filtrering og layoutet er adskilte, så hvis du klikker på en kategori, indsnævres gitteret, og de resterende elementer lægger sig selv ud igen.
Kan jeg indstille murværk på mobil kun?
Nej. Murerkontakten gælder for hver skærmstørrelse. Gutter-skyderen er den kontrol, der ændres pr. enhed.
Er murværk dårligt for sidehastigheden?
Layoutet selv er billigt. Hvad koster dig er billederne, så sæt en fornuftig Billedopløsning snarere end fuld størrelse filer, og husk, at hvert element i galleriet indlæses med siden.
Endelige tanker
Tre ruter, tre forskellige resultater. Elementor Pro's Gallery widget pakker kolonnerne for dig. Murerkontakten på det filtrerbare galleri stopper beskæringen og holder rækkerne, hvilket ofte er nok. CSS-kolonner giver det pakkede udseende på en gratis installation, på bekostning af læserækkefølge.
Beskyttelse af den oprindelige afgrøde og holde et ryddeligt gitter er to forskellige mål, så vælg den rute, der matcher den, du rent faktisk har.
Relateret læsning
