Als je een visueel aantrekkelijke WordPress website wilt maken, kan het veranderen van de achtergrondkleuren je helpen om belangrijke inhoud te benadrukken, een duidelijke visuele hiërarchie te creëren en je site aantrekkelijker te maken. Maar met zo veel blokken die beschikbaar zijn in de WordPress Blok Editor, kan het verwarrend zijn om uit te zoeken hoe je de achtergrondkleur voor elk blok kunt veranderen.
Terwijl sommige blokken zijn voorzien van ingebouwde achtergrondkleurinstellingen, vereisen andere een iets andere aanpak. Het goede nieuws is dat de meeste blokken in de WordPress kern het aanpassen van de achtergrondkleur ondersteunen, en voor de blokken die dat niet doen zijn er eenvoudige oplossingen zoals het Groepsblok en het Cover-blok.
In deze handleiding nemen we drie eenvoudige methoden met je door, zodat je elk blok op je site met vertrouwen kunt stylen. We behandelen blokken die directe kleurwijzigingen ondersteunen, laten zien hoe je het groepsblok gebruikt en verkennen het Cover-blok voor geavanceerde ontwerpen zoals heldensecties en banners. Laten we beginnen.
Methode 1: Directe achtergrondkleur (native ondersteuning)
Veel WordPress core blokken hebben ingebouwde ondersteuning voor achtergrondkleurwijzigingen. Dit betekent dat je direct kleuren kunt toepassen zonder extra blokken of aangepaste code toe te voegen.
Stap 1: Selecteer het blok
Klik eerst in de editor op het blok dat u wilt aanpassen. Dit zal het blok activeren en de instellingen zullen verschijnen in de Blok Instellingen paneel aan de rechterkant.
Stap 2: Open de zijbalk met blokinstellingen
Als het instellingenpaneel nog niet zichtbaar is, klikt u op de knop Instellingen knop in de bovenste hoek aan de rechterkant van de editor. Onder de Blok Instellingen paneel, zoek de Stijlen sectie.
Stap 3: Pas de achtergrondkleur aan
In het instellingenpaneel Styles vind je de optie Kleur sectie. Onder Kleurinstellingenvinden Achtergrond. Kies nu gewoon een kleur uit het palet, werk met de kleurenkiezer of voer een aangepaste HEX/RGB/HSL-code in.
Geldt voor
-
Tekst en inhoud blokken: Alinea, Kop, Lijst, Citaat, Pullquote, Code, Voorgeformatteerd, Vers
-
Opmaakblokken: Groep, Kolommen, Omslag, Media & Tekst
-
Interactieve/Widget Blokken: Knoppen, Kalender, Laatste berichten, Categorieën, Tag Cloud, Sociale pictogrammen, Navigatie, Bestand, Audio, Video, RSS, Zoeken, Inloggen/Uitloggen, Paginalijst
-
Site/Postblokken: Titel van de site, Tagline van de site, Titel van het bericht, Inhoud van het bericht, Excerpt van het bericht, Datum van het bericht, Auteur van het bericht, Categorieën van het bericht, Tags van het bericht, Commentaar, Volgende/Vorige bericht, Lees meer
-
Blokken: Spacer (beperkt), Separator (beperkt), Table (alleen volledige tafel).
Opmerkingen
-
Omslagblok: In plaats van een achtergrond vind je de optie Overlay. Je kunt de kleur van de overlay aanpassen, samen met de ondoorzichtigheidsinstellingen voor gelaagde effecten.
-
Knoppenblok: De achtergrondkleur is van toepassing op de knop zelf, terwijl de tekstkleuroptie de tekst van de knop verandert.
-
Sociale iconen: De achtergrondkleur beïnvloedt alleen de pictogramcontainer.
-
Tabel Blok:
-
De achtergrondkleur van de hele tabelSelecteer het Tabelblok en pas de kleur toe in het instellingenpaneel.
-
Je kunt verschillende kleuren hebben voor rijen, maar het is beperkt tot de standaardoptie. Ga naar de Stijlen sectie en kies de Strepen optie, maar de streepkleur is vooraf gedefinieerd en kan niet worden aangepast.
-
Methode 2: Wikkel in een groepsblok
Voor blokken die geen eigen achtergrondkleuropties hebben, zoals media-, legacy- of utility-blokken, kun je een Groepsblok als flexibele container. Door inhoud in het groepsblok te plaatsen, kun je achtergrondkleuren toepassen op de hele sectie.
Stap 1: Identificeer en richt het specifieke blok
Klik op het blok dat de achtergrondkleur niet d