Deling af en samling billeder på Divi er altid en fantastisk måde at visuelt engagere brugere med dit indhold. Divis Gallery-modul giver dig mulighed for at oprette og organisere gallerier hvor som helst på dit websted. Gallerimodulet på Divi Builder er tilgængeligt i gitter- og skyderformat og understøtter store gallerier med paginering.
Sådan føjes et gallerimodul til din side
Før du kan tilføje et gallerimodul til din side, skal du først hoppe ind i Divi Builder. En gang Divi-tema installeret på din hjemmeside, vil du bemærke en knap Brug Divi Builder over indlægseditoren, når du opretter en ny side. Klik på denne knap for at aktivere Divi Builder og få adgang til alle Divi Builder-modulerne. Klik derefter på knappen Brug Visual Builder for at starte generatoren i visuel tilstand. Du kan også klikke på knappen Brug Visual Builder når du gennemser dit websted i forgrunden, hvis du er tilsluttet dit WordPress-dashboard.
Når du har indtastet Visual Builder, kan du klikke på den grå plus-knap for at tilføje et nyt modul til din side. Nye moduler kan kun tilføjes inden for rækker. Hvis du starter en ny side, skal du huske at føje en række til din side først. Vi har gode tutorials om brug af elementerne i linjer og sektioner af Divi.
Find gallerimodulet på listen over moduler, og klik på det for at føje det til din side. Listen over moduler er søgbar, hvilket betyder at du også kan skrive ordet "galleri" og derefter klikke på enter for automatisk at finde og tilføje gallerimodulet! Når modulet er tilføjet, vil du blive mødt af listen over modulindstillinger. Disse muligheder er opdelt i tre hovedgrupper: Indhold , Conception et avanceret .
Eksempel på brugssag: Tilføjelse af et billedgalleri i fuld bredde for at fremvise fotografiet.
Tilføjelse af et galleri til din fotoside er en fantastisk måde at fremme dit arbejde og øge din troværdighed hos kunderne. I dette eksempel vil jeg vise dig, hvordan du kan bruge gallerimodulet til at tilføje et billedgalleri med et gitterlayout, der spænder over hele sidens bredde. Billederne har ingen mellemrum mellem dem, hvilket giver det en praktisk og æstetisk præsentation.
Og lad os ikke glemme, at hvert billede åbner en popup til at bladre gennem de større versioner af billederne i galleriet.
Brug Visual Builder til at tilføje et nyt afsnit under overskriftsafsnittet med en række i fuld bredde eller fuld bredde (1 kolonne). Føj derefter gallerimodulet til rækken.
Opdater Galleri-modulindstillingerne som følger:
Indholdsindstillinger
Galleribilleder: Klik på det opdaterede galleri, og vælg de billeder, du vil medtage i galleriet. Antal billeder: 12 Vis titel og billedtekst: NO Display Pagination: NO
Design muligheder
Layout: Gitter Miniaturorientering: Liggende Zoom-ikon Farve: #ffffff Farve på svæver-svæver: rgba (0,0,0,0.48) Hover-ikonvælger: standard
Gem indstillinger
Nu er alt, hvad der er tilbage at gøre, at slippe af med al plads omkring billederne. Gå tilbage og vælg rækkeindstillinger. Opdater følgende på fanen Design:
Lav denne række i fuld bredde: JA
Brug den tilpassede tagrendebredde: YES
Tagrendebredde: 1
Det er vigtigt at huske, at den numeriske værdi "1" for tagrendebredden virkelig er nul (slet ingen bredde).
Gem indstillinger
Det er alt!
Indholdsvalg i Galleri-modulet
I fanen indhold finder du alle modulets indholdselementer, såsom tekst, billeder og ikoner. Alt det der styrer hvad vises i dit modul vil altid findes på denne fane.
Billeder af galleriet
Klik på knappen Opdater dag galleriet for at starte WordPress multimediebibliotek, hvor du kan vælge de billeder, du vil vise i dit galleri.
Antal billeder
Indstil antallet af billeder, der skal vises pr. Side. Når flere billeder end det, der er tilladt på hver side, er inkluderet i dit galleri, vises sideinddelingen under billederne.
Vis titel og billedtekst:
Hvis en billedtitel eller billedtekst er tilføjet, vises de under billedet i galleriet. Hvis du vil deaktivere disse tekstelementer, kan du gøre det ved hjælp af denne mulighed.
Se pagination
Når flere billeder end det, der er tilladt på hver side, er inkluderet i dit galleri, vises sideinddelingen under billederne. Hvis du vil fjerne personsøgning, kan du deaktivere denne indstilling.
Administratormærke
Dette vil ændre moduletiketten i konstruktøren for nem identifikation. Når du bruger WireFrame-visningen i Visual Builder, vises disse etiketter i modulblokken i Divi Builder-grænsefladen.
Designmoduler for galleriemoduler
Under fanen Design finder du alle indstillingerne for modulstyling, såsom skrifttyper, farver, størrelse og afstand. Dette er den fane, du vil bruge til at ændre udseendet på dit modul. Hvert Divi-modul har en lang liste over designindstillinger, som du kan bruge til at ændre alt.
Disposition
Som standard vises gallerier som et gitter med billeder. Du kan også vælge at få vist dit galleri som en billedskyder.
Thumbnail orientering
Du kan vælge at have billederne fra dit galleri i stående eller liggende format. Hvis du ændrer tilstanden, skal du muligvis regenerere dine miniaturer .
Zoom farveikon
Når du holder markøren over et element i Galleri-pod'en, vises et overlay-ikon. Du kan justere den anvendte farve fra dette ikon ved hjælp af farvevælgeren i denne indstilling.
Hover overlay farve
Når du holder markøren over et element i Galleri-pod'en, vises en overlayfarve øverst på billedet og under porteføljetitelteksten og -ikonet. Som standard bruges en semi-gennemsigtig hvid farve. Hvis du vil bruge en anden farve, kan du justere farven ved hjælp af farvevælgeren i denne indstilling
Ikon for oversvømmelsesvælger (markør)
Her kan du vælge et brugerdefineret ikon, der skal vises, når en besøgende svæver over galleriposter i modulet.
Tekstfarve
Her kan du vælge, om din tekst skal være lys eller mørk. Hvis du arbejder på en mørk baggrund, skal din tekst være lys. Hvis din baggrund er lys, skal din tekst være mørk.
Titel skrifttype
Du kan ændre skrifttypen på din titeltekst ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, stor bogstav og understregningsmuligheder.
Titel skriftstørrelse
Her kan du justere størrelsen på din titeltekst. Du kan trække skyderen for rækkevidde for at øge eller formindske størrelsen på din tekst eller direkte indtaste værdien for den ønskede tekststørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Titel tekst farve
Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre tekstfarven på din titel, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.
Spacing af titel breve
Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din titeltekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede mellemstørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Højde på titellinjen
Linjehøjde påvirker afstanden mellem hver linje i din titeltekst. Hvis du vil øge afstanden mellem hver linje, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand i afstanden placeret til højre for markøren. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Sagnfont
Du kan ændre skrifttypen på din billedtekst ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, hovedstad og understregningsmuligheder.
Billedtekststørrelse
Her kan du justere størrelsen på din billedtekst. Du kan trække områdeskyderen for at øge eller formindske størrelsen på din tekst eller direkte indtaste den ønskede tekststørrelsesværdi i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Tekstfarve på forklaringen
Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre farven på din billedtekst, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.
Afstand mellem legenderens bogstaver
Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge afstanden mellem hvert bogstav i din billedtekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede mellemstørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Højden på sagnets linje
Rækkehøjde påvirker mellemrummet mellem hver linje med billedtekst. Hvis du vil øge afstanden mellem hver linje, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand i afstanden til højre for markøren. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Brug grænsen
Aktivering af denne mulighed placerer en kant omkring dit modul. Denne kant kan tilpasses ved hjælp af følgende betingede parametre.
Farve på grænsen
Denne indstilling påvirker farven på din kant. Vælg en brugerdefineret farve fra farvevælgeren for at anvende den på din kant.
Bredden af grænsen
Som standard er kanterne 1 pixel brede. Du kan øge denne værdi ved at trække områdeskyderen eller indtaste en brugerdefineret værdi i indtastningsfeltet til højre for skyderen. Understøttede brugerdefinerede måleenheder, hvilket betyder at du kan ændre standardenheden fra "px" til noget andet som em, vh, vw osv.
Border Style
Grænser understøtter otte forskellige stilarter: solidt, prikket, prikket, dobbelt, rille, ryg, overlay og start. Vælg din ønskede stil i rullemenuen for at anvende den på din kant.
Avancerede gallerimodulindstillinger
På den avancerede fane finder du muligheder, som mere erfarne webdesignere måske finder nyttige, såsom tilpassede CSS- og HTML-attributter. Her kan du anvende brugerdefineret CSS på ethvert af modulets mange elementer. Du kan også anvende tilpassede CSS-klasser og ID'er til modulet, som kan bruges til at tilpasse modulet i dit barns temas style.css-fil.
CSS ID
Indtast et valgfrit CSS-ID, der skal bruges til dette modul. Et ID kan bruges til at oprette en brugerdefineret CSS-stil eller til at linke til bestemte sektioner på din side.
CSS klasse
Indtast de valgfri CSS-klasser, der skal bruges til dette modul. En CSS-klasse kan bruges til at oprette brugerdefineret CSS-styling. Du kan tilføje flere klasser adskilt af et mellemrum. Disse klasser kan bruges i dit Divi-underordnede tema eller i det brugerdefinerede CSS-stilark, som du føjer til din side eller til dit websted ved hjælp af Divi-temaindstillingerne eller Divi Builder-sideindstillingerne.
Tilpasset CSS
Brugerdefineret CSS kan også anvendes på modulet og ethvert af modulets interner. I sektionen Custom CSS finder du et tekstfelt, hvor du kan tilføje tilpassede CSS-stilark direkte til hvert element. CSS-poster i disse indstillinger er allerede pakket i typografikoder. Så indtast bare CSS-reglerne adskilt af semikolon.
synlighed
Denne mulighed giver dig mulighed for at kontrollere de enheder, som dit modul vises på. Du kan vælge at deaktivere dit modul på tablets, smartphones eller desktops individuelt. Dette er nyttigt, hvis du vil bruge forskellige mods på forskellige enheder, eller hvis du vil forenkle mobildesignet ved at fjerne visse elementer fra siden.
[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=”flad” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD 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”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Andre Divi tutorials
- 5 websteder, der bruger Divi restaurant tema
- Sådan tilføjer du tekst på et Divi WooCommerce-produkt
- Sådan ændres menuen farve mellem Divi sider
- Sådan tilpasses tavlerne på en blog med Divi
- Sådan bruges rolle Divi redaktør på WordPress
- Sådan opretter du en Divi-skyder på fuld skærm
- Sådan ændres menuenes farve mellem Divi-sider
- Funktioner, som du sandsynligvis ikke kender til Divi
- Sådan bruger du Divi Builder på WordPress
- Sådan bruges Divi-video-rullemodulet
- Sådan bruges Divi Builder Flip-modulet
- Sådan tilføjes et vidnesbyrdsmodul om Divi Builder
- Sådan bruges Divi-tekstmodulet
- Sådan opretter du en skyder på Divi
- Sådan redigeres en Divi-brugerrolle
- Sådan bruges Divi Social Media-modulet
- Sådan bruges butikmodulet med temaet WordPress Divi
- Sådan bruges Divi sidebar modul
- Sådan bruges Divi Price Table Module
- Sådan bruges titelmodulet i Divi-publikationer
- Sådan tilføjes et videomodul til Divi
- Sådan bruges artikelnavigationsmodulet
- Sådan bruges Divi-søgemodulet
- Sådan bruges Divi wallet-modulet
- Sådan bruges personmodulet på Divi Builder
- Sådan bruges tegnebogen modulet med Divi filter
- Sådan bruges glidemodulet i fuld bredde
- Sådan bruges Divi Builder Image Module
- Sådan bruger du navigationsmodulet med fuld bredde i Divi Builder
- Sådan bruges billedgallerimodulet
- Sådan bruges Divi Builder Fuldbredde-kortmodul
- Sådan bruges Divi Full Width Portfolio Module
- Sådan bruges Divi-modulet i fuld bredde
- Sådan bruges Divi Counter Module
- Sådan bruges artikelskyderen på Divi Builder
- Sådan bruges Divi Email Optin-modulet
Hej, galleriet, det ser interessant ud. Når det er sagt, hvordan vælger jeg mine billeder tilfældigt fra en given gruppe? Jeg søger at erstatte en html/php-side på mit websted til kun at have wp/divi. En ide ? php-injektion... andet... På forhånd tak. Adressen på mit websted nedenfor, et klik på et miniaturebillede vender tilbage til denne html/php-side, som jeg taler om. Et klik på et billede af html/php-diasshowet for at vende tilbage til thumbnails (wordpress-siden). Og så videre, diasshow-billederne gemmes i en database med en kode, der begrænser det tilfældige valgfelt til 5, fornyet hver gang.
At have på et andet WP-websted injiceret kode til at vælge information direkte i WP-databasen, husker jeg, at det ikke var nemt, før det virkede... Tak for dit websted!
God aften,
Jeg søger at centrere billeder i forskellige størrelser lodret i et DIVI-galleri.
Uanset hvor meget jeg kigger, kan jeg ikke finde det. Har du et tip??
Merci d'avance.
Cdt
Hej, men hvordan kan jeg have 5 billeder på samme linje?
Jeg kan ikke have mere end 4!
Merci.
Hej,
Du skal bruge et plugin som Visual Composer eller Elementor. De tilbyder flere muligheder.
Hej, jeg finder dine artikler meget interessante.
Jeg oprettede et galleri under Divi efter dit råd, og alt fungerer fint, bortset fra at jeg ikke ved, hvordan jeg skal fjerne det højre museklik for at forhindre lagring under mine billeder. Har du løsningen tak på forhånd. hjerteligt
God aften Bernard,
For at blokere højre klik skal du installere et plugin. Jeg inviterer dig til at gøre en søgning i WordPress-biblioteket.