Att dela en samling bilder på Divi är alltid ett utmärkt sätt att visuellt engagera användare med ditt innehåll. Med Divis Gallery-modul kan du skapa och organisera gallerier var som helst på din webbplats. Gallerimodulen på Divi Builder finns i rutnät och reglageformat och stöder stora gallerier med paginering.

Så här lägger du till en gallerimodul på din sida

Innan du kan lägga till en gallerimodul på din sida måste du först hoppa in i Divi Builder. När Divi-tema installerat på din webbplats kommer du att märka en knapp Använd Divi Builder ovanför inläggsredigeraren när du skapar en ny sida. Klicka på den här knappen för att aktivera Divi Builder och få tillgång till alla Divi Builder-moduler. Klicka sedan på knappen Använd Visual Builder för att starta generatorn i visuellt läge. Du kan också klicka på knappen Använd Visual Builder när du surfar på din webbplats i förgrunden om du är ansluten till din WordPress-instrumentpanel.

När du har angett Visual Builder kan du klicka på den grå plusknappen för att lägga till en ny modul på din sida. Nya moduler kan bara läggas till inom rader. Om du börjar en ny sida, kom ihåg att först lägga till en rad på din sida. Vi har bra handledning om hur du använder elementen i linjer och sektioner av Divi.

Leta upp gallerimodulen i listan över moduler och klicka på den för att lägga till den på din sida. Listan över moduler är sökbar, vilket innebär att du också kan skriva ordet "galleri" och sedan klicka på Enter för att automatiskt hitta och lägga till gallerimodulen! När modulen har lagts till hälsas du av listan över modulalternativ. Dessa alternativ är uppdelade i tre huvudgrupper: Innehåll , Conception et advanced .

Exempel på användningsfall: Lägga till ett bildgalleri i full bredd för att visa upp fotografiet.

Att lägga till ett galleri på din fotosida är ett bra sätt att främja ditt arbete och öka din trovärdighet hos kunderna. I det här exemplet ska jag visa dig hur du kan använda gallerimodulen för att lägga till ett bildgalleri med en rutnätslayout som spänner över hela sidans bredd. Bilderna har inget mellanrum mellan sig vilket ger den en praktisk och estetisk presentation.

Och låt oss inte glömma att varje bild öppnar en popup för att bläddra igenom de större versionerna av bilderna i galleriet.

Med Visual Builder lägger du till ett nytt avsnitt under rubriksektionen med en rad med fullbredd eller fullbredd (1 kolumn). Lägg sedan till gallerimodulen på raden.

Uppdatera inställningarna för Gallerimodulen på följande sätt:

Innehållsalternativ

Galleribilder: Klicka på det uppdaterade galleriet och välj de bilder du vill inkludera i galleriet. Antal bilder: 12 Visa titel och bildtext: NO Display Pagination: NO

Designalternativ

Layout: Rutnät Miniatyrorientering: Liggande Zoom-ikon Färg: #ffffff Färg på svävaren: rgba (0,0,0,0.48) Hover Icon Picker: standard

Spara inställningar

Nu återstår bara att bli av med allt utrymme runt bilderna. Gå tillbaka och välj radinställningar. Uppdatera följande på fliken Design:

Gör denna rad i full bredd: JA
Använd den anpassade rännbredden: JA
Rännbredd: 1

Det är viktigt att komma ihåg att det numeriska värdet "1" för rännbredden verkligen är noll (ingen bredd alls).

Spara inställningar

Det är allt!

Innehållsalternativ för gallerimodulen

På fliken innehåll hittar du alla innehållselement i modulen, till exempel text, bilder och ikoner. Allt som styr vad visas i din modul hittas alltid på den här fliken.

Bilder på galleriet

Klicka på knappen Uppdatera dag galleriet för att starta WordPress multimedia-bibliotek där du kan välja de bilder du vill visa i ditt galleri.

Antal bilder

Ställ in antalet bilder som ska visas per sida. När fler bilder än vad som är tillåtet på varje sida ingår i ditt galleri, visas sidbilden under bilderna.

Visa titel och bildtext:

Om en bildtitel eller bildtext har lagts till kommer de att visas under bilden i galleriet. Om du vill inaktivera dessa textelement kan du göra det med det här alternativet.

Visa paginering

När fler bilder än vad som är tillåtet på varje sida ingår i ditt galleri, visas sidbilden under bilderna. Om du vill ta bort sökning kan du stänga av den här inställningen.

Administratörsetikett

Detta ändrar moduletiketten i konstruktorn för enkel identifiering. När du använder vyn WireFrame i Visual Builder visas dessa etiketter i modulblocket i Divi Builder-gränssnittet.

Designmoduler för galleriemoduler

På fliken Design hittar du alla stilalternativ för modulen, som teckensnitt, färger, storlek och avstånd. Det här är fliken du använder för att ändra utseendet på din modul. Varje Divi-modul har en lång lista med designinställningar som du kan använda för att ändra vad som helst.

Disposition

Som standard visas gallerier som ett rutnät med bilder. Du kan också välja att visa ditt galleri som en bildreglage.

Miniatyrorientering

Du kan välja att ha bilderna från ditt galleri i stående eller liggande format. Om du ändrar läge kan du behöva regenerera miniatyrbilderna .

Zooma färgikon

När du håller muspekaren över ett objekt i Galleripod visas en överläggsikon. Du kan justera färgen som används från den här ikonen med hjälp av färgväljaren i den här inställningen.

Hover overlay-färg

När du håller muspekaren över ett objekt i Galleripoden visas en överläggsfärg längst upp på bilden och under portföljens titeltext och ikon. Som standard används en halvgenomskinlig vit färg. Om du vill använda en annan färg kan du justera färgen med hjälp av färgväljaren i den här inställningen

Ikon för översvämningsväljare (Hover)

Här kan du välja en anpassad ikon att visa när en besökare svävar över gallerobjekt i modulen.

Textfärg

Här kan du välja om din text ska vara ljus eller mörk. Om du arbetar med en mörk bakgrund bör din text vara ljus. Om din bakgrund är ljus bör din text vara mörk.

Titel typsnitt

Du kan ändra typsnittet i titeltexten genom att välja önskat typsnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi Open Sans-teckensnittet för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrykningsalternativ.

Teckensnittsstorlek

Här kan du justera storleken på din titeltext. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller direkt ange önskat textstorleksvärde i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Titeltextfärg

Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra textfärgen på din titel väljer du önskad färg från färgväljaren med det här alternativet.

Spacing av titelbokstäver

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i titeltexten, använd skjutreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om skjutreglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Höjd på titellinjen

Radhöjd påverkar utrymmet mellan varje rad i titeltexten. Om du vill öka utrymmet mellan varje rad, använd avståndsreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om markören. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Legend typsnitt

Du kan ändra typsnittet för din texttext genom att välja önskat typsnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi teckensnittet Open Sans för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrukna alternativ.

Bildtextstorlek

Här kan du justera storleken på din texttext. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller direkt ange önskat textstorleksvärde i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Förklaring textfärg

Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på din texttext väljer du önskad färg från färgväljaren med det här alternativet.

Avstånd mellan legendens bokstäver

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din texttext använder du avståndsreglaget för att justera utrymmet eller anger önskad avståndsstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Legendens linje

Radhöjd påverkar utrymmet mellan varje rad med texttext Om du vill öka utrymmet mellan varje rad, använd avståndsreglaget för att justera utrymmet eller ange önskad avståndsstorlek i inmatningsfältet till höger om markören. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Använd gränsen

Om du aktiverar det här alternativet placeras en kant runt din modul. Denna kant kan anpassas med följande villkorliga parametrar.

Färg på gränsen

Det här alternativet påverkar färgen på din kant. Välj en anpassad färg från färgväljaren för att tillämpa den på din kant.

Bredden av gränsen

Som standard är gränserna 1 pixel breda. Du kan öka detta värde genom att dra områdesreglaget eller ange ett anpassat värde i inmatningsfältet till höger om reglaget. Anpassade måttenheter stöds, vilket innebär att du kan ändra standardenheten från "px" till något annat som em, vh, vw etc.

Gränsstil

Gränser stöder åtta olika stilar: solid, prickad, prickad, dubbel, spår, ås, överlägg och start. Välj önskad stil i rullgardinsmenyn för att tillämpa den på din gräns.

Avancerade alternativ för gallerimodul

På den avancerade fliken hittar du alternativ som mer erfarna webbdesigners kan hitta användbara, till exempel anpassade CSS- och HTML-attribut. Här kan du använda anpassad CSS på något av modulens många element. Du kan också tillämpa anpassade CSS-klasser och ID på modulen, som kan användas för att anpassa modulen i ditt barns temas style.css-fil.

CSS ID

Ange ett valfritt CSS-ID som ska användas för den här modulen. Ett ID kan användas för att skapa en anpassad CSS-stil eller för att länka till vissa delar av din sida.

CSS klass

Ange de valfria CSS-klasserna som ska användas för den här modulen. En CSS-klass kan användas för att skapa anpassad CSS-styling. Du kan lägga till flera klasser, åtskilda av ett mellanslag. Dessa klasser kan användas i ditt Divi-underordnade tema eller i det anpassade CSS-stilarket som du lägger till på din sida eller på din webbplats med hjälp av Divi-temalternativ eller Divi Builder-sidinställningarna.

Anpassad CSS

Anpassad CSS kan också tillämpas på modulen och vilken modul som helst. I avsnittet Anpassad CSS hittar du ett textfält där du kan lägga till anpassade CSS-formatmallar direkt till varje element. CSS-poster i dessa inställningar är redan inslagna i stiltaggar. Så skriv bara in CSS-reglerna åtskilda av semikolon.

synlighet

Med det här alternativet kan du styra enheterna där din modul visas. Du kan välja att inaktivera din modul på surfplattor, smartphones eller stationära datorer individuellt. Detta är användbart om du vill använda olika mods på olika enheter, eller om du vill förenkla mobildesignen genom att eliminera vissa element från sidan.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”platt” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LADDA NED DIVI TEMA [/vcex_button][/vc_column 1 ][vc_column] /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LADDA NED DEN TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andra Divi tutorials

• 5 webbplatser för restaurang användning Divi tema
• Så här lägger du till text på en Divi WooCommerce-produkt
• Så här byter du menyfärg mellan Divi-sidor
• Hur du anpassar rutorna på en blogg med Divi
• Hur man använder roll Divi editor på Wordpress
• Hur man skapar en Divi-skjutreglage på full skärm
• Hur man ändrar menyens färg mellan Divi-sidor
• Funktioner du antagligen inte känner till Divi
• Så här använder du Divi Builder på WordPress
• Så här använder du Divi video-rullningsmodulen
• Så här använder du Divi Builder Flip-modulen
• Hur man lägger till en vittnesmodul om Divi Builder
• Så här använder du Divi-textmodulen
• Hur man skapar en reglage på Divi
• Hur man redigerar en Divi-användarroll
• Så här använder du Divi Social Media-modulen
• Hur man använder butikmodulen på temat WordPress Divi
• Så här använder du Divi sidebar-modulen
• Så här använder du Divi Price Table Module
• Hur man använder titelfodulen i Divi-publikationer
• Hur lägger jag till en videomodul av Divi
• Så här använder du artikelnavigationsmodulen
• Så här använder du Divi-sökmodulen
• Så här använder du Divi-plånboksmodulen
• Hur man använder personmodulen på Divi Builder
• Hur man använder plånboksmodulen med Divi-filter
• Hur man använder skjutreglaget med hela bredden
• Så här använder du Divi Builder Image Module
• Så här använder du Divi Builder med fullbredd navigationsmodul
• Hur man använder modulen för bildgalleri
• Så här använder du Divi Builder Full-Width Card Module
• Så här använder du Divi Full Width Portfolio Module
• Hur du använder Divi-modulen med full bredd
• Så här använder du Divi Counter Module
• Hur man använder artiklarna på Divi Builder
• Så här använder du Divi Email Optin-modulen