Het rasterblok is een robuuste WordPress Gutenberg Block editor layout tool waarmee je een multi-kolom lay-out kunt maken zonder codering. Hiermee kun je je inhoud rangschikken in een gestructureerd raster van rijen en kolommen in plaats van beperkt te zijn tot een enkele kolom met tekst of media.
Het ontwerpen van pagina's in tijdschriftstijl, portfolio's, galerijen of andere secties waar je inhoud naast elkaar wilt toevoegen, is eenvoudiger met behulp van het WordPress Rasterblok. Vandaag zullen we hoe je het Grid Block in WordPress gebruikt en geeft je een overzicht.
Maak prachtige tafels
Met blok-editor
Hoe gebruik je het rasterblok in WordPress?
Laten we nu een stap-voor-stap handleiding doorlopen voor het toevoegen van een rasterblok. Deze stappen zullen beginners en gevorderde gebruikers helpen het meeste uit dit blok te halen.
Maar voordat je de stappen volgt, moet je moet je naar je bericht gaan en naar de pagina's waar je het blok wilt gebruiken. Volg daarna de onderstaande stappen.
Het raster invoegen
Klik op het pictogram Blok toevoegen (Plus Pictogram) (1), type "Rooster" in het zoekvak (2)en klik op het blok wanneer het verschijnt (3).
Uw inhoud invoegen
Standaard zie je dat er slechts twee kolommen zijn ingevoegd voor de inhoud. Voeg uw inhoud in door te klikken op de + pictogram binnen het blok en selecteer vervolgens het gewenste blok.
Voeg nu andere inhoud of een blok in door rechtsonder op het blok te klikken.
Je kunt elk blok invoegen dat je maar wilt. In mijn geval heb ik het blok met de afbeelding ingevoegd.
Je kunt de kolomruimte voor elk blok instellen.
Blok Aanpassing
In het blok aanpassen krijg je de opties voor de lay-out (1) en positie (2).
In de lay-out kunt u de Positie rasteronderdeel. Je kunt de standaardinstelling aanhouden of de handleiding gebruiken.
Met de optie Auto kun je de minimale kolombreedte aanpassen.
Met de handmatige optie kun je de kolommen voor het blok kiezen. Je kunt het aantal kolommen binnen het blok eenvoudig aanpassen.
Vervolgens kun je kiezen of je het raster kleverig wilt maken of niet. Als je het raster plakkerig wilt maken, kies dan de optie plakkerig.
Er zijn ook kant-en-klare stijlen voor het blok in het tabblad Stijlen. Je kunt die selecteren en zien wat hij doet. Hieronder zie je een voorbeeld.
Je kunt de tekst en achtergrondkleur aanpassen met de optie Kleur.
Met de optie Achtergrondafbeelding kun je een afbeelding toevoegen voor de achtergrond van het blok.
Om de afbeelding te resetten, klik je op de drie puntjes en selecteer je Alles resetten.
In de typografie kun je het lettertype, de lettergrootte, het uiterlijk, de regelhoogte, de letterafstand, de versiering en de hoofdletters instellen.
Met de afmetingen kun je de opvulling, marge, minimale hoogte en blokafstand voor het rasterblok aanpassen.
Laten we eens kijken naar de aanpassing van de blokafstand en minimale hoogte hieronder.
Tot slot kun je met de optie Rand & schaduw de rand en de randradius voor het blok aanpassen.
Hier is de laatste demo van wat ik met het blok heb gemaakt. Het is niet het beste, maar het geeft een idee van wat dit blok kan doen.
Overzicht van het WordPress rasterblok
Wat is het rasterblok in WordPress?
Het rasterblok is een containerblok dat alle andere blokken in een rasterindeling vasthoudt. Met andere woorden, het is een ouderblok waarin je meerdere kindblokken kunt plaatsen (zoals alinea's, afbeeldingen, knoppen, enz.) en het zal ze rangschikken in een reeks kolommen. Het maakt automatisch nieuwe rijen als dat nodig is.
Wat zijn de belangrijkste functies van het rasterblok?
Het rasterblok heeft verschillende handige functies, waardoor het een veelzijdig hulpmiddel is voor het maken van lay-outs. Hier zijn enkele van de belangrijkste functies:
- Flexibele kolomindelingen: Je kunt kiezen hoeveel kolommen je in je raster wilt. Met het Rasterblok kun je een specifiek aantal kolommen instellen of WordPress automatisch het aantal kolommen laten bepalen op basis van een minimale kolombreedte.
- Responsief ontwerp: Inhoud gerangschikt in een rasterblok is mobielvriendelijk.
- Inhoud rangschikken en herschikken: Het is eenvoudig om blokken binnen het raster te rangschikken en te herschikken. U kunt inhoudsblokken naar verschillende posities slepen of de pijltjestoetsen gebruiken om ze omhoog/omlaag te verplaatsen binnen de rasterblokcontainer.
- Opties voor aangepaste styling: Je kunt de achtergrondkleur wijzigen of een achtergrondafbeelding toevoegen aan de sectie, tekstkleuren aanpassen voor de inhoud en de typografie aanpassen (lettergroottes, letterfamilies), allemaal op één plek.
- Integratie met andere opmaakblokken: Hiermee kunt u transformeren het in andere opmaakblokken zoals een standaard Groep, een Rij, een Stapel, een Omslagblok of zelfs het oudere Kolommenblok als dat nodig is.
Wat zijn de werkbalkfuncties van het rasterblok?
Als u het rasterblok in de editor selecteert, verschijnt er een werkbalk blokkeren verschijnt bovenaan het blok. Deze werkbalk biedt snelle besturingselementen voor veelvoorkomende acties en aanpassingen.
- Transformeren: Je kunt een Rasterblok transformeren in een Groeps-, Rij-, Stapel-, Dek- of Kolomblok met behoud van de binnenste inhoud.
- Sleepgreep: Met het pictogram met de zes puntjes kun je het hele rasterblok slepen en verplaatsen naar een andere positie op je pagina.
- Omhoog/Omlaag bewegen: Met de pijl-omhoog en pijl-omlaag kun je het rasterblok één positie omhoog of omlaag verplaatsen in de documentstructuur.
- Uitlijning (breedte uitlijning): Met het uitlijningspictogram kunt u de breedte-instelling van de rasterblokcontainer wijzigen.
- Meer opties: De drie verticale stippen openen een vervolgkeuzemenu met extra blokopties.
Laatste gedachten!
Het Grid Block is een geweldig blok dat een fantastische toevoeging is aan de ontwerptoolkit van WordPress. Het biedt je de mogelijkheid om eenvoudig flexibele lay-outs met meerdere kolommen te maken.
Met het blok kun je meer betoverende en boeiende secties voor je website bouwen. Samengevat helpt het Grid Block je om uit de indeling met één kolom te breken en inhoud naast elkaar te tonen in een schone rasterstructuur.
Laat me weten wat je ervan vindt in de commentaarsecties. Deel het ook met je vrienden via je sociale media.
Lees meer!
