Hur man skapar ett Pinterest-bildgalleri i WordPress

När du har bilder som du vill visa på din WordPress-webbplats är att lägga dem i ett bildgalleri i Pinterest-stil ett av de mest populära sätten att göra det. Faktiskt så populärt att du hittar massor av premium WordPress-teman som använder det.

Att skapa det kan också vara enkelt – vi har gjort det på det sättet med våra Qi Addons for Elementor-plugin. Bland de sextio Elementor-tilläggen du får i plugin – det mesta du hittar i ett gratis plugin – du hittar en Pinterest bildgalleri-widget.

Vi visar dig hur du kan använda widgeten för att skapa ett bildgalleri i Pinterest-stil i WordPress med bara några få steg. Vi har skapat en videohandledning för alla som föredrar video, och vi bäddar in den här om du vill titta på den.

Om du vill läsa hur vi har skapat ett av de exempelgallerier du kan se på widgetens sida, kan du stanna kvar med den här artikeln.

Lägga till ett Pinterest-bildgalleri i WordPress

För att kunna följa med i denna demonstration och skapa dina egna fantastiska bildgallerier i Pinterest-stil behöver du två nyckelkomponenter – Elementor och vår Qi-tillägg för Elementor plugin. Du kan också kolla in vårt gratis Qi WordPress-tema om du fortfarande inte har bestämt dig för ett för din webbplats och du vill ha något som ser ut och känns premium utan premiumprislappen.

Så ditt första steg skulle vara att installera och aktivera Elementor och sedan installera och aktivera Qi Addons for Elementor-plugin. När det är gjort kan du gå vidare med att skapa en ny sida eller inlägg där du vill lägga till bildgalleriet eller öppna ett inlägg eller sida som du vill redigera. Hur som helst, genom att söka på fliken Element efter ”Pinterest” kommer Pinterest Image Gallery-widgeten fram, och att dra den till en ledig sektion räcker för att komma igång.

Det faktum att vi inte skapade några kolumner innan vi lade till widgeten borde inte oroa dig. Det borde inte heller det något enkla och tomma utseendet på widgeten innan det läggs till några bilder i galleriet.

Det här skulle vara ett bra tillfälle att påpeka att du förmodligen kommer att behöva gräva runt i några inställningar om du vill ha ditt bildgalleri i full bredd som det vi visar dig här. Som standard kan galleriet vara inrutat, vilket lämnar ett visst utrymme mellan galleriets kanter och sidans kanter. Det kan bero på vilket tema du använder och den layout du har valt.

Vi visar dig hur vi har ställt in vår layout och sektion så att galleriet tar upp hela skärmens bredd. Först, i sidinställningarna, kan du hitta layoutalternativen som låter dig välja den bredaste. I vårt fall, med Qi-temat, var det Qi Full-Width-alternativet. Om du använder ett annat tema, välj Elementor Full Width-mallen eller ett liknande alternativ som följer med ditt tema.

Medan valet av den här layouten gjorde sektionen fullbredd, förblev dess innehåll inramad. Så här såg det ut när vi gjorde vårt galleri.

För att fixa det behövde vi komma åt menyn Redigera sektion genom att trycka på mittknappen på toppen av sektionen, den som varken är ”+” för att lägga till en ny sektion eller ”x” för att ta bort den befintliga sektionen. I alternativen för redigeringsavsnittet valde vi Full Width för vår innehållsbredd istället för standardalternativet Boxed, och vi har ställt in alternativet Columns Gap till No Gap.

Det gjorde susen och gav oss bredast möjliga galleri utan några luckor. Du är välkommen att både lämna boxed setup eller välja olika alternativ för luckorna, naturligtvis – det är precis så vi gjorde när vi skapade exemplet.

Konfigurera bildgalleriet

Nu till den roliga delen – lägga till bilder och ställa in galleriet. På fliken Innehåll i Pinterest Bildgalleri ser du att de allmänna alternativen låter dig välja bilder. Genom att trycka på knappen för att skapa ett galleri kommer du till en meny där du kan välja bilder från ditt mediebibliotek eller ladda upp nya. Vi har valt ut tio bilder som redan fanns i vårt mediebibliotek.

När du har skapat det nya galleriet och infogat det i widgeten ser du hur ett standardgalleri ser ut. Eftersom vi har gjort breddinställningarna i förväg, var vår full bredd, och den kom i tre kolumner med lite mellanrum mellan föremålen.

Nästa sats med inställningar är där du kan göra några ganska viktiga ändringar i galleriet. Det första alternativet i galleriinställningarna låter dig till exempel välja om du vill aktivera anpassade länkar för bilderna. Om du gör det inaktiveras dock popup-alternativet för lightbox som standard. De andra alternativen du kan välja inkluderar antalet kolumner – som du kan ställa in så att de är olika för skärmar av olika storlek, utrymmet mellan objekten, svävningseffekten på bilden och överlagringsfärgerna för vanlig visning och vid hovring.

Vi aktiverade Lightbox-popupen eftersom det är ett mycket användbart alternativ att ha. Vi valde fem kolumner för vårt galleri, men vi gjorde en hel del justeringar i alternativen för Kolumner Responsive. För de två största skärmstorlekarna valde vi fem kolumner. För nästa satte vi den tre och följde upp den med en tvåa innan vi avslutade med två enkla kolumner. Vi ville använda det extra utrymmet som de större skärmarna erbjuder för att visa fler kolumner för en tilltalande estetisk effekt samtidigt som bilderna hölls tillräckligt stora. Att försöka göra detsamma med en mindre, smalare skärm skulle göra bilderna för små. Det är därför ju smalare skärm, desto färre kolumner använde vi. De kommer fortfarande att finnas där, bara under varandra, istället för bredvid varandra.

Vi har nollställt avståndet mellan objekten och vi har valt bilden för att zooma ut vid hovring med mitten som ursprunget för bildens svävningszoom. Vi valde att inte lägga till en överlagringsfärg, både vanlig och vid hovring, men lägg gärna till det om du vill piffa upp ditt galleri lite. Kom bara ihåg att lägga till en viss grad av transparens till vilken färg du väljer om du inte vill att den helt ska blockera bilderna i ditt galleri.

Den sista touchen vi använde var att ändra ordningen på bilderna. Om du navigerar tillbaka till de allmänna alternativen kan du redigera galleriet genom att klicka på Galleri-fönstret. Att bara flytta runt bilderna ändrar ordningen i vilken de visas på sidan. Efter att ha avslutat och satt in galleriet igen blev detta resultatet.

Låt oss avsluta det!

Beroende på ditt yrke och syftet med din webbplats kan bilder vara den viktigaste typen av innehåll du kan vara värd för. Det är därför du måste ha ett snabbt och enkelt sätt att skapa gallerier och visa dem. I den här artikeln har vi visat hur våra Qi-tillägg för Elementor-plugin kan ge det alternativet tack vare Pinterest Image Gallery-widgeten.