Afbeeldingsblok wordpress vormgeven zelf stijl maken css

Als je bij afbeeldingen of foto's een globaal afbeeldingsblok stijl wilt toepassen kan dit op verschillende manieren. Lees hoe dit aanpast.

Logo cursus traing wordpress

Afbeeldingsblok wordpress vormgeven zelf stijl maken css

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 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 of stijl toevoegen die de globale stijl van het afbeeldingsblok zal 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;
}

Wil je meer weten over Afbeeldingsblok wordpress vormgeven zelf stijl maken cssof info?

Wil je meer details? Veel lezers met interesse in Afbeeldingsblok wordpress vormgeven zelf stijl maken css bekeken ook de onderstaande artikelen:


Training of cursus ontwerp en vormgeving

WordPress design en vormgeving

Leer hoe je je WordPress site beter en kan ontwerpen en vormgeven in de speciale designcursus:
Design en ontwerpcursus voor WordPress

WordPress Bootcamp

Leer hoe je je website mooier kan maken en vormgeven in de WordPress Bootcamp spoedopleiding:
Design en ontwerp in WordPress Bootcamp

Info over Afbeeldingsblok wordpress vormgeven zelf stijl maken css

Neem vrijblijvend contact op met Arthur als je nog vragen hebt over ontwerp, Afbeeldingsblok wordpress vormgeven zelf stijl maken css en WordPress webdesign.

WordPress designer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven