{"id":81159,"date":"2020-01-22T16:30:20","date_gmt":"2020-01-22T15:30:20","guid":{"rendered":"https:\/\/www.ait-themes.club\/?p=81159"},"modified":"2023-10-20T11:30:11","modified_gmt":"2023-10-20T11:30:11","slug":"wordpress-image-block-tutorial-blog","status":"publish","type":"post","link":"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/","title":{"rendered":"Werken met het WordPress afbeeldingsblok: Hoe je afbeeldingen toevoegt in WordPress [+Secret tip]"},"content":{"rendered":"<p>Voor veel gebruikers kan het werken met afbeeldingen erg frustrerend zijn. Het is niet altijd gemakkelijk om de juiste beeldverhouding te kiezen of om het formaat van afbeeldingen aan te passen zodat ze er goed uitzien in de hele lay-out.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><a href=\"#whyiswordpressimageblock\">Waarom het WordPress Afbeeldingsblok gebruiken<\/a><\/li><li><a href=\"#howtoaddimagesinwpblock\">Hoe afbeeldingen toevoegen met het afbeeldingsblok van WordPress<\/a><\/li><li><a href=\"#otherimageblock\">Extra opmaak afbeeldingen proces<\/a><\/li><li><a href=\"#extratipaboutimageblock\">Extra tip van ons in het artikel<\/a><\/li><\/ol>\n\n\n\n<p>Oudere WordPress versies (tot v5.0) voegden afbeeldingen toe met de +Add Media knop. Het probleem was dat je zelfs bij een minimale wijziging in de afbeeldingsgrootte de afbeelding opnieuw moest uploaden. Dit betekent tijdverlies en overbodig klikken.<\/p>\n\n\n\n<p>De nieuwe blok-gebaseerde editor Gutenberg verandert de manier waarop je afbeeldingen toevoegt aan WordPress om dit proces eenvoudiger te maken voor eindgebruikers. In dit artikel laten we je een praktische handleiding zien voor het toevoegen en bewerken van het WordPress afbeeldingsblok. Daarnaast leggen we nog een optie uit voor het plakken van afbeeldingen - hoe je een afbeelding kunt kopi\u00ebren en plakken naar het inhoudsgebied met slechts een paar klikken. We laten je ook kennismaken met de nieuw toegevoegde functies van WP 5.3.<\/p>\n\n\n\n<p>Maar laten we het eerst hebben over waarom je afbeeldingen zou moeten gebruiken in posts en pagina's.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_is_WordPress_Image_block_must-have_for_your_website\"><\/span><a id=\"whyiswordpressimageblock\"><\/a>Waarom is het WordPress afbeeldingsblok onmisbaar voor je website?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Attract_attention\"><\/span>Aandacht trekken<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Afbeeldingen trekken de aandacht van websitebezoekers. Ze moeten interessant zijn om bezoekers langer op je website te houden. Denk aan een blogbericht zonder afbeeldingen. Het is alleen maar een hoop tekst. Op het eerste gezicht is het niet erg interessant, ook al kan het waardevol zijn en vol informatie zitten. Bovendien kunnen foto's helpen om je onderwerp beter voor te stellen en te beschrijven.<\/p>\n\n\n\n<p>Daarom moeten we WordPress Image block gebruiken om de aandacht te richten op belangrijke dingen.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-images-example.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"797\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-images-example.png\" alt=\"Voorbeeld van 2 blogs met of zonder afbeeldingen\" class=\"wp-image-81169\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-images-example.png 1600w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-images-example-300x149.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-images-example-1024x510.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-images-example-768x383.png 768w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-images-example-1536x765.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/a><figcaption>Voorbeeld van 2 blogs met of zonder afbeeldingen<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Illustrative_text_and_context\"><\/span>Illustratieve tekst en context<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Afbeeldingen zijn ook een essentieel onderdeel voor het begrijpen van inhoud, omdat ze bezoekers beter laten begrijpen waar het artikel over gaat. Dankzij infographics kun je ingewikkelde verbanden uitleggen en dingen op een eenvoudige manier vertellen. Het helpt bezoekers zich beter te ori\u00ebnteren in het probleem waar je het over hebt.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-infographic.png\"><img loading=\"lazy\" decoding=\"async\" width=\"819\" height=\"903\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-infographic.png\" alt=\"Voorbeeld infographic\" class=\"wp-image-81170\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-infographic.png 819w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-infographic-272x300.png 272w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/blog-post-infographic-768x847.png 768w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/><\/a><figcaption>Infographic voor betere tekstuitleg<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Make_website_nicer\"><\/span>Website mooier maken<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Bovendien maken afbeeldingen het hele websiteontwerp mooi af. Het gaat niet alleen om de lay-out van de website, maar ook om gebruiksvriendelijkheid. Goed gekozen en geplaatste afbeeldingen kunnen bezoekers helpen om gemakkelijker door je website te bladeren.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_add_images_in_WordPress_block_editor\"><\/span><a id=\"howtoaddimagesinwpblock\"><\/a>Hoe afbeeldingen toevoegen in de blokeditor van WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Om een afbeelding in een bericht of pagina in te voegen, moet je een kernblok - Afbeeldingsblok - toevoegen. Er zijn verschillende manieren om dit te doen:<\/p>\n\n\n\n<p>- Met \"+\" in de bovenste balk of ergens anders in de editor<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-add.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"800\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-add.png\" alt=\"Voeg een afbeeldingsblok toe door op &quot;+&quot; te klikken\" class=\"wp-image-81171\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-add.png 1280w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-add-300x188.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-add-1024x640.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-add-768x480.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a><figcaption>WordPress Afbeelding toevoegen door op \"+\" te klikken<\/figcaption><\/figure><\/div>\n\n\n\n<p>- Schuine streep \"\/\" gebruiken en daarna het woord \"image\" schrijven<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-shortcut.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-shortcut.gif\" alt=\"Afbeeldingsblok toevoegen met schuine streep\" class=\"wp-image-81177\"\/><\/a><figcaption>Afbeeldingsblok toevoegen met schuine streep \"\/\"<\/figcaption><\/figure><\/div>\n\n\n\n<p>Er wordt een nieuw blok aangemaakt waarin je actuele afbeeldingen kunt toevoegen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Uploading_images_to_WordPress\"><\/span>Afbeeldingen uploaden naar WordPress<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Hoe plaats je afbeeldingen waar je wilt?<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Gebruik Upload en selecteer een afbeelding van uw harde schijf.<\/li><li>Gebruik de Mediabibliotheek, waar je afbeeldingen kunt selecteren die al naar je website zijn ge\u00fcpload<\/li><li>Gebruik de muis en sleep de afbeelding<\/li><li>URL-adres van afbeelding invoegen<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-upload.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"400\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-upload.gif\" alt=\"Opties om afbeeldingen te uploaden\" class=\"wp-image-81178\"\/><\/a><figcaption>Beschikbare opties voor het uploaden van afbeeldingen - een daarvan is het slepen en neerzetten van afbeeldingen uit een map<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Less_known_method_of_adding_WordPress_images\"><\/span>Minder bekende methode om WordPress afbeeldingen toe te voegen<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Naast het uploaden van afbeeldingen via het uploadvenster, zoals eerder genoemd, is er nog een andere manier om afbeeldingen in te voegen (en het is zo'n snelle manier!). Met de verbeterde WordPress editor kun je:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Afbeelding kopi\u00ebren van een inhoud of<\/li><li>Sleep de afbeelding gewoon met een muiscursor<\/li><\/ul>\n\n\n\n<p>En plaats of verplaats de geselecteerde afbeelding naar de gewenste locatie in het inhoudsgebied.<\/p>\n\n\n\n<div class=\"wp-block-image wp-image-84761\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"276\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/12\/Drag-and-drop-image-to-post.gif\" alt=\"Afbeelding slepen van gepubliceerd bericht naar inhoudsgebied\" class=\"wp-image-84761\"\/><figcaption>Sleep de geselecteerde afbeelding en zet hem neer waar je hem nodig hebt (rechtstreeks naar de WordPress-editor)<\/figcaption><\/figure><\/div>\n\n\n\n<p>Dezelfde techniek kun je ook gebruiken als je een afbeelding van je scherm wilt plakken. Er zijn slechts drie eenvoudige stappen nodig. Ten eerste, <strong>je moet een screenshot maken<\/strong> met behulp van de printscreenfunctie. Windows 10 biedt bijvoorbeeld zijn standaard Snippet-tool genaamd Snip &amp; Sketch, die ook beschikbaar is via een snelkoppeling - druk gewoon de toetsen Win+Shift+S samen in op je toetsenbord. Selecteer vervolgens het afbeeldingsgebied dat je wilt vastleggen. De laatste stap is het plakken van de gekopieerde afbeelding (of een deel ervan) in het inhoudsgebied met de standaard sneltoets Ctrl+V.<\/p>\n\n\n\n<p>En wat gebeurt er met de WordPress-afbeelding die je in je editor hebt geplakt? Nou, deze wordt automatisch toegevoegd aan de Mediabibliotheek waar je deze afbeelding kunt bewerken.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Image_metadata_limited_options\"><\/span>Beperkte opties voor afbeeldingsmetagegevens<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Binnen het bewerken van afbeeldingen kun je de titel, bijschrift, beschrijving en alternatieve tekst instellen. Helaas kun je de bestandsnaam van de afbeelding niet wijzigen - de automatisch gegenereerde naam blijft behouden, zoals <em>afbeelding-1.png<\/em> enzovoort. Dit type bestandsnaam kan een klein nadeel zijn op het gebied van SEO optimalisatie omdat het in strijd is met de aanbevelingen voor bestandsnamen. Daarom moet je dit aspect in overweging nemen voordat je WordPress afbeeldingen naar het inhoudsgebied verplaatst.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Image_alignment\"><\/span>Afbeelding uitlijnen<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Het uitlijnen van afbeeldingen is een van de belangrijkste functies. Het maakt niet uit of je het WordPress afbeeldingsblok toevoegt aan een bericht of pagina, je moet altijd rekening houden met de plaatsing, afhankelijk van het ontwerp van de website. Op basis daarvan kun je de uitlijning van afbeeldingen kiezen in de werkbalk erboven. Standaard kun je de afbeelding links, rechts of gecentreerd plaatsen. Bij sommige WordPress thema's kun je afbeeldingen uitlijnen in de breedte of de volledige breedte. Het hangt echt af van de thema-eigenschappen omdat niet alle thema's dit ondersteunen.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-align.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-align.gif\" alt=\"Instellingen voor beelduitlijning\" class=\"wp-image-81172\"\/><\/a><figcaption>Opties voor uitlijning van afbeeldingen<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Resizing_images\"><\/span>Formaat van afbeeldingen wijzigen<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>De revolutionaire functie van het afbeeldingsblok in WordPress editor is het praktisch aanpassen van het formaat. Sleep gewoon de zijkant van de afbeelding om deze kleiner of groter te maken. Op die manier kun je de afbeeldingsgrootte aanpassen aan de tekst in de inhoud. De editor houdt automatisch de verhoudingen van de afbeelding bij, zodat je je geen zorgen hoeft te maken over vervormingen.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-resize.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-resize.gif\" alt=\"Afbeelding vergroten of verkleinen\" class=\"wp-image-81175\"\/><\/a><figcaption>Het formaat van afbeeldingen aanpassen door de handgrepen op te vangen<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"New_block_style_that_transforms_an_image_into_a_circle_shape\"><\/span>Nieuwe blokstijl die een afbeelding omzet in een cirkelvorm<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Als je de laatste beschikbare versie van WordPress gebruikt, dan heb je misschien een nieuwe cirkel-crop stijl opgemerkt die je kunt gebruiken voor je afbeelding. De vorm van de afbeelding kan worden gewijzigd via de bovenste werkbalk door te klikken op het eerste pictogram \"Type of stijl blok wijzigen\". De standaard (rechthoekige) vorm wordt dan in een cirkelvorm geknipt.<\/p>\n\n\n\n<figure class=\"wp-block-image alignnone size-full wp-image-84327\"><img loading=\"lazy\" decoding=\"async\" width=\"1494\" height=\"787\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/circle-style-of-wordpress-images.png\" alt=\"Cirkelvorm van afbeelding\" class=\"wp-image-84327\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/circle-style-of-wordpress-images.png 1494w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/circle-style-of-wordpress-images-300x158.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/circle-style-of-wordpress-images-1024x539.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/circle-style-of-wordpress-images-768x405.png 768w\" sizes=\"auto, (max-width: 1494px) 100vw, 1494px\" \/><figcaption>Het nieuwe cirkelvormige ontwerp voor je afbeeldingen<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"New_features_in_WordPress_Images_block_added_in_WP_53\"><\/span>Nieuwe functies in het blok WordPress Afbeeldingen (toegevoegd in WP 5.3)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Support_for_high_resolution_images\"><\/span>Ondersteuning voor afbeeldingen met hoge resolutie<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Een van de grootste hoogtepunten van WP 5.3 is de verbeterde verwerking van afbeeldingen op het WordPress-platform. Het werken met afbeeldingen heeft nu twee belangrijke functies:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Uploaden hervatten - Als je foto's met een hoge resolutie aan het uploaden bent en de internetverbinding hapert, gaat het uploadproces automatisch verder vanaf het onderbroken punt.<\/li><li>Automatische afbeeldingsrotatie - de nieuwste WP-versie zorgt ervoor dat verkeerd geroteerde afbeeldingen automatisch naar de juiste positie worden geroteerd wanneer ze worden ge\u00fcpload<\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Settings_in_Inspector\"><\/span>Instellingen in Inspector<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Om de exacte afmetingen in te stellen kun je de Inspector gebruiken op de rechter zijbalk in de editor. Instellingen voor afbeeldingsgrootte biedt kant-en-klare formaten zoals miniatuur, medium, groot of volledig formaat. Je kunt de breedte en hoogte instellen in pixels of percentages natuurlijk.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-settings.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"803\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-settings.png\" alt=\"Beschikbare instellingen voor afbeeldingsformaat\" class=\"wp-image-81180\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-settings.png 1280w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-settings-300x188.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-settings-1024x642.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-settings-768x482.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a><figcaption>Instellingen afbeeldingsformaat<\/figcaption><\/figure><\/div>\n\n\n\n<p>Het is erg snel en praktisch omdat je alle wijzigingen in het formaat van afbeeldingen direct in het blok WordPress Afbeeldingen kunt uitvoeren en alles op \u00e9\u00e9n plek in de blokeditor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Other_Images_block_settings\"><\/span><a id=\"otherimageblock\"><\/a>Andere blokinstellingen voor afbeeldingen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_add_URL_address\"><\/span>Hoe een URL-adres toevoegen<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Afbeeldingen kunnen worden gebruikt als statische afbeeldingen of ze kunnen ook klikbaar zijn en er kan naar worden gelinkt:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>&nbsp; Mediabestand<\/li><li>&nbsp; Bijlage Pagina<\/li><li>&nbsp; Aangepaste URL<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-link-settings.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"803\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-link-settings.png\" alt=\"Instellingen afbeeldingslink\" class=\"wp-image-81183\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-link-settings.png 1280w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-link-settings-300x188.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-link-settings-1024x642.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-link-settings-768x482.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a><figcaption>Beschikbare instellingen voor afbeeldingskoppelingen<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_edit_picture_in_WordPress_Image_block\"><\/span>Afbeelding bewerken in het afbeeldingsblok van WordPress<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Elke afbeelding kan worden bewerkt door op het potloodpictogram te klikken. Er wordt een modaal venster met de mediabibliotheek geopend waarin je alt-tekst, titel, bijschrift en beschrijving kunt schrijven. Op dezelfde manier als je gewend bent te doen in oudere WordPress versies met de klassieke editor.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/media-library.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"800\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/media-library.png\" alt=\"Afbeeldingsdetails voor SEO-doeleinden\" class=\"wp-image-81182\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/media-library.png 1280w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/media-library-300x188.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/media-library-1024x640.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/media-library-768x480.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a><figcaption>Afbeeldingsgegevens die u moet invullen om de SEO van uw website te verbeteren<\/figcaption><\/figure><\/div>\n\n\n\n<p>Waarom is het belangrijk dat deze teksten worden ingevuld?<\/p>\n\n\n\n<p>Als bezoekers op de afbeelding klikken om deze groter te zien, zien ze de titel van de afbeelding (bijvoorbeeld Citadela homepage) en niet de bestandsnaam. Ook, als er een probleem is met het laden van de afbeelding, zal alternatieve tekst worden getoond op je website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Extra_Tips\"><\/span><a id=\"extratipaboutimageblock\"><\/a>Extra tips<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Naast al deze redenen en instellingen voor WordPress Afbeeldingen blokken is er nog het belangrijkste. Je kunt meer bezoekers naar je website krijgen door afbeeldingen te gebruiken. Dus hoe krijg je ze?<\/p>\n\n\n\n<p>Tegenwoordig zijn mensen lui om te lezen. Ze scrollen liever door de afbeeldingen om antwoorden te vinden. Hoe komt het dat jouw foto's en afbeeldingen kunnen ranken? Teksten zijn het antwoord. Heel belangrijk voor SEO-optimalisatie zijn de perfecte titel en beschrijving van de afbeelding. Vergeet niet om alternatieve tekst in te vullen. Dan kan Google de afbeelding beter begrijpen. Zo heb je een grotere kans om te ranken in de zoekresultaten voor afbeeldingen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_ways_how_to_add_image_caption\"><\/span>2 manieren om afbeeldingsonderschrift toe te voegen<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Het toevoegen van een afbeeldingsonderschrift is heel eenvoudig met block editor. Direct onder de afbeelding is ruimte om tekst te schrijven. Dit is de eerste manier - Het bijschrift wordt bij precies deze afbeelding op de opgegeven subpagina geschreven.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-caption.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-caption.gif\" alt=\"Afbeeldingsonderschrift\" class=\"wp-image-81173\"\/><\/a><figcaption>Bijschrift direct onder de afbeelding<\/figcaption><\/figure><\/div>\n\n\n\n<p>De tweede manier is om een afbeeldingsonderschrift te schrijven met het potloodpictogram (Afbeelding bewerken) in de Mediabibliotheek. Op deze manier voegt u het bijschrift van de afbeelding globaal toe aan de hele website. Dat betekent dat als u dezelfde afbeelding op drie verschillende plaatsen gebruikt, deze altijd dit bijschrift zal gebruiken.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-caption-library.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-caption-library.gif\" alt=\"Afbeeldingsonderschrift toevoegen in Mediabibliotheek\" class=\"wp-image-81174\"\/><\/a><figcaption>Afbeeldingsonderschrift toegevoegd via Mediabibliotheek<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\">Vind je het leuk hoe gemakkelijk het is om afbeeldingen toe te voegen in het WordPress Image blok? Probeer het zelf!<\/p>\n\n\n\n<p class=\"has-text-align-center\">Lees meer over ons gloednieuwe Citadela WordPress thema en de op maat gemaakte lay-out pakketten. Ze zijn speciaal ontworpen en ontwikkeld voor verschillende soorten bedrijven en ondersteunen ook de nieuwe manier van inhoud bewerken via de WordPress blok editor.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhoudsopgave<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/#Why_is_WordPress_Image_block_must-have_for_your_website\" >Waarom is het WordPress afbeeldingsblok onmisbaar voor je website?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/#Attract_attention\" >Aandacht trekken<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/#Illustrative_text_and_context\" >Illustratieve tekst en context<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/#Make_website_nicer\" >Website mooier maken<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/#How_to_add_images_in_WordPress_block_editor\" >Hoe afbeeldingen toevoegen in de blokeditor van WordPress<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/#Uploading_images_to_WordPress\" >Afbeeldingen uploaden naar WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/#Less_known_method_of_adding_WordPress_images\" >Minder bekende methode om WordPress afbeeldingen toe te voegen<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/#Image_metadata_limited_options\" >Beperkte opties voor afbeeldingsmetagegevens<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/#Image_alignment\" >Afbeelding uitlijnen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/#Resizing_images\" >Formaat van afbeeldingen wijzigen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/#New_block_style_that_transforms_an_image_into_a_circle_shape\" >Nieuwe blokstijl die een afbeelding omzet in een cirkelvorm<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/#New_features_in_WordPress_Images_block_added_in_WP_53\" >Nieuwe functies in het blok WordPress Afbeeldingen (toegevoegd in WP 5.3)<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/#Support_for_high_resolution_images\" >Ondersteuning voor afbeeldingen met hoge resolutie<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/#Settings_in_Inspector\" >Instellingen in Inspector<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/#Other_Images_block_settings\" >Andere blokinstellingen voor afbeeldingen<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/#How_to_add_URL_address\" >Hoe een URL-adres toevoegen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/#How_to_edit_picture_in_WordPress_Image_block\" >Afbeelding bewerken in het afbeeldingsblok van WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/#Extra_Tips\" >Extra tips<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.ait-themes.club\/nl\/wordpress-afbeeldingsblok-tutorial-blog\/#2_ways_how_to_add_image_caption\" >2 manieren om afbeeldingsonderschrift toe te voegen<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>","protected":false},"excerpt":{"rendered":"<p>Voor veel gebruikers kan het werken met afbeeldingen erg frustrerend zijn. Het is niet altijd gemakkelijk om de juiste beeldverhouding te kiezen of om het formaat van afbeeldingen aan te passen zodat ze er goed uitzien in de hele lay-out. Waarom het WordPress Afbeeldingsblok gebruiken Hoe afbeeldingen toevoegen met het WordPress Afbeeldingsblok Extra proces voor het opmaken van afbeeldingen Extra tip van ons [...]<\/p>","protected":false},"author":1,"featured_media":81168,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_citadela_custom_class":"","footnotes":""},"categories":[4,50],"tags":[15],"citadela-post-location":[],"class_list":["post-81159","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-building-websites-in-wordpress","category-citadela-pro-documentation","tag-gutenberg-wordpress-editor"],"_links":{"self":[{"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/posts\/81159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/comments?post=81159"}],"version-history":[{"count":1,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/posts\/81159\/revisions"}],"predecessor-version":[{"id":94279,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/posts\/81159\/revisions\/94279"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/media\/81168"}],"wp:attachment":[{"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/media?parent=81159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/categories?post=81159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/tags?post=81159"},{"taxonomy":"citadela-post-location","embeddable":true,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/citadela-post-location?post=81159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}