{"id":22110,"date":"2022-04-04T14:51:00","date_gmt":"2022-04-04T12:51:00","guid":{"rendered":"https:\/\/www.combell.com\/nl\/blog\/?p=22110"},"modified":"2023-09-04T10:55:32","modified_gmt":"2023-09-04T08:55:32","slug":"zelf-wordpress-website-maken","status":"publish","type":"post","link":"https:\/\/www.combell.com\/nl\/blog\/zelf-wordpress-website-maken\/","title":{"rendered":"Hoe zelf een WordPress-website maken? De ultieme startersgids!"},"content":{"rendered":"<p><strong>Jij wil een <a href=\"https:\/\/www.combell.com\/nl\/hosting\/wordpress-webhosting\">WordPress<\/a>-website maken. Goed idee! Maar zoals met alles: eraan beginnen is geen evidentie. Nochtans had iedereen je verteld hoe makkelijk een eigen WordPress-website maken is. \u2018Doe gewoon dat en klik daar en installeer <em>wiedewup<\/em> op de <em>huppeldepup<\/em>, en je bent klaar!\u2019.<\/strong><\/p>\n<p>Al goed en wel, maar alle begin is moeilijk. Misschien vraag je je nu nog af waar je je moet inloggen. We begrijpen je. Echt waar! Intussen hebben we zelf al jaren ervaring met WordPress, maar ook bij ons was het zo.<\/p>\n<p>We kunnen je niet beloven dat je meteen een expert wordt \u2013 oefening baart WordPress-kunst - maar we nemen je w\u00e9l stap voor stap mee op WordPress-site -kamp, in een taal die makkelijk te begrijpen is. Zo kan je in geen tijd een website maken met WordPress.<\/p>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-bfd82782     \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t><\/p>\n<div class=\"uagb-toc__wrap\">\n<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\t<strong>Inhoudsopgave<\/strong>\t\t\t\t\t\t\t\t\t\t\t\t\t<svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox= \"0 0 384 512\"><path d=\"M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z\"><\/path><\/svg>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n<div class=\"uagb-toc__list-wrap\">\n<ol class=\"uagb-toc__list\">\n<li class=\"uagb-toc__list\"><a href=\"#wat-zal-je-leren\">Wat zal je leren?<\/a><\/li>\n<li class=\"uagb-toc__list\"><a href=\"#hoofdstuk-1-de-allereerste-stappen\">Hoofdstuk 1: De allereerste stappen\u00a0<\/a><\/li>\n<ul class=\"uagb-toc__list\">\n<li class=\"uagb-toc__list\"><a href=\"#wat-is-wordpress\">Wat is WordPress?<\/a><\/li>\n<li class=\"uagb-toc__list\"><a href=\"#de-installatie-van-wordpress-in-n-klik\">De installatie van WordPress in \u00e9\u00e9n klik<\/a><\/li>\n<li class=\"uagb-toc__list\"><a href=\"#wordpress-installeren\">WordPress installeren<\/a><\/li>\n<li class=\"uagb-toc__list\"><a href=\"#en-nu-wordpress-installeren\">En nu: WordPress installeren<\/a><\/li>\n<li class=\"uagb-toc__list\"><a href=\"#het-wordpress-controlepaneel\">Het WordPress-controlepaneel<\/a><\/li>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"uagb-toc__list\"><a href=\"#hoofstuk-2-soort-website\">Hoofstuk 2: Soort website<\/a><\/li>\n<ul class=\"uagb-toc__list\">\n<li class=\"uagb-toc__list\"><a href=\"#wordpress-blog-maken\">WordPress-blog maken<\/a><\/li>\n<li class=\"uagb-toc__list\"><a href=\"#seo-opties-op-je-blog-wordpress-zorgt-ervoor\">SEO-opties op je blog? WordPress zorgt ervoor<\/a><\/li>\n<li class=\"uagb-toc__list\"><a href=\"#een-digitaal-portfolio\">Een digitaal portfolio<\/a><\/li>\n<li class=\"uagb-toc__list\"><a href=\"#structuur-en-inhoud-van-de-site\">Structuur en inhoud van de site<\/a><\/li>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"uagb-toc__list\"><a href=\"#hoofdstuk-3-je-website-opbouwen\">Hoofdstuk 3: Je website opbouwen<\/a><\/li>\n<ul class=\"uagb-toc__list\">\n<li class=\"uagb-toc__list\"><a href=\"#de-funderingen-je-paginas\">De funderingen: je pagina&#039;s<\/a><\/li>\n<li class=\"uagb-toc__list\"><a href=\"#menu-maken\">Menu maken<\/a><\/li>\n<li class=\"uagb-toc__list\"><a href=\"#homepage-en-blogpagina-instellen\">Homepage en blogpagina instellen<\/a><\/li>\n<li class=\"uagb-toc__list\"><a href=\"#berichten-voor-je-blog\">Berichten voor je blog<\/a><\/li>\n<li class=\"uagb-toc__list\"><a href=\"#de-mediabibliotheek\">De mediabibliotheek<\/a><\/li>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"uagb-toc__list\"><a href=\"#hoofdstuk-4-je-website-stylen\">Hoofdstuk 4: Je website stylen<\/a><\/li>\n<ul class=\"uagb-toc__list\">\n<li class=\"uagb-toc__list\"><a href=\"#ons-thema-uitbreidenmet-een-plugin\">Ons thema uitbreiden\u00a0met een plugin<\/a><\/li>\n<li class=\"uagb-toc__list\"><a href=\"#de-customizer\">De Customizer<\/a><\/li>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"uagb-toc__list\"><a href=\"#hoofdstuk-5-functies-toevoegen-aan-je-website\">Hoofdstuk 5: Functies toevoegen aan je website<\/a><\/li>\n<ul class=\"uagb-toc__list\">\n<li class=\"uagb-toc__list\"><a href=\"#contactformulier-met-wpforms\">Contactformulier met WPForms<\/a><\/li>\n<li class=\"uagb-toc__list\"><a href=\"#seo-plugins-voor-betere-resultaten-op-google\">SEO-plugins voor betere resultaten op Google<\/a><\/li>\n<li class=\"uagb-toc__list\"><a href=\"#een-nieuw-thema-installeren\">Een nieuw thema installeren<\/a><\/li>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"uagb-toc__list\"><a href=\"#nog-n-tip-automatische-updates-met-managed-wordpress\">Nog \u00e9\u00e9n tip: automatische updates met managed WordPress<\/a><\/li>\n<\/ul>\n<\/ul>\n<\/ul>\n<\/ul>\n<\/ul>\n<\/ol><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h2 class=\"wp-block-heading\">Wat zal je leren?<\/h2>\n<p>We zullen de basisfuncties van WordPress doornemen, en gaan van installatie tot afgewerkte website. Je leert hoe je WordPress installeert, hoe je je website veilig maakt, hoe je inhoud maakt, en hoe je de lay-out op pagina's herwerkt. Ook laten we je zien hoe je het meeste uit een thema kunt halen en hoe je WordPress-plugins en widgets kunt toevoegen en bewerken.<\/p>\n<p>Alles gebeurt aan de hand van voorbeelden met een echte WordPress-installatie en -website. We maken dus stap voor stap een WordPress-website. En je kunt precies kopi\u00ebren wat we doen, of je kunt het aanpassen aan het ontwerp dat je zelf wilt. Ga je voor je eigen ontwerp, dan kun je onze voorbeelden en instructies gebruiken als leidraad en ter ondersteuning.<\/p>\n<p>Goed. Klaar? Dan beginnen we eraan!<\/p>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<div class=\"wp-block-columns alignwide has-blue-faded-background-color has-background is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/on.combell.com\/nl\/ebooks\/wordpress-voor-beginners\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"220\" height=\"312\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/wp-for-beginners-nl.jpeg\" alt=\"\" class=\"wp-image-22581\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/wp-for-beginners-nl.jpeg 220w, https:\/\/www.combell.com\/nl\/blog\/files\/wp-for-beginners-nl-212x300.jpeg 212w\" sizes=\"(max-width: 220px) 100vw, 220px\" \/><\/a><\/figure>\n<\/div>\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:85%\">\n<h4 class=\"uagb-heading-text mt-1 wp-block-heading\"><meta charset=\"utf-8\"><meta charset=\"utf-8\">Download onze startersgids<\/h4>\n<p>Dit artikel helpt je om jouw eigen WordPress-website te maken. Download je 'm toch liever, zodat je ook offline kan verderlezen? Goed nieuws: dat kan!<\/p>\n<div class=\"wp-block-uagb-icon-list uagb-block-a0d8abf8 uagb-icon-list__outer-wrap uagb-icon-list__layout-vertical\">\n<div class=\"uagb-icon-list__wrap\">\n<div class=\"wp-block-uagb-icon-list-child uagb-block-fe93ec75 uagb-icon-list-repeater uagb-icon-list__wrapper\"><a target=\"_blank\" aria-label=\"Download het e-book &#039;WordPress voor beginners&#039; hier\" rel=\"noopener noreferrer\" href=\"https:\/\/on.combell.com\/nl\/ebooks\/wordpress-voor-beginners\"> <\/a><span class=\"uagb-icon-list__source-wrap\"><svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path d=\"M504.3 273.6l-112.1 104c-6.992 6.484-17.18 8.218-25.94 4.406c-8.758-3.812-14.42-12.45-14.42-21.1L351.9 288H32C14.33 288 .0002 273.7 .0002 255.1S14.33 224 32 224h319.9l0-72c0-9.547 5.66-18.19 14.42-22c8.754-3.809 18.95-2.075 25.94 4.41l112.1 104C514.6 247.9 514.6 264.1 504.3 273.6z\"><\/path><\/svg><\/span><span class=\"uagb-icon-list__label\">Download het e-book 'WordPress voor beginners' hier<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h2 class=\"wp-block-heading\">Hoofdstuk 1: De allereerste stappen&nbsp;<\/h2>\n<h3 class=\"wp-block-heading\">Wat is WordPress?<\/h3>\n<p>WordPress is een \u2018Content Management Systeem\u2019 (meestal gewoon CMS genoemd), en \u00e9\u00e9n van de populairste in z\u2019n soort.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/Starten-met-een-WordPress-website.png\" alt=\"Starten met een WordPress website\" class=\"wp-image-19692\" width=\"320\" height=\"199\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/Starten-met-een-WordPress-website.png 1280w, https:\/\/www.combell.com\/nl\/blog\/files\/Starten-met-een-WordPress-website-300x187.png 300w, https:\/\/www.combell.com\/nl\/blog\/files\/Starten-met-een-WordPress-website-768x478.png 768w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/figure>\n<\/div>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h4 class=\"wp-block-heading\">Wat is er zo bijzonder aan een CMS en WordPress in het bijzonder?<\/h4>\n<p>Een CMS is gemaakt om makkelijk je eigen website te bouwen. Het is een hulpmiddel dat je helpt om inhoud op je website te beheren en te maken. Je hoeft zelf geen code te schrijven, en je hebt geen diepe technische kennis nodig.<\/p>\n<p>In plaats daarvan gebruik je de <em>gebruikersinterface<\/em> van het systeem om pagina's, berichten, tekst, en beelden te maken: het CMS schrijft de code voor jou.<\/p>\n<p>WordPress is een <em>open-source<\/em> CMS. Dat betekent dat iedereen toegang heeft tot de code waaruit WordPress bestaat. Met een unieke, grote, en actieve gemeenschap betekent zoiets dat er voortdurend nieuwe WordPress-themes en plugins (uitbreidingen) worden ontwikkeld, die je kunt gebruiken. In veel gevallen zelfs helemaal gratis!<\/p>\n<p>In deze gids gebruiken we alleen gratis extensies. Zo heb je met WordPress ruime mogelijkheden om je website aan te passen zoals jij dat wilt.<\/p>\n<p>WordPress zelf mag dan open-source zijn, het gebruik ervan vereist geen kennis van code of programmeren. Het is gericht op iedereen die een website wil maken. Natuurlijk helpt het een beetje als je code kan schrijven - maar dat is dus helemaal niet nodig om WordPress te gebruiken.<\/p>\n<p>Gezien de vele mogelijkheden en de grote flexibiliteit van WordPress, baart oefening kunst. Het kan overweldigend zijn voor een beginner. Daarom ben je hier!<\/p>\n<p>Om te beginnen installeren we WordPress op onze webruimte (\u2018hosting\u2019).<\/p>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h3 class=\"wp-block-heading\">De installatie van WordPress in \u00e9\u00e9n klik<\/h3>\n<div class=\"wp-block-uagb-inline-notice uagb-inline_notice__align-left uagb-block-cf78ddcc uagb-inline_notice__outer-wrap\">\n<p class=\"uagb-notice-title\">Opgelet<\/p>\n<div class=\"uagb-notice-text\">\n<p><em>De stappen in dit hoofdstuk zijn een gids voor my.combell.com, het controlepaneel van Combell.<\/em><\/p>\n<p><em>Als je WordPress-hostingpakket niet bij Combell staat, kun je deze gids nog steeds gebruiken, maar spring dan nu naar <\/em><a href=\"https:\/#hoofdstuk%202\" rel=\"noreferrer noopener\" target=\"_blank\"><em>hoofdstuk 2<\/em><\/a><em>.<\/em><\/p>\n<\/div>\n<\/div>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p>Met de WordPress-installatie in \u00e9\u00e9n klik van Combell hoef je je niet met technische details bezig te houden. Zo ben je in een paar stappen met je website aan de slag.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h4 class=\"wp-block-heading\">Jouw controlepaneel bij Combell<\/h4>\n<p>Wanneer je <a href=\"https:\/\/www.combell.com\/nl\/hosting\/webhosting\" rel=\"noreferrer noopener\" target=\"_blank\">webhosting<\/a> hebt gekocht bij Combell, log je in via <a href=\"https:\/\/my.combell.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">my.combell.com<\/a> met je gebruikersgegevens.<\/p>\n<p>Je bevindt je nu in het controlepaneel waar je jouw Combell-producten beheert. Van hieruit klik je op de <a href=\"https:\/\/www.combell.com\/nl\/domeinnamen\" target=\"_blank\" rel=\"noreferrer noopener\">domeinnaam<\/a> waarmee je gaat werken.<\/p>\n<p>Nu heb je een volledig overzicht van wat je allemaal kan met je domeinnaam en <a href=\"https:\/\/www.combell.com\/nl\/hosting\/wordpress-webhosting\">(WordPress-)hosting<\/a>. Zoals er een CMS op installeren!<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"647\" height=\"455\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/Combell-controlepaneel-1.png\" alt=\"Het Combell-controlepaneel\" class=\"wp-image-22272\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/Combell-controlepaneel-1.png 647w, https:\/\/www.combell.com\/nl\/blog\/files\/Combell-controlepaneel-1-300x211.png 300w\" sizes=\"(max-width: 647px) 100vw, 647px\" \/><figcaption>Het Combel-controlepaneel via my.combell.com<\/figcaption><\/figure>\n<\/div>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h3 class=\"wp-block-heading\">WordPress installeren<\/h3>\n<p>Om WordPress te installeren, klik je in je controlepaneel bij Website op \u2018Installeer een CMS\u2019. Nu kan je je WordPress installeren.<\/p>\n<p>In het volgende scherm moet je enkele belangrijke gegevens voor je WordPress-installatie invoeren.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/installeer_CMS.png\" alt=\"Het CMS-installatiescherm via het Combell-controlepaneel\" class=\"wp-image-22273\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/installeer_CMS.png 726w, https:\/\/www.combell.com\/nl\/blog\/files\/installeer_CMS-300x214.png 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><figcaption>WordPress installeren met \u00e9\u00e9n klik<\/figcaption><\/figure>\n<\/div>\n<h4 class=\"wp-block-heading\">Website-titel<\/h4>\n<p>Hier vul je de titel van je website in. Wij kozen voor <em>WordPress For Beginners<\/em>.<\/p>\n<h4 class=\"wp-block-heading\">CMS-login<\/h4>\n<p>Hier kies je een naam waarmee je later zal inloggen bij WordPress. Dat kan je eigen naam zijn of iets anders.<\/p>\n<h4 class=\"wp-block-heading\">Wachtwoord<\/h4>\n<p>Kies een veilig wachtwoord om later mee in te loggen bij WordPress. Het klinkt logisch, maar onthou de inloggegevens die je ingeeft bij je WordPress-installatie zeker.<\/p>\n<h4 class=\"wp-block-heading\">Taal<\/h4>\n<p>Hier kies je in welke taal jouw WordPress geconfigureerd zal zijn. Wij kiezen gemakshalve voor het Nederlands!<\/p>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h3 class=\"wp-block-heading\">En nu: WordPress installeren<\/h3>\n<p>Nu hoef je alleen nog maar op de knop \u2018Installeer WordPress\u2019 te drukken. Als je dat gedaan hebt verschijnt een kleine melding op het scherm die je vertelt dat de installatie bijna klaar is. Oefen even geduld, en surf af en toe naar het adres van je website om te kijken of de installatie al gelukt is.<\/p>\n<p>Tijdens de installatie worden alle instellingen en informatie die we net invoerden gebruikt om je WordPress-website te maken.<\/p>\n<h4 class=\"wp-block-heading\">Je WordPress-website staat online!<\/h4>\n<p>Je bereikt je website door je domeinnaam in te geven in je adresbalk. Zo surf je naar je website zoals hij er nu uitziet.<\/p>\n<p>Visueel is het voorlopig niet de meest opwindende plaats, maar daar brengen we snel verandering in. Hou de pagina open, we komen er snel op terug.<\/p>\n<p>Het ontwerpen van je website is dus voor later, eerst kijken we even rond achter de schermen van WordPress.<\/p>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h3 class=\"wp-block-heading\">Het WordPress-controlepaneel<\/h3>\n<p>Je komt terecht op je WordPress-controlepaneel door <strong>\/wp-admin<\/strong> achter je domeinnaam te typen in je adresbalk. Bij ons is dat dus <em>wordpressforbeginners.be\/wp-admin<\/em>. Bij jou werkt dat uiteraard enkel met jouw eigen domeinnaam!<\/p>\n<p>Zo kom je terecht op de login-pagina van het WordPress-controlepaneel en log je in met de gegevens die je tijdens je WordPress installatie gekozen hebt.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"318\" height=\"374\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/inlogscherm-wordpress-controlepaneel.png\" alt=\"Het inlogscherm van WordPress\" class=\"wp-image-22274\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/inlogscherm-wordpress-controlepaneel.png 318w, https:\/\/www.combell.com\/nl\/blog\/files\/inlogscherm-wordpress-controlepaneel-255x300.png 255w\" sizes=\"(max-width: 318px) 100vw, 318px\" \/><figcaption>Inloggen op het WordPress-controlepaneel via jouwdomeinnaam.com<strong>\/wp-admin<\/strong><\/figcaption><\/figure>\n<\/div>\n<h4 class=\"wp-block-heading\">Welkom in de machinekamer<\/h4>\n<p>Nu ben je in <em>The Engine Room<\/em> - het controlepaneel van je WordPresswebsite. Je zult het meeste uit deze gids halen als je zowel het controlepaneel als de website voortaan in twee verschillende tabbladen open houdt - zo kunnen we gemakkelijk tussen de twee wisselen.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/WordPress-dashboard.png\" alt=\"Het WordPress-controlepaneel of dashboard\" class=\"wp-image-22275\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/WordPress-dashboard.png 1112w, https:\/\/www.combell.com\/nl\/blog\/files\/WordPress-dashboard-300x152.png 300w, https:\/\/www.combell.com\/nl\/blog\/files\/WordPress-dashboard-768x390.png 768w\" sizes=\"(max-width: 1112px) 100vw, 1112px\" \/><figcaption>Het WordPress-controlepaneel of 'dashboard'<\/figcaption><\/figure>\n<\/div>\n<p>Dit is de hoofdpagina van het WordPress-controlepaneel. Aan de linkerkant zie je het menu van waaruit je de instellingen, functies, en inhoud van de website kunt bereiken.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h4 class=\"wp-block-heading\">Overzicht van het menu van het bedieningspaneel<\/h4>\n<p>In dit volgende deel schetsen we de functies in het controlepaneel waarmee we zullen werken. We zijn er zeker van dat je je zo wat meer op je gemak zult voelen, en je kunt hier altijd naar terugkijken ter verduidelijking als je dat later nodig vindt.<\/p>\n<p>Klik gerust eens op de verschillende onderdelen hieronder in je controlepaneel \u2013 je kan er niets stuk mee maken!<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<div class=\"wp-block-image\">\n<figure class=\"alignleft is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/thumb_berichten.png\" alt=\"\" class=\"wp-image-22276\" width=\"25\" height=\"25\"\/><\/figure>\n<\/div>\n<h5 class=\"wp-block-heading\">Berichten <\/h5>\n<p>In dit deel maak je blog berichten voor je website. Later in deze gids laten we je zien hoe je een blog pagina maakt waar de berichten op komen te staan.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">Media<\/h5>\n<p>Dit is je mediabibliotheek. Hier kun je afbeeldingen en andere bestanden die je op je website wilt gebruiken, uploaden.<\/p>\n<p>We zullen later beelden uploaden naar de mediabibliotheek om je te laten zien hoe je dit gebruikt. Uploaden kan via het controlepaneel, of meteen vanaf een pagina of bericht. De bestanden, en afbeeldingen worden sowieso altijd onder \u2018media\u2019 opgeslagen om later opnieuw te gebruiken.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<div class=\"wp-block-image is-style-default\">\n<figure class=\"alignleft size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/thumb_paginas.png\" alt=\"\" class=\"wp-image-22277\" width=\"25\" height=\"25\"\/><\/figure>\n<\/div>\n<h5 class=\"wp-block-heading\">Pagina's<\/h5>\n<p>In dit deel maak je je pagina's - je voorpagina, contactpagina, inhoudspagina's, of blogpagina. We leren je later hoe je een serie pagina's maakt.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/thumb_weergave.png\" alt=\"\" class=\"wp-image-22278\" width=\"25\" height=\"25\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/thumb_weergave.png 55w, https:\/\/www.combell.com\/nl\/blog\/files\/thumb_weergave-50x50.png 50w\" sizes=\"(max-width: 25px) 100vw, 25px\" \/><\/figure>\n<\/div>\n<h5 class=\"wp-block-heading\">Weergave<\/h5>\n<h6 class=\"wp-block-heading\">&gt; Thema's<\/h6>\n<p>Onder \u2018Weergave\u2019 zijn er verschillende subcategorie\u00ebn. Zoals \u2018Thema's\u2019, waar je een aantal eigen WordPress-themes vindt. Het standaardthema, <em>Twenty Twenty-One<\/em>, staat vermeld als \u2018Actief\u2019. In het Thema\u2019s-menu kan je naar andere thema's te zoeken: je hebt keuze uit duizenden thema\u2019s om je website op te baseren, zowel gratis als betaald. Da\u2019s meteen \u00e9\u00e9n van de enorme <a href=\"https:\/\/www.combell.com\/nl\/blog\/wat-is-wordpress\/\">voordelen van WordPress<\/a>.<\/p>\n<h6 class=\"wp-block-heading\">&gt; Customizer<\/h6>\n<p>Het menu \u2018Customizer\u2019 geeft je toegang tot de thema-instellingen van je website. Je kunt er ook de lay-out van je website aanpassen. Wanneer je terug wil naar je controlepaneel, klik je linksboven op het kruisje.<\/p>\n<h6 class=\"wp-block-heading\">&gt; Widgets<\/h6>\n<p>Met widgets kun je inhoud en functionaliteit aan je website toevoegen. Je ziet in dit menu dat de widgets \u2018Zoeken\u2019, \u2018Recent Posts\u2019 en \u2018Recent Comments\u2019 al aan je huidige WordPress-thema zijn toegevoegd. Die staan nu in de \u2018footer\u2019, onderaan je pagina.<\/p>\n<p>Het gebruik van widgets brengt veel geweldige mogelijkheden met zich mee, waar we later dieper op ingaan.<\/p>\n<h6 class=\"wp-block-heading\">&gt; Menu's<\/h6>\n<p>Het moet voor je bezoekers gemakkelijk zijn om door je website te navigeren. Daar is het menu handig voor. Gewoonlijk staat het menu bovenaan de pagina, in wat we een \u2018header\u2019 noemen. Het menu is de plaats waar je de pagina's toevoegt die je voor je website maakt. We tonen je later hoe je een menu maakt!<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/thumb_plugins.png\" alt=\"\" class=\"wp-image-22279\" width=\"25\" height=\"25\"\/><\/figure>\n<\/div>\n<h5 class=\"wp-block-heading\">Plugins<\/h5>\n<p>Kort gezegd zijn plugins uitbreidingen die mogelijkheden toevoegen aan je WordPress-website.<\/p>\n<p>Zo zijn er plugins die de snelheid van je website optimaliseren, plugins waarmee je een contactformulier maakt, of plugins die je makkelijk vindbaar maken via Google (SEO-plugins). En veel, v\u00e9\u00e9l meer.<\/p>\n<p>We zullen op verschillende plaatsen in deze gids met plugins werken, dus dit is iets waarmee je vertrouwd zult raken.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/thumb_instellingen.png\" alt=\"\" class=\"wp-image-22280\" width=\"25\" height=\"24\"\/><\/figure>\n<\/div>\n<h5 class=\"wp-block-heading\">Instellingen<\/h5>\n<p>Onderaan je menu vind je \u2018Instellingen\u2019. Daar kan je de algemene instellingen van je website veranderen. Je kunt van alles veranderen, zoals het formaat waarin datums worden weergegeven of de afmetingen van de afbeeldingen die in de mediabibliotheek worden gebruikt (onder het subkopje \u2018Media\u2019).<\/p>\n<p>Niet tevreden over de naam die je koos voor je website bij het installeren? Je kunt \u2018m hier veranderen!<\/p>\n<p>Nu zijn we klaar voor de volgende stap - nu moet je beslissen welke website je gaat maken, hoe de structuur van de pagina's zal zijn, en welke inhoud je gaat toevoegen.<\/p>\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h2 class=\"wp-block-heading\">Hoofstuk 2: Soort website<\/h2>\n<p>Een WordPress-website maken is eenvoudig, maar het vergt vooraf wel wat denkwerk. Wat wil je allemaal op je website plaatsen, en hoe moet 't er gaan uitzien?<\/p>\n<p>Het is een goed idee om hier een lijstje bij te maken. Zo kan je makkelijk over zaken als \u2018het doel\u2019 en de reden van je website nadenken.<\/p>\n<p>Als je je lijst samenstelt, denk dan na over de structuur van je website. Welke pagina's heb je nodig, welke inhoud moet erin, en welke functionaliteiten zijn voor jou noodzakelijk? Zijn die allemaal broodnodig, of maken ze je website wat te ingewikkeld?<\/p>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h3 class=\"wp-block-heading\">WordPress-blog maken<\/h3>\n<p>Misschien loop je met het idee rond om eerst te beginnen met een blog? WordPress is ook voor dat soort websites een uitstekend platform. <a href=\"https:\/\/www.combell.com\/nl\/blog\/blog-maken\">Een blog maken<\/a> in WordPress hoeft dankzij alle handige tools niet super moeilijk te verlopen.<\/p>\n<p>Doe jezelf profijt met de vele voordelen. Zo kan een WordPress-blog uiteraard rekenen op het uiterst gebruiksvriendelijk Content Management Systeem (CMS) dat WordPress is. Gelukkig maar, want een (WordPress) blog beginnen zonder al te veel ervaring, kan best spannend zijn!<\/p>\n<p>Als starter is het dan ook geen slecht idee om de vele fora, tutorial-video's en stappenplannen over een WordPress-blog maken uit te pluizen. Je bent goed bezig, nu je deze blog aan het lezen bent! Je zal al snel merken dat er verschillende sjablonen en plug-ins speciaal voor WordPress-blogs bestaan. Op die manier kan je naar hartenlust een blog maken die volledig bij jouw stijl past.<\/p>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h3 class=\"wp-block-heading\">SEO-opties op je blog? WordPress zorgt ervoor<\/h3>\n<p>Wat je ook snel zal merken: een WordPress-blog starten staat gelijk aan SEO-proof zijn! Dat is namelijk een van de grootste troeven van dit CMS. Door de SEO-opties vergroot je gemakkelijk de zichtbaarheid van jouw WordPress-blog in zoekmachines zoals Google en Bing. Laat die extra lezers maar komen!<\/p>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h3 class=\"wp-block-heading\">Een digitaal portfolio<\/h3>\n<p>In deze gids laten we je zien hoe je een digitaal portfolio maakt. Dat is een veelzijdige website die clubs, bedrijven, vakmensen of hobbyisten gebruiken om hun werk aan te prijzen.<\/p>\n<p>Voor de duidelijkheid maken we samen met jou een fictief portfolio in deze gids. Ons portfolio is dat van een fictieve evenementenplanner, met een breed aanbod aan evenementen die hij kan plannen of lezingen waarvoor je 'm kan boeken.<\/p>\n<p>Eerst bepalen we de structuur van onze website. Pak gerust pen en papier, als je meteen ook wil nadenken over de structuur en inhoud van je eigen website!<\/p>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h3 class=\"wp-block-heading\">Structuur en inhoud van de site<\/h3>\n<h4 class=\"wp-block-heading\">Structuur: welke pagina's<\/h4>\n<p>Elke website heeft een <strong><em>homepage<\/em><\/strong>: da\u2019s de pagina die onze bezoekers eerst zien, als ze bij ons terechtkomen. Daarnaast willen we <strong><em>ons werk laten zien<\/em><\/strong>, en <strong><em>ons voorstellen<\/em><\/strong> aan potenti\u00eble klanten. En natuurlijk moeten bezoekers <strong><em>contact<\/em><\/strong> kunnen opnemen om ons te boeken.<\/p>\n<p>Dat zijn dus in totaal drie pagina\u2019s voor onze website:<\/p>\n<ol>\n<li>Een homepage<\/li>\n<li>Een pagina om ons werk te laten zien<\/li>\n<li>Een pagina over ons, waar bezoekers ons ook kunnen contacteren&nbsp;<\/li>\n<\/ol>\n<p>Onze eventplanner deelt graag inzichten over z\u2019n werk en persoonlijk leven. Daarom heeft de website dus ook een <strong><em>blogpagina <\/em><\/strong>nodig. Later laten we je zien hoe blogpagina's zich een beetje anders gedragen dan andere pagina's in WordPress.&nbsp;&nbsp;<\/p>\n<p>Uiteraard heeft een goeie website ook een <strong><em>menu<\/em><\/strong>. Zo kan de bezoeker makkelijk navigeren tussen de verschillende pagina\u2019s. In dat menu wordt de structuur van de website duidelijk.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h4 class=\"wp-block-heading\">Inhoudelijk: wat komt er op de pagina's<\/h4>\n<p>De structuur is al duidelijk, nu moet er natuurlijk nog inhoud komen op die pagina\u2019s.<\/p>\n<p>We kunnen onze inhoud over het algemeen in twee categorie\u00ebn verdelen: tekst en beelden.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">Tekst<\/h5>\n<p>Hoewel een beeld meer zegt dan 1.000 woorden, is het altijd handig om tekst te hebben op onze website. Zo moet onze homepage bezoekers welkom heten. Op de pagina waar ons werk te zien is, zorgen we voor gedetailleerde beschrijvingen van onze projecten.<\/p>\n<p>Op onze 'Over ons'-pagina stellen we onszelf voor, eventueel met een korte biografie en wat uitleg over onze loopbaan. En daar komen natuurlijk ook onze contactgegevens en een contactformulier.<\/p>\n<p>De blogpagina bevat voorlopig geen tekst \u2013 daar dienen de blogposts voor! Om de blogpagina te vullen, moeten we dus een paar blogberichten schrijven.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">Beelden<\/h5>\n<p>Foto's helpen onze website een visuele identiteit te geven en vullen de woorden op onze pagina's aan.<\/p>\n<p>Dus, wat voor afbeeldingen zoeken we? We hebben een omslagafbeelding nodig, bannerafbeeldingen, een website-icoon (\u2018favicon\u2019, het kleine plaatje\/icoontje in je browser-tab), een achtergrondafbeelding, afbeeldingen voor onze blogposts, en afbeeldingen die onze projecten voorstellen.<\/p>\n<p>We krijgen een duidelijker beeld op alle nodige afbeeldingen in het volgende hoofdstuk, wanneer onze inhoud concreet vormgegeven wordt.<\/p>\n<p>Het laatste waar we over moeten nadenken is welke functies we op onze website willen. Ons thema zal al een aantal functionaliteiten hebben, maar er zijn ook nog de plugins (weet je nog?) die ons kunnen helpen om een aantal mogelijkheden toe te voegen aan onze website.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">Plugins<\/h5>\n<p>Plugins zijn een van de grote sterke punten van WordPress, want ze brengen een enorme hoeveelheid mogelijkheden met zich mee. In deze gids proberen we het zo eenvoudig mogelijk te houden.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">Thema<\/h5>\n<p>Voor deze gids gebruiken we het standaardthema, <em>Twenty Twenty-One<\/em>. Als we onze website een grafische opknapbeurt willen geven, installeren we een WordPress-plugin die het thema uitbreidt. Zulke plugins geven ons meer mogelijkheden om het uiterlijk van onze website aan te passen.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">Contactformulier<\/h5>\n<p>Dankzij een contactformulier hoeft een bezoeker ons geen mailtje te sturen of ons te bellen: ze kunnen hun vraag of opmerking rechtstreeks versturen met het contactformulier. Dus zoeken we een WordPress-plugin die ons helpt een contactformulier op te zetten.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">Sociale media<\/h5>\n<p>Geen enkele website is compleet zonder links naar socialemediakanalen. Daarvoor gebruiken we een widget. Die widget plaatsen we daarna op onze website, in de \u2018footer\u2019.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">SEO<\/h5>\n<p>\u2018Search Engine Optimization\u2019, zoekmachine-optimalisatie of kortweg SEO, is erg belangrijk. Dat betekent dat we Google helpen om onze website zo hoog mogelijk tussen de zoekresultaten te laten verschijnen op de zoekmachine. En gelukkig voor ons zijn ook daar plugins voor.<\/p>\n<p>We zijn intussen de planningsfase doorgefietst! Het is verleidelijk om gewoon te beginnen aan je website, maar het denkwerk is essentieel voor een goeie website.<\/p>\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h2 class=\"wp-block-heading\">Hoofdstuk 3: Je website opbouwen<\/h2>\n<h3 class=\"wp-block-heading\">De funderingen: je pagina's<\/h3>\n<h4 class=\"wp-block-heading\">Standaardpagina's verwijderen<\/h4>\n<p>Omdat we een nieuwe WordPress-website hebben, zullen we eerst de standaardpagina's moeten verwijderen die bij de installatie werden toegevoegd.<\/p>\n<p>We gaan naar ons WordPress-controlepaneel. <a href=\"https:\/#anchor\" rel=\"noreferrer noopener\" target=\"_blank\">Weet je nog?<\/a> Je bereikt \u2019t door je domeinnaam in te tikken in de adresbalk, en er <em>\/wp-admin<\/em> achter te zetten!<\/p>\n<p>Daar klikken we op \u2018Pagina's\u2019 in het menu aan de linkerkant. Hier zien we een overzicht van alle pagina's die gemaakt zijn.<\/p>\n<p>We kunnen pagina's afzonderlijk verwijderen door onder elke pagina op \u2018Prullenmand\u2019 te klikken. We moeten ze allemaal verwijderen, en dat doen we door een vinkje te zetten naast elke pagina, of door op \u2018Titel\u2019 te klikken bovenaan of onderaan.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/standaardpaginas-verwijderen.png\" alt=\"standaardpagina's verwijderen via het WordPress-controlepaneel\" class=\"wp-image-22281\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/standaardpaginas-verwijderen.png 726w, https:\/\/www.combell.com\/nl\/blog\/files\/standaardpaginas-verwijderen-300x146.png 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><figcaption>De standaardpagina's verwijderen<\/figcaption><\/figure>\n<\/div>\n<p>Met de gemarkeerde pagina's gaan we naar het uitklapmenu onderaan, waar staat, \u2018Bulkacties\u2019, en kiezen \u2018Verplaats naar prullenmand\u2019. Dan klikken we rechts op \u2018Toepassen.<\/p>\n<p>Nu klikken we op \u2018Berichten\u2019 in het menu links. We verwijderen daar de blogpost (die wellicht \u2018Hello World!\u2019 heet).<\/p>\n<p>Het laatste wat we moeten doen is de widgets uit onze voettekst verwijderen. We klikken links op \u2018Weergave\u2019 links, en kiezen daar \u2018Widgets\u2019. We zien alle widgets in de footer, zoals ze op de website zouden staan. Klik op elk widget, kies voor de drie bolletjes onder elkaar helemaal rechts in de balk die tevoorschijn komt (\u2018opties\u2019), en klik op \u2018Verwijder blok\u2019.<\/p>\n<p>Doe dit voor elk blok, zodat we zeker met een schone lei beginnen. Wanneer je klaar bent, klik je rechts bovenaan op \u2018Bijwerken\u2019. Zo worden je bewerkingen opgeslagen.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/widgets-verwijderen.png\" alt=\"\" class=\"wp-image-22282\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/widgets-verwijderen.png 726w, https:\/\/www.combell.com\/nl\/blog\/files\/widgets-verwijderen-300x242.png 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><figcaption>Widgets verwijderen<\/figcaption><\/figure>\n<\/div>\n<p>We hebben nu een mooi lapje blanco bouwgrond, waar we onze funderingen op kunnen leggen!<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h4 class=\"wp-block-heading\">Pagina\u2019s maken<\/h4>\n<p>Tijd om onze homepage aan te maken!<\/p>\n<p>Ga in het menu links naar \u2018Pagina\u2019s\u2019, en klik dan op de knop \u2018Nieuwe pagina\u2019 bovenaan de pagina. Zo belanden we meteen in de nieuwe pagina, en kunnen we \u2018m al meteen bewerken.<\/p>\n<p>Welkom in de <strong>blok-editor <\/strong>van WordPress! Dit is waar je alle inhoud kan bewerken van een pagina. Maar daarover straks veel meer! Eerst geven we onze allereerste pagina een titel. Daarvoor klik je op \u2018Voeg titel toe\u2019, en kies je een titel.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/homepagel.png\" alt=\"Pagina maken in de blok-editor\" class=\"wp-image-22283\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/homepagel.png 726w, https:\/\/www.combell.com\/nl\/blog\/files\/homepagel-300x150.png 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><figcaption>Onze eerste pagina!<\/figcaption><\/figure>\n<\/div>\n<p>Wij gaan voor de titel 'Mijn digitaal portfolio\u2019.<\/p>\n<p>In de rechterhoek hebben we de optie \u2018Concept opslaan\u2019. Dat betekent dat je de veranderingen opslaat, maar dat de pagina nog niet gepubliceerd is (het blijft een <em>concept<\/em>). Zo kunnen je bezoekers je concepten nog niet zien.<\/p>\n<p>Wij willen dat onze pagina wel al zichtbaar wordt, dus klikken we op \u2018Publiceren\u2019.<\/p>\n<p>Het is nog geen hoogvlieger, maar onze homepage staat nu online! Check \u2018m gerust al eens door naar je website te surfen.<\/p>\n<p>We herhalen de stappen voor de andere pagina\u2019s. Die noemen we \u2018Mijn projecten\u2019, \u2018Over mij &amp; Contact\u2019 en \u2018Mijn blog\u2019.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"236\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/onze-paginas.png\" alt=\"pagina's van een wordpress-website\" class=\"wp-image-22286\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/onze-paginas.png 576w, https:\/\/www.combell.com\/nl\/blog\/files\/onze-paginas-300x123.png 300w\" sizes=\"(max-width: 576px) 100vw, 576px\" \/><figcaption>Onze pagina's<\/figcaption><\/figure>\n<\/div>\n<p>Wanneer je alle pagina's gemaakt hebt, surf dan naar je website. Je zal merken dat je alleen de standaardpagina ziet (waar \u2018hier is niets\u2019 te lezen is)!<\/p>\n<p>Dat komt omdat we nog niet hebben aangegeven welke pagina je homepage moet zijn, en je pagina's nog niet aan een menu zijn gekoppeld.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h3 class=\"wp-block-heading\">Menu maken<\/h3>\n<p>Het menu komt in onze pagina-header: da\u2019s de ruimte bovenaan de pagina. In ons WordPress-dashboard klikken we links op \u2018Weergave\u2019 en daarna op \u2018Menu\u2019s\u2019.<\/p>\n<p>Bij \u2018Menu structuur\u2019 geven we de Menunaam in. Wij kiezen nu voor \u2018Hoofdmenu\u2019, en vinken \u2018Automatisch pagina\u2019s toevoegen\u2019 en \u2018Primair Menu\u2019 aan. Daarna klikken we op \u2018Menu aanmaken\u2019.<\/p>\n<p>Onder \u2018Menu items toevoegen\u2019 zien we nu de pagina's die we gemaakt hebben. We kunnen ze allemaal selecteren door op het selectievakje \u2018Alles selecteren\u2019 te klikken. Daarna klikken we op \u2018Aan menu toevoegen\u2019. &nbsp;<\/p>\n<p>De pagina's verschijnen nu aan de rechterkant in het menu. We kunnen de muis gebruiken om de volgorde van de pagina\u2019s te wijzigen door ze te verslepen. Wij zetten onze homepage (\u2018Mijn digitaal portfolio\u2019) bovenaan, en \u2018Over mij &amp; contact\u2019 onderaan. Probeer gerust!<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/sitestructuur.png\" alt=\"Menu structuur\" class=\"wp-image-22287\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/sitestructuur.png 674w, https:\/\/www.combell.com\/nl\/blog\/files\/sitestructuur-300x253.png 300w\" sizes=\"(max-width: 674px) 100vw, 674px\" \/><figcaption>De structuur van ons menu<\/figcaption><\/figure>\n<\/div>\n<p>Klik tenslotte op de blauwe knop \u2018Menu opslaan\u2019 rechts onderaan. En klaar: onze pagina\u2019s zitten in het menu!<\/p>\n<p>Wanneer je naar je live website gaat, zie je nu het menu met onze pagina's in de header. Het gaat snel: onze funderingen liggen er al!<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h3 class=\"wp-block-heading\">Homepage en blogpagina instellen<\/h3>\n<p>Je hebt \u2019t waarschijnlijk gezien op je live website: onze homepage moet nog ingesteld worden, net zoals de pagina waar onze blogberichten op verschijnen.<\/p>\n<p>Dat doen we in ons WordPress-dashboard. Klik links in het menu op \u2018Instellingen\u2019, en kies daarna \u2018Lezen\u2019. Van het controlepaneel gaan we naar \u2018Instellingen\u2019 en hier kiezen we \u2018Lezen\u2019.<\/p>\n<div class=\"wp-block-uagb-inline-notice uagb-inline_notice__align-left uagb-block-d5d1d809 uagb-inline_notice__outer-wrap\">\n<p class=\"uagb-notice-title\">Tip<\/p>\n<div class=\"uagb-notice-text\">\n<p>Kan je je pagina's niet vinden? Probeer je pagina te vernieuwen. Als je ze nog steeds niet ziet, kijk dan of je eraan gedacht hebt om op \u2018Publiceren\u2019 te klikken.<\/p>\n<\/div>\n<\/div>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p>Je ziet bij \u2018Lezen instellingen\u2019 meteen \u2018Jouw homepage toont\u2019. Momenteel is het veld \u2018Je laatste berichten\u2019 aangevinkt. We veranderen dat in \u2018een statische pagina\u2019, en selecteren \u2018Mijn digitaal portfolio\u2019. Zo gaan we dat onze homepage maken.<\/p>\n<p>Ook de \u2018Berichten pagina\u2019 passen we aan: kies hier onze blogpagina, die we \u2018Mijn blog\u2019 hebben genoemd.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/lezen-instellingen.png\" alt=\"Homepage en berichtenpagina kiezen bij lezen-instellingen\" class=\"wp-image-22288\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/lezen-instellingen.png 616w, https:\/\/www.combell.com\/nl\/blog\/files\/lezen-instellingen-300x137.png 300w\" sizes=\"(max-width: 616px) 100vw, 616px\" \/><figcaption>We kiezen onze homepage en berichtenpagina<\/figcaption><\/figure>\n<\/div>\n<div class=\"wp-block-uagb-inline-notice uagb-inline_notice__align-left uagb-block-16301add uagb-inline_notice__outer-wrap\">\n<p class=\"uagb-notice-title\">Statische pagina's<\/p>\n<div class=\"uagb-notice-text\">\n<p>Statische pagina's in WordPress zijn pagina's die niet veranderen. Het zijn pagina's die geen blogberichten of andere regelmatig bijgewerkte inhoud bevatten. <\/p>\n<\/div>\n<\/div>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p>Klik onderaan de pagina op \u2018Wijzigingen opslaan\u2019. Wanneer we nu onze website bezoeken, komen we automatisch op de juiste voorpagina.<\/p>\n<p>Wanneer we straks nieuwe blogberichten maken, wordt al die blogartikelen getoond op onze blogpagina.<\/p>\n<p>Trouwens: nu we toch bij \u2018Instellingen\u2019 zitten, kunnen we de titel van onze website aanpassen. Om dat te doen, gaan we in het menu links onder \u2018Instellingen\u2019 naar \u2018Algemeen\u2019.<\/p>\n<p>Voorlopig zien we dat onze websitetitel \u2018WordPress For Beginners\u2019 is. Dat passen we aan naar \u2018Mijn Digitaal Portfolio\u2019. Daarna kiezen we voor \u2018Wijzigingen Opslaan\u2019.<\/p>\n<div class=\"wp-block-uagb-inline-notice uagb-inline_notice__align-left uagb-block-f3f88a6c uagb-inline_notice__outer-wrap\">\n<p class=\"uagb-notice-title\">Vergeet je pagina niet up te daten<\/p>\n<div class=\"uagb-notice-text\">\n<p>Als je in je dashboard een pagina probeert te verlaten waarop je aanpassingen hebt doorgevoerd, sla je die best altijd op. Wanneer je dat niet doet, gaan de aangebrachte veranderingen verloren.<\/p>\n<\/div>\n<\/div>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p>Ziezo. We hebben nu al onze pagina's aangemaakt en gelinkt in het menu, \u00e9n we hebben onze homepage en blogpagina ingesteld.<\/p>\n<p>Nu is het tijd om onze website te vullen met inhoud. Daarvoor gebruiken we de blok-editor van WordPress. Dat wordt onze nieuwe beste vriend!<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h4 class=\"wp-block-heading\">Inhoud maken met de blok-editor<\/h4>\n<p>De volgende stap is dus: inhoud toevoegen! Dat gebeurt natuurlijk weer in het WordPress-controlepaneel.<\/p>\n<p>Daar klikken we opnieuw op \u2018Pagina\u2019s\u2019, en klikken we onder onze homepage op \u2018bewerken\u2019. Wanneer je ingelogd bent in WordPress, kan je ook altijd vanop je website zelf een pagina bewerken.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">De WordPress Blok-editor<\/h5>\n<p>Dankzij de WordPress Blok-editor plaats je makkelijk inhoud op je pagina.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/homepagel.png\" alt=\"de blok-editor van WordPress\" class=\"wp-image-22283\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/homepagel.png 726w, https:\/\/www.combell.com\/nl\/blog\/files\/homepagel-300x150.png 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><figcaption>Onze homepage in de blok-editor<\/figcaption><\/figure>\n<\/div>\n<p>Alle pagina's en berichten in WordPress bestaan uit \u2018blokken\u2019: verschillende delen tekst, afbeeldingen, knoppen die je zelf kan plaatsen en bewerken. Daarom heet het dus de \u2018blok-editor\u2019!<\/p>\n<p>Die blokken hebben verschillende voordelen. Wanneer je een blok gemaakt hebt, kan je die makkelijk naar een andere plek op de pagina verplaatsen, zonder de andere blokken te veranderen.<\/p>\n<p>Er zijn veel verschillende soorten blokken in de blokken-editor. Dat kan een beetje overweldigend lijken, maar we behandelen de verschillende soorten wanneer we ze tegenkomen in deze gids.<\/p>\n<p>De beste manier om de blok-editor te leren kennen is door ons er gewoon in te smijten. Dus laten we dat doen!<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">De werkbalk binnen de blok-editor<\/h5>\n<p>Wanneer we onze homepage geopend hebben in de blok-editor, klikken we op de tekst: \u2018Schrijf \/ om een blok te kiezen\u2019.\u2019 Zo beginnen we met ons eerste blok-element: een tekstgedeelte.<\/p>\n<p>Als we op de tekst klikken en iets typen, verschijnt een werkbalk voor het blok-element. We zullen hier goed vertrouwd mee raken als we verder gaan met deze gids.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"126\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/gereedschapsbalk.png\" alt=\"werkbalk blok-editor WordPress\" class=\"wp-image-22289\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/gereedschapsbalk.png 350w, https:\/\/www.combell.com\/nl\/blog\/files\/gereedschapsbalk-300x108.png 300w\" sizes=\"(max-width: 350px) 100vw, 350px\" \/><figcaption>De werkbalk van de blok-editor<\/figcaption><\/figure>\n<\/div>\n<p>Laten we onze homepage (\u2018Mijn digitaal portfolio\u2019) van wat tekst voorzien!<\/p>\n<div class=\"wp-block-columns has-blue-faded-background-color has-background is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p class=\"has-text-align-center\">Welkom op mijn digitale portfolio. <\/p>\n<p>Hier laat ik je de projecten zien waar ik door de jaren heen aan gewerkt heb. Je vindt een selectie van professionele \u00e9n persoonlijke projecten. <\/p>\n<p>Door te klikken op 'Wie ben ik' in het menu, kan je iets meer lezen over wie ik ben en wat ik doe, zowel professioneel als persoonlijk. Je kunt me ook boeken voor lezingen of een gesprek over een project. <\/p>\n<p>Vergeet niet mijn blog te lezen! Daar denk ik na over alle grote en kleine dingen uit alle aspecten van mijn leven.<\/p>\n<\/div>\n<\/div>\n<p>Zo. Onze verwelkoming staat er.<\/p>\n<p>Laten we even kijken naar de instellingen van ons blok-onderdeel. Die vinden we aan de rechterkant van ons scherm. Daar kunnen we \u2018Pagina\u2019 of \u2018Blok\u2019 kiezen.<\/p>\n<p>Zie je niets? klik dan op het tandwieltje in de rechterbovenhoek.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"448\" height=\"102\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/site-instellingen.png\" alt=\"de blok-instellingen van de blok-editor\" class=\"wp-image-22290\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/site-instellingen.png 448w, https:\/\/www.combell.com\/nl\/blog\/files\/site-instellingen-300x68.png 300w\" sizes=\"(max-width: 448px) 100vw, 448px\" \/><figcaption>Het tandwiel opent je blok-instellingen<\/figcaption><\/figure>\n<\/div>\n<p>Klik op het blokgedeelte en kijk in de instellingen.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"666\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/blokinstellingen-tekstblok.png\" alt=\"De blokinstellingen van een tekstblok\" class=\"wp-image-22291\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/blokinstellingen-tekstblok.png 278w, https:\/\/www.combell.com\/nl\/blog\/files\/blokinstellingen-tekstblok-125x300.png 125w\" sizes=\"(max-width: 278px) 100vw, 278px\" \/><figcaption>De blokinstellingen van een tekstblok<\/figcaption><\/figure>\n<\/div>\n<p>Hier kunnen we de lettergrootte en regelafstand veranderen, en ook de tekstkleur en de achtergrondkleur van het blok. Maar da\u2019s voor later.<\/p>\n<p>Eerst gaan we de tekst op onze homepage online zetten. Voor we dat doen, kijken we eerst naar een voorbeeld van die pagina. In de rechterbovenhoek van onze blok-editor kunnen we klikken op \u2018Voorbeeld\u2019. Daar kunnen we kiezen in welk formaat we een voorvertoning willen zien: Desktop, Tablet of Mobiel.<\/p>\n<p>&nbsp;Onze tekst verschijnt prima in alle formaten. Op mobiel wordt de breedte van de tekst kleiner, maar hij behoudt zijn opmaak.<\/p>\n<p>WordPress zorgt ervoor dat onze website zo optimaal mogelijk wordt weergegeven op alle apparaten. Dat heet een <em>responsive design<\/em>. Dat betekent dat de elementen op onze website zich aanpassen in grootte of plaats, afhankelijk van hoeveel ruimte er op dat scherm beschikbaar is.<\/p>\n<p>Nu we er zeker van zijn dat de tekst in alle formaten netjes en leesbaar verschijnt, klikken we op \u2018Bijwerken\u2019. En onze eerste inhoud staat online!<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h6 class=\"wp-block-heading\">Blok-element: koptekst<\/h6>\n<p>We gaan terug naar de blok-editor van onze homepage om ons te wagen aan een nieuw blok-element: een koptekst.<\/p>\n<p>Er zijn verschillende manieren om een nieuw blok te maken \u2013 je zal mettertijd merken dat veel functies van WordPress op meer dan \u00e9\u00e9n manier gedaan kunnen worden.<\/p>\n<ul>\n<li>Je kunt de muis tussen twee blokjes houden aan de kant waar een \u2018+\u2019 verschijnt, en op dat plusje klikken<\/li>\n<li>Je kunt op je laatste tekst alinea klikken en op enter drukken, waardoor automatisch een nieuw blok ontstaat. Daarbij verschijnt rechts een aanklikbaar plusje.<\/li>\n<li>Of je klikt op de plus linksbovenaan. Daarbij komt een menu tevoorschijn waarin we kunnen zoeken wat we willen.<\/li>\n<\/ul>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"666\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/blokinstellingen-tekstblok-1.png\" alt=\"Verschillende bloktypes in de blok-editor van WordPress\" class=\"wp-image-22292\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/blokinstellingen-tekstblok-1.png 278w, https:\/\/www.combell.com\/nl\/blog\/files\/blokinstellingen-tekstblok-1-125x300.png 125w\" sizes=\"(max-width: 278px) 100vw, 278px\" \/><figcaption>De verschillende bloktypes<\/figcaption><\/figure>\n<\/div>\n<p>Er zijn veel blokken om uit te kiezen. Het \u2018Koptekst\u2019-element is een van de eerste die we tegenkomen. Wanneer je niet meteen jouw gewenste blok vindt, kan je \u2018m ook intikken in de zoekbalk. Probeer gerust eens met \u2018Koptekst\u2019!<\/p>\n<p>Goed, laten we nu die \u2018Koptekst\u2019 kiezen. Wanneer je op de plus linksbovenaan geklikt hebt, verschijnt het blok onderaan de pagina. We verplaatsen \u2019t straks wel!<\/p>\n<p>Heel erg origineel is het niet, maar laten we \u2018Welkom!\u2019 typen in het kopstuk-blok. En nu het blok verplaatsen. Dat kan door te klikken op de dubbele rij verticale stippen in de werkbalk, en de muis ingedrukt te houden. Zo kan je \u2019t blok slepen naar waar je \u2018m hebben wil.<\/p>\n<p>Of je kan rechts naast de dubbele rij stippen op het pijltje klikken. Zo verschuift je blok omhoog.<\/p>\n<p>Als we het voorwerp verslepen, zien we een horizontale blauwe lijn op het scherm. Die vertelt ons waar het voorwerp ingevoegd zal worden als we de muisknop loslaten.<\/p>\n<p>Hier laten we zien hoe het eruit ziet als je de kop versleept:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"470\" height=\"156\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/blok-verslepen.png\" alt=\"uitleg hoe je een blok versleept in de editor\" class=\"wp-image-22293\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/blok-verslepen.png 470w, https:\/\/www.combell.com\/nl\/blog\/files\/blok-verslepen-300x100.png 300w\" sizes=\"(max-width: 470px) 100vw, 470px\" \/><figcaption>We klikken op de dubbele rij stippen links in de werkbalk, houden de muis ingedrukt en verslepen het blok.<\/figcaption><\/figure>\n<\/div>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/blok-invoegen.png\" alt=\"uitleg hoe je een blok versleept en invoegt op de gewenste plaats\" class=\"wp-image-22294\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/blok-invoegen.png 800w, https:\/\/www.combell.com\/nl\/blog\/files\/blok-invoegen-300x112.png 300w, https:\/\/www.combell.com\/nl\/blog\/files\/blok-invoegen-768x287.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>De horizontale blauwe lijn geeft aan waar je het voorwerp zal invoegen.<\/figcaption><\/figure>\n<\/div>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/blok-verslepen-3.png\" alt=\"Uitleg hoe je een blok-element versleept en toevoegt\" class=\"wp-image-22295\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/blok-verslepen-3.png 676w, https:\/\/www.combell.com\/nl\/blog\/files\/blok-verslepen-3-300x152.png 300w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><figcaption>We voegen het element bovenaan ons tekstblok toe<\/figcaption><\/figure>\n<\/div>\n<p>Met de kop op de juiste plaats klikken we op \u2018Bijwerken\u2019. Makkelijk! We hebben nu een eerste versie van onze homepage.<\/p>\n<p>Nu we de eerste blokken stilletjes onder de knie hebben, gaan we ons wagen aan een blogbericht. Daarna nemen we een kijkje in de mediabibliotheek, zodat we foto\u2019s kunnen toevoegen.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h3 class=\"wp-block-heading\">Berichten voor je blog<\/h3>\n<p>In ons WordPress-controlepaneel klikken in het menu links op \u2018Berichten, en dan op de knop \u2018Nieuw bericht\u2019. We belanden meteen in de blok-editor!<\/p>\n<p>Ons blogbericht gaat over hoe makkelijk je met WordPress aan de slag kan. We geven het de titel \u2018WordPress - Z\u00e9lfs voor beginners!\u2019, en schrijven deze tekst:<\/p>\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-blue-faded-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p>WordPress is niet zo ingewikkeld als ik dacht! Met de blok-editor maak je bijvoorbeeld heel eenvoudig een blogbericht als dit.<\/p>\n<p>Met een WordPress-standaardthema zoals \u2018Twenty Twenty One\u2019 ziet je website er professioneel en netjes uit.<\/p>\n<p>WordPress is een prima keuze als website-editor voor mijn digitale portfolio. Zo kan ik makkelijk mijn projecten laten zien en mijn ervaringen delen.<\/p>\n<p>Ik kijk ernaar uit om WordPress-expert te worden, en de reis met jou te delen!<\/p>\n<\/div>\n<\/div>\n<p>Nu we onze tekst geschreven hebben (en gecheckt op tikfouten), hoeven we \u2018m alleen nog maar te publiceren. Dat kan op dezelfde manier als een pagina online zetten: rechtsbovenaan op \u2018Publiceren\u2019 klikken. Dan komt de tekst automatisch op onze blogpagina terecht.<\/p>\n<p>Even kijken of dat zo is. Surf naar je live website, en klik op \u2018Mijn blog\u2019.We openen de live website en klikken op \u2018Mijn blog\u2019 in het menu. En voil\u00e0: het blogbericht staat er. Dat gebeurt automatisch omdat we \u2018Mijn blog\u2019 als onze postpagina instelden \u2013 <a href=\"https:\/#anchor\" rel=\"noreferrer noopener\" target=\"_blank\">weet je nog<\/a>?<\/p>\n<p>We zien het bericht met de titel die we gaven, een deel van de tekst, en een link met \u2018Meer lezen over\u2019. Daar kan je op klikken om de rest van het bericht te lezen.<\/p>\n<p>Om onze post nog interessanter te maken, hebben we \u2019n afbeelding nodig. Om dat te doen gaan we naar de mediabibliotheek.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h3 class=\"wp-block-heading\">De mediabibliotheek<\/h3>\n<p>Een goeie website heeft beelden nodig om een bezoeker nog meer te boeien. Let er maar eens op welke webpagina\u2019s jij \u2019t liefst bezoekt: sites met veel tekst, of websites waar af en toe een beeld op staat?<\/p>\n<p>Vanuit de mediabibliotheek hebben we toegang tot alle mediabestanden die we naar onze website uploaden. De mediabibliotheek is niet beperkt tot afbeeldingen: je vindt er alle media die we uploaden, dus ook tekstbestanden en video's.<\/p>\n<p>Laten we zoeken naar een eerste afbeelding om te gebruiken. Er zijn veel mooie, gratis afbeeldingen beschikbaar op websites als unsplash.com en pexels.com. Je maakt er makkelijk een account aan. Zoek daarna wat rond en kijk of je een afbeelding kunt vinden die volgens jou bij je bericht past.<\/p>\n<p>Als je eigen mooie afbeeldingen hebt: zeker gebruiken! Originele beelden helpen om je website nog meer te personaliseren.<\/p>\n<p>In ons geval kiezen we een afbeelding van een scherm met WordPress erop: ideaal voor ons blogbericht.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/afbeelding_blog.jpg\" alt=\"computer met WordPress\" class=\"wp-image-22296\" width=\"800\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/afbeelding_blog.jpg 895w, https:\/\/www.combell.com\/nl\/blog\/files\/afbeelding_blog-300x200.jpg 300w, https:\/\/www.combell.com\/nl\/blog\/files\/afbeelding_blog-768x513.jpg 768w\" sizes=\"(max-width: 895px) 100vw, 895px\" \/><figcaption>Een afbeelding voor onze blogpost, via unsplash.com.<\/figcaption><\/figure>\n<\/div>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h4 class=\"wp-block-heading\">Een afbeelding toevoegen aan de mediabibliotheek<\/h4>\n<p>Je kan een afbeelding rechtstreeks uploaden wanneer je een bericht aan het bewerken bent, maar om te illustreren hoe de mediabibliotheek werkt, uploaden we de afbeelding nu in de bibliotheek zelf.<\/p>\n<p>In het WordPress-controlepaneel klikken we op \u2018Media\u2019 in het menu links. Dan drukken we op \u2018Nieuw bestand\u2019.<\/p>\n<p>We kunnen ons beeld naar het scherm slepen of het met de knop \u2018Bestanden selecteren\u2019 gaan zoeken in een map op onze computer.<\/p>\n<p>Nu hebben we de hebben de map met ons beeld open, dus kiezen we het met de muis, slepen het op het scherm en laten het dan vallen.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/afbeeldingen-uploaden.png\" alt=\"afbeelding uploaden met WordPress\" class=\"wp-image-22297\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/afbeeldingen-uploaden.png 726w, https:\/\/www.combell.com\/nl\/blog\/files\/afbeeldingen-uploaden-300x85.png 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><figcaption>Hier kunnen we afbeeldingen uploaden<\/figcaption><\/figure>\n<\/div>\n<p>Het uploaden kan even duren, afhankelijk van de grootte van het bestand dat je toevoegt. Wanneer je afbeelding eenmaal ge\u00fcpload is, verschijnt-ie onderaan.<\/p>\n<p>We kunnen details over de afbeelding zien door erop te klikken. Zo kunnen we er een titel, een onderschrift en een beschrijving aan geven.<\/p>\n<p>Ook kunnen we het beeld bewerken door onder het beeld zelf op de knop \u2018Afbeelding bewerken\u2019 te drukken. Hier kunnen we het beeld schalen, bijsnijden, spiegelen en draaien, als het niet precies is zoals we willen.<\/p>\n<p>Je hoeft je niet al te veel zorgen te maken over de beeldgrootte. Op dit moment gaat het er meer om een idee te krijgen van hoe de mediabibliotheek werkt.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h4 class=\"wp-block-heading\">Een afbeelding toevoegen aan ons blogbericht<\/h4>\n<p>We openen de post in de blok-editor. Die openen we door links \u2018Berichten\u2019 te kiezen\u2019, en daar het juiste bericht te openen.<\/p>\n<p>Met het bericht open kijken we naar de instellingen van het bericht aan de rechterkant. Onder \u2018Bericht\u2019 scrollen we naar beneden en vinden de optie \u2018Uitgelichte afbeelding kiezen\u2019.<\/p>\n<p>Wanneer we daarop klikken, kunnen we een afbeelding toevoegen, of bovenaan naar onze mediabibliotheek gaa. Omdat we de afbeelding al ge\u00fcpload hebben, kiezen we het tweede. Daar klik je op je afbeelding en kies je rechs onderaan \u2018Uitgelichte afbeelding kiezen\u2019. Klik dan op \u2018Bijwerken\u2019 in de editor.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"522\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/afbeelding-uitlichten.png\" alt=\"Afbeelding uitlichten WordPress\" class=\"wp-image-22298\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/afbeelding-uitlichten.png 280w, https:\/\/www.combell.com\/nl\/blog\/files\/afbeelding-uitlichten-161x300.png 161w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><figcaption>Selecteer je uitgelichte afbeelding<\/figcaption><\/figure>\n<\/div>\n<p>Wanneer je nu naar je live website surft, zie je dat onze afbeelding boven het uittreksel van ons blogbericht is geplaatst. De afbeelding is ook aan de blogpost zelf toegevoegd.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"626\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/uitgelichte-afbeelding-vb.png\" alt=\"Blogbericht met afbeelding\" class=\"wp-image-22299\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/uitgelichte-afbeelding-vb.png 550w, https:\/\/www.combell.com\/nl\/blog\/files\/uitgelichte-afbeelding-vb-264x300.png 264w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><figcaption>De afbeelding is toegevoegd aan je blogbericht!<\/figcaption><\/figure>\n<\/div>\n<p>Nu we meer vertrouwd zijn met het toevoegen van tekst en beelden, zijn we klaar om over te gaan naar het volgende blok-element: de cover! Daarmee combineren we tekst en beelden. Dat testen we uit op onze \u2018Mijn projecten\u2019-pagina.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h4 class=\"wp-block-heading\">Blok-element: Cover<\/h4>\n<p>Het cover-blok combineert beeld en tekst. Dat werkt als een banner: het strekt zich horizontaal op de pagina uit.<\/p>\n<p>Praktisch gezien is het een blok-element dat we gebruiken om onze site voor te stellen, met tekst op het beeld. Je zal wel zien!<\/p>\n<p>Eerst zoeken we een nieuwe afbeelding. Voor een website van een eventplanner kan dat een mooi gedekte tafel zijn. Dat beeld vinden we op unsplash.com.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/bloemen.jpg\" alt=\"Bloemen\" class=\"wp-image-22300\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/bloemen.jpg 766w, https:\/\/www.combell.com\/nl\/blog\/files\/bloemen-300x201.jpg 300w\" sizes=\"(max-width: 766px) 100vw, 766px\" \/><figcaption>Een afbeelding van bloemen voor onze omslag, via unsplash.com<\/figcaption><\/figure>\n<\/div>\n<p>We uploaden de afbeelding naar onze mediabibliotheek precies zoals we in het vorige deel deden, en gaan dan naar de blokeditor. We openen de pagina \u2018Mijn projecten\u2019 voor bewerking in de blokeditor.<\/p>\n<p>Daar voegen we een nieuw blok toe, de <em>cover<\/em>. <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/cover-toevoegen.png\" alt=\"omslagafbeelding toevoegen\" class=\"wp-image-22301\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/cover-toevoegen.png 654w, https:\/\/www.combell.com\/nl\/blog\/files\/cover-toevoegen-300x148.png 300w\" sizes=\"(max-width: 654px) 100vw, 654px\" \/><figcaption>We voegen een omslagafbeelding toe<\/figcaption><\/figure>\n<\/div>\n<p>We klikken op \u2018Mediabibliotheek\u2019 en kiezen ons beeld, dat dan op de omslag verschijnt:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/afbeelding-op-omslag.png\" alt=\"afbeelding op cover WordPress\" class=\"wp-image-22302\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/afbeelding-op-omslag.png 654w, https:\/\/www.combell.com\/nl\/blog\/files\/afbeelding-op-omslag-300x230.png 300w\" sizes=\"(max-width: 654px) 100vw, 654px\" \/><figcaption>We hebben een afbeelding op onze omslag<\/figcaption><\/figure>\n<\/div>\n<p>Zoals je ziet is het mogelijk om een titel op het beeld te schrijven. We schrijven een stukje tekst dat onze pagina voorstelt.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/tekst-op-omslag.png\" alt=\"tekst op cover WordPress\" class=\"wp-image-22303\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/tekst-op-omslag.png 632w, https:\/\/www.combell.com\/nl\/blog\/files\/tekst-op-omslag-300x221.png 300w\" sizes=\"(max-width: 632px) 100vw, 632px\" \/><figcaption>We plaatsen tekst op onze omslag<\/figcaption><\/figure>\n<\/div>\n<p>Als je je tekst geschreven hebt, kun je hem selecteren en op \u2018B\u2019 drukken in de werkbalk. Dit maakt het lettertype vet.<\/p>\n<p>We willen graag dat de omslag zich over de hele pagina uitstrekt. Gelukkig is dit gemakkelijk te doen: we kunnen zowel de hoogte als de breedte van onze omslag regelen. We selecteren de omslag zelf door ergens op de afbeelding - niet op de tekst - te klikken om de werkbalk tevoorschijn te halen.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/instellingen-blokelement.png\" alt=\"werkbalk cover-element WordPress\" class=\"wp-image-22304\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/instellingen-blokelement.png 650w, https:\/\/www.combell.com\/nl\/blog\/files\/instellingen-blokelement-300x59.png 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><figcaption>De specifieke instellingen voor het blok-element<\/figcaption><\/figure>\n<\/div>\n<p>We klikken op de tweede optie van links (\u2018Uitlijning wijzigen\u2019) en krijgen verschillende instelmogelijkheden. We kiezen de optie die \u2018Volledige breedte\u2019 heet.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/horizontaal-uitstrekken-cover.png\" alt=\"uitlijning cover volledige breedte\" class=\"wp-image-22305\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/horizontaal-uitstrekken-cover.png 650w, https:\/\/www.combell.com\/nl\/blog\/files\/horizontaal-uitstrekken-cover-300x208.png 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><figcaption>De cover strekt zich nu horizontaal over het scherm uit<\/figcaption><\/figure>\n<\/div>\n<p><em>&nbsp;<\/em>Het overtrek strekt zich nu horizontaal over het hele scherm uit. Nu klikken op de derde optie van links: \u2018Positie van de inhoud wijzigen\u2019. Daarmee kunnen we de plaatsing van onze tekst in de omslag regelen. We kiezen ervoor de tekst netjes in het midden te houden.<\/p>\n<p>Nu hebben we de breedte en de positie van de tekst aangepast. Ook de hoogte van de cover kunnen we aanpassen, door de blauwe lijn onder het omslag te verschuiven, of rechts bij de instellingen onder \u2018Blok\u2019 de minimumhoogte van de cover aan te passen.<\/p>\n<p>We vinden het veld: \u2018Afmetingen\u2019 en stellen een minimum hoogte van 500 pixels in. Zo is er veel ruimte tussen de tekst en de randen van de omslag. Ook ziet het beeld er duidelijker uit.<\/p>\n<p>Laten we nu de blok-instellingen voor de cover eens van dichtbij bekijken. We kunnen die verder aanpassen met enkele opties.<\/p>\n<p>Onder \u2018Bedekking\u2019 kunnen we de transparantie van de afbeelding regelen. We willen onze cover iets lichter maken, dus stellen we die transparantie in op 30%.<\/p>\n<p>Iets hoger, onder \u2018Media-instellingen\u2019, maken we van onze afbeelding een vaste achtergrond. Wanneer we op \u2018Voorbeeld\u2019 klikken\u2019, zien we wat dat betekent als we gaan scrollen. Cool, toch? &nbsp;<\/p>\n<p>Een vaste achtergrond betekent dus dat je afbeelding blijft staan, maar er een soort \u2018kijkluikje\u2019 gemaakt wordt, dat over je beeld scrollt.<\/p>\n<p>We hebben nu een mooi beeld met leuk effect op onze projectpagina. Tijd om over te gaan naar het volgende blok-element, \u2018Media &amp; Tekst\u2019. Dat blok-element gebruiken we om onze projecten te tonen en te beschrijven.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h4 class=\"wp-block-heading\">Blok-element: Media &amp; Tekst<\/h4>\n<p>Met \u2018Mijn projecten\u2019 open in de blok-editor, maken we een nieuw blok-element van het type \u2018Media &amp; Tekst\u2019.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"224\" height=\"328\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/media-en-tekst.png\" alt=\"Media &amp; Tekst-blok toevoegen WordPress\" class=\"wp-image-22306\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/media-en-tekst.png 224w, https:\/\/www.combell.com\/nl\/blog\/files\/media-en-tekst-205x300.png 205w\" sizes=\"(max-width: 224px) 100vw, 224px\" \/><figcaption>Ons eerste 'Media &amp; Tekst'-blok.<\/figcaption><\/figure>\n<\/div>\n<p>In het mediagebied links kunnen we een afbeelding invoegen. In het inhoudsveld rechts kunnen we onze tekst invoegen.<\/p>\n<p>Voor we beslissen welke projecten we willen laten zien en er bijbehorende beelden voor zoeken, bouwen we de paginastructuur voor de inhoud, door eerst onze blokken allemaal toe te voegen.<\/p>\n<p>We voegen in totaal vier blokelementen in van het type \u2018Media &amp; Tekst\u2019. Daarbij gaan we twee professionele projecten en twee persoonlijke projecten tonen. We voegen daarom ook twee blokelementen van het type \u2018Kop\u2019 in - \u00e9\u00e9n voor elke sectie.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"560\" height=\"480\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/paginastructuur-maken.png\" alt=\"structuur van pagina in blok-editor WordPress\" class=\"wp-image-22307\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/paginastructuur-maken.png 560w, https:\/\/www.combell.com\/nl\/blog\/files\/paginastructuur-maken-300x257.png 300w\" sizes=\"(max-width: 560px) 100vw, 560px\" \/><figcaption>We hebben onze paginastructuur gemaakt voor de 'Mijn Projecten'-pagina<\/figcaption><\/figure>\n<\/div>\n<p><strong>Onze projecten:<\/strong><\/p>\n<p>Onze fictieve eventplanner wil heel wat projecten aan z\u2019n website toevoegen. We gaan ervan uit dat je je portfolio aanpast aan je eigen noden, maar als je dat van ons wilt kopi\u00ebren, doe gerust!<\/p>\n<p><strong>Onze professionele projecten:<\/strong><\/p>\n<ol>\n<li>Een festival dat nieuwe muziek, literatuur en kunst ondersteunt.<\/li>\n<li>Een huwelijk<\/li>\n<\/ol>\n<p><strong>Onze persoonlijke projecten:<\/strong><\/p>\n<ol>\n<li>Een lezing over cultuur in het digitale tijdperk.<\/li>\n<li>Een fotoproject dat zich richt op de rol van de natuur in de digitale wereld.<\/li>\n<\/ol>\n<p>Als je het portfolio aan jezelf aanpast, neem hier dan alle tijd die je nodig hebt. Nu je je projecten op een rijtje hebt, moeten we beelden zoeken die onze projecten voorstellen.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">Foto's en tekst toevoegen<\/h5>\n<p>Ga naar de plaats waar je je gratis afbeeldingen vond, om iets te vinden dat bij je projecten past. Als je inspiratie nodig hebt, zie je hieronder de beelden die we voor de onze kozen.<\/p>\n<p>Als je je foto's naar de mediabibliotheek hebt ge\u00fcpload, open je \u2018Mijn projecten\u2019 om ze in de blokeditor te bewerken. Voeg voor elk \u2018Media &amp; Tekst\u2019 item een afbeelding in door op de knop \u2018Mediabibliotheek\u2019 op het item te drukken.<\/p>\n<p>Als je de afbeeldingen hebt toegevoegd, moet je voor elk project wat tekst toevoegen. Je ziet de beschrijving van onze projecten in de volgende illustraties:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/media-en-tekst-naast-elkaar.png\" alt=\"\" class=\"wp-image-22308\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/media-en-tekst-naast-elkaar.png 726w, https:\/\/www.combell.com\/nl\/blog\/files\/media-en-tekst-naast-elkaar-300x201.png 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><figcaption>Tekst en Media naast elkaar voor onze professionele projecten<\/figcaption><\/figure>\n<\/div>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/media-en-tekst-naast-elkaar-2.png\" alt=\"voorbeeld media &amp; tekst wordpress\" class=\"wp-image-22309\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/media-en-tekst-naast-elkaar-2.png 726w, https:\/\/www.combell.com\/nl\/blog\/files\/media-en-tekst-naast-elkaar-2-300x228.png 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><figcaption>Tekst en Media naast elkaar voor onze persoonlijke projecten<\/figcaption><\/figure>\n<\/div>\n<p>Als de beschrijvingen eenmaal op hun plaats staan, moeten we onze projecten meer van elkaar laten opvallen.<\/p>\n<p>Dit kun je doen door de plaatsing van beelden en tekst in elk element te verwisselen, zodat we een soort zigzag-effect krijgen terwijl je door de pagina scrollt. Dat helpt om de aandacht van je bezoekers vast te houden.<\/p>\n<p>Druk op het tweede \u2018Media &amp; Tekst\u2019-element om de werkbalk te openen. E\u00e9n vakje is zwart gevuld. Daar staat \u2018Toon media links. We willen het beeld omwisselen zodat het rechts wordt weergegeven. We doen dit door op \u2018Toon media rechts\u2019 te klikken.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"492\" height=\"130\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/mediatekst-kant.png\" alt=\"werkbalk media &amp; tekst-element wordpress\" class=\"wp-image-22310\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/mediatekst-kant.png 492w, https:\/\/www.combell.com\/nl\/blog\/files\/mediatekst-kant-300x79.png 300w\" sizes=\"(max-width: 492px) 100vw, 492px\" \/><figcaption>Een kant kiezen voor je media<\/figcaption><\/figure>\n<\/div>\n<p>We doen hetzelfde met blokelement nr. 4 en voil\u00e0... elk project valt nu op en onze site heeft een duidelijker visuele identiteit.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"496\" height=\"692\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/mediatekst-geschrankt.png\" alt=\"voorbeeld afwisselend media &amp; tekst\" class=\"wp-image-22311\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/mediatekst-geschrankt.png 496w, https:\/\/www.combell.com\/nl\/blog\/files\/mediatekst-geschrankt-215x300.png 215w\" sizes=\"(max-width: 496px) 100vw, 496px\" \/><figcaption>Media &amp; Tekst zijn netjes geschrankt<\/figcaption><\/figure>\n<\/div>\n<p><strong>Pagina: \u2018Over Mij &amp; Contact\u2019<\/strong><\/p>\n<p>Open de pagina om in de blokeditor terecht te komen. Begin met het voorbereiden van de inhoudsstructuur van de pagina door een <em>cover<\/em> te maken met een stukje tekst als kop. Schrijf in deze rubriek een kort stukje tekst over jezelf.<em>&nbsp;<\/em><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/omslag-voorbeeld-1-1.png\" alt=\"voorbeeld omslag met tekst en afbeelding\" class=\"wp-image-22313\" width=\"800\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/omslag-voorbeeld-1-1.png 1112w, https:\/\/www.combell.com\/nl\/blog\/files\/omslag-voorbeeld-1-1-300x124.png 300w, https:\/\/www.combell.com\/nl\/blog\/files\/omslag-voorbeeld-1-1-768x316.png 768w\" sizes=\"(max-width: 1112px) 100vw, 1112px\" \/><figcaption>De omslag van onze 'Wie ben ik &amp; contact'-pagina<\/figcaption><\/figure>\n<\/div>\n<p>Het volgende dat we moeten doen is wat achtergrondinformatie over onszelf toevoegen, en daarvoor testen we een nieuw blok-element: <em>kolommen<\/em>.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h4 class=\"wp-block-heading\">Blok element: Kolommen<\/h4>\n<p>We moeten een nieuw blok-element onder de cover maken. Zoek het blok-element met de naam \u2018Kolommen\u2019. Hier kiezen we hoeveel kolommen we willen.<\/p>\n<p>We beginnen met 3 kolommen: dat heet een \u201833\/33\/33-variatie\u2019. Nu zien we drie kolommen met plus-tekens ertussen: hier kunnen we blok-elementen toevoegen.<\/p>\n<p>We willen in deze sectie 3 mededelingen maken, elk met een koptekst. In elke kolom maken we eerst de kop, dan een paragraaf gewone tekst.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/kolommen-blok-element.png\" alt=\"voorbeeld kolom-element wordpress\" class=\"wp-image-22314\" width=\"800\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/kolommen-blok-element.png 1112w, https:\/\/www.combell.com\/nl\/blog\/files\/kolommen-blok-element-300x65.png 300w, https:\/\/www.combell.com\/nl\/blog\/files\/kolommen-blok-element-768x166.png 768w\" sizes=\"(max-width: 1112px) 100vw, 1112px\" \/><figcaption>Onze kolommen met koppen en tekst<\/figcaption><\/figure>\n<\/div>\n<p>Niet tevreden over de grootte van je kolommen? We kunnen er wat 'ademruimte' tussen scheppen. Daarom klikken we in de balk bovenaan onze editor op drie horizontale lijnen die schuin onder elkaar staan: de \u2018Lijstweergave\u2019.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/instellingen-lijstweergave.png\" alt=\"instellingen-lijstweergave\" class=\"wp-image-22315\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/instellingen-lijstweergave.png 733w, https:\/\/www.combell.com\/nl\/blog\/files\/instellingen-lijstweergave-300x65.png 300w\" sizes=\"(max-width: 733px) 100vw, 733px\" \/><figcaption>De drie lijntjes helemaal rechts openen de 'Lijstweergave'.<\/figcaption><\/figure>\n<\/div>\n<p>Dit opent een hi\u00ebrarchische lijst, met alle blok-elementen die op onze pagina staan.<\/p>\n<p>We klikken op \u2018Kolommen\u2019. Zo opent de werkbalk in plaats van de hoofdkolom. We moeten de aanpassing veranderen van \u2018Wijde breedte\u2019 naar &nbsp;\u2018Volledige breedte\u2019 - net zoals we met de omslag deden.<\/p>\n<p>We voegen een kop toe boven de kolom en veranderen de tekstuitlijning van al onze onderdelen in \u2018Tekst centreren\u2019.<\/p>\n<p>De volgende stap is een onderdeel maken waarbij je ons kunt boeken voor een vergadering of een lezing.<\/p>\n<p>In hoofdstuk 5 installeren we een gratis plugin die ons helpt een mooi contactformulier te maken, maar we hebben natuurlijk een kop en een tekstgedeelte nodig dat vertelt waar je ons voor kunt boeken.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/boekingsonderdeel.png\" alt=\"kop en tekst wordpress\" class=\"wp-image-22316\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/boekingsonderdeel.png 726w, https:\/\/www.combell.com\/nl\/blog\/files\/boekingsonderdeel-300x174.png 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><figcaption>In hoofdstuk 5 installeren we een plugin om een contactformulier te maken<\/figcaption><\/figure>\n<\/div>\n<p>Het laatste wat we moeten doen is een sectie met andere contactinformatie maken. Dat doen we met een koptekst en drie kolommen.<\/p>\n<p>Hier moeten we een fysiek adres, een emailadres, en een telefoonnummer vermelden.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/kolom-contact.png\" alt=\"kolom voorbeeld\" class=\"wp-image-22317\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/kolom-contact.png 726w, https:\/\/www.combell.com\/nl\/blog\/files\/kolom-contact-300x76.png 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><figcaption>We gieten onze contactgegevens netjes in een kolom<\/figcaption><\/figure>\n<\/div>\n<p>Nu zijn we bijna klaar met de inhoud op onze pagina's, er ontbreken alleen nog een paar kleine dingen.<\/p>\n<p><strong>Pagina: Homepage:<\/strong><\/p>\n<p>Ook onze homepage (\u2018Mijn digitaal portfolio\u2019) heeft een omslagfoto nodig. Open in de blok-editor de homepage en voeg een omslag en een afbeelding toe.<\/p>\n<p>De tekst kan de titel van onze website zijn, of wat bij je pagina past. In onze omslag hergebruiken we de afbeelding van de \u2018Over Mij &amp; Contact\u2019-pagina.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/omslag-voorbeeld.png\" alt=\"voorbeeld cover met tekst WordPress\" class=\"wp-image-22319\" width=\"800\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/omslag-voorbeeld.png 1112w, https:\/\/www.combell.com\/nl\/blog\/files\/omslag-voorbeeld-300x147.png 300w, https:\/\/www.combell.com\/nl\/blog\/files\/omslag-voorbeeld-768x377.png 768w\" sizes=\"(max-width: 1112px) 100vw, 1112px\" \/><figcaption>Het omslagbeeld voor de homepage<\/figcaption><\/figure>\n<\/div>\n<p>We voegen ook een website-icoon aan onze website toe. Dat icoontje wordt vaak een 'favicon' genoemd. Een favicon is een icoon dat links van de website-titel in de browsertab te zien is.<\/p>\n<p>We voegen de favicon toe door in het WordPress-controlepaneel links op \u2018Weergave\u2019 te klikken, en daarna voor \u2018Customizer\u2019 te kiezen. Zo belanden we op de pagina waarin we erg veel van onze algemene website-identiteit kunnen aanpassen.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"406\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/Customizer-menu.png\" alt=\"customizer wordpress menu\" class=\"wp-image-22320\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/Customizer-menu.png 250w, https:\/\/www.combell.com\/nl\/blog\/files\/Customizer-menu-185x300.png 185w\" sizes=\"(max-width: 250px) 100vw, 250px\" \/><figcaption>Het menu in onze Customizer<\/figcaption><\/figure>\n<\/div>\n<p>We kiezen links voor \u2018Website identiteit\u2019.<em>&nbsp;<\/em>In het onderdeel \u2018Website identiteit\u2019 kunnen we de titel van onze website aanpassen, de ondertitel (of \u2018slogan\u2019) wijzigen, \u00e9n ons favicon toevoegen.<\/p>\n<p>Daarvoor klikken we op \u2019Selecteer website icoon\u2019. Nu kunnen we een afbeeldingen kiezen uit de mediabibliotheek (of er een nieuwe uploaden).<\/p>\n<p>Wanneer we die afbeelding gekozen hebben, kunnen we de afbeelding bijsnijden, zodat het er netjes uitziet als browser-icoon. Wanneer we tevreden zijn van onze afbeelding, klikken we op \u2018Afbeelding bijsnijden\u2019.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"384\" height=\"72\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/favicon-voorbeeld.png\" alt=\"favicon voorbeeld wordpress\" class=\"wp-image-22321\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/favicon-voorbeeld.png 384w, https:\/\/www.combell.com\/nl\/blog\/files\/favicon-voorbeeld-300x56.png 300w\" sizes=\"(max-width: 384px) 100vw, 384px\" \/><figcaption>Ons website-icoon of 'favicon'<\/figcaption><\/figure>\n<\/div>\n<p>En klaar: nu hebben we een website-icoon in ons browsertabblad. Onze website begint vorm te krijgen. Onze inhoud staat op zijn plaats, nu moeten we alles nog een beetje stylen.<\/p>\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h2 class=\"wp-block-heading\">Hoofdstuk 4: Je website stylen<\/h2>\n<p>Nu hebben we een website vol pagina's en inhoud - uitstekend! Da\u2019s al ideaal, maar we moeten alles nog wat visueel aantrekkelijker maken. Zo wekken we de belangstelling van onze bezoekers.<\/p>\n<h3 class=\"wp-block-heading\">Ons thema uitbreiden&nbsp;met een plugin<\/h3>\n<p>Omdat dit een gids voor beginners is, is het zinvol verder te werken binnen het thema dat we al gebruiken.<\/p>\n<p>Laten we onze eerste plugin in WordPress installeren, eentje die onze gereedschapskist voor de lay-out van de website uitbreidt.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h4 class=\"wp-block-heading\">Een plugin op je WordPress installeren<\/h4>\n<p>De eerste plugin die we installeren heet \u2018Twentig\u2019. Die breidt de aanpassingsmogelijkheden van ons thema uit. Maar wat betekent dat nu?<\/p>\n<p>Ons thema, Twenty Twenty-One, geeft al een aantal mogelijkheden om dingen aan het ontwerp te veranderen. Maar de \u2018Twentig\u2019 plugin breidt die mogelijkheden ferm uit. Onder andere de algemene lay-out kan ermee veranderd worden, en we hebben meer controle over oa. kleuren, tekst, blog en kop- en voettekst.<\/p>\n<p>Het installeren en activeren van een plugin in WordPress is heel eenvoudig. Zoek in het WordPress-controlepaneel het menu-onderdeel \u2018Plugins\u2019 links.<\/p>\n<p>Klik op \u2018Nieuwe plugin\u2019 bovenaan de pagina. <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"252\" height=\"120\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/nieuwe-plugin-installeren.png\" alt=\"nieuwe plugin installeren\" class=\"wp-image-22322\"\/><figcaption>We klikken op 'nieuwe plugin' in het Plug-in-menu.<\/figcaption><\/figure>\n<\/div>\n<p>Typ \u2018Twentig\u2019 in het zoekvak rechts. De plugin verschijnt als resultaat. Klik op \u2018Meer details\u2019 om meer over de plugin te lezen.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"360\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/twentig-plugin.png\" alt=\"info twentig plugin\" class=\"wp-image-22323\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/twentig-plugin.png 580w, https:\/\/www.combell.com\/nl\/blog\/files\/twentig-plugin-300x186.png 300w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><figcaption>De Twentig-plug-in<\/figcaption><\/figure>\n<\/div>\n<div class=\"wp-block-uagb-inline-notice uagb-inline_notice__align-left uagb-block-02f76681 uagb-inline_notice__outer-wrap\">\n<p class=\"uagb-notice-title\">Verschillende versies<\/p>\n<div class=\"uagb-notice-text\">\n<p>Plug-ins worden regelmatig ge\u00fcpdatet. Bij het schrijven van deze gids gebruiken we versie 1.3.8 van de Twentig-plugin. Als je een latere versie hebt, kan je kleine verschillen opmerken, maar het proces zou hetzelfde moeten zijn.<\/p>\n<\/div>\n<\/div>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p>Als je klaar bent, klik je op \u2018Nu installeren\u2019. Daarna moet je'm ook nog activeren: wanneer je een plugin installeert, is die nog niet meteen actief. Dat is een veiligheidsmaatregel voor het geval de plugin niet compatibel is met een andere plugin die je gebruikt. En zo kan je de plugin ook eerst controleren voor je hem gebruikt.<\/p>\n<p>Maar we weten dat deze plugin in orde is, dus is het veilig om op \u2018Activeren\u2019 te klikken. Je zou nu 'Twentig' moeten zien in het overzicht van de gebruikte plugins.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"726\" height=\"68\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/twentig-geinstalleerd.png\" alt=\"Twentig ge\u00efnstalleerd op WordPress\" class=\"wp-image-22324\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/twentig-geinstalleerd.png 726w, https:\/\/www.combell.com\/nl\/blog\/files\/twentig-geinstalleerd-300x28.png 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><figcaption>Twentig staat nu op de lijst van ge\u00efnstalleerde plugins in ons controlepaneel<\/figcaption><\/figure>\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h3 class=\"wp-block-heading\" id=\"wordpress-customizer\">De Customizer<\/h3>\n<p>Nu ben je klaar om je website te stylen. Daarvoor gaan we in het WordPress-controlepaneel naar \u2018Weergave\u2019, en klikken we op \u2018Customizer\u2019. Merk je de verschillen met eerder? Er zijn 'Twentig'-opties bijgekomen!<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"344\" height=\"638\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/Customizer-met-Twentig.png\" alt=\"customizer met twentig-opties WordPress\" class=\"wp-image-22325\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/Customizer-met-Twentig.png 344w, https:\/\/www.combell.com\/nl\/blog\/files\/Customizer-met-Twentig-162x300.png 162w\" sizes=\"(max-width: 344px) 100vw, 344px\" \/><figcaption>Het 'Customizer'-menu met Twentig-opties<\/figcaption><\/figure>\n<\/div>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h4 class=\"wp-block-heading\">Kleuren aanpassen<\/h4>\n<p>Kies in het aanpassen menu \u2018Kleuren &amp; donkere modus\u2019. Van hieruit kun je de hoofdkleuren van onze website regelen.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"176\" height=\"246\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/kleuren-aanpassen.jpg\" alt=\"customizing colors &amp; dark mode\" class=\"wp-image-22326\"\/><figcaption>Hier kunnen we kleuren op onze website aanpassen<\/figcaption><\/figure>\n<\/div>\n<p>Om deze functie te illustreren, veranderen we tijdelijk de achtergrondkleur.<\/p>\n<p>Klik op \u2018Selecteer kleur\u2019. Een kleurenkiezer verschijnt op het scherm. We kiezen de kleur zwart - ofwel in de kleurenbalk onderaan, ofwel door op de zwarte kleur in de kleurenkiezer te klikken.<\/p>\n<p>Zodra we erop klikken, zie je de kleur veranderen. <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/kleur-achtergrond-voorbeeld.jpg\" alt=\"achtergrondkleur Twentig veranderd\" class=\"wp-image-22327\" width=\"800\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/kleur-achtergrond-voorbeeld.jpg 965w, https:\/\/www.combell.com\/nl\/blog\/files\/kleur-achtergrond-voorbeeld-300x150.jpg 300w, https:\/\/www.combell.com\/nl\/blog\/files\/kleur-achtergrond-voorbeeld-768x384.jpg 768w\" sizes=\"(max-width: 965px) 100vw, 965px\" \/><figcaption>We hebben nu een zwarte achtergrondkleur op onze website<\/figcaption><\/figure>\n<\/div>\n<p>Als je niet tevreden bent met een kleur die je gekozen hebt, kun je altijd terugkeren naar de oorspronkelijke kleur door op \u2018Selecteer kleur\u2019 te klikken en dan op de knop \u2018Standaard\u2019.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">Kleurenschema met hex<em> <\/em>codes<\/h5>\n<p>Het is belangrijk om consequent te zijn met kleuren op je website, want dat helpt om een visuele identiteit te scheppen. Daarom is het een goed idee om een document te maken met een overzicht van de verschillende kleuren die je op je website wilt gebruiken: een zogenaamd kleurenschema.<\/p>\n<p>De gemakkelijkste manier om je kleuren een naam te geven, is door hun \u2018hex codes\u2019 te gebruiken, want deze codes kunnen gekopieerd worden als een kleur eenmaal gekozen is.<\/p>\n<p>Onder de kleurenkiezer zie je rechts van de kleur de hex code. Hij begint met het symbool \u2018#\u2019 en wordt gevolgd door een mengeling van zes cijfers en\/of letters. Als je ergens op de kleurenkiezer klikt, zie je dat de hex code verandert.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"292\" height=\"310\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/hexcode.png\" alt=\"hex-code achtergrondkleur\" class=\"wp-image-22328\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/hexcode.png 292w, https:\/\/www.combell.com\/nl\/blog\/files\/hexcode-283x300.png 283w\" sizes=\"(max-width: 292px) 100vw, 292px\" \/><figcaption>Voorbeeld van een hex-code<\/figcaption><\/figure>\n<\/div>\n<p>Bewaar je hex codes zodat ze gemakkelijk terug te vinden zijn. Dat maakt de taak om dezelfde codes voor verschillende delen van je website te kiezen veel gemakkelijker.<\/p>\n<p>Voor de achtergrond kozen we zwart, maar we veranderen dat nu naar een donkergrijze kleur met de hex code #131F26. Jij bent natuurlijk vrij om de kleur te kiezen die jij wil!<\/p>\n<p>Nu kiezen we onder \u2018Tekst Color\u2019 een warme tekstkleur die harmonieert met de omslagfoto. We kiezen een oranje-aangepaste kleur met de hex code #EA9412. Ook hier kun je de kleuren aanpassen aan je afbeeldingen of je website.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/achtergrond-en-tekst.png\" alt=\"achtergrondkleur en tekstkleur gewijzigd\" class=\"wp-image-22329\" width=\"800\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/achtergrond-en-tekst.png 1112w, https:\/\/www.combell.com\/nl\/blog\/files\/achtergrond-en-tekst-300x197.png 300w, https:\/\/www.combell.com\/nl\/blog\/files\/achtergrond-en-tekst-768x504.png 768w\" sizes=\"(max-width: 1112px) 100vw, 1112px\" \/><figcaption>We hebben de achtergrond- en tekstkleur gewijzigd<\/figcaption><\/figure>\n<\/div>\n<p><em>&nbsp;<\/em>Nu moet je de kleuren in je koptekst kiezen. De koptekst is waar je menu met verschillende pagina\u2019s staat. Die instellingen staan iets meer naar onder, onder het kopje \u2018Header\u2019 in het kleurenmenu.<\/p>\n<p>Om onze koptekst visueel van de achtergrond te onderscheiden, veranderen we de \u2018Background Color\u2019 in een gewone zwarte kleur of hex code #000000.<\/p>\n<p>\u2018Site Title Color\u2019 is de kleur van onze paginatitel, en \u2018Link Colour\u2019 is de kleur van je menu-onderdelen. We veranderen de tekstkleur in onze koptekst in wit.<\/p>\n<p>Het item \u2018Link Hover \/ Active Color\u2019 regelt de kleur van onze links als we er met de muis over gaan, of erop geklikt hebben. We gebruiken hier een meer ingetogen versie van onze gewone tekstkleur met hex code #EA9412.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"246\" height=\"438\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/kleuren-header.png\" alt=\"kleuren kiezen header wordpress\" class=\"wp-image-22330\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/kleuren-header.png 246w, https:\/\/www.combell.com\/nl\/blog\/files\/kleuren-header-168x300.png 168w\" sizes=\"(max-width: 246px) 100vw, 246px\" \/><figcaption>Onze header heeft nu z'n kleuren gekregen<\/figcaption><\/figure>\n<\/div>\n<p>Als je tevreden bent over de kleuren, klik je op 'Publiceren'. Je zult nu zien dat de kleuren overal op je website veranderd zijn.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h4 class=\"wp-block-heading\">Lettertype en lettergrootte aanpassen<\/h4>\n<p>Momenteel gebruikt je website een standaard lettertype en lettergrootte. Laten we dat veranderen. Zoek in de Customizer de instellingen voor tekst onder \u2018Fonts\u2019 in Twentig Options.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"346\" height=\"530\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/lettertype-kiezen-wordpress.png\" alt=\"Lettertype wijzigen WordPress\" class=\"wp-image-22331\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/lettertype-kiezen-wordpress.png 346w, https:\/\/www.combell.com\/nl\/blog\/files\/lettertype-kiezen-wordpress-196x300.png 196w\" sizes=\"(max-width: 346px) 100vw, 346px\" \/><figcaption>In het lettertype-menu kan je de tekstinstellingen van je WordPress-website regelen<\/figcaption><\/figure>\n<\/div>\n<p>\u2018Body Font\u2019 is het lettertype voor de tekst in de body op de website. Wij kiezen voor het populaire lettertype \u2018Lato\u2019, maar je kunt zelf kiezen welk je voorkeur heeft.<\/p>\n<p>Je kunt je lettertype kiezen uit het dropdown-menu. Lato is een zacht, warm en uitnodigend lettertype, en tegelijk professioneel. Het is geschikt voor vele doeleinden en kan gecombineerd worden met veel andere populaire lettertypes.<\/p>\n<p>We stellen de lettergrootte van onze bodytekst in op 18px en de regel-hoogte op 1.5. We kiezen ook Lato voor onze kopteksten (\u2018Headings Font\u2019). \u2018Headings Font Weight\u2019 regelt het \u2018gewicht\u2019 van ons lettertype. We kiezen \u2018Bold 700\u2019, wat mooi en sterk is voor een kop.<\/p>\n<p>\u2018Site Title\u2019 regelt onze paginatitel in onze koptekst. We willen ervoor zorgen dat de paginatitel niet te veel ruimte inneemt, dus stellen we \u2018Site Title Font Size\u2019 in op 22px. Onder \u2018Primary Menu\u2019 stellen we de lettergrootte in op 18px.<\/p>\n<p>Nu kleuren en tekst op hun plaats staan, kunnen we de instellingen opslaan door op \u2018Publiceren\u2019 te klikken.<\/p>\n<p>En zo gaan we over tot de algemene lay-out van onze website.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h4 class=\"wp-block-heading\">Aanpassen van je algemene indeling<\/h4>\n<p>In de Twentig Options vind je bovenaan \u2018Site Layout\u2019. Er zijn drie opties:<\/p>\n<ul>\n<li>Site Max-Width (px)<\/li>\n<li>\u00b7Text Width (px)<\/li>\n<li>Wide Width (px)<\/li>\n<\/ul>\n<p>Met deze instellingen kun je de breedte van je website en de inhoud ervan regelen.<\/p>\n<p>Site Max-Width regelt de maximale breedte van je website in pixels. Op dit moment vult de pagina de hele breedte van het scherm.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">Tekstbreedte (Wide Width)<\/h5>\n<p>Wide Width regelt de breedte van blokelementen die als \u2018Wide width\u2019 zijn ingesteld (<a href=\"https:\/#anchor)\" rel=\"noreferrer noopener\" target=\"_blank\">weet je nog?<\/a>). Op je projectpagina zijn je \u2018Tekst &amp; Media\u2019-elementen ingesteld als Wide Width.<\/p>\n<p>Stel Site Max-Width in op 1200px, Text Width op 600px, en Wide Width op 1200px en je ziet dat je website niet meer de volledige breedte van het scherm inneemt. Ook de breedte van ons tekstelement is verkleind.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"990\" height=\"430\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/max-breedte-veranderen.png\" alt=\"voorbeeld wide-width instellen \" class=\"wp-image-22332\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/max-breedte-veranderen.png 990w, https:\/\/www.combell.com\/nl\/blog\/files\/max-breedte-veranderen-300x130.png 300w, https:\/\/www.combell.com\/nl\/blog\/files\/max-breedte-veranderen-768x334.png 768w\" sizes=\"(max-width: 990px) 100vw, 990px\" \/><figcaption>Verandering van de Max-Width van de site. De breedte van je pagina wordt verkleind<\/figcaption><\/figure>\n<\/div>\n<p>Na het veranderen van de site-layout gaan we even terug naar de kleurinstellingen in de Customizer (\u2018Kleuren &amp; Donkere Modus\u2019). Daar vinden we een nieuw veld dat \u2018Inner Background Color\u2019 heet. Dat komt omdat je website geen volledige breedte meer inneemt, en er nu twee verschillende achtergrondkleuren mogelijk zijn: een achtergrond voor je inhoud (het \u2018middenste deel\u2019 van je website) en een achtergrond voor de randen (de \u2018buitenste delen\u2019: dat is je \u2018hoofdlaag\u2019).<\/p>\n<p>Laten we dit illustreren door het veld \u2018Inner Background Color\u2019 een kleur te geven. Kies bijvoorbeeld een \u2018Inner Background Color\u2019 met hex-code #15252d. Zo zie je een licht verschil in kleur tussen je twee achtergronden.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1112\" height=\"641\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/binnenste-achtergrond.png\" alt=\"inner background kleur ingesteld\" class=\"wp-image-22333\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/binnenste-achtergrond.png 1112w, https:\/\/www.combell.com\/nl\/blog\/files\/binnenste-achtergrond-300x173.png 300w, https:\/\/www.combell.com\/nl\/blog\/files\/binnenste-achtergrond-768x443.png 768w\" sizes=\"(max-width: 1112px) 100vw, 1112px\" \/><figcaption>We hebben een zwarte achtergrondkleur en een grijze kleur toegevoegd aan onze 'binnenste' achtergrond<\/figcaption><\/figure>\n<\/div>\n<p>Nu is duidelijk het verschil te zien tussen de hoofdachtergrond en de binnenste achtergrondkleur.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">Een achtergrondafbeelding toevoegen<\/h5>\n<p>Laten we \u2019t nog wat interessanter maken, en een achtergrondafbeelding toevoegen in plaats van onze hoofdachtergrondkleur. Dat doen we in het hoofdmenu van onze Customizer, bij \u2018Achtergrondafbeelding\u2019. Daar selecteren we de afbeelding van onze cover, en krijgen we een mooi visueel effect.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"212\" height=\"382\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/achtergrond-instellingen.png\" alt=\"Achtergrondafbeelding instellen WordPress\" class=\"wp-image-22334\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/achtergrond-instellingen.png 212w, https:\/\/www.combell.com\/nl\/blog\/files\/achtergrond-instellingen-166x300.png 166w\" sizes=\"(max-width: 212px) 100vw, 212px\" \/><figcaption>Instellingen voor de achtergrondafbeelding<\/figcaption><\/figure>\n<\/div>\n<p>Kies bij \u2018Voorinstelling\u2019 \u2018Schermvullend\u2019. Zo bedekt het beeld de hele achtergrond. Kies daarna bij \u2018Positie van de afbeelding\u2019 de bol in het midden: zo centreer je het achtergrondbeeld.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"641\" height=\"409\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/achtergrond-ingesteld.png\" alt=\"achtergrondafbeelding voorbeeld\" class=\"wp-image-22335\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/achtergrond-ingesteld.png 641w, https:\/\/www.combell.com\/nl\/blog\/files\/achtergrond-ingesteld-300x191.png 300w\" sizes=\"(max-width: 641px) 100vw, 641px\" \/><figcaption>Onze nieuwe achtergrondafbeelding<\/figcaption><\/figure>\n<\/div>\n<p>Terwijl je naar beneden scrollt, blijft de achtergrondafbeelding even groot en op dezelfde plaats. Dat komt omdat je de optie \u2018Schermvullen\u2019 gekozen hebt.<\/p>\n<p>In de volgende delen nemen we de kop- en voettekst onder handen, maar eerst gaan we een algemene instelling aanpassen. We gaan de paginatitels verbergen. Dat staat veel properder!<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">Het verwijderen van de standaard paginatitels<\/h5>\n<p>Bij het maken van de pagina's werd voor elke pagina een standaardtitel gemaakt. Maar ze nemen veel plaats in en halen de aandacht van de covers weg. Daarom halen we ze bij deze weg!<\/p>\n<p>Ga in het WordPress-controlepaneel naar \u2018Pagina\u2019s\u2019 in het menu links. Kies een willekeurige pagina en kies \u2018snel bewerken\u2019.<\/p>\n<p>De Twentig plugin helpt de paginatitel te verwijderen zonder de inhoud te veranderen. Daarvoor kiezen we onder \u2018Template\u2019 voor \u2018Twentig \u2013 No title\u2019.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"726\" height=\"216\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/snel-bewerken-wordpress.png\" alt=\"pagina-titels verwijderen WordPress\" class=\"wp-image-22336\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/snel-bewerken-wordpress.png 726w, https:\/\/www.combell.com\/nl\/blog\/files\/snel-bewerken-wordpress-300x89.png 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><figcaption>In 'snel bewerken' verander je snel en eenvoudig het sjabloon in 'Twentig - Geen Titel'. Zo verwijder je de paginatitels<\/figcaption><\/figure>\n<\/div>\n<p>Die stap herhalen we voor al onze pagina\u2019s.<\/p>\n<p>Als we nu gaan kijken op onze live website, zouden we nergens nog een paginatitel mogen zien staan!<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">Koptekst en voettekst&nbsp;<\/h5>\n<p>Nu is het tijd om de <em>header<\/em> netjes vorm te geven, en een <em>footer<\/em> te maken. Dit zijn twee belangrijke elementen die op de meeste websites voorkomen.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h6 class=\"wp-block-heading\">Kopteksten stylen<\/h6>\n<p>In onze Customizer (<a href=\"#wordpress-customizer\" rel=\"noreferrer noopener\" target=\"_blank\">je vindt \u2018m toch nog?<\/a>) gaan we de koptekst aanpassen. Dat doen we door bij \u2018Twentig Options\u2019 voor \u2018Header\u2019 te kiezen. Bij Layout zien we momenteel dat de Header Layout op \u2018Default\u2019 staat. Daar kiezen we nu voor 'Centered Stack'. Merk je het verschil? Onze site-naam staat nu boven ons menu.<\/p>\n<p>Nu kiezen we bij \u2018Header Padding\u2019 voor 'Medium'. Dat betekent dat de ruimte tussen onze koptekst en de rest zich aanpast.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"342\" height=\"302\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/sticky-header.png\" alt=\"Wordpress customizer layout heading\" class=\"wp-image-22362\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/sticky-header.png 342w, https:\/\/www.combell.com\/nl\/blog\/files\/sticky-header-300x265.png 300w\" sizes=\"(max-width: 342px) 100vw, 342px\" \/><figcaption>In de Customizer passen we de instellingen voor onze header aan.<\/figcaption><\/figure>\n<\/div>\n<p>Daarna kiezen we bij \u2018Menu\u2019 de optie \u2018Menu Item Spacing\u2019: dat stellen we in op \u2018Medium\u2019. Nu zit er iets meer ruimte tussen onze menu-items. <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"726\" height=\"146\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/header_voorbeeld.png\" alt=\"wordpress header gecentreerd en gestapeld\" class=\"wp-image-22360\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/header_voorbeeld.png 726w, https:\/\/www.combell.com\/nl\/blog\/files\/header_voorbeeld-300x60.png 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><figcaption>De inhoud in de koptekst is gestapeld en gecentreerd.<\/figcaption><\/figure>\n<\/div>\n<p>We vinken ook het veld \u2018Sticky Header\u2019 aan. Zo zit je \u2018header\u2019 bovenaan je pagina vast, en volgt hij als je op de pagina scrollt. Publiceer gerust je veranderingen en test het uit op je website!<\/p>\n<p>We passen nog een aantal andere zaken aan: zo verschijnt momenteel een stippellijn onder een menu-item, als je er met je muis overgaat. Dat veranderen we in het veld \u2018Menu Link Hover\/Active Style\u2019.<\/p>\n<p>Je kunt kiezen welke je het mooist vindt - wij kiezen \u2018None\u2019 omdat we al kleuren gebruiken om de <em>hover<\/em>-stijl aan te geven.<\/p>\n<p>Wanneer je een pagina opent die niet je homepage is, staat een streep onder de paginatitel in de kop. Ook dat kan je aanpassen, dankzij de Twentig Options. Klik daar op \u2019Additional Styling\u2019, en kies bij \u2018Links Style\u2019 voor Minimal. &nbsp;<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"346\" height=\"542\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/additional-styling-header.png\" alt=\"Twentig Options WordPress additional styling\" class=\"wp-image-22363\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/additional-styling-header.png 346w, https:\/\/www.combell.com\/nl\/blog\/files\/additional-styling-header-192x300.png 192w\" sizes=\"(max-width: 346px) 100vw, 346px\" \/><figcaption>Verwijder de lijn onder de paginatitel in de koptekst.<\/figcaption><\/figure>\n<\/div>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h6 class=\"wp-block-heading\">Voettekst maken<\/h6>\n<p>Een <em>footer<\/em> bevat vaak informatie zoals menu-onderdelen, contactinformatie, en nuttige links, vooral op websites met veel pagina's.<\/p>\n<p>In onze voettekst gaan we link-icoontjes invoegen die naar socialemediakanalen wijzen. Het is niet zo eenvoudig om de voettekst in het thema te veranderen (we kunnen de inhoud niet bewerken zoals we dat op pagina\u2019s doen), maar Twentig maakt \u2018t wel gemakkelijker. We zullen een \u2018herbruikbaar blok\u2019 moeten maken.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h6 class=\"wp-block-heading\">Herbruikbare blokken<\/h6>\n<p>We gaan terug naar het WordPress-controlepaneel en maken een nieuwe pagina (weet je nog hoe?). Noem de pagina bijvoorbeeld \u2018Footer\u2019, zodat hij makkelijk te herkennen is. Voeg nu je eerste widget toe als blok-element. Maak een nieuw blok-element en zoek naar \u2018Sociale iconen\u2019.<\/p>\n<p>Wanneer je dan in je blok-element op het plusteken klikt, zie je een heleboel socialemedia-icoontjes. Kies eerst Facebook. Om het icoon zichtbaar te maken op je website, moet je op het icoon tikken en iets in het adresveld typen.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"432\" height=\"254\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/herbruikbaar-blok-footer.png\" alt=\"herbruikbaar blok wordpress\" class=\"wp-image-22364\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/herbruikbaar-blok-footer.png 432w, https:\/\/www.combell.com\/nl\/blog\/files\/herbruikbaar-blok-footer-300x176.png 300w\" sizes=\"(max-width: 432px) 100vw, 432px\" \/><figcaption>Een herbruikbaar blok maken. Zorg dat de pictogrammen zichtbaar zijn door tekst toe te voegen in het adresveld.<\/figcaption><\/figure>\n<\/div>\n<p>Je kunt een link naar je profiel invoegen of gewoon een willekeurige letter, symbool of cijfer om te testen. Herhaal dat met de sociale kanalen die je hebt.<\/p>\n<p>Verander in de werkbalk de uitlijning van het blok-element in \u2018Centreren\u2019. Klik op \u2018Afmeting\u2019 en kies \u2018Klein\u2019. Kies bij de drie puntjes rechts onder \u2018Toevoegen aan herbruikbare blokken\u2019. Geef het de naam \u2018Footer\u2019. Klik dan op \u2018Publiceren\u2019, en je herbruikbare blok is klaar!<\/p>\n<p>Ga terug naar de instellingen van je Footer in de Customizer (onder \u2018Weergave\u2019 links). Onder \u2018Twentig Options\u2019 kies je voor \u2018Footer\u2019. Onder \u2018Footer Layout\u2019, kies je \u2018Blocks\u2019. Kies in het uitklapmenu \u2018Footer Content\u2019 je herbruikbare blok met de naam \u2018Footer\u2019. <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/herbruikbaar-blok-voettekst.jpg\" alt=\"customizer herbruikbaar blok footer\" class=\"wp-image-22365\" width=\"256\" height=\"178\"\/><figcaption>Kies een nieuw herbruikbaar blok voor je footer.<\/figcaption><\/figure>\n<\/div>\n<p>Je recycleerbare blok is nu zichtbaar onderaan je pagina.<\/p>\n<p>Je kunt je voettekst gemakkelijker zichtbaar maken door de achtergrondkleur te veranderen. Zoek bij de kleurinstellingen (\u2018Kleuren &amp; donkere modus\u2019) \u2018Footer widgets\u2019, en kies de gewenste achtergrondkleur.<\/p>\n<p>De achtergrondkleur van je Footer versterkt de aandacht van je bezoeker, door je inhoud te omlijsten.<\/p>\n<p>Met je header en footer op hun plaats kunnen we verder werken aan onze pagina\u2019s. We beginnen met de pagina \u2018Mijn projecten\u2019.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h4 class=\"wp-block-heading\">Je pagina's stijlen<\/h4>\n<h5 class=\"wp-block-heading\">'Mijn projecten'-pagina<\/h5>\n<p>Je projecten moeten opvallen, da\u2019s evident. Om daarvoor te zorgen, gaan we twee dingen bekijken.<\/p>\n<p>Er is de visuele functie genaamd \u2018overlap\u2019, die we kunnen gebruiken op \u2018Media &amp; Tekst\u2019-elementen (die we gebruikt hebben voor onze projecten). Daarbij ligt de tekst deels op het beeld.<\/p>\n<p>Daarvoor voegen we eerst een gekleurde achtergrond toe aan onze tekstelementen. Daarmee maken we een zogenaamde <em>kaartopmaak<\/em>.<\/p>\n<p>Dat doen we door een de blok-editor van \u2018Mijn Projecten\u2019 het eerste blok \u2018Media &amp; Tekst\u2019 te selecteren. Daarbij gaan we rechts bij de blok-instellingen naar \u2018Kleur\u2019.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"210\" height=\"450\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/kleuren-media-tekst-blok.png\" alt=\"kleurinstellingen blok media &amp; tekst\" class=\"wp-image-22366\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/kleuren-media-tekst-blok.png 210w, https:\/\/www.combell.com\/nl\/blog\/files\/kleuren-media-tekst-blok-140x300.png 140w\" sizes=\"(max-width: 210px) 100vw, 210px\" \/><figcaption>De kleurinstellingen voor je blok 'Media &amp; Tekst'<\/figcaption><\/figure>\n<\/div>\n<p>Bij \u2018Achtergrondkleur\u2019 kiezen wij voor een achtergrondkleur met hex code #24343B (via \u2018Aangepaste kleur\u2019), maar je kunt elke kleur kiezen die je wilt.<\/p>\n<p>In het veld \u2018Stijlen\u2019, ook in de blok-instellingen, kunnen we kiezen tussen vier opties. Wij kiezen \u2018Overlap\u2019. <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"232\" height=\"268\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/stijlen-blok.png\" alt=\"stijlen blok media &amp; tekst\" class=\"wp-image-22367\"\/><figcaption>We kunnen verschillende stijlen voor ons blok kiezen.<\/figcaption><\/figure>\n<\/div>\n<p>Onze tekst ligt nu boven op het beeld.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/tekst-achtergrondkleur-en-instelling-overlap.png\" alt=\"style overlap media &amp; tekst\" class=\"wp-image-22368\" width=\"800\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/tekst-achtergrondkleur-en-instelling-overlap.png 1112w, https:\/\/www.combell.com\/nl\/blog\/files\/tekst-achtergrondkleur-en-instelling-overlap-300x106.png 300w, https:\/\/www.combell.com\/nl\/blog\/files\/tekst-achtergrondkleur-en-instelling-overlap-768x272.png 768w\" sizes=\"(max-width: 1112px) 100vw, 1112px\" \/><figcaption>Met de optie 'Overlap' komt onze tekst deels op de afbeelding te liggen<\/figcaption><\/figure>\n<\/div>\n<p>&nbsp;Volg dezelfde procedure met je andere media &amp; tekst elementen, waardoor elk project meer opvalt en meer aandacht krijgt.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">\u2018Over Mij &amp; Contact\u2019-pagina<\/h5>\n<p>Deze pagina heeft al wat inhoud, maar het kan nog beter. Eerst gaan we de drie punten in onze kolommen wat duidelijker vormgeven.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/columns-voorbeeld.png\" alt=\"voorbeeld columns wordpress\" class=\"wp-image-22369\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/columns-voorbeeld.png 726w, https:\/\/www.combell.com\/nl\/blog\/files\/columns-voorbeeld-300x93.png 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><figcaption> We maakten eerder al drie kolommen met info over onszelf <\/figcaption><\/figure>\n<\/div>\n<p>Open de pagina \u2018Over Mij &amp; Contact\u2019 in de blokeditor. Selecteer de kolom en ga in de blok-instellingen rechts naar \u2018Twentig settings\u2019. Onder het veld \u2018Columns style\u2019 kiezen we \u2018Gray card\u2019. Nu verschijnen er kadertjes rond onze tekst, in een ietwat lichtere kleur.<\/p>\n<p>Bij \u2018Columns stacking\u2019 kiezen we \u2018Small screens\u2019. Zo zorgen we ervoor dat de kolommen onder elkaar komen te staan op kleine schermen.<\/p>\n<p>Om het nu helemaal af te werken, voegen we een een achtergrondkleur toe aan onze kolomvelden. In de blok-instellingen gaan we naar \u2018Kleur\u2019 en kiezen we een achtergrondkleur. Wij kiezen de kleur met hex code #24343B, zoals op onze projectpagina. Jij kunt natuurlijk je eigen kleur kiezen.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/columns-card-voorbeeld.png\" alt=\"columns gray card voorbeeld wordpress\" class=\"wp-image-22370\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/columns-card-voorbeeld.png 726w, https:\/\/www.combell.com\/nl\/blog\/files\/columns-card-voorbeeld-300x99.png 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><figcaption>We hebben nu onze punten veranderd in een meer in het oog springende lay-out.<\/figcaption><\/figure>\n<\/div>\n<p>Laat het gedeelte \u2018Je project bespreken\u2019 nu even voor wat het is - we komen er in het volgende hoofdstuk op terug.<\/p>\n<p>Laten we nu je laatste sectie met andere contactinformatie bewerken. Daarbij gaan we opnieuw de cover gebruiken, maar deze keer doen we dat een beetje anders.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">Blok-element: Lijst<\/h5>\n<p>We plaatsen een cover-element onderaan de pagina. In plaats van een afbeelding kiezen we nu voor een achtergrondkleur, via de kleurinstellingen van de omslag.<\/p>\n<p>We hebben een gedempte oranje\/bruine kleur gekozen met de hex code #BE6001 - jij mag natuurlijk weer een eigen kleur kiezen. We kiezen ervoor om de cover \u2018Volledige breedte\u2019 te geven via de werkbalk. In de omslag zelf zet je een Koptekst- blokelement. Daar schrijven we \u2018Overige contactinformatie\u2019.<\/p>\n<p>Nu voegen we een nieuw blok-element toe aan de omslag: een lijst. Die voeg je ook nu toe door op het plusje te klikken, en \u2018lijst\u2019 te zoeken. We schrijven de contactgegevens nu in onze lijst.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/contact-info.png\" alt=\"contactinfo voorbeeld\" class=\"wp-image-22371\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/contact-info.png 726w, https:\/\/www.combell.com\/nl\/blog\/files\/contact-info-300x130.png 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><figcaption>Eerder maakten we al een blok met contactinfo, nu gaan we die wat 'stylen'.<\/figcaption><\/figure>\n<\/div>\n<p>Bij de blokinstellingen van ons Lijst-element kiezen we onder \u2018Stijlen\u2019 voor \u2018Inner border\u2019. Zo worden de onderdelen gescheiden door horizontale lijnen.<\/p>\n<p>Nu selecteren we weer het cover-element, en kiezen we in de werkbalk \u2018Positie van de inhoud wijzigen\u2019 (het vierkant met de negen puntjes). Daar kiezen we voor \u2018Midden links\u2019. Zo komt de tekst links in het midden te staan.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/inner-border-voorbeeld.png\" alt=\"inner border voorbeeld\" class=\"wp-image-22372\" width=\"800\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/inner-border-voorbeeld.png 1112w, https:\/\/www.combell.com\/nl\/blog\/files\/inner-border-voorbeeld-300x117.png 300w, https:\/\/www.combell.com\/nl\/blog\/files\/inner-border-voorbeeld-768x299.png 768w\" sizes=\"(max-width: 1112px) 100vw, 1112px\" \/><figcaption>We hebben onze contactgegevens ingevoegd op een cover met een gekleurde achtergrond. De 'inner border' scheidt onze onderdelen met lijnen<\/figcaption><\/figure>\n<\/div>\n<p>Verwijder tenslotte het \u2018oude\u2019 gedeelte, waar onze contactinfo eerst stond (de koptekst en de kolommen).<\/p>\n<p>We verwijder een blok door erop te klikken, en in de werkbalk op de drie puntjes rechts te klikken. Daar kiezen we \u2018Verwijder blok\u2019. Zo, da\u2019s netjes. Nu over naar onze blogpagina!<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">Je blogpagina ordenen<\/h5>\n<p>Met onze plugin Twentig kan je je pagina \u2018Mijn blog\u2019, waar een overzicht van al je blogartikelen getoond wordt, netjes ordenen.<\/p>\n<p>Laten we die blogpagina ordenen met een rastersysteem. Dat zal vooral handig zijn als het aantal berichten erop toeneemt.<\/p>\n<p>Ga naar de Customizer (via het WordPress-controlepaneel onder \u2018Weergave\u2019), en kies \u2018Twentig Options\u2019. Daar klik je op \u2018Blog\u2019.<\/p>\n<p>Het is handig om meteen op de blogpagina te zien wat er gebeurt. In de Customizer ga je dus ook naar je blogpagina (je klikt gewoon rechts op je website op \u2018Mijn blog\u2019).<\/p>\n<p>Onder \u2018Blog Layout\u2019 kies je \u2018Grid\u2019. Zo staan al je blogposts voortaan in een raster naast elkaar. In het volgende veld, \u2018Blog Style\u2019, kiezen we \u2018Card with border\u2019: die optie omkadert je berichten.<\/p>\n<p>In het veld \u2018Columns\u2019 kiezen we 2: zo komen er maximaal twee berichten naast elkaar te staan. <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"240\" height=\"346\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/layout-blog-instellingen.png\" alt=\"layout blog customizer wordpress\" class=\"wp-image-22373\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/layout-blog-instellingen.png 240w, https:\/\/www.combell.com\/nl\/blog\/files\/layout-blog-instellingen-208x300.png 208w\" sizes=\"(max-width: 240px) 100vw, 240px\" \/><figcaption>De lay-out-instellingen voor je blogpagina<\/figcaption><\/figure>\n<\/div>\n<p>Onder \u2018Featured Image Placement\u2019 kiezen we \u2018Above\u2019. Zo komt onze gekozen afbeelding boven de titel te staan.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"424\" height=\"540\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/preview-blog.png\" alt=\"blog met featured image placement above\" class=\"wp-image-22374\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/preview-blog.png 424w, https:\/\/www.combell.com\/nl\/blog\/files\/preview-blog-236x300.png 236w\" sizes=\"(max-width: 424px) 100vw, 424px\" \/><figcaption>De preview van het blogbericht<\/figcaption><\/figure>\n<\/div>\n<p>Onder \u2018Excerpt Length\u2019 kunnen we de lengte van het uittreksel kiezen. Standaard vinden we het wat te lang, dus stellen we het in op 30 woorden. In het veld \u2018Tekst Alignment\u2019 kiezen we \u2018Center\u2019. Netjes! Speel gerust nog wat met de andere instellingen voor de blogpagina.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">Je blogposts stylen<\/h5>\n<p>Laten we nu van de blogpagina naar de post zelf gaan. Onder \u2018Blog\u2019 in de Twentig Options vind je het gedeelte \u2018Single Post\u2019. Hier kun je de instellingen voor je blogposts veranderen. Die instellingen gelden ook voor je toekomstige berichten.<\/p>\n<p>Om de veranderingen van kracht te zien worden, kan je in de Customizer je enige post openklikken. Zo merken we meteen de veranderingen.<\/p>\n<p>In \u2018Featured Image Layout\u2019 kies je \u2018Cover\u2019. Zo werkt onze afbeelding standaard als het omslag-element waar we al mee werkten. In de volgende velden regelen we de uitlijning en de lettergrootte van de koptekst van elke post. Kies bij \u2018Post Title Tekst Alignment\u2019 voor \u2018Center\u2019, en zet de lettergrootte op 56 pixels.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"340\" height=\"446\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/layout-blogberichten.png\" alt=\"customizer layout blogberichten\" class=\"wp-image-22375\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/layout-blogberichten.png 340w, https:\/\/www.combell.com\/nl\/blog\/files\/layout-blogberichten-229x300.png 229w\" sizes=\"(max-width: 340px) 100vw, 340px\" \/><figcaption>De lay-outinstellingen voor blogberichten <\/figcaption><\/figure>\n<\/div>\n<p>In het veld \u2018Post Meta\u2019 kun je kiezen welke informatie je wilt laten zien, zowel onder de titel als onder het bericht. We kiezen ervoor om de publicatiedatum te laten verschijnen onder de titel.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/titel-met-datum-blog.png\" alt=\"voorbeeld post meta blogtitel datum\" class=\"wp-image-22376\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/titel-met-datum-blog.png 726w, https:\/\/www.combell.com\/nl\/blog\/files\/titel-met-datum-blog-300x58.png 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><figcaption>De blogtitel met verschijningsdatum eronder<\/figcaption><\/figure>\n<\/div>\n<p>Daarnaast kunnen we nog kiezen welke info onder ons bericht komt te staan, en kunnen we de reactie-sectie al dan niet weglaten. Klik op \u2018Publiceren\u2019, en je blog is klaar voor nieuwe berichten!<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h6 class=\"wp-block-heading\">Een extra blogpost<\/h6>\n<p>Om de voordelen van het rastersysteem ten volle te zien, maken we een extra blogpost. Vanaf je het nieuwe blogbericht gemaakt en gepubliceerd hebt, verschijnt het op je blogpagina, naast je eerste blogbericht.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/nieuw-blogbericht-voorbeeld.png\" alt=\"Een nieuw blogbericht voorbeeld\" class=\"wp-image-22377\" width=\"750\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/nieuw-blogbericht-voorbeeld.png 726w, https:\/\/www.combell.com\/nl\/blog\/files\/nieuw-blogbericht-voorbeeld-300x241.png 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><figcaption>Een nieuw blogbericht op de blogpagina, keurig naast ons eerste bericht.<\/figcaption><\/figure>\n<\/div>\n<p>Je blog is nu compleet en klaar.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h5 class=\"wp-block-heading\">Je homepage stylen<\/h5>\n<p>Als laatste in dit hoofdstuk gaan we onze voorpagina nog eens bekijken. De tekst die er nu staat, is niet slecht, maar het kan nog wat opmaak gebruiken. We gaan nu groepen maken, kaartindelingen toevoegen en links naar de rest van onze website.<\/p>\n<p>Open je homepagina in de blok-editor. Je zal al gemerkt hebben dat we bij het typen in de blok-editor telkens een nieuw blok-element maken wanneer we op enter duwen.<\/p>\n<p>Da\u2019s handig, maar niet ideaal als we de achtergrond van onze volledige tekst een kleur willen geven. Daarom gaan we van onze alinea\u2019s een groep maken.<\/p>\n<p>Dat doen we door met de muis Doe dit door met de muis te slepen en alle tekst te selecteren. In onze werkbalk kunnen we nu het type van ons blok wijzigen. Daar kiezen we \u2018Groep\u2019.<em>&nbsp;<\/em><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/blokken-groeperen.png\" alt=\"groep maken van blokken wordpress\" class=\"wp-image-22379\" width=\"750\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/blokken-groeperen.png 642w, https:\/\/www.combell.com\/nl\/blog\/files\/blokken-groeperen-300x243.png 300w\" sizes=\"(max-width: 642px) 100vw, 642px\" \/><figcaption>We groeperen onze blokken.<\/figcaption><\/figure>\n<\/div>\n<p>Nu zijn alle blokken verzameld in een groep. Nu kan je de instellingen van je groep rechts onder de blok-instellingen aanpassen. Daar kunnen we nu ook de achtergrondkleur van de groep aanpassen. We kiezen hier weer voor hex code #24343B.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h6 class=\"wp-block-heading\">Links toevoegen<\/h6>\n<p>Laten we nu een paar links toevoegen aan onze tekst. Eentje naar je pagina \u2018Mijn projecten\u2019, bijvoorbeeld.<\/p>\n<p>Daarvoor heb je de URL van de pagina nodig. Een gemakkelijke manier om onze URL te vinden, is surfen naar onze website, en daar de pagina te openen waarvan we de URL nodig hebben. Die URL verschijnt in  de adresbalk: daar kunnen we \u2018m kopi\u00ebren.<\/p>\n<p>In de blokeditor markeer je het woord \u2018projecten\u2019 in de eerste zin. Daarna klik je de werkbalk op het link-icoon.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"586\" height=\"282\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/url-toevoegen.png\" alt=\"hyperlink toevoegen\" class=\"wp-image-22380\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/url-toevoegen.png 586w, https:\/\/www.combell.com\/nl\/blog\/files\/url-toevoegen-300x144.png 300w\" sizes=\"(max-width: 586px) 100vw, 586px\" \/><figcaption>Met het link-knopje in de werkbalk voegen we een hyperlink naar een pagina toe.<\/figcaption><\/figure>\n<\/div>\n<p>Zet de URL in het adresveld en druk op \u2018Enter\u2019 om hem te activeren. Nu is je link naar \u2018Mijn projecten\u2019 actief.<\/p>\n<p>Je kunt je link ook een ander kleur geven dan je bodytekst. Selecteer de link, en druk in de werkbalk op het kleine pijltje naar onder. Kies onderaan \u2018Tekstkleur\u2019 en voeg je kleur in. Wij kiezen de hex code #EAB15B.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"464\" height=\"356\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/tekstkleur-aanpassen.png\" alt=\"tekstkleur aanpassen in de werkbalk\" class=\"wp-image-22381\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/tekstkleur-aanpassen.png 464w, https:\/\/www.combell.com\/nl\/blog\/files\/tekstkleur-aanpassen-300x230.png 300w\" sizes=\"(max-width: 464px) 100vw, 464px\" \/><figcaption>We passen de tekstkleur van onze link aan in de werkbalk.<\/figcaption><\/figure>\n<\/div>\n<p>Herhaal het proces en maak links naar je pagina's \u2018Over Mij &amp; Contact\u2019 en \u2018Mijn Blog\u2019. Klik op \u2018Bijwerken\u2019 en klaar! <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"589\" height=\"800\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/voorbeeld-homepage-links.png\" alt=\"voorbeeld homepage met links wordpress\" class=\"wp-image-22382\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/voorbeeld-homepage-links.png 589w, https:\/\/www.combell.com\/nl\/blog\/files\/voorbeeld-homepage-links-221x300.png 221w\" sizes=\"(max-width: 589px) 100vw, 589px\" \/><figcaption>De homepage met links naar andere pagina's<\/figcaption><\/figure>\n<\/div>\n<p>Weet je nog toen we begonnen met bouwen aan onze website? Wat een verschil met nu!<\/p>\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h2 class=\"wp-block-heading\">Hoofdstuk 5: Functies toevoegen aan je website<\/h2>\n<h3 class=\"wp-block-heading\">Contactformulier met WPForms<\/h3>\n<p>Je wilt dat je bezoekers je kunnen boeken voor een vergadering of een lezing, of meer informatie kunnen vragen. Daarom gaan we de WPForms plugin installeren. Die maakt \u2018t makkelijk om mooie en flexibele contactformulieren te maken.<\/p>\n<p>In het WordPress-controlepaneel gaan we links naar Plugins, en kiezen we \u2018Nieuwe plugin\u2019. We zoeken WPForms, installeren het en activeren het. Net zoals toen we de Twentig-plugin installeerden!<\/p>\n<p>Als je je geheugen even moet opfrissen, kijk dan nog eens terug naar <a href=\"https:\/#anchor\" rel=\"noreferrer noopener\" target=\"_blank\">het begin van hoofdstuk 4<\/a>.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"568\" height=\"324\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/wpforms-plugin.png\" alt=\"wpforms plugin wordpress\" class=\"wp-image-22383\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/wpforms-plugin.png 568w, https:\/\/www.combell.com\/nl\/blog\/files\/wpforms-plugin-300x171.png 300w\" sizes=\"(max-width: 568px) 100vw, 568px\" \/><figcaption>De WPForms-plugin<\/figcaption><\/figure>\n<\/div>\n<p>Als de plugin geactiveerd is, verschijnt hij in de bovenste balk van je controlepaneel.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"410\" height=\"32\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/balk-wp-controlepaneel-wpform.png\" alt=\"balk controlepaneel WordPress met WPForms\" class=\"wp-image-22384\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/balk-wp-controlepaneel-wpform.png 410w, https:\/\/www.combell.com\/nl\/blog\/files\/balk-wp-controlepaneel-wpform-300x23.png 300w\" sizes=\"(max-width: 410px) 100vw, 410px\" \/><figcaption>Gemakkelijk toegang tot WPForms vanuit de bovenste balk van je controlepaneel<\/figcaption><\/figure>\n<\/div>\n<p>De volgende illustratie laat zien hoe het formulier er uit zal zien als het klaar is - we laten je dit nu zien, zodat je weet waar we naar toe werken:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/contactformulier-wpforms.png\" alt=\"voorbeeld contactformulier WPForms\" class=\"wp-image-22385\" width=\"800\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/contactformulier-wpforms.png 1112w, https:\/\/www.combell.com\/nl\/blog\/files\/contactformulier-wpforms-300x277.png 300w, https:\/\/www.combell.com\/nl\/blog\/files\/contactformulier-wpforms-768x709.png 768w\" sizes=\"(max-width: 1112px) 100vw, 1112px\" \/><figcaption>Zo zal ons contactformulier eruitzien<\/figcaption><\/figure>\n<\/div>\n<p>Hier zijn wat onderdelen die handig zijn in een contactformulier:<\/p>\n<ul>\n<li>Een naamveld<\/li>\n<li>Een e-mailadressenveld<\/li>\n<li>Een uitklapmenu met twee opties: \u2018Boek een afspraak\u2019 of \u2018Boek een lezing\u2019<\/li>\n<li>Een tekstveld waarin de bezoeker informatie kan geven<\/li>\n<li>Verstuur-knop<\/li>\n<\/ul>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h4 class=\"wp-block-heading\">Cre\u00eber je contactformulier<\/h4>\n<p>Klik bovenaan op WPForms en kies vervolgens \u2018Nieuwe toevoegen\u2019. <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/nieuwe-toevoegen-wpforms.png\" alt=\"setup wpforms nieuwe toevoegen\" class=\"wp-image-22386\" width=\"800\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/nieuwe-toevoegen-wpforms.png 1112w, https:\/\/www.combell.com\/nl\/blog\/files\/nieuwe-toevoegen-wpforms-300x153.png 300w, https:\/\/www.combell.com\/nl\/blog\/files\/nieuwe-toevoegen-wpforms-768x392.png 768w\" sizes=\"(max-width: 1112px) 100vw, 1112px\" \/><figcaption>De pagina die je ziet als je in WPForms op \u2018Nieuwe toevoegen\u2019 klikt.<\/figcaption><\/figure>\n<\/div>\n<p>Op de hoofdpagina van WPForms kun je kiezen uit heel wat sjablonen. Wij willen van nul starten, dus kiezen we \u2018Leeg Formulier\u2019. Zo komen we meteen in de drag&amp;drop-editor van WPForms.<\/p>\n<p>Aan de linkerkant hebben we onder \u2018Velden toevoegen\u2019 de verschillende blokken die we in ons formulier kunnen slepen. In het veld \u2018Veld opties\u2019 regelen we de instellingen voor de afzonderlijke blokken.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"398\" height=\"470\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/drag-en-drop-wpforms.png\" alt=\"Drag &amp; Drop WPForms\" class=\"wp-image-22387\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/drag-en-drop-wpforms.png 398w, https:\/\/www.combell.com\/nl\/blog\/files\/drag-en-drop-wpforms-254x300.png 254w\" sizes=\"(max-width: 398px) 100vw, 398px\" \/><figcaption>De WPForms drag &amp; drop-editor<\/figcaption><\/figure>\n<\/div>\n<p>Het eerste blok dat je nodig hebt is het \u2018Dropdown\u2019-blok. Sleep het naar je formulier rechts. Je formulier bestaat nu voorlopig uit een titel, een dropdown-menu en een \u2018Indienen\u2019-knop.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/dropdown-menu.png\" alt=\"Dropdown-menu toevoegen aan WPForms\" class=\"wp-image-22388\" width=\"800\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/dropdown-menu.png 1112w, https:\/\/www.combell.com\/nl\/blog\/files\/dropdown-menu-300x93.png 300w, https:\/\/www.combell.com\/nl\/blog\/files\/dropdown-menu-768x238.png 768w\" sizes=\"(max-width: 1112px) 100vw, 1112px\" \/><figcaption> Een dropdown-menu-blok toevoegen<\/figcaption><\/figure>\n<\/div>\n<p>Klik op het dropdown-blok dat je net invoegde. Dat opent je \u2018Veld opties\u2019\u2019. In het veld \u2018Label\u2019 typ je \u2018Afspraak of lezing boeken\u2019.<\/p>\n<p>Onder \u2018Keuzes\u2019 geef je de opties in die je bezoeker kan kiezen. Dus: \u2018Afspraak boeken\u2019 en \u2018Lezing boeken\u2019. De derde optie kan je verwijderen met de rode knop ernaast. &nbsp;<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"402\" height=\"622\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/uitklapmenu-wpforms.png\" alt=\"uitklapmenu toevoegen wpforms\" class=\"wp-image-22389\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/uitklapmenu-wpforms.png 402w, https:\/\/www.combell.com\/nl\/blog\/files\/uitklapmenu-wpforms-194x300.png 194w\" sizes=\"(max-width: 402px) 100vw, 402px\" \/><figcaption>Dropdown-opties toevoegen<\/figcaption><\/figure>\n<\/div>\n<p>Activeer het \u2018Vereist\u2019-veld onderaan. Zo kunnen bezoekers geen formulier versturen zonder dat \u00e9\u00e9n van de opties is aangeduid.<\/p>\n<p>Op ons contactformulier zie je nu naast \u2018Afspraak of lezing boeken\u2019 een rode asterisk staan: dat betekent dat die vraag verplicht in te vullen is.<\/p>\n<p>Je kan bij \u2018Veld Opties\u2019 nog iets geavanceerder gaan \u2013 daarvoor kies je bovenaan \u2018Geavanceerd\u2019. Je kan er een 'placeholder' invullen bij \u2018Tekst plaatshouder\u2019. Bijvoorbeeld: \u2018Selecteer hier\u2026\u2019<\/p>\n<p>Bezoekers zien die plaatshouder wanneer ze nog geen keuze hebben gemaakt in je dropdown-menu.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"378\" height=\"152\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/plaatshouder-wpforms.png\" alt=\"placeholder in wpforms wordpress\" class=\"wp-image-22390\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/plaatshouder-wpforms.png 378w, https:\/\/www.combell.com\/nl\/blog\/files\/plaatshouder-wpforms-300x121.png 300w\" sizes=\"(max-width: 378px) 100vw, 378px\" \/><figcaption>Een placeholder in WPForms<\/figcaption><\/figure>\n<\/div>\n<p>Ga terug naar \u2018Velden toevoegen\u2019 en sleep het blok \u2018Enkele tekst lijn\u2019 tussen het uitklapmenu en de \u2018Indienen\u2019-knop. Het nieuwe veld gaan we gebruiken als het veld waar je bezoeker z\u2019n naam invult.<\/p>\n<p>&nbsp;Klik op het veld, en je komt weer terecht bij veldopties. Daar gaan we bij \u2018Label\u2019 \u2018Naam\u2019 invullen, en ook dit veld vereist maken onderaan.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"558\" height=\"432\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/leeg-formulier-wpforms.png\" alt=\"enkele tekst lijn wordpress wpforms\" class=\"wp-image-22391\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/leeg-formulier-wpforms.png 558w, https:\/\/www.combell.com\/nl\/blog\/files\/leeg-formulier-wpforms-300x232.png 300w\" sizes=\"(max-width: 558px) 100vw, 558px\" \/><figcaption>We hebben ons blok 'Enkele tekst lijn' ingevoegd<\/figcaption><\/figure>\n<\/div>\n<p><em>&nbsp;<\/em>Nu nog een veld om een e-mailadres in toe te voegen. Sleep vanuit \u2018Velden toevoegen\u2019 het blok \u2018E-mail\u2019 onder het namenveld. Aan het e-mailveld hoef je niets meer aan te passen: alles staat al ingesteld zoals het hoort. Tenzij misschien een plaatshouder! Klik op het e-mailveld, kies \u2018Geavanceerd\u2019 en schrijf een plaatshouder. Bijvoorbeeld <a href=\"mailto:jouwnaam@voorbeeld.be\" rel=\"noreferrer noopener\" target=\"_blank\">jouwnaam@voorbeeld.be<\/a>.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"578\" height=\"516\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/e-mailveld-wpforms.png\" alt=\"e-mail veld wordpress wpforms\" class=\"wp-image-22392\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/e-mailveld-wpforms.png 578w, https:\/\/www.combell.com\/nl\/blog\/files\/e-mailveld-wpforms-300x268.png 300w\" sizes=\"(max-width: 578px) 100vw, 578px\" \/><figcaption>Het veld 'e-mail' is toegevoegd<\/figcaption><\/figure>\n<\/div>\n<p>Als laatste voegen we \u2018Paragraaf tekst\u2019 onder het e-mailveld toe. We veranderen het label (de titel) van het blok in \u2018Jouw vraag\u2019. We maken het blok niet vereist: je bezoeker is niet verplicht een vraag in te vullen. Als plaatshouder kunnen we invullen \u2018Een vraag? Stel 'm hier!\u2019.<\/p>\n<p>So far so good. Nu nog een paar zaken aanpassen. Klik op de \u2018Indienen\u2019-knop, en je komt terecht op de algemene instellingen voor je formulier. <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/algemene-instellingen-wpforms-formulier.png\" alt=\"algemene instellingen venster wpforms\" class=\"wp-image-22393\" width=\"800\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/algemene-instellingen-wpforms-formulier.png 880w, https:\/\/www.combell.com\/nl\/blog\/files\/algemene-instellingen-wpforms-formulier-300x193.png 300w, https:\/\/www.combell.com\/nl\/blog\/files\/algemene-instellingen-wpforms-formulier-768x493.png 768w\" sizes=\"(max-width: 880px) 100vw, 880px\" \/><figcaption>Algemene instellingen. Hier geef je je contactformulier een naam en breng je wijzigingen aan.<\/figcaption><\/figure>\n<\/div>\n<p>Onder \u2018Formuliernaam\u2019 schrijf je \u2018Contactformulier\u2019. Da\u2019s handig om overzicht te houden wanneer je meerdere formulieren aanmaakt.<\/p>\n<p>Ga verder naar \u2018Bevestigingen\u2019 links. Hier kan je een bevestigingsbericht schrijven voor wanneer iemand je contactformulier heeft ingevuld en verzonden. Zoals \u2018Dankje om me te contacteren. Ik reageer zo snel mogelijk!\u2019<\/p>\n<p>Zo. Nu klikken we rechtsbovenaan op \u2018Opslaan\u2019, en ons formulier is klaar! <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"612\" height=\"82\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/opslaan-wpforms.png\" alt=\"opslaan wpforms wordpress\" class=\"wp-image-22394\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/opslaan-wpforms.png 612w, https:\/\/www.combell.com\/nl\/blog\/files\/opslaan-wpforms-300x40.png 300w\" sizes=\"(max-width: 612px) 100vw, 612px\" \/><figcaption>Klik op 'Opslaan' en je contactformulier is klaar voor gebruik!<\/figcaption><\/figure>\n<\/div>\n<p>Zo simpel is WPForms. Het enige dat je nu nog hoeft te doen, is je contactformulier op je pagina invoegen.<\/p>\n<p>Om het contactformulier in te voegen, open je je \u2018Over Mij &amp; Contact\u2019-pagina in de blok-editor. We verwijderen natuurlijk onze tekst die zegt dat er een plugin komt!<\/p>\n<p>In plaats daarvan gaan we nu een cover toevoegen als blok-element, onder onze tekst. We kiezen een mooie afbeelding, maar voegen daarna geen tekst toe op onze afbeelding. In plaats daarvan klikken we op de drie puntjes in de werkbalk.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"494\" height=\"132\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/werkbalk-cover.png\" alt=\"werkbalk cover wordpress\" class=\"wp-image-22395\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/werkbalk-cover.png 494w, https:\/\/www.combell.com\/nl\/blog\/files\/werkbalk-cover-300x80.png 300w\" sizes=\"(max-width: 494px) 100vw, 494px\" \/><figcaption>De werkbalk van onze nieuwe cover<\/figcaption><\/figure>\n<\/div>\n<p>We kiezen nu \u2018blok verwijderen\u2019. Daarmee gaan we het tekstblok verwijderen. Nu klikken we op het plusje op onze cover, en gaan we een nieuw element toevoegen. Zoek gerust naar WPForms: het duikt plots op tussen onze elementen!<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/wpforms-blok-toevoegen.png\" alt=\"\" class=\"wp-image-22396\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/wpforms-blok-toevoegen.png 624w, https:\/\/www.combell.com\/nl\/blog\/files\/wpforms-blok-toevoegen-300x212.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><figcaption>Voeg een WPForms-bolk-element aan je cover toe<\/figcaption><\/figure>\n<\/div>\n<p>Klik in het uitklapmenu op je nieuw aangemaakte contactformulier. Zo, je contactformulier staat op je pagina!<strong>&nbsp;<\/strong><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/afgewerkt-contactformulier.png\" alt=\"contactformulier voorbeeld wpforms\" class=\"wp-image-22397\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/afgewerkt-contactformulier.png 606w, https:\/\/www.combell.com\/nl\/blog\/files\/afgewerkt-contactformulier-300x251.png 300w\" sizes=\"(max-width: 606px) 100vw, 606px\" \/><figcaption>Je afgewerkte contactformulier<\/figcaption><\/figure>\n<\/div>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h3 class=\"wp-block-heading\">SEO-plugins voor betere resultaten op Google<\/h3>\n<p>Online zichtbaarheid is erg belangrijk als je wil dat je website bezoekers trekt. Daarom gaan we aan SEO doen: <em>Search Engine Optimization<\/em> of zoekmachine-optimalisatie. Daar is gelukkig een SEO-plugin voor!&nbsp;<\/p>\n<p>Met een eenvoudige plugin kan je je website optimaliseren voor zoekmachines, zonder diepgaande kennis van SEO. &nbsp; Met een beetje hulp vergroot de plugin je kansen om hoger te eindigen in de resultaten van zoekmachines.<\/p>\n<p>Er bestaan verschillende plugins voor, maar wij kiezen \u2018The SEO Framework\u2019. &nbsp;Die zoeken, installeren en activeren we zoals bij onze vorige plugins.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"438\" height=\"238\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/SEO-Framework.png\" alt=\"seo framework plugin wordpress\" class=\"wp-image-22398\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/SEO-Framework.png 438w, https:\/\/www.combell.com\/nl\/blog\/files\/SEO-Framework-300x163.png 300w\" sizes=\"(max-width: 438px) 100vw, 438px\" \/><figcaption>De Zoekmachine Optimalisatie plug-in, 'The SEO Framework'.<\/figcaption><\/figure>\n<\/div>\n<p>Wanneer de plugin geactiveerd is, zien we links in het WordPress-controlepaneel een klein vergrootglas met de tekst \u2018SEO\u2019. Klik er gerust op!<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"186\" height=\"134\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/seo-plugin.png\" alt=\"SEO framework plugin wordpress\" class=\"wp-image-22399\"\/><figcaption>The SEO Framework-plugin<\/figcaption><\/figure>\n<\/div>\n<p>Er zijn veel instellingen bij deze plugin, maar we concentreren ons op de drie belangrijkste.<\/p>\n<p>We scrollen een beetje naar onder en vinden \u2018Homepage Settings\u2019. Daar gaan we een \u2018Meta title\u2019 en \u2018Meta description\u2019 toevoegen. Da\u2019s informatie die getoond wordt wanneer onze website in zoekresultaten verschijnt.<\/p>\n<p>Onder Meta Title schrijven we: \u2018Culturele evenementen: bekijk mijn digitaal portfolio en boek me\u2019. Daarbij letten we er dus op dat we onze belangrijkste trefwoorden te vermelden: \u2018culturele evenementen\u2019. Zo is de kans groter dat wanneer mensen die term ingeven in zoekmachines, onze website tevoorschijn komt!<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/homepage-settings-seo-plugin.png\" alt=\"homepage settings seo framework wordpress plugin\" class=\"wp-image-22400\" width=\"600\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/homepage-settings-seo-plugin.png 610w, https:\/\/www.combell.com\/nl\/blog\/files\/homepage-settings-seo-plugin-300x215.png 300w\" sizes=\"(max-width: 610px) 100vw, 610px\" \/><figcaption>Vul een Meta Title en Meta Description in<\/figcaption><\/figure>\n<\/div>\n<p>Onder Meta Description schrijf je: \u2018Welkom op mijn digitale portfolio. Hier vind je een selectie van projecten, en kan je me contacteren voor verdere vragen. Vergeet mijn blog niet te lezen!.\u2019<\/p>\n<p>Wanneer we tekst ingeven, zorgen we dat we binnen de groene lijn blijven. Zo zijn we zeker dat de lengte van onze tekst ideaal is.<\/p>\n<p>Onder \u2018Social Meta Settings\u2019, uploaden we bij \u2018Social Image Fallback URL\u2019 een logo-afbeelding. Die wordt getoond als onze pagina gedeeld wordt op een sociaal kanaal. Kies een herkenbare foto voor je website.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"170\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/social-image-fallback-url.png\" alt=\"social image fallback url\" class=\"wp-image-22401\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/social-image-fallback-url.png 532w, https:\/\/www.combell.com\/nl\/blog\/files\/social-image-fallback-url-300x96.png 300w\" sizes=\"(max-width: 532px) 100vw, 532px\" \/><figcaption>Kies een afbeelding die verschijnt wanneer je pagina's gedeeld worden.<\/figcaption><\/figure>\n<\/div>\n<p>Als laatste gaan we de \u2018Schema.org Settings\u2019 aanpassen. Da\u2019s nog iets naar onder scrollen. Daar klikken we op het tabblad \u2018Presence\u2019. Onder \u2018About this website\u2019 geven we mee dat de website een persoon vertegenwoordigt. Je kan je naam ook ingeven, net eronder.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"590\" height=\"276\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/presence-about-this-website-seo.png\" alt=\"presence seo plugin\" class=\"wp-image-22402\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/presence-about-this-website-seo.png 590w, https:\/\/www.combell.com\/nl\/blog\/files\/presence-about-this-website-seo-300x140.png 300w\" sizes=\"(max-width: 590px) 100vw, 590px\" \/><figcaption>Hier vullen we in wat de website vertegenwoordigt<\/figcaption><\/figure>\n<\/div>\n<p>Nu klikken we bovenaan de pagina op \u2018Save Settings\u2019. En we zijn er!<\/p>\n<p>Voorlopig zijn dat alle WordPress-plugins die je nodig hebt om opgestart te raken, maar niets houdt je tegen om nog meer te experimenteren en de beste plugins voor jouw website op te zoeken!<\/p>\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h3 class=\"wp-block-heading\">Een nieuw thema installeren<\/h3>\n<p>Wanneer je niet tevreden bent van je huidige thema, kan je makkelijk van thema wisselen. Zoals gezegd zijn er heel wat gratis thema's die je kan gebruiken.<\/p>\n<p>Om een nieuw WordPress-thema te gebruiken, moet je er eentje zoeken en installeren.&nbsp; Je kunt thema's zoeken op dezelfde manier als je naar plugins zoekt. Zoek vanuit \u2018Weergave\u2019 in het WordPress-controlepaneel naar Thema\u2019s, en klik daarna op \u2018Nieuwe toevoegen\u2019.<\/p>\n<p>Op de zoekpagina kun je je resultaten filteren en zoeken naar populaire of laatste nieuwe thema's. Als je nog meer wilt filteren, gebruik dan de \u2018Eigenschappen filter\u2019.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"416\" height=\"98\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/themas-toevoegen.png\" alt=\"thema's toevoegen filters gebruiken\" class=\"wp-image-22403\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/themas-toevoegen.png 416w, https:\/\/www.combell.com\/nl\/blog\/files\/themas-toevoegen-300x71.png 300w\" sizes=\"(max-width: 416px) 100vw, 416px\" \/><figcaption>Verschillende mogelijkheden om je zoekactie te filteren<\/figcaption><\/figure>\n<\/div>\n<p>Het is een goed idee om ook op Google wat rond te zoeken naar WordPress-thema\u2019s. Zo krijg je een goed beeld van wat er zoal bestaat, zeker als je iets specifieks zoekt (een thema dat ideaal is voor een portfolio, bijvoorbeeld).<\/p>\n<p>Wij kiezen nu voor het thema \u2018Astra\u2019: dat is een populair en gratis thema. Want pas op: net zoals plugins heb je ook 'premium thema's'. Zo'n premium WordPress-thema is betalend!<\/p>\n<p>Wanneer je \u2018Astra\u2019 hebt gevonden, kan je erop klikken om een voorbeeld te zien en details te ontdekken over het thema. &nbsp;<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"324\" height=\"280\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/astra-theme.png\" alt=\"astra thema wordpress\" class=\"wp-image-22404\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/astra-theme.png 324w, https:\/\/www.combell.com\/nl\/blog\/files\/astra-theme-300x259.png 300w\" sizes=\"(max-width: 324px) 100vw, 324px\" \/><figcaption>Het thema 'Astra'.<\/figcaption><\/figure>\n<\/div>\n<p>Een thema installeren is gemakkelijk. En je hoeft niet nerveus te zijn dat er iets misgaat, want net als plugins moet een thema eerst geactiveerd worden voor het gebruikt kan worden.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"390\" height=\"344\" src=\"https:\/\/www.combell.com\/nl\/blog\/files\/astra-details-preview.png\" alt=\"astra details preview\" class=\"wp-image-22405\" srcset=\"https:\/\/www.combell.com\/nl\/blog\/files\/astra-details-preview.png 390w, https:\/\/www.combell.com\/nl\/blog\/files\/astra-details-preview-300x265.png 300w\" sizes=\"(max-width: 390px) 100vw, 390px\" \/><figcaption>Als je het thema ge\u00efnstalleerd hebt, klik je op \u2018Voorbeeld\u2019, en zie je de aanpassingsmogelijkheden van het thema.<\/figcaption><\/figure>\n<\/div>\n<p>Als het thema ge\u00efnstalleerd is, verschijnt het onder \u2018Thema's\u2019, en je kunt op het thema klikken om een \u2018Live Voorbeeld\u2019 te krijgen. In die preview kun je de aanpassingsmogelijkheden van het thema uitproberen.<\/p>\n<p>Het kan er wat verwarrend uitzien omdat je website al volledig gestijld is met de Twentig plugin. Het is dus belangrijk te weten dat je soms best helemaal van nul begint, wanneer je een nieuw thema installeert.<\/p>\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h4 class=\"wp-block-heading\">Sjablonen<\/h4>\n<p>Veel thema's bieden sjablonen aan, \u2018Starter sites\u2019. Die zijn wel vaak pas beschikbaar als je je thema geactiveerd hebt.<\/p>\n<p>Sjablonen zijn kant-en-klare websites die je helemaal kunt importeren, of waarvan je een paar pagina\u2019s gebruikt. Daarna kan je die invullen en bewerken zoals je wilt.<\/p>\n<p>Er zijn een paar dingen waarmee je rekening moet houden bij het importeren van een sjabloon.<\/p>\n<p>Wanneer je een thema installeert, doe je dat best op twee manieren. Ofwel op een \u2018schone\u2019 WordPress-installatie, dus eentje waar nog niets van ingesteld is. Ofwel zet je een \u2018testsite\u2019 op (staging). Daarbij ga je een kopie maken van je website, waar je allerlei zaken op kunt testen. Hoe je dat doet bij Combell, vind je op de <a href=\"https:\/\/www.combell.com\/nl\/help\/ac\/wordpress\/\" rel=\"noreferrer noopener\" target=\"_blank\">Combell Knowledge Base<\/a>.<\/p>\n<p>Daarnaast let je best ook op met plugins: niet alle plugins zijn compatibel of ideaal te gebruiken bij elk thema.<\/p>\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h2 class=\"wp-block-heading\">Nog \u00e9\u00e9n tip: automatische updates met managed WordPress<\/h2>\n<p>Ziezo. Dit is het einde van deze gids. Je hebt veel bijgeleerd!. Je begon aan je WordPress-reis met een leeg doek, en nu heb je een voltooide website. Goed gedaan!<\/p>\n<p>Nu je weet hoe je een eigen WordPress-website kan maken, geven we je nog \u00e9\u00e9n tip. WordPress-plugins hebben voortdurend updates nodig, net zoals je thema's en je WordPress zelf. Het is belangrijk dat die updates gebeuren, anders ben je kwetsbaar voor veiligheidslekken.<\/p>\n<p>Met managed WordPress bij Combell kan je rekenen op automatische updates van thema's, plugins en WordPress zelf. Daarnaast maak je met Managed WordPress ook gebruik van testomgevingen om aanpassingen op je website uit te proberen, en plaats je makkelijk back-ups terug.<\/p>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<div class=\"wp-block-buttons is-vertical is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-1 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-white-color has-yellow-background-color has-text-color has-background\" href=\"https:\/\/www.combell.com\/nl\/hosting\/managed-wordpress\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">Ontdek de Managed WordPress van Combell<\/a><\/div>\n<\/div>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p><strong>En dan nu... veel plezier met de rest van je WordPress-avontuur \ud83d\ude09!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Je eigen WordPress-website maken is niet moeilijk: dankzij onze ultieme startersgids maak je een eigen WordPress-website in een handomdraai.<\/p>\n","protected":false},"author":1,"featured_media":22507,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[4416],"tags":[82,182],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/www.combell.com\/nl\/blog\/files\/Hoe-zelf-een-WordPress-website-maken-de-ultieme-startersgids.jpg",1200,420,false],"thumbnail":["https:\/\/www.combell.com\/nl\/blog\/files\/Hoe-zelf-een-WordPress-website-maken-de-ultieme-startersgids-50x50.jpg",50,50,true],"medium":["https:\/\/www.combell.com\/nl\/blog\/files\/Hoe-zelf-een-WordPress-website-maken-de-ultieme-startersgids-300x105.jpg",300,105,true],"medium_large":["https:\/\/www.combell.com\/nl\/blog\/files\/Hoe-zelf-een-WordPress-website-maken-de-ultieme-startersgids-768x269.jpg",768,269,true],"large":["https:\/\/www.combell.com\/nl\/blog\/files\/Hoe-zelf-een-WordPress-website-maken-de-ultieme-startersgids.jpg",1200,420,false],"1536x1536":["https:\/\/www.combell.com\/nl\/blog\/files\/Hoe-zelf-een-WordPress-website-maken-de-ultieme-startersgids.jpg",1200,420,false],"2048x2048":["https:\/\/www.combell.com\/nl\/blog\/files\/Hoe-zelf-een-WordPress-website-maken-de-ultieme-startersgids.jpg",1200,420,false],"post-featured":["https:\/\/www.combell.com\/nl\/blog\/files\/Hoe-zelf-een-WordPress-website-maken-de-ultieme-startersgids-850x290.jpg",850,290,true],"post-featured-opt":["https:\/\/www.combell.com\/nl\/blog\/files\/Hoe-zelf-een-WordPress-website-maken-de-ultieme-startersgids-750x256.jpg",750,256,true],"post-featured-opt-md":["https:\/\/www.combell.com\/nl\/blog\/files\/Hoe-zelf-een-WordPress-website-maken-de-ultieme-startersgids-850x290.jpg",850,290,true],"post-featured-opt-sm":["https:\/\/www.combell.com\/nl\/blog\/files\/Hoe-zelf-een-WordPress-website-maken-de-ultieme-startersgids-485x165.jpg",485,165,true],"post-featured-opt-xs":["https:\/\/www.combell.com\/nl\/blog\/files\/Hoe-zelf-een-WordPress-website-maken-de-ultieme-startersgids-375x128.jpg",375,128,true],"post-most-popular":["https:\/\/www.combell.com\/nl\/blog\/files\/Hoe-zelf-een-WordPress-website-maken-de-ultieme-startersgids-50x50.jpg",50,50,true],"post-author":["https:\/\/www.combell.com\/nl\/blog\/files\/Hoe-zelf-een-WordPress-website-maken-de-ultieme-startersgids-60x60.jpg",60,60,true]},"uagb_author_info":{"display_name":"Combell","author_link":"https:\/\/www.combell.com\/nl\/blog\/author\/blogadmin\/"},"uagb_comment_info":4,"uagb_excerpt":"Je eigen WordPress-website maken is niet moeilijk: dankzij onze ultieme startersgids maak je een eigen WordPress-website in een handomdraai.","_links":{"self":[{"href":"https:\/\/www.combell.com\/nl\/blog\/wp-json\/wp\/v2\/posts\/22110"}],"collection":[{"href":"https:\/\/www.combell.com\/nl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.combell.com\/nl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.combell.com\/nl\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.combell.com\/nl\/blog\/wp-json\/wp\/v2\/comments?post=22110"}],"version-history":[{"count":55,"href":"https:\/\/www.combell.com\/nl\/blog\/wp-json\/wp\/v2\/posts\/22110\/revisions"}],"predecessor-version":[{"id":26049,"href":"https:\/\/www.combell.com\/nl\/blog\/wp-json\/wp\/v2\/posts\/22110\/revisions\/26049"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.combell.com\/nl\/blog\/wp-json\/wp\/v2\/media\/22507"}],"wp:attachment":[{"href":"https:\/\/www.combell.com\/nl\/blog\/wp-json\/wp\/v2\/media?parent=22110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.combell.com\/nl\/blog\/wp-json\/wp\/v2\/categories?post=22110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.combell.com\/nl\/blog\/wp-json\/wp\/v2\/tags?post=22110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}