Inhoudsopgave
Moet je tekst op een elegante manier rond de afbeelding plaatsen? Leer hoe je dat eenvoudig kunt doen zonder codeer- en ontwerpervaring. Gutenberg editor biedt meer opties om tekst om tekst heen te wikkelen in WordPress.
Je kunt tegelijkertijd een goed uitziende website en een eenvoudige bewerkingsroutine voor de inhoud realiseren. Als je de Gutenberg editor kiest voor je WordPress website, heb je de beste tool voor de lange termijn. Je hebt meer opties om tekst op een andere manier om afbeeldingen heen te wikkelen. Gutenberg brengt veel voordelen met zich mee, zoals duidelijkere broncode van de website, snelheid, veiligheid en gebruiksvriendelijkheid.
Hoe tekst om een afbeelding wikkelen in WordPress?
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.
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?
Tekst om afbeelding wikkelen - Selectie blokkeren
Er zijn 4 blokken die je kunt gebruiken om een tekstblok om een afbeelding te wikkelen. We beschrijven ze allemaal:
- Afbeeldingsblok en Paragraafblok vind je hieronder
- Media & tekstblok vind je hieronder
- Kolommen blok in individuele post
- Clusterblok in individuele post (functie alleen beschikbaar met Citadela Pro invoegtoepassing)
Wrap tekst en afbeeldingen voor een betere leeservaring
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.
In veel gevallen is het nodig om afbeeldingen en tekst naast elkaar in te voegen. Wat is belangrijk?
- Het moet logisch zijn. Het beeld moet naast de juiste tekst staan.
- Het moet mooi uitgelijnd zijn.
- Het moet passen bij de hele lay-out van de website.
Afbeelding en Paragraafblokken
Terwijl in de Klassieke redacteur 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.
Gutenberg-editor 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.
Media & Tekstblok - WordPress lijnt tekst uit naast een afbeelding
- Omsluit tekst en afbeeldingen met het blok Media & Tekst
- Hoe Media & Tekst toevoegen in editor
- Hoe dit blok werkt
- Instellingen voor media en tekstblokken
- Wat doet "Stapel op mobiel" gemiddelde
- Bonus: Tekst rechtvaardigen in WordPress
Hoe tekst uitlijnen naast een afbeelding?
Nu beginnen
Begin nu met een risicovrije proefversie. Geen creditcard nodig.
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.
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.
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.
Hoe Media & Tekst toevoegen in blok-editor?
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.
Gebruik het "+"-pictogram in het bovenste paneel of ergens anders in de editor en selecteer het blok Media & tekst.
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.
Hoe werkt het blok Media & Tekst?
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:
- uploaden
- Mediatheek
- Slepen en neerzetten
De tweede is ruimte voor tekstinhoud. Je kunt er tekstparagrafen, opsommingen of titels schrijven. Je kunt er ook Knopblok waar we het eerder over hadden.
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.
Instellingen voor media en tekstblokken
Algemene blokinstellingen
1. Werkbalk bovenaan
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:
- Media links tonen
- Media rechts weergeven
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.
2. Rechter zijbalk
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.
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.
Als je deze functie inschakelt, wordt op mobiele telefoons inhoud aan de linkerkant weergegeven boven inhoud aan de rechterkant.
Tekstuitlijning
Een deel van het blok Media & Tekst bevat naast afbeeldingen of video's ook tekst. Het kan een van de volgende inhoudstypen zijn:
1. Paragraaf
In de bovenste werkbalk kun je de tekstuitlijning instellen, tekst vet of cursief maken of een URL-link toevoegen.
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.
2. Rubriek
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.
Andere instellingen voor kopgrootte en uitlijning zijn beschikbaar in de zijbalk aan de rechterkant.
3. Lijst
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.
4. Knopblok
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.
Vergeet niet het artikel te lezen over Knopblok.
Schakelen tussen bloktypes
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.
In tekstinhoud is het mogelijk om Paragraafblok te wijzigen in Kop- of Lijstblok.
Bonus: Tekst rechtvaardigen in WordPress
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?
Enkele jaren geleden was de Justify functie geïntegreerd 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.
Deze specifieke functionaliteit bestaat ook niet in de nieuwe blok-editor (Gutenberg).
Dus hoe rechtvaardig je tekst als je dat echt wilt?
De oplossing is om in een paar stappen eenvoudige CSS-code toe te voegen:
- Er is een instelling voor Extra CSS-klasse van Paragraafblok in de zijbalk aan de rechterkant
- Schrijf daar de klassenaam "rechtvaardigen"
- Pagina of artikel publiceren
- Als je een voorbeeld hebt, klik je op Aanpassen in de bovenste balk
- Aan de linkerkant is er een nieuwe zijbalk met instellingen
- Klik op Extra CSS
- Voeg de volgende CCS-code in:
p.justify {
tekst-uitlijnen: justifiëren;
}
Gedaan. Vanaf nu is tekst in je Media & Tekstblok gerechtvaardigd.
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.
Wat is jouw mening over het Media & Tekst-blok? Heb je het al gebruikt? Hoe vind je het om ermee te werken? Laat het ons weten in de reacties hieronder.
Over het algemeen hou ik van het bloksysteem, maar tenzij ik iets mis is dit een stap achteruit. Ik ben op dit moment op zoek naar een manier om een afbeelding naar links of rechts te laten zweven en tekst te laten wrappen, wat eigenlijk zo gemakkelijk zou moeten zijn om te doen, maar het lijkt erop dat WordPress dat gewoon niet wil. Waarom niet? Het gebruik van het media- en afbeeldingsblok werkt alleen als de tekst de juiste lengte heeft. Een pagina als deze bijvoorbeeld wil niet opnieuw worden opgemaakt met een vreemde tussenruimte tussen de alinea's als de tekst niet precies de juiste lengte heeft voor de grootte van de afbeelding.
http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/
Hallo daar,
Hartelijk dank voor uw feedback. Het klinkt als een heel goed idee, daarom wil ik je vragen om ons een minuutje van je tijd te geven om 4 eenvoudige vragen te beantwoorden: https://aitthemes.typeform.com/to/vc7arn die ons team kunnen helpen om sneller betere producten met unieke functies te maken.
Hartelijk dank voor uw tijd en begrip.
Vriendelijke groeten!
Zlatko
AIT-team
Ja, ik krijg tekst niet gewrapt. Deze tekstblokcombinaties lijken nutteloos te zijn.
Dit idee is waardeloos als enige manier om afbeeldingen in een blog in te voegen - ik krijg de tekst niet mooi omwikkeld en het is niet even groot, wat ik ook doe. Goed idee voor BEPAALDE situaties, maar niet voor alles. Soms wil je gewoon een afbeelding met de alinea's eromheen, in plaats van iets over de afbeelding te zeggen.
Hoe voeg je wrapper en de inhoud te gebruiken in volle breedte yar serieus hoe volledig te bedekken met dan nemen container in.. builder is erg verwarrend hoe voeg container wrap zeer slechte editor yar
Hallo daar,
Bedankt voor je complimenten. Neem gerust een kijkje op onze blogpagina https://www.ait-themes.club/blog/ waar je veel nuttige tips vindt voor het schrijven van aantrekkelijke en nuttige posts.
Vriendelijke groeten!
Zlatko
AIT-team
Hallo Abdur,
Hartelijk dank voor uw feedback, ons team stelt dit zeer op prijs!
Vriendelijke groeten.
Zlatko
AIT-team
Ik heb hetzelfde probleem als verschillende andere mensen in deze thread. In het verleden kon ik gemakkelijk tekst om een afbeelding wikkelen, zoals op onze "over ons" pagina waar we foto's en biografieën hebben. misschien gebruikte ik de oude editor. Ik weet het niet meer. Maar nu probeer ik onze site te updaten met nieuwe foto's en biografieën en ik kon geen manier vinden om eenvoudig tekst in te pakken zoals op onze vorige bio/foto combinaties. Ik probeerde over te schakelen naar de klassieke editor, maar de site waarschuwde me dat ik "nieuwe blok editor" secties had en ik moest bij de nieuwere bewerkingsmodus blijven. kunt u mij vertellen hoe ik onze nieuwe biografieën en foto's eruit kan laten zien als onze eerdere berichten? dank u.
Hallo daar,
Als je Gutenberg wilt uitschakelen en verder wilt gaan met de klassieke WordPress editor, overweeg dan een plugin van het WordPress core team waarmee je dit kunt doen met "Classic Editor Plugin".
Vriendelijke groeten!
Zlatko
AIT-team
Voor degenen die alleen een eenvoudige tekstomloop rond de afbeelding willen, kun je dit doen door het blok Klassieke tekst in te voegen (gebaseerd op het eerste deel van de blokken wanneer je op Bladeren klikt. Je krijgt de klassieke editor in een enkel blok en ja, daarmee kun je een afbeelding invoegen en dan de wrapping-optie kiezen. Probleem opgelost 🙂
BEDANKT Londen SEO Guy!!! Een eenvoudige oplossing, maar ik had het over het hoofd gezien!
En dan... gebruik je gewoon de optie Converteren naar blokken.
Aangezien dit werkt, heeft de Block Editor de mogelijkheid, maar ik kan niet vinden hoe ik dit goed moet instellen. In de tussentijd werkt deze fudge.
Hetzelfde probleem hier. Deze nieuwe versie is verschrikkelijk - geen manier om tekst goed in te pakken of zelfs om de foto kleiner te maken, tenzij je gewoon wilt bijsnijden.
Ik kan mijn tekst om een afbeelding wikkelen in de blokkeneditor van WordPress. Het ziet er precies zo uit als ik wil in "Voorbeeld". Maar als ik mijn blog publiceer en WordPress mailt het naar mijn volgers, ontvangen ze het met de afbeelding bovenaan en de tekst onder de afbeelding. Dit gebeurt ook op desktopcomputers, niet alleen op kleine mobiele telefoons. Ik wil het ingepakt, niet gestapeld.
Hallo daar,
Bedankt voor het schrijven. Het blok wikkelt de tekst niet om de afbeelding in WordPress zoals je zou verwachten. Kijk eens naar de volgende instructies, misschien heb je er iets aan: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/
Vriendelijke groeten!
Zlatko
AIT-team
Ik doe dat allemaal en mijn blog wordt perfect verpakt in Voorvertoning. Als ik het publiceer, ziet het er geweldig uit op mijn blogpagina. Maar wanneer WordPress het e-mailt naar mijn volgers en zij die e-mail openen, zien ze het niet ingepakt. De foto's staan bovenop de tekst. Het ziet er erg onprofessioneel uit. Ik had dat probleem nooit met de oude Classic Editor. Nu ik de Blok-editor gebruik, kan ik niet meer terug naar de Klassieke editor, ook al is er een Klassieke optie om op te klikken.
Hallo daar,
Bedankt voor het schrijven.
We willen je vriendelijk vragen om onze kennisbank en/of documentatie met video tutorials te bekijken:
https://www.ait-themes.club/ait-themes-documentation/
U kunt ook rechtstreeks technische vragen stellen via ons speciale supportticketsysteem. Log in op uw account op https://system.ait-themes.club/support/add-question.
De klantenservice is beschikbaar tijdens werkdagen van 8.00 tot 17.00 uur Midden-Europese tijd.
Daarnaast is er een plugin waarmee je de vorige editor kunt gebruiken. Je moet "Klassieke editor" installeren en activeren.
Met vriendelijke groet!
Zlatko
AIT-team
Ik ben het er niet mee eens dat dit superieur is aan klassieke bewerking, omdat de opties beperkter zijn. Ik vind dat dit blok, omdat het andere lettertypes gebruikt en breder is dan een tekstblok, visueel storend is. De mogelijkheid om tekst vloeiend om een afbeelding te wikkelen met behoud van hetzelfde lettertype, dezelfde grootte en dezelfde marge-instellingen geeft het professionele karakter van een tijdschriftpagina. Dit is slechts één voorbeeld van waarom ik diep teleurgesteld ben in deze versie van Wordpress.
Hoi Terence
bedankt voor uw mening. Heb je onze Citadela proefversie geprobeerd? We hebben een aantal unieke blokken die je kunnen helpen met het aanpassen van tekst en afbeeldingen. Hoe dan ook, je kunt de volledige versie testen - alle functies, gratis.
Nog een fijne dag.