De WordPress Afbeeldingsblok is super handig bij het invoegen en tonen van een enkele afbeelding op je website. Als je echter meerdere foto's tegelijk wilt weergeven, is het Galerij-blok de juiste keuze.
Daarom moet je leren hoe je het galerijblok in WordPress gebruikt. Zodra je de functies van het galerijblok onder de knie hebt, kun je het gebruiken om de visuals van je website te verbeteren, waardoor deze professioneler en aantrekkelijker wordt.
Vandaag bespreken we in deze tutorial het WordPress galerijblok, de functies van de werkbalk, de aanpassingsmogelijkheden en hoe je het goed kunt gebruiken. Volg ons van begin tot eind.
Wat is het WordPress Galerij Blok?
Het WordPress Galerij blok is een kernblok in de WordPress-blokkeneditor. Hiermee kunt u een verzameling afbeeldingen maken en weergeven in een rooster indeling. Het is perfect voor het weergeven van evenementenfoto's, het organiseren van afbeeldingen in een aantrekkelijke lay-out, of het presenteren van afbeeldingen met minimale inspanning.
Als je het blok gebruikt, profiteer je van bepaalde functies. Bekijk deze functies hieronder.
- Aanpassing: Pas kolommen, ruimte en bijschriften aan aan je ontwerp. Je kunt ook verschillende resoluties instellen voor individuele afbeeldingen in de galerij.
- Responsief ontwerp: Afbeeldingen passen zich automatisch aan verschillende schermformaten aan voor een naadloze ervaring op mobiel, tablet en desktop.
- Ingebouwde integratie: Je hebt geen extra plugins nodig; het blok werkt rechtstreeks in WordPress.
- SEO-vriendelijkAlt-tekst en bijschriften kunnen de toegankelijkheid en zoekmachineoptimalisatie van uw content verbeteren. U kunt ook alt-tekst instellen voor afzonderlijke afbeeldingen binnen de galerij.
Werkbalkfuncties van het galerijblok
Wanneer je het galerijblok invoegt, verschijnt er een werkbalk bovenaan het galerijblok met verschillende functies om je galerij aan te passen. Deze functies vindt u hieronder.
- Transformeren: Je kunt dit blok transformeren in een blok Afbeelding, Kolommen, Details en Groep.
- Slepen: Hiermee kunt u het speciale blok naar elke gewenste plaats in de editor slepen.
- Bewegende handgreep: Laat je blok op en neer bewegen.
- Uitlijnen: Met de uitlijningsoptie kun je de uitlijning van de afbeelding instellen op Geen, Breedte, Volledige breedte, Links, Midden en Rechts.
- Link: Met deze optie kun je links toevoegen voor geselecteerde inhoud binnen het blok.
- Bijschrift: Je kunt bijschriften toevoegen met de editoroptie voor elke afbeelding.
- Toevoegen: Met de optie Toevoegen kun je nieuwe afbeeldingen toevoegen of uploaden naar de galerij.
- Meer opties: Biedt meer opties met betrekking tot de sectie van het blok, zoals dupliceren, kopiëren, groeperen, enz.
Het galerieblok gebruiken in WordPress
Het gebruik van het Galerij-blok in WordPress is eenvoudig. Volg gewoon de onderstaande stappen:
Stap 1: Galerijblok toevoegen in de editor
Open het bericht of de pagina, klik op het pictogram "+" om een blok toe te voegen en zoek naar "Galerij". Selecteer het Galerij-blok om het in je bericht of pagina in te voegen.
Stap 2: Upload je afbeeldingen
Je kunt je afbeeldingen uploaden of je afbeeldingen selecteren in de mediabibliotheek.
Hoe afbeeldingen invoegen via de Uploadoptie
Klik op de knop uploaden om afbeeldingsbestanden in te voegen, selecteer je afbeeldingen met je cursor terwijl de CTRL-toets ingedrukt houden van je toetsenbord en klik op openen. Dat is het. Je kunt je afbeeldingen zien in de editor.
Hoe een afbeelding invoegen via de optie Mediabibliotheek
Klik op de knop Mediabibliotheek, selecteer je afbeeldingen en klik op de knop Een nieuwe galerij maken en Galerij invoegen om de afbeeldingen in de editor in te voegen.
Als je alle afbeeldingen in de galerij hebt geplaatst, zie je alle werkbalkfuncties van het afbeeldingsblok. Je kunt deze functies bekijken hier.
Stap 3: Galerij aanpassen
Ga voor galerijaanpassingen naar Instellingen (1) > Blokkeren (2) > Instellingen (3). Je vindt de opties om kolommen, resolutie en andere opties te selecteren.
- Kolommen: Met kolommen kun je bepalen hoeveel afbeeldingen je wilt weergeven in je editor. Hoe meer afbeeldingen je toevoegt, hoe meer kolommen er worden toegevoegd aan de Galerij. (4)
- Resolutie: Je kunt de afbeeldingsresolutie instellen op Miniatuur en Volledig formaat. (5)
- Afbeeldingen passend maken: Deze functie handhaaft de verhouding van elke afbeelding en zorgt ervoor dat het formaat past.
- Willekeurige volgorde: Deze functie houdt de serie niet bij, maar geeft beelden weer met een willekeurige serie.
De optie Styles heeft de volgende opties.
- Kleur: Met de optie Kleur kun je de achtergrondkleur van je galerijblok wijzigen.
- Afmetingen: Met de optie Dimensions kun je de Block spacing (ruimte tussen twee blokken zoals afbeeldingen), margin en padding aanpassen.
- Rand & Straal: Met deze functie kun je een rand, randkleur en randradius aan je galerij toevoegen.
Hier is de volledige demo van de galerij die ik heb gemaakt.
Maak een interactieve galerij met Galleryberg
Hoewel het standaard Galerijblok uitstekend is voor eenvoudige rasters, ontbreken functies zoals een lightbox, hover-effecten en diverse lay-outs.
Als je een boeiendere galerij wilt zonder code te schrijven, de Galerijberg plugin is een gratis alternatief dat de blokbewerker uitbreidt met extra hulpmiddelen. Hiermee kun je schakelen tussen tegel-, metselwerk-, uitgelijnde en vierkante indelingen, en wordt een ingebouwde lightbox toegevoegd voor zoomen en navigatie.
Galleryberg bevat bovendien subtiele hover-effecten en responsieve besturingselementen, zodat uw galerijen modern aanvoelen op zowel desktop als mobiel.
Laten we nu eens kijken hoe je de Galleryberg-plugin gebruikt.
Stap 1: Installeer de Galleryberg-plugin
Ga naar je WordPress-dashboard, navigeer naar Plug-ins → Nieuwe toevoegen en zoek naar Galleryberg. Installeer en activeer vervolgens de plug-in.
Stap 2: Voeg het Galleryberg-galerieblok in
Maak een nieuw bericht of een nieuwe pagina aan of bewerk een bestaande. Klik op de knop “+”, zoek naar Galleryberg en voeg het blok toe.
Stap 3: Voeg uw afbeeldingen toe
Upload nieuwe afbeeldingen of selecteer ze uit de mediabibliotheek en klik op Selecteren.
Stap 4: Kies een lay-out
Standaard gebruikt het blok een Tegel-indeling. In de zijbalk van het blok kun je overschakelen naar Metselwerk, Gerechtvaardigdof Vierkant om beter aan te sluiten bij uw ontwerp.
Elke indeling rangschikt de afbeeldingen automatisch opnieuw, en je kunt de kolommen, de tussenruimte en de randen aanpassen.
Stap 5: Schakel de lightbox in
Schakelen Lightbox inschakelen in de blokinstellingen om bezoekers op een afbeelding te laten klikken en deze te bekijken in een pop-up met zoom- en swipenavigatie.
De lightbox is voorzien van toetsenbord- en aanraakbediening, zodat deze soepel werkt op desktops en telefoons.
Stap 5: Verken hover-effecten en bijschriften
Gebruik de bijschrift-instellingen om tekst onder afbeeldingen weer te geven of als een overlay die verschijnt bij muisaanwijzing. De animaties van Galleryberg (in-/uitzoomen en overlays) zorgen ervoor dat de galerij interactief aanvoelt zonder af te leiden
Stap 6: Voorbeeld bekijken en publiceren
Wanneer u tevreden bent, kunt u een voorbeeld van uw galerij bekijken en het bericht publiceren of bijwerken. Uw galerij is responsief en prestatiegeoptimaliseerd dankzij server-side rendering.
Waarom Galleryberg gebruiken in plaats van het kernblok?
Het standaard Galerij-blok biedt eenvoudige rasterindelingen, maar mist functies zoals een lightbox, hover-animaties en gevarieerde indelingen. Galleryberg biedt vier verschillende galerijstijlen, een responsieve lightbox met zoom- en toetsenbordnavigatie, en intuïtieve bedieningselementen voor spatiëring, kleuren en onderschriften. Het ondersteunt zelfs responsieve hover-effecten om subtiele animaties toe te voegen. Als u een galerij nodig hebt die bezoekers aanmoedigt om met uw afbeeldingen te wisselwerkingen en naadloos aansluit bij de blokeditor, is Galleryberg een lichtgewicht, gebruiksvriendelijke oplossing.
Laatste gedachten!
Het Galerij-blok is een krachtig hulpmiddel met de Gutenberg-blokeditor. Hiermee kun je je afbeeldingencollecties weergeven zonder extra plugins.
Het is een uitstekende keuze voor iedereen vanwege de flexibiliteit, aanpassingsmogelijkheden en naadloze integratie met WordPress.
Probeer het uit en zie hoe het de manier waarop je afbeeldingen op je website laat zien kan veranderen.
Laat me weten wat je van de tutorial vindt in het commentaargedeelte hieronder. Laat het ook je medemensen weten via je sociale media.
Lees meer!
