Beeldvullende pagina maken foto volledige breedte scherm

Handleiding om een fullwidth beeldvullende pagina maken met een foto, illustratie of afbeelding in de achtergrond over de volledige breedte in browser te maken.

Logo cursus traing wordpress

Beeldvullende pagina maken foto volledige breedte scherm

Beeldvullende pagina maken foto of afbeelding

Een beeldvullende full-width pagina maken met een foto, illustratie of afbeelding in de 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

Open je WordPress page builder Beaver builder of Elementor

Open je . Het liefst of . 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

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 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.

moderncss.dev/css-only-full-width-responsive-images-2-ways/


Meer weten over Beeldvullende pagina maken foto volledige breedte schermof info?

Wil je meer informatie? Veel cursisten met interesse in Beeldvullende pagina maken foto volledige breedte scherm bekeken ook de onderstaande handleidingen en 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 WordPress website mooier kan maken en vormgeven in de WordPress Bootcamp spoedopleiding:
Design en ontwerp in WordPress Bootcamp

Info over Beeldvullende pagina maken foto volledige breedte scherm

Neem vrijblijvend contact op met Arthur als je nog vragen hebt over ontwerp, Beeldvullende pagina maken foto volledige breedte scherm en WordPress webdesign.

WordPress designer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven