Visuele inhoud speelt een cruciale rol bij het trekken van de aandacht van online gebruikers. Wat een enkele afbeelding kan overbrengen, vergt vaak honderden woorden. Bovendien kunnen beelden emoties oproepen en de algehele esthetiek verbeteren.
Een effectieve manier om afbeeldingen te laten zien is door ze naast elkaar te plaatsen. Deze techniek is vooral handig bij het vergelijken van meerdere producten, het presenteren van voor en na afbeeldingen en het vertellen van een verhaal.
In dit artikel laten we je drie eenvoudige manieren zien om afbeeldingen naast elkaar te zetten in WordPress.
Maak prachtige tafels
Met blok-editor
Eerste methode: het Galerij-blok gebruiken
WordPress wordt geleverd met het standaard Galerij-blok. Je kunt afbeeldingen op de volgende manieren naast het blok presenteren.
Stap 01: Voeg het galerijblok toe aan WordPress
Open gewoon een bericht of pagina. Zoek de Galerij blok in de Gutenberg blokbibliotheek door op de knop plus (+) knop. Voeg het toe aan de editor.
Klik op de Uploadknop om nieuwe afbeeldingen van je lokale opslag aan de zijkant toe te voegen. Je kunt ze ook uploaden vanuit je bestaande bestanden door op de knop Mediatheek knop.
Voor deze tutorial uploaden we afbeeldingen vanuit de Mediabibliotheek. Selecteer de afbeeldingen die je wilt toevoegen. Klik op de knop Een nieuwe galerij maken knop aan het einde.
Zodra afbeeldingen zijn toegevoegd aan de editor, zie je ze naast elkaar verschijnen. Vervolgens kun je de instellingen en styliseringen van het Galerij-blok aanpassen met behulp van de respectieve opties op de rechter zijbalk.
Opmerking: Als je afbeeldingen standaard niet naast elkaar worden weergegeven, selecteer dan het hele blok door op de knop Pictogram galerij op de werkbalk. Geef de kolomnummers op in de rechter zijbalk.
Tweede methode: het blok Kolommen gebruiken
Met het blok Kolom kun je je inhoud in meerdere kolommen verdelen. Je kunt andere blokken toevoegen om verschillende soorten inhoud toe te voegen binnen elke kolom.
Stap 01: Het kolomblok toevoegen aan je site
Voeg de Kolom blok naar je editor op dezelfde manier als hierboven beschreven.
Selecteer de kolomindeling die je wilt. Je kunt een gelijk aantal afbeeldingen naast elkaar weergeven, overeenkomstig met het aantal kolommen dat je toevoegt. We hebben de lay-out met twee kolommen geselecteerd voor het blok.
Voeg de Beeldblok door op de plus (+) knop binnen de Kolom blok.
Upload een afbeelding op dezelfde manier als we je hierboven hebben laten zien.
Opmerking: Aangezien dit het blok Afbeelding is, kun je slechts één afbeelding toevoegenin tegenstelling tot het blok Galerij.
Voeg op dezelfde manier de Beeldblok weer naar de tweede kolom.
Je ziet dat de tweede afbeelding naast de eerste is verschenen. Je kunt nu één voor één alternatieve teksten en andere instellingen voor de afbeeldingen toevoegen.
Method Three: Using the Tableberg Block
Tafelberg is een invoegtoepassing voor het maken van tabellen op basis van blokken. Je kunt er ook kolommen mee maken en afbeeldingen naast elkaar weergeven. Volg de onderstaande stappen na installeren en activeren de plugin.
Stap 01: het TableBerg-blok toevoegen
De plugin wordt geleverd met een TabelBerg blok. Voeg het toe aan uw editor.
Je kunt meerdere rijen selecteren als je dat wilt. Maar we leggen de tutorial van vandaag uit met een enkele rij en meerdere kolommen.
Met TableBerg kun je verschillende soorten blokken toevoegen aan de cellen van de tabel. Voeg de Beeldblok naar de tabelcellen.
Een afbeelding uploaden naar de tabelcel op dezelfde manier als in de twee bovenstaande methodes.
Blijf afbeeldingen toevoegen aan andere kolommen van de tabel met behulp van de Beeldblok. Ik hoop dat je het alleen kunt.
Zie de afbeelding hieronder. We hebben drie afbeeldingen naast elkaar weergegeven in de tabel die is gemaakt met het TableBerg-blok.
# Verwijder de tabelrand
Je ziet een rand rond de tabel. Om deze te verwijderen, klik op het TableBerg-pictogram drie keer op de werkbalk. Ga naar Tabblad Stijlen > Rand op de rechterzijbalk. Zet de waarde nul (0) om de grootte van de tabelrand te definiëren.
Zo kun je afbeeldingen naast elkaar weergeven op WordPress websites.
Conclusie
Afbeeldingen naast elkaar tonen is zeer voordelig, terwijl een visuele vergelijking tussen verschillende producten, opties, functies en variaties essentieel is. Hopelijk kun je het vandaag alleen met deze tutorial.
Je kunt meer doen op je site door verschillende soorten tabellen te maken met de TableBerg plugin. Kijk eens naar hoe maak je een Amazon productvergelijkingstabel in WordPress.
