Kader blok maken hele breedte website met Gutenberg

De Gutenberg 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 kolom.

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

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.

Stap 2 groepeer de 2 blokken

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

Stap 3 Geef een Extra CSS-class aan

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

alignfull

Stap 4 Geef de balk een kleur

Geef de balk een kleur. Dit kan op 2 manieren:

• Handmatig de balk een kleur geven in de rechterbalk onder het tabje kleur, en dan achtergrond.
• 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.

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

<!-- wp:group {"className":"alignfull","layout":{"inherit":true}} -->
<div class='wp-block-group alignfull'><!-- wp:html -->
<div class='container'>
  <div class='gr-nr1'>
    <h2>
      WordPress Documentatie
    </h2>
  </div>
  <div class='gr-nr2'>
    <p>
      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.
    </p>
  </div>
</div>
<!-- /wp:html --></div>
<!-- /wp:group -->

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:

<!-- wp:group {"className":"clr-toprij alignfull","layout":{"inherit":true}} -->
<div class='wp-block-group clr-toprij alignfull'><!-- wp:html -->
<h2 class='h2-big'>WordPress tips en handleidingen</h2>
<div class='gut-container gut-2-1'>
  <div class='gr-nr1'>
    <h1>
      WordPress Documentatie <span class='t-s'>achtergrond webdesign</span>
    </h1>
    <p>Your bones don't break, mine do. That's clear.</p>
  </div>
  <div class='gr-nr2'>
    <h3>WordPress Plugins</h3>
    <p>
      Your bones don't break, mine do. That's clear.
      <a href='https://www.cursuswp.com/'><button class='button bt-klein'>Overzicht WordPress plugins</button></a>
    </p>
  </div>
</div>
<!-- /wp:html --></div>
<!-- /wp:group -->

Voorbeeld 3 code editor met div en 3 kolommen

<!-- wp:group {"className":"clr-toprij alignfull","layout":{"inherit":true}} -->
<div class='wp-block-group clr-toprij alignfull'><!-- wp:html -->
<h2 class='h2-big'>WordPress tips en handleidingen</h2>
<div class='gut-container gut-1-1-1'>
  <div class='gr-nr1'>
    <h3>
      WordPress Documentatie <span class='t-s'>achtergrond webdesign</span>
    </h3>
    <p>Your bones don't break, mine do. That's clear.</p>
  </div>
  <div class='gr-nr2'>
    <h3>
      WordPress Documentatie <span class='t-s'>achtergrond webdesign</span>
    </h3>
    <p>Your bones don't break, mine do. That's clear.</p>
  </div>
  <div class='gr-nr3'>
    <h3>WordPress Plugins</h3>
    <p>
      Your bones don't break, mine do. That's clear.
      <a href='https://www.cursuswp.com/'><button class='button bt-klein'>Overzicht WordPress plugins</button></a>
    </p>
  </div>
</div>
<!-- /wp:html --></div>
<!-- /wp:group -->

Uitgebreide handleidingen full width blok over hele breedte scherm

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

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 designcursus volgen. Dit zijn de opties:

• WordPress Designcursus ontwerp en vormgevingstraining
• Cursus WordPress op maat beginners & gevorderden
• WordPress Bootcamp all-in one spoedcursus
• Online WordPress cursus volgen op afstand vanuit huis
• WordPress Pop-up Bootcamp spoedcursus op maat