Maak een prachtige galerijpagina met behulp van de DIVI Gallery-module

5 min


127

Voordat we aan deze tutorial beginnen, laten we eerst enkele voorbeelden laten zien van prachtige galerijen gemaakt met de DIVI-galeriemodule:

Grijstinten naar Color Divi Gallery
Divi-galerij over de volledige breedte
Aangepaste opvulling Divi-galerij
Custom Border Divi Gallery

Heeft u ervaring met het ontvangen van verzoeken van klanten om de lay-out van de Divi Gallery Module aan te passen aan hun specificaties? Of wil je je galerijpagina boeiender maken?

galerij saai

We hadden onlangs een verzoek van een klant om dit te doen, dus we spelen wat met Gallery Module en besloten om er een fragment voor te maken.

Over de Divi Gallery-module

De Divi Gallery-module van de Divi Page Builder is een widget voor het maken van verbluffende en mooie galerijen op uw website. Het meest opvallende ontwerpelement is de mogelijkheid om uw afbeeldingen in een rasterlay-out te rangschikken en rasterafstanden te creëren. Gebaseerd op de officiële Divi Gallery-documentatie , wordt het geleverd met ten minste 30+ ontwerpopties, zoals aangepaste CSS, randkleur, ondertitelingstekst en tal van animaties.

Aan de slag 
De Divi-galeriemodule ziet er standaard als volgt uit:

galerij saai

Het heeft het standaardformaat dat iedereen gebruikt, wat saai is. Soms hebben we ontwerpen nodig die ingewikkeld zijn of iets dat zich onderscheidt van andere galerijen. Zoals deze:

Galeriestijl 1

galerij-pagina-1
galerij-pagina-2


Galeriestijl 2

Galeriestijl 3

Galeriestijl 4

galerij-pagina-4

Een ander alternatief voor het maken hiervan is het gebruik van Paginabuilder-kolommen. Er zijn echter enkele nadelen:

  1. De lightbox Vorige en Volgende functie werken niet.
  2. Je hebt meer moeite nodig om CSS aan te passen en te spelen met opvullingen en marges om het nauwkeurig te passen.
  3. Mogelijk moet u alle afbeeldingen aanpassen om de exacte formaten te hebben.
  4. Divi Gallery Module is gemakkelijker te gebruiken.

Instructies

In deze tutorial gaan we de bovenstaande ontwerpen maken met CSS-stijlen. We hebben een fragment gemaakt dat u kunt kopiëren en op uw DIVI-websites kunt plakken. Best makkelijk!

STAP 1: Bereid uw foto’s en ontwerpelementen voor

In deze stap moet u het gewenste ontwerp bepalen en uw foto’s voorbereiden. Op de 4 voorbeeldlay-outs is er een ander aantal afbeeldingen om op te nemen.

  • Voor Galerij 1 heeft u een veelvoud van 5 afbeeldingen nodig
  • Voor Galerij 2 heeft u een veelvoud van 8 afbeeldingen nodig
  • Voor Galerij 3 heeft u een veelvoud van 8 afbeeldingen nodig
  • Voor Galerij 4 heeft u een veelvoud van 8 afbeeldingen nodig

STAP 2: Maak uw galerij

1. Maak uw Divi-galerij door naar uw pagina te gaan en Visual Builder in te schakelen.

2. Klik op de module “Galerij”.

galerij-nieuw

3. Selecteer de foto’s uit de mediabibliotheek en voer het aantal foto’s in dat u wilt weergeven.

instellingen-inhoud-1

4. Schik de afbeeldingen volgens uw specificaties en klik op het pictogram Controleren (rechtsonder).

STAP 3: Gebruik de juiste instellingen

We gaan het tabblad Inhoud en ontwerp bewerken.

instellingen-inhoud-1

Dit zijn de instellingen:

A. Kolominstellingen:

1. Ontwerptabblad

  • Gebruik aangepaste gootbreedte: JA
  • Gootbreedte: 1
kolom1

B. Galerij-instellingen: 
1. Tabblad Inhoud

  • Titel en bijschrift tonen : NO
  • Toon paginering : NO

2. Ontwerptabblad

  • Indeling : GRID
  • Thumbnail Orientation : Landscape

NOTITIE:

Je kunt spelen met de instellingen zoals Hover-kleur en pictogram

STAP 4: Kopieer en plak deze code in uw CSS

.et_pb_gallery_image.landscape img {breedte: 100%; }
/ ******************************************* /
.et_pb_gallery_item: n-kind (n + 1): n-kind (oneven) {
zweven: links;
}
.et_pb_gallery_item: nth-child (n + 1): nth-child (even) {
zweven: rechts;
}
.et_pb_gallery_item: n-kind (5n + 1) {
breedte: 50%! belangrijk;
}
.et_pb_gallery_item {
duidelijk: erven! belangrijk;
}
.et_pb_gallery_grid .et_pb_gallery_image {
overloop verborgen;
positie: relatief;
}
.et_pb_gallery_grid .et_pb_gallery_items .et_pb_gallery_item.et_pb_grid_item {
opvulling: 0,5%;
}

OPMERKING : deze css is alleen voor Gallery 1 en heeft een standaardklasse, dus als je de andere stijl wilt gebruiken waaraan een aangepaste “class” of “ID” is toegewezen voor de galeriemodule, voeg dan de klasse of ID toe aan de gegeven css .

U heeft 2 mogelijkheden:

1. Plak het in Custom CSS op de pagina

2. Plak het op DIVI-thema-opties of CSS-stijl.

BELANGRIJKE OPMERKING : u moet een specifieke id aan uw galerij toevoegen, dus niet alle galerijen worden op de hele site beïnvloed.

Voeg # gallery-foods Bijvoorbeeld: 
CSS voor de Galerij 1

# gallery-foods .et_pb_gallery_image.landscape img {
breedte: 100%;
}
/ ******************************************* /
# gallery-foods .et_pb_gallery_item: nth-child (n + 1): nth-child (oneven) {
zweven: links;
}
# gallery-foods .et_pb_gallery_item: nth-child (n + 1): nth-child (even) {
zweven: rechts;
}
# gallery-foods .et_pb_gallery_item: nth-child (5n + 1) {
breedte: 50%! belangrijk;
}
# gallery-foods .et_pb_gallery_item {
duidelijk: erven! belangrijk;
}
# galerij-voedingsmiddelen .et_pb_gallery_grid .et_pb_gallery_image {
overloop verborgen;
positie: relatief;
}
# gallery-foods .et_pb_gallery_grid .et_pb_gallery_items .et_pb_gallery_item.et_pb_grid_item {
opvulling: 0,5%;
}

Voeg # gallery-foods-2 toe Bijvoorbeeld: 
CSS voor de Gallery 2

# gallery-foods-2 .et_pb_gallery_image.landscape img {
breedte: 100%;
}
/ ******************************************* /
# gallery-foods-2 .et_pb_gallery_item: nth-child (10n + 1) {
breedte: 50%! belangrijk;
}
# gallery-foods-2 .et_pb_gallery_item: nth-child (10n + 2) {
breedte: 50%! belangrijk;
}
# galerie-voedingsmiddelen-2 .et_pb_gallery_item {
duidelijk: erven! belangrijk;
}
# gallery-foods-2 .et_pb_gallery_grid .et_pb_gallery_image {
overloop verborgen; positie: relatief;
}

# galerie-voedingsmiddelen-2 .et_pb_gallery_grid .et_pb_gallery_items .et_pb_gallery_item.et_pb_grid_item {
opvulling: 0,5%;
}

Voeg # gallery-foods-3 toe Bijvoorbeeld: 
CSS voor de Gallery 3

# gallery-foods-3 .et_pb_gallery_image.landscape img {
breedte: 100%;
}
/ ******************************************* /
# gallery-foods-3 .et_pb_gallery_item: nth-child (8n + 1) {
breedte: 75%! belangrijk;
}
# gallery-foods-3 .et_pb_gallery_item: nth-child (n + 6): nth-child (oneven) {
zweven: rechts;
}
# gallery-foods-3 .et_pb_gallery_item: nth-child (n + 6): nth-child (even) {
zweven: rechts;
}
# gallery-foods-3 .et_pb_gallery_item: nth-child (17n + 17) {
float: left! belangrijk;
}
# gallery-foods-3 .et_pb_gallery_item {
duidelijk: erven! belangrijk;
}
# gallery-foods-3 .et_pb_gallery_grid .et_pb_gallery_image {
overloop verborgen; positie: relatief;
}

# galerie-voedingsmiddelen-3 .et_pb_gallery_grid .et_pb_gallery_items .et_pb_gallery_item.et_pb_grid_item {
opvulling: 0,5%;
}

Voeg # gallery-foods-4 toe Bijvoorbeeld: 
CSS voor de Gallery 4

# gallery-foods-4 .et_pb_gallery_image.landscape img {
breedte: 100%;
}

/ ******************************************* /
# gallery-foods-4 .et_pb_gallery_item: nth-child (8n + 1) {
breedte: 75%! belangrijk;
}
# gallery-foods-4 .et_pb_gallery_item: nth-child (n + 6): nth-child (oneven) {
/ * zweven: rechts; * /
}
# gallery-foods-4 .et_pb_gallery_item: nth-child (n + 6): nth-child (even) {
/ * zweven: rechts; * /
}
# galerie-voedingsmiddelen-4 .et_pb_gallery_item {
duidelijk: erven! belangrijk;
}
# gallery-foods-4 .et_pb_gallery_grid .et_pb_gallery_image {
overloop verborgen; positie: relatief;
}

# galerie-voedingsmiddelen-4 .et_pb_gallery_grid .et_pb_gallery_items .et_pb_gallery_item.et_pb_grid_item {
opvulling: 0,5%;
}

STAP 5: Kopieer en plak deze functie om een ​​grotere foto weer te geven

Dit is om de standaard miniatuurgrootte van uw galerij te verwijderen.

functie my_et_pb_gallery_image_size ($ size) {
terug 603;
}
add_filter ('et_pb_gallery_image_width', 'my_et_pb_gallery_image_size');

functie my_et_pb_gallery_image_size_height ($ size) {
terug 603;
}
add_filter ('et_pb_gallery_image_height', 'my_et_pb_gallery_image_size_height');

functie my_et_theme_image_sizes ($ maten) {
$ maten ['603x603'] = 'mijn-et-pb-post-hoofdafbeelding';
$ maten teruggeven;
}
add_filter ('et_theme_image_sizes', 'my_et_theme_image_sizes');

What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format