Hvordan lage et Masonry Image Gallery i WordPress

Uansett om du er frilanser eller en annen kreativ som ønsker å presentere arbeidet sitt på nettet, eller om du bare ønsker å gjøre nettstedet ditt eller bloggen din mer engasjerende for de besøkende, er å legge til et bildegalleri en fin måte å gjøre det på. Tross alt kan bildegallerier være en viktig del av nettstedets design, spesielt hvis du må stole på visuelle elementer for å vise frem hva merkevaren din eller virksomheten din handler om.

I søket etter en perfekt måte å vise forskjellige typer bilder på nettstedet ditt, har du sannsynligvis også vært borti noen forskjellige typer gallerier – for eksempel karusellbildegalleri, Pinterest-galleri og murverk, for å nevne noen. Og selv om hver og en av disse galleritypene er flotte i seg selv, skal vi denne gangen fokusere spesielt på murgallerier. Nemlig disse typer gallerier lar deg ordne bildene dine på en visuelt fengende måte ved å la hvert bilde beholde sine proporsjoner og også holde avstanden mellom hvert bilde konsistent og godt optimalisert, uten plass ubrukt. Som et resultat kan du ha flere bilder med forskjellige størrelser organisert sammen i én sammenhengende enhet, slik at galleriet ditt ser attraktivt og profesjonelt ut for alle som ser på det.

Denne gangen, vi vil veilede deg gjennom å lage et murgalleri i WordPress ved å bruke vår egen Qi Addons for Elementor-plugin, så sørg for å lese videre.

Opprette et Masonry Image Gallery med Qi Addons for Elementor Plugin

Med et sett med 60 fullt fleksible widgets, er Qi Addons for Elementor en flott gratis plugin du kan bruke til å bygge praktisk talt hvilken som helst type side du kan tenke deg. Du får blande og matche alle slags tillegg for å få ønsket utseende for siden eller delen din – fra portefølje- og forretningstillegg til WooCommerce og kreative.

Nå er Masonry Image Gallery-widgeten en annen flott widget i denne samlingen du kan bruke til å bygge flotte og fengslende gallerier for nettstedet ditt. Widgeten er fullstendig tilpassbar og lar deg legg til forskjellige bilder og velg størrelsene deres på en enkel måte. Du kommer også til juster avstanden mellom bildene, legg til sveveeffekter, og mer.

Vi skal demonstrere noen av tingene du kan gjøre med denne widgeten ved å bruke dens allsidige alternativer. Bare sørg for å ha Elementor-sidebyggeren installert først for å bruke Qi Addons for Elementor-plugin på nettstedet ditt. Gratisversjonen av sidebyggeren fungerer.

I tilfelle du foretrekker å se videoer i stedet for å lese, bør du sjekke ut videoen vår som dekker samme emne:

Gå til bakenden av siden eller innlegget ditt og finn widgeten for bildegalleri for murverk i Elementor-sidefeltet.

Når du har gjort det, drar du den over til høyre side av skjermen.

Du vil legge merke til at widgeten er tom som standard. Dette er helt normalt siden du ennå ikke har lagt til noen bilder.

Vi bør også nevne med en gang at du må angi noen ekstra alternativer hvis du vil at murgalleridelen skal vises i full bredde, som vår.

Det er en sjanse for at galleriet ditt er innrammet som standard. Men hvis du vil endre denne innstillingen, kan du enkelt gjøre det ved å gå til Rediger seksjon-menyen. Klikk på knappen som vises øverst i delen, rett i midten:

Deretter bruker du Oppsett seksjonen til venstre, bør du ganske enkelt velge Full bredde for innholdsbredden din i stedet for Bokset.

Selvfølgelig kan du også bruke alternativet «Boxed» i stedet og deretter angi ønsket bredde ved å bruke glidebryteren:

Hvis du ikke vil ha noe mellomrom mellom kantene på siden og galleriet ditt, kan du endre hele sideoppsettet til å være i full bredde også. For å gjøre dette, gå til sideinnstillinger og velg Elementor full bredde alternativ. Alternativt, hvis du bruker Qi-temaet, kan du også gå med Qi full bredde alternativ.

Til slutt kan du også sette kolonnegap-alternativet til Ingen gap for å lage et galleri uten mellomrom mellom kolonnene.

Du kan kombinere disse innstillingene på hvilken som helst måte du vil til du oppnår ønsket utseende for gallerioppsettet/seksjonen.

Nå som du har angitt den foretrukne delen og/eller sidebredden, kan du fortsette å legge til bildene dine som elementer. Klikk på «+Legg til element»-knappen og trykk deretter på bildefeltet for å velge bildet ditt.

Klikk deretter på Sett inn media.

Du vil se det nye feltet vises rett nedenfor som lar deg velge din Bildestørrelse. Du kan velge mellom Square, Landscape, Portrait og Huge Square. Vi har valgt Square-alternativet for vårt eksempel.

Fra da av kan du fortsette å legge til så mange bilder du vil ved å klikke på +Legg til element knappen og deretter velge bildet fra mediebiblioteket.

Vi har lagt til noen flere bilder til vårt eget galleri på samme måte, bortsett fra noen variasjoner i størrelsene.

Her er utseendet til murgalleriet vårt etter at vi har lagt til alle bildene. Vi har lagt til totalt åtte bilder, så vi har også åtte forskjellige elementer i alternativene våre.

Nå, i Galleriinnstillinger seksjonen, er det noen nyttige alternativer du kan bruke for å justere utseendet til galleriet ditt ytterligere.

Dette inkluderer Aktiver Lightbox Popup alternativ som åpner bildet som et overlegg når det er klikket på. Dessuten lar det besøkende bla gjennom hele galleriet ditt. Vi har aktivert denne innstillingen for vårt eksempel.

Deretter kan du velge antall kolonner ved å bruke alternativet med samme navn. Den er satt til tre som standard, men du kan velge hvor som helst mellom én og åtte kolonner. Vi har valgt fire kolonner for galleriet vårt:

Som du kan se, har bildene beholdt sine opprinnelige proporsjoner selv om de har tilpasset seg denne nye kolonneordningen.

Deretter kan du stille inn Kolonner Responsive mulighet for å velge hvordan galleriet ditt skal vises på forskjellige skjermstørrelser.

Den er satt til Forhåndsdefinert som standard, men du kan velge Egendefinert for å velge antall kolonner for hver skjermstørrelse. Du vil enkelt kunne justere ønsket antall ved å bruke rullegardinmenyen ved siden av den spesifikke størrelsen du ønsker å endre.

Som navnet antyder, Mellomrom mellom elementer alternativet lar deg justere avstanden mellom bildene dine. Du kan enten gjøre dette ved å bruke glidebryteren eller ved å skrive inn en ny verdi (vi har lagt til 26px for vår).

Nå, den Bildepeker alternativet lar deg justere måten bildet vil vises på når du peker. Du vil kunne velge Zoom inn, Zoom ut, sette den til Flytt eller velge Ingen.

Vi har bestemt oss for å gå med standardalternativet (Zoom inn):

Hvis du ender opp med å velge en av de ovennevnte zoomeffektene (Zoom inn eller Zoom ut), vil du også kunne bruke bildet Hover Zoom Origin alternativ. Dette alternativet er spesielt interessant ettersom det lar deg velge den spesifikke delen av bildet ditt som skal zoomes inn (eller zoomes ut). Vi har beholdt denne innstillingen til Center, men du kan gjerne leke med den for å se hvilken du liker best.

Neste er Overleggsfarge alternativ. Du kan velge hvilken som helst farge fra fargevelgeren og deretter angi ønsket gjennomsiktighet ved hjelp av glidebryteren.

Som du kan se, vil dette avsløre bildene dine under den valgte fargen.

De Overlay Hover Color alternativet fungerer på en lignende måte, forskjellen er at fargen din vil vises ved musepeker.

Nok en gang må du også velge gjennomsiktighetsgraden for å gjøre bildene dine synlige. Slik kan galleriet ditt se ut hvis du bruker dette alternativet:

Og det er det når det gjelder Galleriinnstillinger. Til slutt kan du trykke på Publiser/oppdater knappen og fortsett og se hvordan murgalleriet ditt ser ut på siden/innlegget ditt.

Konklusjon

Som du kunne se fra eksemplet vi viste deg ovenfor, er det mange forskjellige måter du kan tilpasse utseendet til murgalleriet ditt ved å bruke Qi Addons for Elementors Masonry Gallery-widget. Avhengig av de spesifikke alternativene du velger, kan du drastisk endre utseendet til galleriet ditt og justere det slik at det passer til designet ditt. Du kan endre svevealternativene, justere avstanden mellom elementer, angi bildestørrelser og mikse og matche alle de andre tilgjengelige innstillingene også. Uansett om du bestemmer deg for å kopiere designet vårt eller velger å gå med noe helt annet, vil pluginens fleksible alternativer hjelpe deg med å lage visuelt slående murgallerier og skape en minneverdig opplevelse for besøkende på nettstedet ditt. Vi anbefaler på det sterkeste at du følger denne veiledningen og prøver ut widgeten selv.