Op een pagina schrijf je tekst in blokken: hoofdtitel (H1), subtitel (H2, eventueel H3), alinea's, afbeeldingen, enz.
Dat is belangrijk voor de responsiveness: op een groot, breed scherm kunnen blokken naast elkaar getoond worden, op een Smartphone-scherm komen ze onder elkaar.
Om dezelfde pagina met een goede layout te kunnen tonen zowel op een groot scherm als op je mobieltje of een tablet gebruikt WordPress het 12-grid system.
DOE bestudeer het 12-grid systeem
Open de pagina grid12.html, tussen haakjes: grid betekent raster.
Maximaliseer het browservenster: je ziet op de eerste rij 12 kolommen, 2 op de tweede, 3 op de derde rij en 4 kolommen op de vierde.
Verklein langzaam de breedte van het browservenster; uiteindelijk staan alle blokjes onder elkaar in 1 kolom - en zo zal het op een smartphonevenster te zien zijn.
Als dat nog nodig is, download vbl-dm.zip in een oefenmap en pak uit.
Kies Pagina's in de zwarte WordPress-balk en breng de cursor op pagina Steun ons.
Klik onder Steun ons op Bewerken en je komt in de Gutenberg-editor.
Selecteer in tekstVBL-DM.txt de alinea onder de titel "Steun ons", van Zowel... tot ...verenigingen.
Kopieer die tekst en plak in de editor als eerste alinea onder de titel. Opslaan.
een lijst maken
Bekijk het voorbeeld: in die inleiding staat een opsomming.
Voeg Enters toe voor en na elke alinea die een list item moet worden.
Selecteer de alinea's en klik op het contextbalkje op de eerste knop, Paragraaf en verander naar Lijst:
Nu verschijnt een nieuw contextbalkje, waarin je kan kiezen voor een opsomming (niet gesorteerd) of een nummering (gesorteerd).
Selecteer het rekeningnummer en klik in het contextbalkje op B van bold, vetgedrukt.
een groep met koptekst en paragraaf
Bekijk het voorbeeld: onder de inleiding komen vier "kaders".
Die randen zijn opmaak, dat komt later. Nu voorzien we een geheel, een groep, met daarin een titel, de koptekst, plus paragraaftekst/lijst.
Klik onder de inleiding en vervolgens op de plus die nu verschenen is.
Zoek "groep" en voeg die in met de derde optie, stack, d.w.z. de elementen komen onder elkaar.
Klik op de plus in de groep en voeg een koptekst toe: Als onderneming.
Klik in de koptekst en dan op de eerste knop op het contextbalkje, dan heb je terug de groep geselecteerd:
Klik op de plus en voeg een paragraaf toe: 1 regel tekst van "Je kan" tot "ondersteunen."
Selecteer opnieuw de stack en voeg een lijst toe, met nummering: selecteer de 4 items in de tekstVBL-DM en plak in de editor.
Je kan ook andersom te werk gaan, eerst de tekst erin zetten en dan een groep ervan maken.
Klik onder de groep en voeg een koptekst toe: Als particulier.
Selecteer de 5 bijhorende regels en plak ze in een paragraaf.
Voeg de nodige Enters toe en maak een genummerde lijst met de drie items.
Selecteer koptekst, paragraaf en lijst samen en klik op de eerste knop op het contextbalkje. Verander naar Groep.
Voeg ook nog de derde en vierde groep toe, telkens met koptekst en paragraaf. Vergeet niet op te slaan!
DOE Voeg nieuwe pagina's toe
Bekijk de voorbeeldpagina Wat wij doen en maak ze met de technieken die je net leerde. De hyperlinks maken we later.
Selecteer de drie groepen Inzamelen, Opslaan en Verdelen samen en zet ze in een Rij, naar boven uitgelijnd. Doe hetzelfde voor Beheren en Nuttige links. Publiceer.
Voeg pagina Hulp nodig? toe en plak alvast de inleidende alinea erin. Publiceer.
Bekijk pagina Vacatures. Voeg deze pagina toe, kopieer de nodige tekst uit tekstVBL-DM.txt en deel in volgens het voorbeeld. Publiceer.
Voeg pagina Over ons toe. Missie, Onze waarden, Ons team zijn kopteksten van niveau 2 (H2).
De raad van bestuur en Onze medewerkers zijn kopteksten van niveau 3 (H3).
Missie en de bijhorende paragrafen vormen een groep, hetzelfde geldt voor Onze waarden en de bijhorende lijst.
Om een nieuwe regel te beginnen binnen een opsommingsitem (list item) gebruik je Shift-Enter.
Zet de groepen met Missie en Onze waarden in een rij, boven uitgelijnd. Publiceer.
een raster gebruiken
Maak de pagina met als titel Contact.
Voeg daaronder een raster in. In de eerste cel staat het adres in een paragraafblok.
Klik in de tweede cel, zodat de plus verschijnt. Hier komt een paragraafblok met de openingstijden.
Voeg een derde cel toe met telefoon en e-mail.
Nu is het "rijtje" vol. Zet je cursor in de laatste cel en klik op de eerste knop op het contextbalkje, Selecteer Hoofdblok: Raster.
Nu heb je opnieuw een plus om een cel met een paragraafblok toe te voegen; daarin komt de groene lijn. Publiceer.
Voor pagina FAQ hebben we een plug-in nodig, een accordion
Ga naar de plug-ins en voeg een nieuwe plug-in toe. Zoek op accordion. Installeer Easy Accordion Block (for Gutenberg Editor, auteur Binsaifullah) en activeer.
Voeg een pagina toe met titel FAQ.
Scroll in tekstVBL-DM naar titel FAQ. Voeg een koptekst in met de eerste vraag: Wil je Voedselbank Limburg - Depot Margo steunen?
Klik linksboven op de blauwe plus, zodat je alle blokken ziet. Het nieuw toegevoegde Accordion staat bovenaan. Klik erop om het in te voegen in de pagina.
De heading is de tekst na de plus in tekstVBL-DM en de content staat eronder.
In de eerste inhoud zit een nummering:
Selecteer van Als peter tot tot diensten.
Klik in het contextbalkje op de eerste knop, paragraaf, en wijzig naar Lijst.
Klik vervolgens wat meer naar rechts op het contextbalkje op de nummeringknop.
Klik op Add Accordion om de volgende heading en bijhorende content te plakken.
Uiteindelijk heb je 4 accordeons: steun door bedrijf, hulporganisatie, particulier, vereniging of club.
Voeg een nieuwe koptekst in: Heb je zelf hulp nodig? en daaronder komt 1 accordeon.
Dan komt de laatste koptekst met daaronder twee delen. Publiceer en bekijk het resultaat.
En last but not least, pagina GDPR.
De eerste regel is een gewone paragraaf.
Zet van Privacyverklaring tot contacteren in een apart paragraafblok.
Bekijk het voorbeeld. De genummerde titels zijn H3-kopteksten en de subtitels (2.A. bv.) H4-kopteksten. Deel in en publiceer.
