IN DEZE HANDLEIDING:
Beeldvullende pagina maken foto of afbeelding
Een beeldvullende full-width pagina maken met een foto, illustratie of afbeelding in de achtergrond over de volledige breedte en volledige hoogte in het browserscherm is niet moeilijk. Lees hier hoe je dit doet
Zet je pagina of berichtinstellingen of volledige breedte
Zet je pagina of berichtinstellingen of volledige breedte. Niet alle thema’s ondersteunen dit helaas. De goede thema’s wel, bijvoorbeeld het Astra thema
Open je WordPress page builder Beaver builder of Elementor
Open je page builder. Het liefst Beaver builder of Elementor. In dit voorbeeld doe ik het met Beaver builder.
Maak een rij aan met je page builder
- Maak een rij aan met je page builder.
- Zet de instellingen van de rij op full width
Als je niet weet hoe dit moet, ga je naar deze handleiding:
Rij kolommen layout maken | beaver builder elementor page builder
Juiste hoogte instellen van de rij
In je rij kun je de juiste hoogte instellen. Zet deze op volledige hoogte of beeldvullend. Zie hieronder hoe je dit doet in je page builder. In dit geval Beaver Builder, maar in Elementor werkt het hetzelfde
Voorbeelden webpagina beeldvullende afbeeldingen in WordPress
Voorbeelden van webpagina’s met beeldvullende afbeeldingen
Afbeelding met CSS achtergrond-grootte: cover
Een decennium van mijn werk bestond uit het maken van sterk aangepaste WordPress-thema’s en plugins voor bedrijfswebsites. Dus met het voorbeeld van getemplateerde kaarten, is dit hoe je de background-size: cover oplossing zou kunnen gebruiken. Dit is voor gevorderden met kennis van CSS
Maak eerst de HTML, waar de afbeelding wordt ingevoegd in het stijlattribuut als achtergrondafbeelding. Een aria-label wordt aangemoedigd om de plaats in te nemen van het alt-attribuut dat normaal aanwezig zou zijn op een gewone img-tag.
.img {
background-size: cover;
background-position: center;
// 16:9 ratio
padding-bottom: 62.5%;
}
De relevante bijbehorende CSS zou het volgende zijn, waarbij padding-bottom een rare truc is die wordt gebruikt om een 16:9 verhouding in te stellen op de div die de afbeelding bevat:
Een voorbeeld zie je hieronder:
See the Pen Responsive Images Solution #1: `background-size: cover` by Stephanie Eckles (@5t3ph) on CodePen.