In deze tutorial vind je informatie over:<\/p>\n\n\n\n
- Wat is het doel van kolommen<\/a><\/li>
- Hoe kolommen werkten in de oude editor<\/a><\/li>
- Hoe maak je kolommen in WordPress zonder plugin (in blok editor)<\/a><\/li>
- Basisinstellingen blok Kolommen<\/a><\/li>
- Hoe werken met WordPress Kolommen blok<\/a><\/li>
- Hoe geneste blokken bewerken<\/a><\/li>
- Kolommen blok voordelen<\/a><\/li><\/ul>\n\n\n\n
<\/span><\/a>Wat is het doel van kolommen<\/span><\/h3>\n\n\n\n
Kolommen op een website kunnen meerdere toepassingen hebben. Ten eerste kunnen ze inhoud overzichtelijker, leesbaarder en gemakkelijker te doorbladeren maken. Door inhoud in kolommen te organiseren kun je belangrijke informatie of parameters markeren.<\/p>\n\n\n\n
Je kunt bijvoorbeeld een lay-out met meerdere kolommen gebruiken om je diensten te presenteren. Voeg een illustratieve afbeelding, beschrijving of knop toe. Je kunt afbeeldingen natuurlijk klikbaar maken.<\/p>\n\n\n\n
![\"Meerkolomslay-out](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-services.png\")
<\/a>Meer-koloms layout met diensten<\/figcaption><\/figure><\/div>\n\n\n\n Net als bij diensten kun je in WordPress kolommen gebruiken om producten of productcategorie\u00ebn weer te geven. Het is ideaal als je een eenvoudige zakelijke website hebt.<\/p>\n\n\n\n
![\"Meer-koloms](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-shop-cat.png\")
<\/a>Kolommen voor producten en categorie\u00ebn<\/figcaption><\/figure><\/div>\n\n\n\n In blogberichten kun je kolommen gebruiken om inhoud te scheiden. Je kunt tekst, opsommingstekens of afbeeldingen naast elkaar plaatsen.<\/p>\n\n\n\n
![\"Gescheiden](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-post-example.png\")
<\/a>Kolommen gebruiken om inhoud te scheiden<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>Hoe kolommen werkten in de oude editor<\/span><\/h3>\n\n\n\n
Voor WordPress 5+ moest je tabellen gebruiken als je inhoud met meerdere kolommen wilde maken. Dat was veel moeilijker dan in de nieuwste editor. Bovendien was er meestal een probleem met stijlen en het weergeven van tabellen op mobiele apparaten. Hoe werkte het vroeger?<\/p>\n\n\n\n
Je hebt meerdere opties gehad om kolommen te maken in een WordPress website:<\/p>\n\n\n\n
1. HTML-code handmatig invoegen in een teksteditor<\/b><\/p>\n\n\n\n
<table>\n <tr>\n <td><\/td>\n <td><\/td>\n <\/tr>\n<\/table><\/pre>\n\n\n\n
Deze aanpak werd vooral gebruikt door ontwikkelaars, die snel een tabel of kolom konden maken op basis van hun vereisten. Nadeel was dat niet alle WordPress thema's goed overweg konden met kolommen. Tabellen waren meestal niet perfect en de gemiddelde gebruiker kon niet gemakkelijk alle mogelijke problemen oplossen.<\/p>\n\n\n\n
2. Tabellen toestaan in WordPress editor<\/b><\/p>\n\n\n\n
Omdat WordPress TinyMCE editor gebruikte, was het mogelijk om functies toe te staan om tabellen te bewerken. Als je meer wilt weten, kun je alle details vinden in dit forum<\/a>. Als u hetzelfde doet voor onze AIT-thema's, zullen tabellen correct werken.<\/p>\n\n\n\n
3. Kolom-element gebruiken in AIT-thema's<\/b><\/p>\n\n\n\n
Als je een van onze oudere WordPress thema's gebruikt, ken je ongetwijfeld ons Columns element. Dit element kan worden gebruikt om kolommen toe te voegen aan pagina's. Het is een bestelbaar element, wat betekent dat je het overal kunt plaatsen waar je het nodig hebt. Voordeel is dat het variabel is binnen pagina's.<\/p>\n\n\n\n
![\"Kolommen](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/ait-columns-element.png\")
<\/a>Bestelbare elementkolommen - u kunt deze gebruiken in elk AIT-thema<\/figcaption><\/figure><\/div>\n\n\n\n 4. Plugin van derden downloaden om tabellen te beheren<\/b><\/p>\n\n\n\n
Een andere oplossing voor het maken van kolommen in WordPress berichten en pagina's was het downloaden van een van de beschikbare plugins voor het maken van tabellen. Met deze plugins kun je met een paar klikken kolommen\/tabellen toevoegen zonder enige codering. Ook minder ervaren gebruikers kunnen deze plugins gebruiken.<\/p>\n\n\n\n
<\/span><\/a>Hoe maak je kolommen in WordPress zonder plugin (in blok editor)<\/span><\/h3>\n\n\n\n
Dankzij de nieuwe blok-editor is het maken van kolommen heel eenvoudig geworden. Als je nog steeds de oude WordPress gebruikt, is het nu het juiste moment om te updaten naar de nieuwste versie. Je kunt kolommen eenvoudig toevoegen en beheren met een paar klikken met het blok Kolommen.<\/p>\n\n\n\n
Dit blok is een welkome verandering voor iedereen die met inhoud met meerdere kolommen wil werken, producten wil presenteren of een blog wil schrijven en geen ervaring heeft met programmeren.<\/p>\n\n\n\n
Laten we eens kijken hoe je kolommen kunt toevoegen en hoe je kolommen kunt maken in WordPress zonder plugin:<\/p>\n\n\n\n
- De eerste optie is om op \"+\" te klikken in de bovenste balk en het blok Kolommen te selecteren uit de beschikbare blokken.<\/li>
- De tweede optie is om ergens in de editor op \"+\" te klikken.\n<\/li><\/ul>\n\n\n\n
![\"Kolommen](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-add.png\")
<\/a>Kolommen toevoegen in WordPress door op \"+\" te klikken<\/figcaption><\/figure><\/div>\n\n\n\n ![\"Kolommenblok](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-shortcut.gif\")
<\/a>Kolommen toevoegen in WordPress met schuine streep \"\/\"<\/figcaption><\/figure><\/div>\n\n\n\n <\/span>Voorgedefinieerde lay-outs van het WordPress Kolommenblok (NIEUW vanaf WP 5.3)<\/span><\/h4>\n\n\n\n
De nieuwste versie bracht enorme verbeteringen in de kolominstellingen. Allereerst zijn er standaard lay-outstijlen beschikbaar. Wat betekent dit?<\/p>\n\n\n\n
Gebruikers kunnen hun lay-out en uitlijnstijl kiezen tijdens het toevoegen van een nieuw blok aan het inhoudsgebied. Vooraf gedefinieerde lay-outs kunnen erg handig zijn - vooral voor gebruikers die geen geavanceerde WordPress-vaardigheden hebben. Deze functie geeft weer hoe we ons voorstellen hoe je kolommen kunt maken in WordPress (zonder plugin of andere add-on).<\/p>\n\n\n\n
![\"Vooraf](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/wordpress-columns.jpg\")
Vooraf gedefinieerde lay-outopties<\/figcaption><\/figure>\n\n\n\n <\/span><\/p>\n\n\n\n
Als je geen voorgedefinieerde lay-out wilt kiezen in het WordPress Kolommen blok, sla deze dan gewoon over. Als je deze stap overslaat, wordt de inhoud gescheiden in 2 dezelfde delen\/ twee afzonderlijke kolommen die kunnen worden bewerkt.<\/p>\n\n\n\n
![\"Aangemaakt](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns.png\")
<\/a>Kolommenblok met 2 standaardgebieden (kolommen) die je kunt bewerken<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>Kolommen Blok basisinstellingen<\/span><\/h4>\n\n\n\n
WordPress Kolommen blok zelf heeft niet veel opties. Waarom dat zo is, leggen we later uit. In de bovenste balk kun je de uitlijning veranderen in breed of volledig breed. Je kunt deze uitlijning wijzigen als het wordt ondersteund door je actieve thema.<\/p>\n\n\n\n
![\"Bovenste](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-toolbar.png\")
<\/a>Werkbalk bovenaan met uitlijningsopties<\/figcaption><\/figure><\/div>\n\n\n\n De belangrijkste instelling van het blok Kolommen is het aantal kolommen in de zijbalk van de inspecteur aan de rechterkant. Standaard zijn er 2 kolommen, maar je kunt dit aantal verhogen tot 6. Je kunt dit veranderen met de muis of door een getal in te voeren. Hoe het eruitziet, zie je meteen na het verhogen of verlagen van kolommen. Het blok verandert zichzelf dynamisch afhankelijk van de schuifregelaar.<\/p>\n\n\n\n
![\"Aantal](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-count.gif\")
<\/a>Beweeg met de schuifregelaar om het aantal kolommen naar wens te wijzigen<\/figcaption><\/figure><\/div>\n\n\n\n Het is erg praktisch omdat je het aantal kolommen letterlijk in een paar seconden kunt wijzigen zonder moeilijke veranderingen aan instellingen of codering.<\/p>\n\n\n\n
Net als bij andere blokken in de WordPress editor, kun je ook in het Kolommen blok CSS Klassen invoegen.<\/p>\n\n\n\n
<\/span>Blok appender voor soepeler werken met blokken<\/span><\/h4>\n\n\n\n
Kolommenblokken zijn speciaal omdat je er meerdere blokken mee kunt maken. Totdat de nieuwe versie uitkwam, was het vrij lastig om met individuele blokken te werken. Als je een blok wilde toevoegen, wist je niet precies waar je moest klikken. Dankzij Block appender (en het onderscheid door achtergrondkleur) is het gemakkelijker om inhoud aan de juiste kolom toe te voegen.<\/p>\n\n\n\n
![\"Blokkeer](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/wp-columns-block-appender.jpg\")
Blokkeer appender met achtergrondkleur<\/figcaption><\/figure>\n\n\n\n <\/span><\/a>Hoe werken met WordPress Kolommen Blok<\/span><\/h3>\n\n\n\n
Het mooie van het Kolommen-blok is dat elke kolom andere blokken kan nesten. Het kan een alinea, een afbeeldingsblok of een knoppenblok zijn. Het maximale aantal kolommen is 6, dus je kunt naar wens inhoud met meerdere kolommen maken. Zoals eerder vermeld, kun je om producten te presenteren productafbeelding, naam, prijs en knop naast elkaar toevoegen.<\/p>\n\n\n\n
![\"Verschillende](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-blocks.png\")
<\/a>Met het blok Kolommen kun je verschillende soorten inhoud naast elkaar presenteren<\/figcaption><\/figure><\/div>\n\n\n\n Je kunt ook meerdere kolomblokken onder elkaar gebruiken om een raster te maken. Je kunt het gebruiken om je diensten te presenteren of om belangrijke functies te promoten.<\/p>\n\n\n\n
![\"Kolommen](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-features.png\")
<\/a>Rastereffect van onder elkaar geplaatste kolommenblokken<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>Geneste blokken bewerken<\/span><\/h4>\n\n\n\n
Zoals we al hebben vermeld, kun je andere blokken binnen kolommen nesten. Elk genest blok heeft al zijn instellingen beschikbaar. Dat betekent dat als je het blok Afbeelding toevoegt aan een kolom, je het op precies dezelfde manier kunt bewerken als in een zelfstandige kolom Beeldblok<\/a>.<\/p>\n\n\n\n
![\"Afbeeldingsblok](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-image-block.png\")
<\/a>Beschikbare instellingen voor Afbeelding-blok genest in Kolommen-blok<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>Conclusie: Kolommen blok voordelen<\/span><\/h3>\n\n\n\n
Het vrijgeven van de WordPress blok editor en de mogelijkheid om kolommen te gebruiken in pagina's en berichten heeft de manier waarop gebruikers met inhoud kunnen werken aanzienlijk vereenvoudigd. Dankzij het WordPress Kolommenblok is het niet langer belangrijk om oplossingen van derden te gebruiken of HTML-code te schrijven. Kolommen toevoegen of verwijderen kan met een paar klikken. Alles is zeer intu\u00eftief en snel, ook voor minder technische gebruikers.<\/p>\n\n\n\n
Je inhoud in een lay-out met meerdere kolommen wordt netjes uitgelijnd in een raster. Het ziet er ook meteen goed uit in de responsieve versie.<\/p>\n\n\n\n
We hebben hard gewerkt aan het nieuwe Citadela WordPress thema, dat speciaal is ontwikkeld voor WordPress block editor. Meer informatie over Citadela thema en beschikbare lay-out pakketten.<\/p>\n
\n\nInhoudsopgave<\/p>\n<\/span><\/div>\n
- Hoe kolommen werkten in de oude editor<\/a><\/li>