Het delen van een verzameling afbeeldingen op Divi is altijd een geweldige manier om gebruikers visueel te betrekken bij uw inhoud. Met Divi's Gallery-module kunt u overal op uw website galerijen maken en organiseren. De galeriemodule op Divi Builder is beschikbaar in raster- en schuifregelaarformaat en ondersteunt grote galerijen met paginering.
Een galerijmodule toevoegen aan uw pagina
Voordat u een galerijmodule aan uw pagina kunt toevoegen, moet u eerst in de Divi Builder springen. Zodra de Divi-thema geïnstalleerd op uw website, ziet u een knop Gebruik Divi Builder boven de berichteditor wanneer u een nieuwe pagina maakt. Klik op deze knop om Divi Builder te activeren en toegang te krijgen tot alle Divi Builder-modules. Klik vervolgens op de knop Gebruik Visual Builder om de generator in visuele modus te starten. U kunt ook op de knop klikken Gebruik Visual Builder wanneer u door uw website op de voorgrond bladert en u bent verbonden met uw WordPress-dashboard.
Nadat u Visual Builder heeft geopend, kunt u op de grijze plusknop klikken om een nieuwe module aan uw pagina toe te voegen. Nieuwe modules kunnen alleen binnen rijen worden toegevoegd. Als u een nieuwe pagina begint, vergeet dan niet om eerst een rij aan uw pagina toe te voegen. We hebben geweldige tutorials over het gebruik van de elementen van lignes en secties door Divi.
Zoek de galeriemodule in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De lijst met modules is doorzoekbaar, wat betekent dat u ook het woord "galerij" kunt typen en vervolgens op enter kunt klikken om de galeriemodule automatisch te zoeken en toe te voegen! Zodra de module is toegevoegd, wordt u begroet door de lijst met moduleopties. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerpfase et vergevorderd .
Gebruiksvoorbeeld: een afbeeldingengalerij over de volledige breedte toevoegen om de foto te laten zien.
Het toevoegen van een galerij aan uw fotografiepagina is een geweldige manier om dat te doen bevorderen uw werk en vergroot uw geloofwaardigheid bij klanten. In dit voorbeeld laat ik u zien hoe u de galerijmodule kunt gebruiken om een afbeeldingengalerij toe te voegen met een rasterindeling die de volledige breedte van de pagina beslaat. Er zit geen ruimte tussen de afbeeldingen, waardoor het een praktische en esthetische presentatie krijgt.
En laten we niet vergeten dat elke afbeelding een pop-up opent om door de grotere versies van de afbeeldingen in de galerij te bladeren.
Voeg met Visual Builder een nieuwe sectie toe onder de koptekstsectie met een rij over de volledige breedte of de volledige breedte (1 kolom). Voeg vervolgens de Galerij-module toe aan de rij.
Werk de instellingen van de Gallery-module als volgt bij:
Inhoud opties
Galerijafbeeldingen: klik op de bijgewerkte galerij en selecteer de afbeeldingen die u in de galerij wilt opnemen. Aantal afbeeldingen: 12 Displaytitel en bijschrift: NO Displaypaginatie: NO
Ontwerpopties
Lay-out: Raster Miniatuurstand: Landschap Zoompictogram Kleur: #ffffff Kleur van hover hover: rgba (0,0,0,0.48) Hover Icon Picker: standaard
Instellingen opslaan
Nu hoeft u alleen nog maar alle ruimte rond de afbeeldingen te verwijderen. Ga terug en selecteer rij-instellingen. Werk op het tabblad Ontwerp het volgende bij:
Maak deze rij over de volle breedte: JA
Gebruik de aangepaste gootbreedte: JA
Dakgootbreedte: 1
Het is belangrijk om te onthouden dat de numerieke waarde "1" voor de gootbreedte eigenlijk nul is (helemaal geen breedte).
Instellingen opslaan
Dat is het!
Inhoudsopties van de galeriemodule
Op het inhoudstabblad vind je alle inhoudselementen van de module, zoals tekst, afbeeldingen en iconen. Dat alles controleert wat verschijnt in uw module, vindt u altijd op dit tabblad.
Foto's van de galerij
Klik op de Update-knop dag de galerij om de WordPress multimediabibliotheek te starten waar u de afbeeldingen kunt kiezen die u in uw galerij wilt weergeven.
Aantal afbeeldingen
Stel het aantal afbeeldingen in dat per pagina moet worden weergegeven. Als er meer afbeeldingen in uw galerij zijn dan toegestaan op elke pagina, wordt de paginering onder de afbeeldingen weergegeven.
Titel en bijschrift weergeven:
Als er een afbeeldingstitel of bijschrift is toegevoegd, verschijnen deze onder de afbeelding in de galerij. Als u deze tekstelementen wilt uitschakelen, kunt u dat doen met deze optie.
Paginering bekijken
Als er meer afbeeldingen in uw galerij zijn dan toegestaan op elke pagina, wordt de paginering onder de afbeeldingen weergegeven. Als u paging wilt verwijderen, kunt u deze instelling uitschakelen.
Beheerderslabel
Hierdoor wordt het modulelabel in de constructor gewijzigd voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok van de Divi Builder-interface.
Galerij module ontwerpopties
Op het tabblad Ontwerpen vindt u alle stijlopties voor de module, zoals lettertypen, kleuren, grootte en spatiëring. Dit is het tabblad dat u gaat gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om alles te wijzigen.
Aanleg
Galerijen worden standaard weergegeven als een raster met afbeeldingen. U kunt er ook voor kiezen om uw galerij weer te geven als een afbeeldingsschuifregelaar.
Thumbnail oriëntatie
U kunt ervoor kiezen om de afbeeldingen uit uw galerij in staand of liggend formaat te hebben. Als u de modus wijzigt, moet u dit wellicht doen regenereer uw miniaturen .
Zoom kleur pictogram
Wanneer u de muisaanwijzer over een item in de galerijpod beweegt, wordt een overlaypictogram weergegeven. U kunt de gebruikte kleur van dit pictogram aanpassen met de kleurkiezer in deze instelling.
Beweeg de overlay-kleur
Wanneer u de muisaanwijzer over een item in de Galerij-pod beweegt, verschijnt er een overlay-kleur boven aan de afbeelding en onder de titeltekst en het pictogram van de portfolio. Standaard wordt een semi-transparante witte kleur gebruikt. Als je een andere kleur wilt gebruiken, kun je de kleur aanpassen met de kleurkiezer in deze instelling
Overvliegselectorpictogram (aanwijzer)
Hier kunt u een aangepast pictogram kiezen dat wordt weergegeven wanneer een bezoeker met de muis over galerij-items in de module zweeft.
Tekstkleur
Hier kunt u kiezen of uw tekst licht of donker moet zijn. Als u op een donkere achtergrond werkt, moet uw tekst licht zijn. Als uw achtergrond licht is, moet uw tekst donker zijn.
Titel lettertype
U kunt het lettertype van uw titeltekst wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.
Titel lettergrootte
Hier kunt u de grootte van uw titeltekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Titel tekstkleur
Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de tekstkleur van uw titel wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurkiezer.
Afstand van titelletters
Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw titeltekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Hoogte van de titelregel
Regelhoogte is van invloed op de ruimte tussen elke regel van uw titeltekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld in rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Legende lettertype
U kunt het lettertype van uw bijschrifttekst wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.
Legenda lettergrootte
Hier kunt u de grootte van uw bijschrifttekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen of rechtstreeks de gewenste waarde voor de tekstgrootte invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Tekstkleur legenda
Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de kleur van uw bijschrifttekst wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurkiezer.
Spatiëring van de letters van de legende
Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw bijschrifttekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Hoogte van de lijn van de legende
Rijhoogte is van invloed op de ruimte tussen elke regel met bijschrifttekst.Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld in. rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Gebruik de rand
Als u deze optie inschakelt, wordt er een rand rond uw module geplaatst. Deze rand kan worden aangepast met behulp van de volgende voorwaardelijke parameters.
Kleur van de rand
Deze optie heeft invloed op de kleur van uw rand. Selecteer een aangepaste kleur uit de kleurkiezer om deze op uw rand toe te passen.
Breedte van de rand
Standaard zijn de randen 1 pixel breed. U kunt deze waarde verhogen door de bereikschuifregelaar te slepen of een aangepaste waarde in het invoerveld rechts van de schuifregelaar in te voeren. Aangepaste maateenheden worden ondersteund, wat betekent dat u de standaardeenheid kunt wijzigen van "px" in iets anders zoals em, vh, vw enz.
Border Style
Randen ondersteunen acht verschillende stijlen: effen, gestippeld, gestippeld, dubbel, groef, rand, overlay en start. Selecteer de gewenste stijl in het vervolgkeuzemenu om deze op uw rand toe te passen.
Geavanceerde opties voor galerijmodules
Op het tabblad Geavanceerd vindt u opties die meer ervaren webontwerpers nuttig kunnen vinden, zoals aangepaste CSS- en HTML-kenmerken. Hier kunt u aangepaste CSS toepassen op elk van de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID's op de module toepassen, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw child-thema.
CSS ID
Voer een optionele CSS-ID in om voor deze module te gebruiken. Een ID kan worden gebruikt om een aangepaste CSS-stijl te maken of om naar bepaalde secties van uw pagina te linken.
CSS-klasse
Voer de optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om een aangepaste CSS-stijl te maken. U kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze klassen kunnen worden gebruikt in uw Divi-child-thema of in de aangepaste CSS-stylesheet die u aan uw pagina of aan uw website toevoegt met behulp van de Divi-thema-opties of de instellingen op de Divi Builder-pagina.
Aangepaste CSS
Aangepaste CSS kan ook worden toegepast op de module en elk van de interne onderdelen van de module. In de sectie Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS-stijlpagina's rechtstreeks aan elk element kunt toevoegen. CSS-vermeldingen in deze instellingen zijn al verpakt in stijltags. Voer dus gewoon de CSS-regels in, gescheiden door puntkomma's.
zichtbaarheid
Met deze optie kunt u de apparaten bedienen waarop uw module verschijnt. U kunt ervoor kiezen om uw module afzonderlijk op tablets, smartphones of desktops te deactiveren. Dit is handig als u verschillende mods op verschillende apparaten wilt gebruiken, of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.
[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=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI THEMA [/vcex_button][/vc_column][vc_column width=” 1 /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 DE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Andere Divi-zelfstudies
- 5 websites voor restaurant gebruik Divi thema
- Tekst toevoegen aan een Divi WooCommerce-product
- Hoe de menukleur tussen Divi-pagina's te veranderen
- Hoe de rasters van een blog personaliseren met Divi
- Hoe de rol Divi editor op WordPress
- Een Divi-schuifregelaar op volledig scherm maken
- Hoe de kleur van menu's tussen Divi-pagina's te veranderen
- Functies die u waarschijnlijk niet kent over Divi
- Divi Builder gebruiken op WordPress
- Hoe de Divi-scrolmodule video te gebruiken
- Hoe de Divi Builder Flip-module te gebruiken
- Hoe een getuigenismodule op Divi Builder toe te voegen
- Hoe de Divi-tekstmodule te gebruiken
- Hoe maak je een schuifregelaar op Divi
- Hoe u een Divi-gebruikersrol kunt bewerken
- Hoe de Divi Social Media-module te gebruiken
- Hoe de shopmodule te gebruiken met het thema WordPress Divi
- Hoe de Divi zijbalkmodule te gebruiken
- Hoe de Divi Price Table-module te gebruiken
- Hoe de titelmodule van Divi-publicaties te gebruiken
- Hoe een videomodule van Divi toe te voegen
- Hoe de artikelnavigatiemodule te gebruiken
- Hoe de Divi-zoekmodule te gebruiken
- Hoe de Divi wallet-module te gebruiken
- Hoe de persoonsmodule op Divi Builder te gebruiken
- De walletmodule gebruiken met Divi-filter
- De schuifregelaarmodule op de volledige breedte gebruiken
- Hoe de Divi Builder-beeldmodule te gebruiken
- De navigatiemodule op de volledige breedte van Divi Builder gebruiken
- Hoe de afbeeldingengalerij-module te gebruiken
- Hoe de Divi Builder kaartmodule met volledige breedte te gebruiken
- Hoe de Divi Full Width Portfolio Module te gebruiken
- Hoe de Divi header-module over de volle breedte te gebruiken
- Hoe de Divi Counter-module te gebruiken
- De schuifregelaar voor artikelen gebruiken in Divi Builder
- Hoe de Divi Email Optin-module te gebruiken
Hallo, de galerijoptie, het ziet er interessant uit. Dat gezegd hebbende, hoe selecteer ik mijn afbeeldingen willekeurig uit een bepaalde groep? Ik ben op zoek naar een html/php-pagina op mijn site om alleen wp/divi te hebben. Een idee ? php-injectie ... andere ... Bij voorbaat dank. Adres van mijn site hieronder, een klik op een miniatuur keert terug naar deze html/php-pagina waarover ik spreek. Een klik op een afbeelding van de html/php-diavoorstelling om terug te keren naar de miniaturen (Wordpress-pagina). En zo verder, de afbeeldingen van de diavoorstelling worden opgeslagen in een database, met een code die het veld voor willekeurige selectie beperkt tot 5, elke keer vernieuwd.
Om op een andere WP-site code te laten injecteren om informatie rechtstreeks in de WP-database te selecteren, herinner ik me dat het niet gemakkelijk was voordat het werkte ... Bedankt voor je site!
Bonsoir,
Ik wil afbeeldingen van verschillende grootte verticaal centreren in een DIVI-galerij.
Hoe ik ook zoek, ik kan het niet vinden. Heb je een tip??
Dank u bij voorbaat.
Cdt
Hallo, maar hoe kan ik 5 afbeeldingen op dezelfde regel krijgen?
Ik kan er niet meer dan 4 hebben!
Merci.
Hallo,
U moet een plug-in gebruiken zoals Visual Composer of Elementor. Ze bieden meer mogelijkheden.
Hallo, ik vind je artikelen erg interessant.
Ik heb een galerij gemaakt onder Divi door uw advies op te volgen en alles werkt goed, behalve dat ik niet weet hoe ik de rechtermuisknop moet verwijderen om te voorkomen dat ik onder mijn afbeeldingen opslaat. Heb je de oplossing, bij voorbaat dank. Met vriendelijke groeten
Goedenavond Bernard,
Om de rechterklik te blokkeren, moet u een plug-in installeren. Ik nodig u uit om een zoekopdracht uit te voeren in de directory van WordPress.