Deze huiswerkopdracht hoort bij het hoofdstuk Plugin: GenerateBlocks review en installatie. Normaal gesproken zit de huiswerkopdracht ingesloten bij het hoofdstuk zelf, maar in dit geval is de opdracht wat uitgebreider. We gaan aan de slag met een aantal blokken van de plugin GenerateBlocks. Zo raak je vertrouwd met de opties die de plugin biedt op je website. Heb je besloten om deze plugin niet te gebruiken? Dan mag je deze opdracht overslaan.
Goed om te weten: We gaan nu geen mooi blok ontwerpen. Het eindresultaat gaan we dan ook niet gebruiken. Het is hier de bedoeling dat je vertrouwd raakt met de diverse opties van GenerateBlocks en waar je deze kan vinden.
Een nieuw bericht openen
Log in op je website en open een nieuw bericht. Dit doe je door bovenaan over + Nieuw te hoveren en daarna op Bericht te klikken. Er opent nu een geheel nieuw venster. Het zou kunnen dat je nog in afleidingsvrije modus zit. Dit herken je aan het ontbreken van de zijbalk van het dashboard. Ik werk zelf graag wel met deze zijbalk erbij. Je kan op CTRL+SHFT+ALT+F tegelijk drukken op je toetsenbord om de modus te activeren of deactiveren. Als alternatief kan je ook op de drie puntjes onder elkaar rechtsboven klikken en vervolgens Volledig Scherm Modus uitschakelen.
Drie kolommen maken in een container
Druk op het + teken achter de tekst Typ / om een blok te kiezen. Zoek naar het block genaamd Container
Vervolgens druk je op de plus knop die zojuist op je scherm is verschenen. Zoek nu naar het block met de naam Raster.
Voor deze opdracht willen we een simpele call-to-action maken in twee delen. Het eerste deel gaat een pictogram krijgen, het tweede deel een achtergrond met een button. Dit tweede deel mag groter zijn. Kies dus voor het raster waarbij het eerste gedeelte smal is, het tweede gedeelte breed.
In het eerste gedeelte voegen we een koptekst toe. Niet de standaard koptekst / heading van Gutenberg zelf, maar die van de plugin GenerateBlocks. Deze staat in het blauw weergeven.
Instellingen bewerken
Aan de rechterkant zie je nu de instellingen staan van dit block. Zie je dit niet? Dan klik je nogmaals op het zojuist aangemaakte Heading blok. Klap het gedeelte Pictogram uit. Kies bij het tabblad Algemeen een pictogram naar keuze uit. Ik heb de ster uitgekozen voor dit voorbeeld, maar jij mag er zelf een uitkiezen naar wens. Zet in hetzelfde tabblad de pictogramgrootte naar 4,4 em. Vervolgens klap je het tabblad Kleuren uit. Kies hier een leuke kleur voor je Pictogram. Ik kies hier voor #49A392, want dit is de huisstijlkleur van deze website.
Goed om te weten: In de editor zie je nog het woord Koptekst staan. Dit zie je aan de voorkant van je website niet.
Het tweede vlak bewerken
In het tweede grotere gedeelte gaan we een overloop maken van kleur met daarin een button. Begin eerst met het toevoegen van de button. Dit doe je door op het plus te klikken in het tweede gedeelte. Zoek nu naar Knop en voeg het block toe van GenerateBlocks. Klik op de button en pas de tekst aan naar: BEKIJK AANBIEDING. Klap nu het tabblad kleur uit en kies een andere kleur voor je button. De eerste kleur is de kleur die je ziet. De tweede kleur is de overlay als je met je muis over de button gaat.
Klik nu weer het tweede gedeelte van het raster aan. Selecteer het tabblad Achtergronden en vink Gebruik verloop aan. Je ziet nu dat de kleuren mooi in elkaar overvloeien. Kies je eigen kleuren bij Kleur één en Kleur twee.
Spelen met margins en padding
Klik nu op de achtergrond. Deze gaan we groter maken. Dit doe je bij het tabblad Dimensionering. Vul hier bij de breedte 75% in en bij de hoogte 250 px. Je ziet in de editor meteen het vlak groter worden.
Nu gaan we ervoor zorgen dat de button niet zo strak bovenaan staat. Klik nu op de button en ga naar Tussenruimte. Vul hier bij Marge bovenkant 100 px in. De button verschuift nu richting het midden.
Een rand toevoegen
Selecteer nu de gehele container. Dit kan je doen door eerst op een block in de container zelf te klikken en dan steeds naar het bovenliggende block te klikken (zie afbeelding). Soms moet je wel een aantal keer klikken totdat je het hoofdblok te pakken hebt. Dit is de container. Klik op het tabblad kleur en kies een kleur voor de rand. Klap daarna het tabblad Tussenruimte uit en kies een randdikte aan alle kanten. Ik kies hier voor 5 px aan elke kant. Klik vervolgens op het pictogram en zet de padding bij alle opties op 1 em.
Het eindresultaat
Oké, het is geen mooi blok geworden, maar je hebt wel kennisgemaakt met de diverse opties van GenerateBlocks en WordPress.
Op een mobiel scherm bekijken
Als je iets ontwerpt voor je website kijk je altijd even of het ook goed wordt weergeven op een kleiner scherm, zoals op een mobiele telefoon. Dit kan je ook doen door in het bericht zelf rechtsboven op het mobiele pictogram te klikken als je in een blok zit. Je ziet nu dat het pictogram niet goed wordt weergeven op mobiel. Deze staat helemaal links. Dat staat best gek. Om dit te veranderen klik je op het pictogram, vervolgens op het mobiele icoontje en selecteer je de richting Kolom.
