Kader blok maken over hele breedte webbrowser website container

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/


Kader full width maken over hele breedte met CSS

Voor gevorderden kun je de cals 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

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: