Kader blok maken over hele breedte browser container

Logo cursus traing wordpress

Kader blok maken over hele breedte browser container

Kader blok maken hele breedte website met Gutenberg

De editor introduceert een aantal nieuwe en interessante uitlijningsopties:

  • volle breedte
  • brede uitlijning

Deze opties vereisen dat uw thema ze expliciet ondersteunt.  Zie Developer Aside voor een diepere discussie over wat er nodig is om deze uitlijningsopties te ondersteunen.

Wat betekent volle breedte met een zijbalk?

Omdat het gebruik van breed-uitgelijnd en volledig-breed misschien niet helemaal zinvol is op een pagina met een zijbalk, is hier een demonstratie van breed-uitgelijnde en volledig-brede inhoud op een pagina met één .

Kader maken hele breedte website met Group blocks in Gutenberg

Met de WordPress Gutenberg editor is het eenvoudig om full-width blokken te maken. We kunnen ze gebruiken om rijen te maken die de hele breedte van een pagina overspannen. Vervolgens kunnen we een of afbeelding voor die rij instellen, terwijl de inhoud ervan uitlijnt met de inhoud van reguliere (normale breedte) blokken. Dit wordt vaak gebruikt voor kopteksten, voetteksten, navigatiebalken en secties die moeten opvallen.
weblines.com.au/gutenberg-blocks-wide-alignment-full-width/
potatodie.nl/diffuse-write-ups/gutenberg-group-blocks-full-width-containers/


Simpel kader full width maken over hele breedte met CSS

Het doel: een full width balk als achtergrond

balk rij over hele breedte webpagina maken in gutenberg wordpress
balk rij over hele breedte webpagina maken in gutenberg wordpress

Stap 1 Maak Gutenberg blok(ken) aan

Maak je tekst of elk willekeurig blok. Hieronder kies ik 2 alinea's en een kop. Mag ook 1 of meerdere blokken.

balk rij over hele breedte webpagina maken in gutenberg wordpress
balk rij over hele breedte webpagina maken in gutenberg wordpress

Stap 2 groepeer de 2 blokken

Groepeer de 2 blokken door op de 3 puntjes te klikken. Zie afbeelding.

balk rij over hele breedte webpagina maken in gutenberg wordpress
balk rij over hele breedte webpagina maken in gutenberg wordpress

Stap 3 Geef een Extra CSS-class aan

Geef een Extra CSS- aan in de rechterkolom onder het tabje geavanceerd. Dit zit standaard in WordPress en heet:

alignfull
balk rij over hele breedte webpagina maken in gutenberg wordpress
balk rij over hele breedte webpagina maken in gutenberg wordpress

Stap 4 Geef de balk een kleur

Geef de balk een . Dit kan op 2 manieren:

  • Handmatig de balk een kleur geven in de rechterbalk onder het tabje kleur, en dan .
  • De tweede manier is vind ik beter, namelijk met een eigen stijl. Zie hieronder aangegeven met jouw-stijl. Je moet dan wel weten hoe je zo'n stijl moet aanmaken. Lees meer hieronder hoe dit werkt.
balk rij over hele breedte webpagina maken in gutenberg wordpress
balk rij over hele breedte webpagina maken in gutenberg wordpress

Vul dit in in je WordPress customizer:

.jouw-stijl {background-color: #f2f2f2}

Handleidingen stijl of class maken

Kader full width maken met CSS en calculaties (gevorderden)

Voor gevorderden kun je de calc functie gebruiken. Calc() is een native CSS manier om eenvoudige wiskunde direct in CSS te doen als vervanging voor elke lengte-waarde (of zowat elke getalwaarde). Het heeft vier eenvoudige wiskunde operatoren: optellen (+), aftrekken (-), vermenigvuldigen (*), en delen (/). In staat zijn om wiskunde te doen in code is leuk en een welkome toevoeging aan een taal die vrij zwaar getallen gebruikt.
Een uitgebreide handleiding over het responsie berekenen van breedtes van kolommen, vlakken en kaders vind je hier:

css-tricks.com/a-couple-of-use-cases-for-calc
css-tricks.com/full-width-containers-limited-width-parents

Code editor gebruiken om full-width rijen te kopieren

Je kan ook de code editor gebruiken om full-width rijen te kopieren. je moet dan eigenlijk eerst 1 keer een group (groep) maken en je kan deze code dan telkens opnieuw gebruiken. Zie voorbeelden hieronder:

Voorbeeld 1 code editor basis


WordPress Documentatie

Als je geïnteresseerd bent in een WordPress cursus of vragen hebt, laat dan een bericht achter of bel. We nemen dan zo spoedig mogelijk contact op.

Voorbeeld 2 code editor met meer opmaak

Een voorbeeld van de code editor met meer opmaak. Uiteraard werkt dit alleen als je deze code ook in je CSS bestand hebt Staa. Wel even een indruk:


WordPress tips en handleidingen

WordPress Documentatie achtergrond webdesign

Your bones don't break, mine do. That's clear.

WordPress Plugins

Your bones don't break, mine do. That's clear.

Voorbeeld 3 code editor met div en 3 kolommen


WordPress tips en handleidingen

WordPress Documentatie achtergrond webdesign

Your bones don't break, mine do. That's clear.

WordPress Documentatie achtergrond webdesign

Your bones don't break, mine do. That's clear.

WordPress Plugins

Your bones don't break, mine do. That's clear.

Uitgebreide handleidingen full width blok over hele breedte scherm

Gutenberg Blocks – Wide Alignment and Full-width
Use Gutenberg Group blocks for full-width containers
How to Set Wide or Full-width Content Alignment in Gutenberg

choy.medium.com/fixing-the-gutenberg-block-editor-alignfull-class-with-javascript

Full Browser Width Bars

Handleidingen berekeningen en calculaties

Meer Nederlandse handleidingen en voorbeelden met berekeningen en calculaties met behulp van de Calc() functie vind je hier:


WordPress cursus of training volgen om layouts te maken

Wil je leren hoe je goede layouts met je container kunt maken? Dat kan. Je kan dan het beste een volgen. Dit zijn de opties:


Meer weten over Kader blok maken over hele breedte browser containerof info?

Wil je meer weten? Veel bezoekers met interesse in Kader blok maken over hele breedte browser container bekeken ook de onderstaande handleidingen:


Training of cursus ontwerp en vormgeving

WordPress design en vormgeving

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

WordPress Bootcamp

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

Info over Kader blok maken over hele breedte browser container

Neem vrijblijvend contact op met Arthur als je nog vragen hebt over ontwerp, Kader blok maken over hele breedte browser container en WordPress webdesign.

WordPress designer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven