Webstick.nl logo Webdesignburo en Wordpress-blog

HTML-code bewerken in WordPress [2024] 💥

HTML-code bewerken in WordPress


Het toevoegen of bewerken van HTML-code doe je in Wordpress met een editor. Dit is een korte tutorial voor alle grote editors zoals Gutenberg, DiviBuilder, Elementor en WP-Bakery pagebuilder. Hoe beter je bent met HTML, hoe nuttiger het is om deze techniek te gebruiken. Laten we beginnen met Gutenberg, aangezien het tegenwoordig de basiseditor in Wordpress is.


Advertentie

Divi Ad 680px


1. Bewerk HTML-code in WP met Gutenberg

Elk blok in Gutenberg kan worden bewerkt als HTML. Klik eerst op de drie puntjes in het menu, daarna op "Bewerken als HTML". Zo kunnen teksten gestyled worden of afbeeldingen bewerkt worden en natuurlijk nog veel meer. Zie screenshot hieronder.


HTML-code bewerken in WordPress Gutenberg


Gutenberg heeft ook een speciaal blok voor HTML. Klik op de knop "Nieuwe toevoegen" in het berichtengedeelte van uw WordPress-dashboard. Klik op de "+". Typ in de zoekbalk die verschijnt 'HTML' of 'aangepaste HTML' in het vak. Klik op de knop "Aangepaste HTML". Laten we nu de HTML invoegen. U kunt uw eigen HTML maken, zoals <div> of <strong>. Of u kunt de in Gutenberg gegenereerde HTML bekijken door op "preview" te klikken.


HTML-code bewerken in WordPress Gutenberg custom html


2. Bewerk HTML-code in WP met DiviBuilder

Laten we doorgaan met de DiviDivi Builder, de beste pagebuilder die er is. Bijna 1 miljoen mensen gebruiken deze editor in hun WordPress. Open een pagina/bericht met Divi, "Bewerken met Divi". Klik gewoon op een tekstblok en klik vervolgens op de configuratieknop met de tekst "Module-instellingen". Zie screenshot hieronder.


HTML-code bewerken in WordPress Divi


Er wordt een pop-up geopend waarin staat dat dezelfde tekst op de pagina staat. Hier schakelen we over van "Visueel" naar "Tekst" zoals in de onderstaande schermafbeelding. Zoals je kunt zien, heb ik sterke tags toegevoegd, zodat de tekst vet wordt weergegeven. Op de pagina zelf zie je direct het resultaat.


HTML-code bewerken in WordPress DiviBuilder


3. Bewerk HTML-code in WP met Elementor

Open een pagina/bericht met Elementor. Elementor heeft altijd de doos aan de linkerkant open, in tegenstelling tot Divi waar we die doos moesten openen. Natuurlijk is het in Divi ook mogelijk om het open te hebben, maar Elementor heeft maar één modus. Dus we hoeven alleen maar ergens in een tekstvak te klikken om de inhoud ervan aan de linkerkant te zien verschijnen. Schakel nu van "Beeld" naar "Tekst". En natuurlijk bewerk je de HTML zoals je wilt.


HTML-code bewerken in WordPress Elementor


4. Bewerk HTML-code in WP met WP-Bakery

Open een pagina/bericht met "Bewerken met WPBakery Page Builder". Plaats de muisaanwijzer op een tekstblok en klik op het potloodpictogram met de tekst "Tekstblok bewerken". Er wordt een pop-up geopend waarin u overschakelt van "Visual" naar "Tekst". U kunt nu HTML in het vak toevoegen of bewerken. Zie screenshot hieronder van WP-Bakery.


HTML-code bewerken in WordPress WP-Bakery


5. Bewerk HTML-code in WP met Classic Editor

Open een pagina/bericht door gewoon op de titel te klikken. Met de klassieke editor geïnstalleerd is er geen Gutenberg en dat is goed nieuws.


HTML-code bewerken in WordPress Classic Editor


En zo bewerk je HTML-code in Wordpress met de meest gebruikte pagebuilders. Succes!


Advertisement

Divi Ad 680px



Scroll naar boven