Hur man skapar ett Masonry Image Gallery i WordPress

Oavsett om du är frilansare eller någon annan kreativ person som vill presentera sitt arbete online, eller om du helt enkelt vill göra din webbplats eller blogg mer engagerande för dina besökare, är det ett bra sätt att lägga till ett bildgalleri. När allt kommer omkring kan bildgallerier vara en viktig del av din webbsidas design, särskilt om du måste lita på bilder för att korrekt visa upp vad ditt varumärke eller företag handlar om.

I din sökning efter ett perfekt sätt att visa olika typer av bilder på din webbplats har du förmodligen också stött på några olika typer av gallerier – som karusellbildgalleri, Pinterest-galleri och murverk, för att nämna några. Och även om var och en av dessa gallerityper är fantastiska i sin egen rätt, kommer vi den här gången att fokusera på murade gallerier i synnerhet. Nämligen dessa typer av gallerier låter dig arrangera dina bilder på ett visuellt fängslande sätt genom att låta varje bild behålla sina proportioner och även att hålla avståndet mellan varje bild konsekvent och väl optimerad, utan utrymme som lämnas oanvänt. Som ett resultat kan du ha flera bilder med olika storlekar organiserade tillsammans i en sammanhängande enhet, vilket gör att ditt galleri ser attraktivt och professionellt ut för alla som tittar på det.

Vid den här tiden, vi guidar dig genom att skapa ett murverksgalleri i WordPress med hjälp av våra egna Qi Addons för Elementor-plugin, så se till att läsa vidare.

Skapa ett Masonry Image Gallery med Qi Addons för Elementor Plugin

Med en uppsättning av 60 helt flexibla widgets är Qi Addons för Elementor ett fantastiskt gratis plugin som du kan använda för att bygga praktiskt taget vilken typ av sida du kan tänka dig. Du kommer att få blanda och matcha alla sorters tillägg för att få önskat utseende för din sida eller sektion – från portfölj- och affärstillägg till WooCommerce och kreativa.

Nu är Masonry Image Gallery-widgeten en annan bra widget i den här samlingen som du kommer att kunna använda för att bygga vackra och fängslande gallerier för din webbplats. Widgeten är helt anpassningsbar och låter dig lägg till olika bilder och välj deras storlekar med största lätthet. Du kommer också att få till justera avståndet mellan bilderna, lägg till hovringseffekter, och mer.

Vi kommer att demonstrera några av de saker du kan göra med den här widgeten med hjälp av dess mångsidiga alternativ. Se bara till att ha Elementor-sidbyggaren installerad först för att använda Qi Addons for Elementor-plugin på din webbplats. Den kostnadsfria versionen av sidbyggaren duger.

Dessutom, om du föredrar att titta på videor istället för att läsa, bör du kolla in vår video som täcker samma ämne:

Gå till baksidan av din sida eller inlägg och hitta widgeten för murverksbildgalleri i din Elementor sidofält.

När du har gjort det drar du den helt enkelt över till höger sida av skärmen.

Du kommer att märka att widgeten är tom som standard. Detta är helt normalt eftersom du ännu inte har lagt till några bilder.

Vi bör också omedelbart nämna att du måste ställa in några ytterligare alternativ om du vill att din murade gallerisektion ska visas i full bredd, som vår.

Det finns en chans att ditt galleri kan vara förpackat som standard. Men om du vill ändra den här inställningen kan du enkelt göra det genom att gå till menyn Redigera avsnitt. Klicka på knappen som visas högst upp i ditt avsnitt, precis i mitten:

Använd sedan Layout sektionen till vänster ska du helt enkelt välja Full bredd för din innehållsbredd istället för Boxad.

Naturligtvis kan du också använda alternativet ”Boxed” istället och sedan ställa in önskad bredd med skjutreglaget:

Om du inte vill ha något som helst utrymme mellan kanterna på sidan och ditt galleri, kan du ändra hela sidlayouten till full bredd också. För att göra detta, gå till sidinställningar och välj Elementor full bredd alternativ. Alternativt, om du använder Qi-temat, kan du också gå med Qi full bredd alternativ.

Slutligen kan du också ställa in alternativet för kolumnergap till Ingen lucka för att skapa ett galleri utan mellanrum mellan kolumner.

Du kan kombinera dessa inställningar på vilket sätt du vill tills du uppnår önskat utseende för din gallerilayout/sektion.

Nu när du har ställt in önskad sektion och/eller sidbredd kan du fortsätta att lägga till dina bilder som objekt. Klicka på knappen ”+Lägg till objekt”. och tryck sedan på bildfältet för att välja din bild.

Klicka sedan på Infoga media.

Du kommer att se det nya fältet visas precis nedan som låter dig välja din Bildstorlek. Du kan välja mellan Square, Landscape, Portrait och Huge Square. Vi har valt Square-alternativet för vårt exempel.

Från och med då kan du fortsätta lägga till så många bilder du vill genom att klicka på +Lägg till objekt knappen och välj sedan bilden från ditt mediebibliotek.

Vi har lagt till några fler bilder till vårt eget galleri på samma sätt, förutom vissa variationer i deras storlekar.

Här är utseendet på vårt Masonry-galleri efter att vi har lagt till alla bilder. Vi har lagt till totalt åtta bilder så vi har även åtta olika objekt i våra alternativ.

Nu, i Galleriinställningar avsnitt, det finns några användbara alternativ som du kan använda för att ytterligare justera utseendet på ditt galleri.

Detta inkluderar Aktivera Lightbox Popup alternativ som öppnar bilden som en överlagring när du klickar på den. Dessutom tillåter det besökare att bläddra igenom hela ditt galleri. Vi har aktiverat den här inställningen för vårt exempel.

Därefter kan du välja antalet kolumner med alternativet med samma namn. Den är inställd på tre som standard, men du kan välja var som helst mellan en och åtta kolumner. Vi har valt fyra kolumner för vårt galleri:

Som du kan se har bilderna behållit sina ursprungliga proportioner även om de har anpassat sig till detta nya kolumnarrangemang.

Sedan kan du ställa in Kolumner Responsive alternativet för att välja hur ditt galleri ska visas på olika skärmstorlekar.

Den är inställd på Fördefinierad som standard, men du kan välja Anpassad för att välja antalet kolumner för varje skärmstorlek. Du kommer helt enkelt att kunna justera önskat antal genom att använda rullgardinsmenyn bredvid den specifika storleken du vill ändra.

Som namnet antyder, den Mellanrum mellan föremål alternativet låter dig justera utrymmet mellan dina bilder. Du kan antingen göra detta genom att använda reglaget eller genom att skriva in ett nytt värde (vi har lagt till 26px för vårt).

Nu den Bild Hover alternativet låter dig justera hur din bild ska visas när du håller muspekaren. Du kommer att kunna välja Zooma in, Zooma ut, ställa in den på Flytta eller välja Ingen.

Vi har bestämt oss för att välja standardalternativet (Zooma in):

Om du slutar med att välja en av de ovan nämnda zoomeffekterna (Zooma in eller Zooma ut), kommer du också att kunna använda bilden Hover Zoom Origin alternativ. Det här alternativet är särskilt intressant eftersom det låter dig välja den specifika del av din bild som ska zoomas in (eller zoomas ut). Vi har behållit den här inställningen till Center, men du kan gärna leka med den för att se vilken du gillar mest.

Nästa är Överläggsfärg alternativ. Du kan välja vilken färg som helst från färgväljaren och sedan ställa in önskad genomskinlighet med skjutreglaget.

Som du kan se kommer detta att visa dina bilder under den valda färgen.

De Överlägg Hover Color alternativet fungerar på liknande sätt, skillnaden är att din färg kommer att visas när du håller musen.

Återigen måste du också välja transparensgraden för att göra dina bilder synliga. Så här kan ditt galleri se ut om du använder det här alternativet:

Och det är det när det kommer till Galleriinställningar. Äntligen kan du trycka på Publicera/Uppdatera knappen och fortsätt sedan och se hur ditt Masonry-galleri ser ut på din sida/inlägg.

Slutsats

Som du kunde se från exemplet vi visade dig ovan, finns det många olika sätt på vilka du kan anpassa utseendet på ditt murverksgalleri med hjälp av Qi-tilläggen för Elementors Masonry Gallery-widget. Beroende på vilka specifika alternativ du väljer kan du drastiskt ändra utseendet på ditt galleri och anpassa det så att det passar din design helt. Du kan ändra hovringsalternativen, justera avståndet mellan objekt, ställa in bildstorlekar och blanda och matcha alla andra tillgängliga inställningar också. Oavsett om du bestämmer dig för att kopiera vår design eller väljer att gå med något helt annat, kommer plugins flexibla alternativ att hjälpa dig att göra visuellt slående murverksgallerier och skapa en minnesvärd upplevelse för dina webbplatsbesökare. Vi rekommenderar starkt att du följer denna handledning och provar widgeten själv.