{"id":3692,"date":"2024-09-21T00:24:00","date_gmt":"2024-09-21T00:24:00","guid":{"rendered":"https:\/\/tableberg.com\/?p=3692"},"modified":"2024-09-20T21:15:22","modified_gmt":"2024-09-20T21:15:22","slug":"hoe-tekst-toevoegen-boven-een-afbeelding-in-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/nl\/how-to-add-text-on-top-of-an-image-in-wordpress\/","title":{"rendered":"Tekst toevoegen boven een afbeelding in WordPress"},"content":{"rendered":"<p>Door tekst boven op een afbeelding toe te voegen, kun je tekst direct boven op afbeeldingen plaatsen. Deze functie kan de aantrekkingskracht van je berichten en pagina's vergroten door teksten en afbeeldingen te combineren om berichten op een gemakkelijk verteerbare manier over te brengen.<\/p>\n\n\n\n<p>Er zijn talloze gebruikssituaties waarin je deze functie kunt gebruiken. Bijvoorbeeld reisfoto's, banners, call-to-actions, portfolio's, bijschriften bij bepaalde locaties, enz. In dit artikel laten we je zien hoe je tekst kunt toevoegen boven een afbeelding in WordPress.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tekst toevoegen boven een afbeelding in WordPress<\/h2>\n\n\n\n<p>Voeg de <strong>Beeldblok<\/strong> naar de editor. Dit is een standaardblok dat je vindt in de blokkenbibliotheek. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-Block-to-the-editor.webp\" alt=\"Het afbeeldingsblok toevoegen aan de editor\" class=\"wp-image-3693\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-Block-to-the-editor.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-Block-to-the-editor-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-Block-to-the-editor-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-Block-to-the-editor-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-Block-to-the-editor-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Hiermee kun je een afbeelding toevoegen aan de editor. Je kunt dit doen vanaf je lokale schijf of vanuit de mediabibliotheek.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-an-image-to-the-editor-from-your-local-drive-or-from-the-media-library.webp\" alt=\"Een afbeelding aan de editor toevoegen vanaf uw lokale schijf of vanuit de mediabibliotheek\" class=\"wp-image-3694\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-an-image-to-the-editor-from-your-local-drive-or-from-the-media-library.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-an-image-to-the-editor-from-your-local-drive-or-from-the-media-library-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-an-image-to-the-editor-from-your-local-drive-or-from-the-media-library-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-an-image-to-the-editor-from-your-local-drive-or-from-the-media-library-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-an-image-to-the-editor-from-your-local-drive-or-from-the-media-library-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Ga naar de werkbalk en <strong>klik op<\/strong> de <strong>Tekst toevoegen over afbeelding<\/strong> functie.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-the-add-text-over-an-image-feature.webp\" alt=\"Selecteer de functie Tekst toevoegen over een afbeelding\" class=\"wp-image-3695\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-the-add-text-over-an-image-feature.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-the-add-text-over-an-image-feature-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-the-add-text-over-an-image-feature-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-the-add-text-over-an-image-feature-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-the-add-text-over-an-image-feature-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Je krijgt de optie om de gewenste tekst op de afbeelding te schrijven. Schrijf zoals je wilt.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-text-on-top-of-an-image-in-WordPress.webp\" alt=\"Tekst toevoegen boven een afbeelding in WordPress\" class=\"wp-image-3696\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-text-on-top-of-an-image-in-WordPress.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-text-on-top-of-an-image-in-WordPress-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-text-on-top-of-an-image-in-WordPress-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-text-on-top-of-an-image-in-WordPress-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-text-on-top-of-an-image-in-WordPress-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Zodra de tekst is toegevoegd, kun je de uitlijning en stilering wijzigen. Hopelijk kun je de rest zelf doen.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Set-text-alignment-on-an-image-in-WordPress.webp\" alt=\"Tekstuitlijning op een afbeelding instellen in WordPress\" class=\"wp-image-3697\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Set-text-alignment-on-an-image-in-WordPress.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Set-text-alignment-on-an-image-in-WordPress-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Set-text-alignment-on-an-image-in-WordPress-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Set-text-alignment-on-an-image-in-WordPress-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Set-text-alignment-on-an-image-in-WordPress-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Verken deze post op <a href=\"https:\/\/tableberg.com\/nl\/hoe-tekst-uitlijnen-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">hoe tekst uitlijnen in WordPress<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Afsluiten!<\/h2>\n\n\n\n<p>Hopelijk heb je genoten van deze tutorial. Maar voordat we afsluiten, zijn er een aantal punten waar we je aan willen herinneren. Geef voorrang aan leesbaarheid wanneer je tekst toevoegt aan de afbeelding. Zorg ervoor dat de kleur van de tekst en de afbeelding met elkaar contrasteren zodat de tekst leesbaar wordt.<\/p>\n\n\n\n<p>Plaats de tekst vervolgens op een geschikte plaats boven de afbeelding, zodat hij geen belangrijke elementen van de afbeelding aan het oog onttrekt. Houd ten slotte de tekst kort en bondig. Te veel tekst kan de lezers overweldigen.<\/p>","protected":false},"excerpt":{"rendered":"<p>Adding text on top of an image allows you to overlay text directly on top of visuals. This feature can enhance the appeal of your posts and pages by combining texts and images to convey messages in easily digestible ways. There are numerous use cases where you can use this feature. For example, travel photographs, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3698,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[124,41],"class_list":["post-3692","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-add-text","tag-image-block"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/How-to-Add-Text-on-Top-of-an-Image-in-WordPress.webp","author_info":{"display_name":"Istiak Rayhan","author_link":"https:\/\/tableberg.com\/nl\/author\/wpx_irayhan\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/posts\/3692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/comments?post=3692"}],"version-history":[{"count":1,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/posts\/3692\/revisions"}],"predecessor-version":[{"id":3699,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/posts\/3692\/revisions\/3699"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/media\/3698"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/media?parent=3692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/categories?post=3692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/tags?post=3692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}