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 direct ondersteunt. Als je dat doet, verschijnt de werkbalk voor blokken boven dat specifieke blok.
Stap 2: groepeer het blok
Klik nu op de Opties menu (drie puntjes) uiterst rechts in de werkbalk van het blok en selecteer Groep uit het dropdown menu. Dit omhult het geselecteerde blok in een Groepsblok.
Stap 3: Selecteer het groepsblok
Klik op de buitenste rand van het groepsblok en selecteer het bovenliggende groepsblok helemaal links in de werkbalk. Hierdoor wordt de hele sectie gemarkeerd.
Stap 4: De achtergrondkleur toepassen
Navigeer meteen naar de Paneel met blokinstellingenscroll naar de Kleur en kies een achtergrondkleur of gebruik de kleurenkiezer voor aangepaste tinten.
Stap 5: Pas de tussenruimte aan (optioneel)
Als de inhoud in je groepsblok de hele breedte van het blok in beslag neemt, moet je mogelijk de inhoudsbreedte aanpassen om de achtergrondkleur zichtbaar te maken. Selecteer de Groep blok (zoals we in stap 3 hebben gedaan), ga naar het Blok Instellingenscroll naar beneden naar Inhoud Breedteen stel een aangepaste breedte in om ruimte te creëren tussen de inhoud en de gekleurde achtergrond.
Geldt voor
- Mediablokken zonder directe ondersteuning: Afbeelding (indien niet geconverteerd naar Cover), Video, Audio
- Legacy/Utility-blokken: Shortcode, Classic, More, Custom HTML, Legacy Widget, Template Part, Page Break, Archives, Embed (YouTube, Twitter, enz.), Avatar, Comments Query Loop, Spacer (voor geavanceerde controle), Separator (voor extra flexibiliteit)
Opmerkingen
- Het blok Groep is ideaal voor het maken van secties met uniforme achtergrondkleuren.
- Je kunt meerdere blokken in een groepsblok nesten om ze als een samenhangende sectie te stylen.
- Pas de lay-outinstellingen aan (zoals uitlijnen en opvullen) voor een betere controle over spatiëring en inhoudsstroom.
Methode 3: Gebruik een afdekblok
Als je geavanceerde ontwerpopties nodig hebt, zoals overlay-effecten of gelaagde achtergronden, is de Afdekblok is de perfecte oplossing. Je kunt achtergrondkleuren of -afbeeldingen toevoegen met aanpasbare ondoorzichtigheid, waardoor het perfect is voor heldensecties, banners of uitgelichte inhoudsgebieden.
Stap 1: Voeg een Cover Block toe
Begin gewoon door op de + knop in de editor, zoek naar Omslagen voeg het in je inhoud in.
Stap 2: Kies een achtergrondkleur
Selecteer een achtergrondkleur of voeg een afbeelding toe. Of je nu een afbeelding of een kleur gebruikt, je kunt de overlappende kleur wijzigen en de overlappende ondoorzichtigheid aanpassen. Ga daarvoor naar de Kleur sectie onder de Stijlen tabblad in de Blok Instellingen.
Stap 3: Inhoud invoegen binnen het omslagblok
Om de inhoud in het omslagblok in te voegen, kun je gewoon de optie werkbalk blokkeren om het blok of de blokken die je wilt stijlen (zoals Paragrafen, Koppen of Afbeeldingen) in het Cover-blok te slepen of voeg nieuwe blokken direct binnen het Cover-blok toe met behulp van de knop blokinzetter (+ knop).
Geldt voor
- Voor geavanceerde ontwerpbehoeften: Elk blok dat gelaagde achtergrondeffecten nodig heeft, zoals Paragrafen, Koppen, Afbeeldingen, Knoppen of zelfs meerdere gecombineerde blokken.
Opmerkingen
- Het Cover-blok is perfect voor heldensecties, call-to-action-gebiedenen banners.
- Je kunt tekst over achtergrondkleuren of afbeeldingen leggen voor opvallende visuele effecten.
- Pas de ondoorzichtigheid aan voor subtiele overlays of opvallende kleurblokken.
Overzichtstabel: Blokken en methoden
Blok Categorie |
Methode |
|---|---|
Tekst/inhoudblokken (bijv. alinea, kop, lijst) |
Methode 1 |
Mediablokken (bijv. afbeelding, video, audio) |
Methode 2 of 3 |
Lay-outblokken (bijv. kolommen, groep, omslag) |
Methode 1, 2 of 3 |
Interactieve blokken (bijv. knoppen, sociale pictogrammen) |
Methode 1 |
Widgetblokken (bijv. Zoeken, Kalender) |
Methode 1 |
Legacy/Utility-blokken (bijv. Shortcode, Classic) |
Methode 2 |
Conclusie
De eenvoudigste manier om een grote impact te hebben op de algehele look en feel van je website is waarschijnlijk door de achtergrondkleur te veranderen van de WordPress kernblokken die je gebruikt. Je keuze om inhoud te leveren met de juiste achtergrondkleur zal je websitebezoekers zeker aantrekken. Het is een eenvoudige maar krachtige hack om de gebruikerservaring te verbeteren en je site te laten opvallen. Of u nu kiest voor de native achtergrondkleurinstellingen, de groepsblokmethode gebruikt of de Cover-blokbenadering kiest, uiteindelijk gaat het niet alleen om het toevoegen van kleur; het gaat om het creëren van een omgeving waarin uw inhoud meer spreekt. Dus ga je gang, experimenteer met kleuren en zie hoe kleine veranderingen je website kunnen veranderen in een effectiever platform.
