Afbeeldingsblok in wordpress zelf vormgeven met stijl

Als u de blok editor van WordPress gebruikt, is het u misschien opgevallen dat het afbeeldingsblok geen styling opties heeft. Het goede nieuws is dat je dit gemakkelijk kunt veranderen met een kleine hoeveelheid CSS.

Ik heb de manieren waarop je het afbeeldingsblok kunt stylen onderverdeeld in drie scenario’s. Nadat je hebt uitgezocht welk scenario voor jou het beste werkt, kun je de CSS van de voorbeeldfoto’s hieronder pakken en creatief aan de slag gaan.

1 Je wilt de stijl globaal toepassen op al je afbeeldingen

Tenzij je iets hebt zoals een portfolio met foto’s, is dit misschien niet de beste optie. De reden hiervoor is dat wanneer je een globale afbeeldingsstijl toepast, dit ook van invloed is op logo’s of iconen die gebruik maken van het afbeeldingsblok.

Als je overal een globaal afbeeldingsblok stijl wilt toepassen, in uw kind thema CSS-bestand of met behulp van de Customizer Extra CSS-gebied, kunt u de volgende klasse en uw aangepaste stijlen toe te voegen.

*Note – alleen het gebruik van .wp-block-image zal de stijl toepassen op het image block figure element en niet op de foto zelf. Door de afgeleide selector img toe te voegen wordt het effect toegepast op de randen van de foto zelf.

/* dit voorbeeld voegt vaste slagschaduw en een dunne rand toe */
.wp-block-image img {
box-shadow: 15px 15px 0px #d3dce5;
border: 1px solid #d3dce5;
}

2 Zelf een stijl globaal toepassen op uw afbeeldingen

Stel dat je, zoals ik hierboven al zei, een aantal afbeeldingen van logo’s hebt die je niet de globale stijl van het afbeeldingsblok wilt geven. Je kunt de globale stijl instellen en dan een tweede class of stijl toevoegen die de globale stijl van het afbeeldingsblok zal verwijderen indien nodig.

Op basis van het voorbeeld hieronder, zal stijl-van-arthur img moeten worden toegevoegd aan de Image Block’s Geavanceerd / CSS Class veld. Dit zal de kaderschaduw en rand verwijderen op alle afbeeldingsblokken waaraan je het toevoegt. Zie de afbeelding hieronder als referentie waar je het moet toevoegen, zorg ervoor dat er geen punt voor staat, zoals in stijl-van-arthur img.

Plaats dit in je CSS van je thema:

/* Dit is je globale beeldblok css is */
.wp-block-image img {
box-shadow: 15px 15px 0px #d3dce5;
border: 1px solid #d3dce5;
}

/* dit is de je eigen class of stijl */
.wp-block-image.stijl-van-arthur img {
box-shadow: none;
border: none;
}

3 U wilt de stijl alleen toepassen op bepaalde afbeeldingsblokken

Als u de stijl van uw afbeeldingsblok alleen op bepaalde afbeeldingen wilt toepassen, is dit de beste methode. Maak gewoon een CSS-klasse met een willekeurige naam met de afgeleide selector img en voeg die naam toe aan het veld Geavanceerd / CSS-klasse van het afbeeldingsblok.

/* verander stijl-van-arthur in elke naam die je wilt */
/* voeg het toe aan de image block advanced css class */
.stijl-van-arthur img {
border: 1px solid #d3dce5;
}