Wil je een Grid of raster layout maken met blokken dan kun je WordPress plugin gebruiken voor ontwerp en vormgeving van je WordPress pagina

Het gebruik van CSS Grid in WordPress

Vandaag de dag kunnen we zoveel meer dingen doen dan een paar jaar geleden, maakt waarschijnlijk dat je Grid eindelijk eens wilt proberen. Als je aan een WordPress project werkt, sta je weer voor de twee bovenstaande opties: beginnen we vanaf nul en coderen we handmatig een template, of is er iets dat ons een beetje hulp kan bieden? Gelukkig is er een plugin die je zou kunnen interesseren, een die we hebben gemaakt met een tweeledig doel in gedachten:

1. Een brug maken tussen de Block Editor en CSS Grid.
2. Een plugin maken die mensen misschien over hun aanvankelijke scepsis heen kan helpen om de Block Editor te gaan gebruiken.

CSS Grid maken in WordPress met plugin

Het heet Grids, en het is een gratis download in de WordPress plugins repository.

Grids maken met 12×6 raster blokken

Grids zorgt alleen voor de opmaakstructuur. Het stelt een 12×6 raster ter beschikking (Section genoemd), waarover je de elementen (Areas) kunt slepen en tekenen die in die Section komen te staan.Met het systeem kunt u handmatig afmetingen, achtergronden en responsief gedrag specificeren, allemaal met behulp van visuele controles in de Block Editor, maar het is zo ontworpen dat het geen inhoudsblok biedt.

Men zou kunnen zien deze aanpak als een zwak punt, maar wij denken dat het eigenlijk Grids ‘grootste kracht, omdat het stelt de plugin te integreren met de talloze inhoud blokken die andere ontwikkelaars over de hele wereld zijn het creëren van. Meer zelfs, op een bepaalde manier Grids helpt brengen die blokken, en WordPress als een platform, in contact met CSS Grid zelf.

Maar zelfs als de plugin strikt genomen geen inhoud produceert, is het onvermijdelijk om het in dezelfde zin te plaatsen als succesvolle paginabouwers, in feite door zijn functionaliteit te vergelijken met die welke door deze worden aangeboden. Als u de zorg over concepten zoals scheiding van vorm en inhoud, pagina gewicht, gemak van onderhoud, Grids biedt een schonere oplossing voor het probleem van het creëren van visueel aantrekkelijke lay-outs in WordPress.

Grid met minimale CSS code

De gegenereerde markup is minimaal. In zijn meest basale vorm wordt een Section (dat is het element met de {!{code}!}XCJkaXNwbGF5OiBncmlkXCJ7WyYqJl19{!{/code}!} eigenschap) alleen samengesteld door zijn eigen element – natuurlijk, een interne wrapper (die niet kon worden vermeden en die wordt gebruikt voor spatiëring), en dan één element per Area dat bij de Section hoort. Dit is een enorme stap voorwaarts in termen van het vermijden van onnodige markup.Voor degenen onder jullie die niet bang waren om je handen vuil te maken met het ontwikkelen van blokken voor de Block Editor, het renderen van het blok wordt server-side gedaan, wat het mogelijk maakt om aangepaste classes toe te voegen aan Section en Area elementen met behulp van filters.Deze keuze bepaalt ook direct wat er gebeurt in het geval dat je Grids uitschakelt in je installatie.

Meer handleidingen over Gutenberg blokken in WordPress

• Gutenberg blokken als widgets in footer WordPress 5.8
• Herbruikbare blokken maken Gutenberg Reusable blocks
• YouTube video insluiten WordPress Gutenberg blok
• Spectra Ultimate Addon Gutenberg extra blokken WP plugin
• Blokken panelen uitzetten Gutenberg WP Block Manager
• WP Gutenberg templates sjablonen herbruikbare blokken

Als je je pagina niet opnieuw opslaat, is wat er overblijft van Grids op de front end eigenlijk alleen de inhoud die je in de inhoudsgebieden zet. Geen extra opmaak elementen, geen vreemd uitziende shortcode.

Aan de achterkant heeft de blok-editor een systeem dat je waarschuwt als je een pagina bewerkt die een bepaald bloktype zou moeten gebruiken, maar dat bloktype is op dat moment niet beschikbaar: in dat geval kun je gemakkelijk tijdelijk het raster weer inschakelen, de inhoud naar een andere plaats verplaatsen en dan de hele sectie weggooien.

CSS die gegenereerd is om het raster te maken wordt ook dynamisch aan de pagina toegevoegd, als een inline stijl in het <head> gedeelte van het document. We zijn niet echt fan van stijlen die direct in de pagina worden geschreven, omdat we idealiter alle styling zouden willen delegeren naar bestanden die we onder versiebeheer kunnen zetten, maar dit is een geval waarin we die aanpak erg handig vonden.

Een andere haalbare optie zou zijn geweest om alle mogelijke combinaties van begin- en eindpunten van kolommen en rijen te identificeren, en die programmatisch in klassen in te delen, die dan gebruikt zouden kunnen worden om elementen daadwerkelijk in het raster te plaatsen. Op een 12×6 raster zou dat hebben geleid tot een totaal van 36 class selectors, die er als volgt uitzien:

.grids-cs-1 {
  grid-column-start: 1;
}

.grids-ce-2 {
  grid-column-end: 2;
}

Wat als we besluiten om meer controle te bieden over hoe een raster is samengesteld en, laten we zeggen, gebruikers toegang geven tot opties die bepalen hoeveel kolommen of rijen de rasterstructuur vormen?

Dan zouden we de klassen die we nog niet in het stylesheet hebben, handmatig moeten toewijzen (en daarvoor een update van de plugin moeten uitbrengen), of, opnieuw, inline genereren, en die klassen vervolgens aan de rasterelementen toevoegen.

Hoewel dit perfect in orde is, gaat deze aanpak in tegen het idee van een slankere, meer scanbare markup, dus hebben we besloten deze weg niet te volgen, en de prijs te betalen voor het dynamisch plaatsen van stijl in de head van het document, wetende dat het gemakkelijk gecached zou kunnen worden.

Vanwege het experimentele karakter van de plugin, is de backend UI die wordt gebruikt om het raster samen te stellen, gemaakt met CSS Grid, en een set CSS variabelen waarmee we de eigenschappen van de inhoudsgebieden controleren. Het gebruik van variabelen heeft ons werk achter het grid creator prototype enorm versneld – als we daar een andere weg hadden gekozen, zouden de dingen niet alleen veel langer duren in termen van ontwikkeltijd, maar ook complexer en minder duidelijk te onderhouden zijn op de lange termijn.

Meer over de grids WordPress plugin

Voor meer informatie over de plugin, bezoek de documentatie website.

Een lay-out builder is een hulpmiddel dat u helpt bij het maken van visuele structuren in uw pagina, van een eenvoudige lay-out gemaakt door aangrenzende kolommen, tot meer complexe composities. Grids is volledig gebaseerd op de WordPress blok editor, wat betekent dat u in staat zult zijn om het te gebruiken in combinatie met de ontelbare content blokken die ontwikkelaars en ontwerpers van over de hele wereld maken.

Met Grids brengen we een visuele structuur aan in de inhoud die geschreven is met de WordPress Block Editor.

SECTIES & GEBIEDEN

Een Sectie is een deel van de pagina dat zich visueel wil onderscheiden van de rest van de inhoud. Secties zijn meestal blokken van het hoogste niveau die je de een na de ander toevoegt; de volgorde van de secties is wat je pagina layout maakt.

Elke Section die je maakt is samengesteld uit verschillende Areas. In hun meest basale vorm kun je gebieden zien als kolommen, die niets anders zijn dan containers voor inhoudsblokken.

Voor meer uitgebreide samenstellingen kunt u met de Grid Designer precies de rasterstructuur maken die u wilt binnen de grenzen van een Section, door CSS Grid te gebruiken.

Wil je meer weten? Lees de plugin documentatie! 👉 https://justevolve.it/grids/documentation/

Heeft u nog problemen? Dat kan afhangen van een van de bekende problemen 👉 https://justevolve.it/grids/documentation/known-issues/

Meer handleidingen over het maken van grids, rasters en blokken in WordPress

• Beste CSS frameworks grid systemen voor WordPress
• WordPress galerij maken reeks serie foto’s afbeeldingen
• Grid raster layout ontwerp maken met WordPress plugin
• Grid CSS rasterindeling zonder achtergrondafbeelding
• Blog berichten op pagina met Elementor en Page Builders
• Rule of thirds raster compositie web-design