Kolommen maken in WordPress en Gutenberg

Kolommen maken in WordPress Gutenberg is met de standaard blokken lastig. Lees in deze handleiding hoe je wel eenvoudig kolommen kan maken in WordPress.

Kolommen zijn een geweldige manier om gegevens weer te geven in afzonderlijke, hanteerbare secties. De Spectra WordPress plugin is inmiddels meer dan 300.000 keer gedownload en brengt een flexibel Advanced Columns blok dat fungeert als een buitenste wikkel of balk. Deze balk maakt het mogelijk om hierbinnen elk Gutenberg blok toe te voegen. Dit blok biedt een buitenste hoofdsectie en een aantal binnenste kolommen. Je kunt zelf kolmmen maken en vervolgens elk Gutenberg blok binnen een kolomblok toevoegen. Zie de handleiding en de afbeeldingen hieronder.
Info Spectra Ultimate Addons voor Gutenberg WordPress plugin

Kolommen en kolombreedte

Het is handig om deze handleiding over kolommen en kolombreedte ook eens door te nemen om goed aan de slag te gaan. Het gaat over basisregels in design:

Handleiding Advanced Columns Gutenberg blok gebruiken

Het Advanced Columns Gutenberg blok is heel flexibel en opent een nieuwe mogelijkheid om complexe ontwerpen in de pagina te maken. Volg de stappen in de onderstaande handleiding om dit blok te gebruiken en om eenvoudig kolommen te maken. de afbeeldingen vind je hieronder.

• Installeer de gratis Spectra ultimate Addons voor Gutenberg WordPress plugin
• Selecteer een Advanced Columns-blok in de lijst van UAG-blokken via het plus-teken links bovenin.
• Kies uit de buitenste kolominstellingen een aantal kolommen, aan de rechterkant in het blok-specificaties veld.
• Stel de buitenste kolom in met achtergrondafbeelding, tussenruimte, vormverdelers en andere opties
• Bewerk elke kolom en beheer de breedte, de achtergrond, de tussenruimte, enz.

Je kunt Ultimate Addons voor Gutenberg WordPress plugin Section blokkeren binnen elke kolom om meer controle te hebben over de inhoud. De section zelf fungeert als een wrapper en biedt achtergrond- en spacing-opties.

---

Handleiding kolommen maken met Gutenberg blokken

Visueel ziet het er zo uit:

---

Belangrijkste tips en kenmerken Advanced Columns Gutenberg Add on module

• Een ouderkolom die zal fungeren als een buitenste meest enkele wikkel
• Optie om het aantal binnenste kolommen te kiezen (maximaal 6 )
• Pas de breedte aan voor elke kolom
• Afzonderlijke achtergrond- en afstandsopties voor buiten- en binnenkolommen
• Vormgevingsverdelers voor buitenste kolom
• Responsive ondersteuning

Een ouderkolom die zal fungeren als een buitenste wikkel

Het Advanced Columns-blok zorgt voor een buitenste hoofdwikkelaar die als een rij fungeert. Het maakt het mogelijk om een aantal binnenste kolommen toe te voegen. Hieronder staan de voordelen die de buitenste wikkelaar toevoegt –

• Optie om het aantal binnenste kolommen te kiezen (maximaal 6 )
• Containerbreedte – Binnenkolommen containerbreedte
• Kolom Gap – Het zal opvulling toevoegen voor elke kolom
• Tussenruimte – Vulling en Marge voor buitenomwikkeling
• Achtergrond – Achtergrond kan worden ingesteld als Kleur, Kleurverloop, Afbeelding of Video.
• Vormverdelers en rand

Pas de breedte aan voor elke kolom

Elke kolom heeft een instelling om de kolombreedte aan te passen. Zodra je een aantal kolommen uit de buitenste wikkelaar instelt, pas je de breedte van de afzonderlijke kolommen aan.

Aparte achtergrond- en afstandsopties voor buiten- en binnenkolommen

Zowel de buitenste als de binnenste kolommen bieden afzonderlijke opties voor opvulling, marge en achtergrond.

Vormverdelers voor buitenste kolom

Vormverdelers (engels: shape dividers) zijn een  mooie functie van Advanced Columns blok. Het biedt vormverdelers voor de buitenste wikkelkolom.Verdelers kunnen zowel aan de boven- als aan de onderkant van de kolom worden toegevoegd. Verschillende vormverdelers zijn beschikbaar, samen met kleur, hoogte enz.

Meer Gutenberg tips

Gutenberg is een krachtige tool die het gemakkelijk maakt om dynamische websites te maken. Eén van de coole functies in Gutenberg is het maken van templates of sjablonen met bestaande blokken.

Link voor gevorderden:
css-tricks.com/styling-the-gutenberg-columns-block

Kolommen maken met page builder

Je kan ook kolommen maken met page builder. Je werkt dan zonder de standaard WordPress Gutenberg editor. Je leert efficient werken met page builders tijdens een WordPress designcursus of WordPress Bootcamp. Dit zijn goede page builders:

• WP Beaver Builder training pagina’s bouwen met WP plugin
• Divi wordpress thema page builder review en test
• WP Bakery Builder WP Plugin Handleiding Nederlands

---

Cursus of training kolommen maken in WordPress

Tijdens een basiscursus leer je hoe je kolommen maken met de WordPress Gutenberg editor

• WordPress Pop-up Bootcamp spoedcursus op maat
• Cursus WordPress in Amsterdam
• Online WordPress cursus volgen op afstand vanuit huis

---

Meer handleidingen WordPress blokken

• WP Gutenberg templates sjablonen herbruikbare blokken
• Gutenberg blokken als widgets in footer WordPress 5.8
• Blokken panelen uitzetten Gutenberg WP Block Manager
• Kader blok maken over hele breedte browser container
• Zelf blokken maken Gutenberg WordPress-editor plugin
• Horizontale lijn maken regelscheidingsteken WordPress