Probleem:
Voor een WordPress website gemaakt in Elementor Pro moest ik een pagina maken met een overzicht van blog berichten. Hiervoor heb ik gebruik gemaakt van de Elementor Post Widget.
De uitdaging was om over de uitgelichte afbeelding van ieder bericht een doorzicht gekleurde laag te plaatsen. De Elementor Post Widget biedt hier geen oplossing voor.
Wel kan je met de CSS filter eigenschap o.a. de grijswaarde of blurwaarde wijzigen. Maar dit was geen oplossing voor mijn probleem.
Oplossing:
Ik heb de oplossing buiten Elementor gezocht door aan het style.css bestand van het child thema onderstaande CSS code toe te voegen.
Overigens kan je dit ook in Elementor Pro of de WordPress customizer plaatsen, maar mijn voorkeur gaat ernaar uit alle CSS uitzonderingen op een plek te hebben.
.class_om_post_te_identificeren .elementor-post__thumbnail:after {
content:'\A';
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
background:rgba(40,40,40,0.4);
opacity: 1;
}
Bovenstaande CSS code wordt toegepast op de <div> die om de <img> tag heen zit. Deze HTML code wordt door de Elementor Post Widget gegenereerd. De afbeelding zorgt ervoor dat .elementor-post___thumbnail de juiste afmeting krijgt.
> Bekijk meer blogs over Elementor
De waarde “opacity” zorgt ervoor dat de kleur die je via “background” instelt als gekleurde laag zichtbaar is voor bezoekers. Het is wel belangrijk om een transparantie waarde op te geven in “background” property zodat de laag doorzichtig wordt. Anders zie je de afbeelding niet.
Dynamische toepassing:
In het voorbeeld maak ik gebruik van .class_om_post_te_identificeren. Dit kan je achterwege laten als je de CSS code op alle blog berichten wilt toepassen. Maar in mijn situatie moest ik verschillende kleuren ondersteunen. Je zou dit kunnen doen op basis van een gekoppelde categorie, tag of de getoonde pagina.