Download CitadelaWP WordPress Thema & Plugins<\/strong><\/p> <\/div>\r\n \n\n\n One-time payment. 14-day money-back guarantee.<\/p>\n\n\n\n Gutenberg editor en blokken maken de inhoud van de website lichter, moderner en moeiteloos leesbaar. We laten je meer manieren zien om tekst om de afbeelding heen te wikkelen in WordPress Pagina's, Post- en Aangepaste Post-types. Er zijn verschillende blokken en je kunt ze ook in combinatie gebruiken, als een set van onderdelen en functies die je extra opties geven voor de wrap.<\/p>\n\n\n\n Je kunt het blok voor de omwikkelde tekst rond de afbeelding selecteren op basis van de subpagina en het inhoudstype. Je kunt een stijl kiezen voor de presentatiepagina en een andere voor een blogpost. Denk ook na over het soort inhoud dat de afbeelding vertegenwoordigt. Is het een beschrijvende afbeelding of meer representatieve of verkoopmedia?<\/p>\n\n\n\n Er zijn 4 blokken die je kunt gebruiken om een tekstblok om een afbeelding te wikkelen. We beschrijven ze allemaal:<\/p>\n\n\n\n Er zijn verschillende redenen waarom je dit blok zou moeten gebruiken. Je zult het het meest waarderen als je blogberichten schrijft. Afbeeldingen maken integraal deel uit van het verhaal. Het maakt niet uit of je een reisblog schrijft of een magazine over IT-nieuws. Dus als je foto's toevoegt aan je inhoud, denk dan aan de uitlijning van de afbeeldingen. Lezers zullen beter begrijpen waar je over schrijft.<\/p>\n\n\n\n In veel gevallen is het nodig om afbeeldingen en tekst naast elkaar in te voegen. Wat is belangrijk?<\/p>\n\n\n\n Terwijl in de Klassieke redacteur<\/strong> je kon ook tekst naast de afbeelding plaatsen, je kon niet spreken van mooie uitlijning. Vooral als de afbeelding klein was en je er meer tekst naast plaatste. Tekst overschaduwde de afbeelding en dat zag er niet mooi uit.<\/p>\n\n\n\n Gutenberg-editor<\/strong> en het blok Afbeelding hebben een geweldige functie - het formaat van afbeeldingen wijzigen. Sleep stippen rond de afbeelding om automatisch de grootte en tekstuitlijning te wijzigen.<\/p>\n\n\n\n Nu beginnen<\/p> <\/div>\r\n \n\n\n One-time payment. 14-day money-back guarantee.<\/p>\n\n\n\n Het Media & Tekst-blok is een fantastische functie. Het Media & Tekst-blok lost dit probleem op en zorgt voor een perfecte uitlijning van tekst op de afbeelding zonder de compositie en lay-out te verstoren. Dat is de reden waarom je dit blok zou moeten gebruiken.<\/p>\n\n\n\n Het verbetert ook het ontwerp van websites op mobiele apparaten. Dit inpakblok helpt WordPress thema's om verschillende mobiele lay-outs te dekken. Op een smartphone moet elk deel van de website duidelijk zichtbaar en leesbaar zijn. Hoe zal het Media & Tekst blok eruit zien op mobiele telefoons en tabel handvatten \"Stack on mobile\" functie die we hieronder zullen bekijken.<\/p>\n\n\n\n In een korte tijd zul je Media & Tekst blok kunnen gebruiken in ons nieuwe WordPress thema genaamd Citadela. Lees meer over het Citadela thema in een apart artikel.<\/p>\n\n\n\n Het toevoegen van Media & Tekst is net zo eenvoudig als het toevoegen van elk ander blok. Het is een core-blok, wat betekent dat je niets hoeft te downloaden of te installeren.<\/p>\n\n\n\n Gebruik het \"+\"-pictogram in het bovenste paneel of ergens anders in de editor en selecteer het blok Media & tekst.<\/p>\n\n\n\n De laatste optie is om \"\/\" te typen en daarna \"media\" te schrijven. WordPress zal je automatisch geselecteerde blokken laten zien die overeenkomen met wat je hebt gezocht.<\/p>\n\n\n\n Het blok Media & Tekst groepeert in feite 2 verschillende soorten inhoud. De eerste is medium, bijvoorbeeld een afbeelding of video die je kunt toevoegen via:<\/p>\n\n\n\n De tweede is ruimte voor tekstinhoud. Je kunt er tekstparagrafen, opsommingen of titels schrijven. Je kunt er ook Knopblok<\/a> waar we het eerder over hadden.<\/p>\n\n\n\n Met het blok Media & Tekst worden afbeeldingen en tekst altijd naast elkaar uitgelijnd, ongeacht hoeveel tekst je schrijft. Hoe werkt het? De afbeelding past zich automatisch aan op basis van de hoogte van de inhoud in de tekstkolom.<\/p>\n\n\n\n 1. Werkbalk bovenaan<\/b><\/p>\n\n\n\n De werkbalk boven het blok biedt verschillende opties. Als je actieve thema dat ondersteunt, kun je het Media & Tekst-blok instellen als breed of volledig breed. Je kunt ook kiezen waar je een afbeelding of video wilt plaatsen door erop te klikken:<\/p>\n\n\n\n In de werkbalk bovenaan is er ook een pictogram om een medium te bewerken waar je Alt Text, Title, Caption of Description kunt instellen. Lees meer over het bewerken van afbeeldingen in ons artikel Werken met het WordPress afbeeldingsblok<\/a>.<\/p>\n\n\n\n 2. Rechter zijbalk<\/b><\/p>\n\n\n\n De rechter zijbalk biedt extra instellingen voor het blok Media & Tekst. Het is mogelijk om hier Alternatieve tekst toe te voegen, de achtergrondkleur in te stellen of Extra CSS Klasse toe te voegen. Je kunt hier ook de functie \"Stapelen op mobiel\" inschakelen.<\/p>\n\n\n\n <\/a>Wat is Stack op mobiel?<\/b><\/p>\n\n\n\n Dankzij deze functie worden beeld en tekst mooi weergegeven op mobiele apparaten. Als je \"Stack on mobile\" uitschakelt, blijven beeld en tekst naast elkaar staan en is het nauwelijks leesbaar in de responsive versie.<\/p>\n\n\n\n Als je deze functie inschakelt, wordt op mobiele telefoons inhoud aan de linkerkant weergegeven boven inhoud aan de rechterkant.<\/p>\n\n\n\n Een deel van het blok Media & Tekst bevat naast afbeeldingen of video's ook tekst. Het kan een van de volgende inhoudstypen zijn:<\/p>\n\n\n\n 1. Paragraaf<\/b><\/p>\n\n\n\n In de bovenste werkbalk kun je de tekstuitlijning instellen, tekst vet of cursief maken of een URL-link toevoegen.<\/p>\n\n\n\n In de zijbalk aan de rechterkant kun je lettergrootte, letterkleur of alinea kleur kiezen. Een interessante functie is \"Drop Cap\" die het eerste teken van de tekst markeert. Dit is een leuke functie in blokposts om tekst interessanter te maken.<\/p>\n\n\n\n 2. Rubriek<\/b><\/p>\n\n\n\n Een kop lijkt erg op een Paragraaf. Je kunt ook het uiterlijk configureren, de kop vet of cursief maken en een URL-link invoegen. Het verschil is dat je een koptype kunt kiezen - H2, H3, H4.<\/p>\n\n\n\n Andere instellingen voor kopgrootte en uitlijning zijn beschikbaar in de zijbalk aan de rechterkant.<\/p>\n\n\n\n 3. Lijst<\/b><\/p>\n\n\n\n Als je een lijstblok toevoegt aan je inhoud, kan het een opsommingsteken, een genummerde lijst of een lijst met meerdere niveaus zijn. Je kunt tekst ook vet en cursief maken en URL-links toevoegen.<\/p>\n\n\n\n 4. Knopblok<\/b><\/p>\n\n\n\n Dit blok dat een knop toevoegt aan de inhoud kan worden aangepast aan het ontwerp van de website. De kleur en stijl van de knop of de achtergrondkleur kan worden geconfigureerd in de zijbalk aan de rechterkant.<\/p>\n\n\n\n Vergeet niet het artikel te lezen over Knopblok<\/a>. <\/a><\/p>\n\n\n\n In Media & Tekstblok is het mogelijk om het ene type inhoudsblok om te zetten in een ander type. Je kunt Media & Tekstblok ook wijzigen in Afbeeldingblok en het tekstgedeelte wordt verwijderd.<\/p>\n\n\n\n In tekstinhoud is het mogelijk om Paragraafblok te wijzigen in Kop- of Lijstblok.<\/p>\n\n\n\n Het gebruik van gerechtvaardigde tekst heeft zijn positieve en negatieve kanten. Rechte tekst vind je meestal in boeken of kranten, maar het wordt niet meer gebruikt op websites. Waarom?<\/p>\n\n\n\n Enkele jaren geleden was de Justify functie ge\u00efntegreerd in de Classic editor van WordPress. Justified tekst veroorzaakte problemen met de zichtbaarheid in verschillende browsers of mobiele apparaten. Het heeft ook te maken met de moeilijke leesbaarheid van de tekst. Deze functie werd daarom deprecated en verwijderd.<\/p>\n\n\n\n Deze specifieke functionaliteit bestaat ook niet in de nieuwe blok-editor (Gutenberg).<\/p>\n\n\n\n Dus hoe rechtvaardig je tekst als je dat echt wilt?<\/p>\n\n\n\n De oplossing is om in een paar stappen eenvoudige CSS-code toe te voegen:<\/p>\n\n\n\n Gedaan. Vanaf nu is tekst in je Media & Tekstblok gerechtvaardigd.<\/p>\n\n\n\n WordPress is bruikbaarder geworden zonder paginabouwers van derden, dankzij de Gutenberg-editor. Het heeft een uitstekende waarde voor je website op de lange termijn en bij het maken of herontwerpen van een website. Gutenberg-blokken geven een groot bereik aan stijlen, hoe handzaam je ze ook vindt. WordPress code om tekst om afbeeldingen te wikkelen<\/a>.<\/p>\n\n\n\n<\/span>Hoe tekst om een afbeelding wikkelen in WordPress?<\/span><\/h2>\n\n\n\n
<\/span>Tekst om afbeelding wikkelen - Selectie blokkeren<\/span><\/h3>\n\n\n\n
![\"Geavanceerde](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-Text-Around-Image-Cluster-Block-Example-1024x538.png\")
![\"\"](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-Text-Around-Image-Cluster-Block-Example-Settings-1024x557.png\")
<\/span><\/a>Wrap tekst en afbeeldingen voor een betere leeservaring<\/span><\/h3>\n\n\n\n
<\/span>Afbeelding en Paragraafblokken<\/span><\/h2>\n\n\n\n
![\"Tekst](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-text-overflow.png\")
<\/a>![\"Tekst](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2022\/05\/Wrap-text-around-Image-using-Gutenberg-Image-and-Paragraph-Blocks-1024x783.png\")
<\/span>Media & Tekstblok - WordPress lijnt tekst uit naast een afbeelding<\/span><\/h2>\n\n\n\n
<\/span>Hoe tekst uitlijnen naast een afbeelding?<\/span><\/h3>\n\n\n\n
![\"\"](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2021\/10\/logo-pro-customization-min.png\"){kind=logo}
<\/figure>\n<\/div>\n\n\n\n<\/span><\/a>Hoe Media & Tekst toevoegen in blok-editor?<\/span><\/h3>\n\n\n\n
![\"Media](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text-add.png\")
<\/a>![\"Media](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-shortcut.gif\")
<\/a><\/span><\/a>Hoe werkt het blok Media & Tekst?<\/span><\/h3>\n\n\n\n
![\"Media](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-upload.gif\")
<\/a>![\"Tekstgebied](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-button.gif\")
<\/a>![\"Afbeelding](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text.png\")
<\/a><\/span><\/a>Instellingen voor media en tekstblokken<\/span><\/h3>\n\n\n\n
<\/span>Algemene blokinstellingen<\/span><\/h3>\n\n\n\n
![\"De](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-align.gif\")
<\/a>![\"Instellingen](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-color.gif\")
<\/a>![\"Stapel](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-responsive.png\")
<\/a><\/span>Tekstuitlijning<\/span><\/h3>\n\n\n\n
![\"Paragraaf](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-paragraph.png\")
<\/a>![\""Functie](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-cap.gif\")
<\/a>![\"Opties](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-image-and-text-heading.png\")
<\/a>![\"Lijstopties](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-list.png\")
<\/a>![\"Knopopties](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-button.png\")
<\/a><\/span>Schakelen tussen bloktypes<\/span><\/h3>\n\n\n\n
![\"Schakelen](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-switch.gif\")
<\/a>![\"Alinea](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-paragraph-switch.gif\")
<\/a><\/span><\/a>Bonus: Tekst rechtvaardigen in WordPress<\/span><\/h2>\n\n\n\n
p.justify {\n tekst-uitlijnen: justifi\u00ebren;\n}\n<\/pre>\n\n\n\n![\"Tekst](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-media-and-text-justify.gif\")
<\/a>