Elke WordPress pagina bestaat uit zogenaamde Blokken. Met behulp van een WordPress plug-in en CSS kunt u ze zelf ontwerpen en uw eigen blokken maken.
IN DEZE HANDLEIDING:
Contentblokken Gutenberg maken met ‘Lazy Blocks' WordPress plugin
Gutenberg heeft al de nodige kant-en-klare blokken en talrijke plug-ins bieden extra functies. Maar als u meer wilt, zult u op beperkingen stuiten. In dit geval kunt u gewoon uw eigen blokken maken.
Er zijn verschillende WordPress plug-ins waarmee u uw eigen blokken kunt maken. Voor deze workshop gaan we werken met ‘Lazy BlocksWordPress Plugin‘. We leggen uit hoe de plug-in werkt en laten aan de hand van een voorbeeld zien hoe u uw eigen blok kunt maken. Deze basiskennis kunt u vervolgens toepassen op elk blokidee.
Om uw eigen Gutenberg blokken te maken, heeft u enige voorkennis nodig van HTML en CSS. Voor complexere blokken is kennis van PHP-programmering ook nuttig. Maar in het algemeen kan veel worden gedaan, zelfs zonder diepgaande programmeerkennis.
Hoe Lazy Blocks WordPress plugin werkt om zelf blokken te maken
U maakt een nieuw blok aan door in het WordPress menu onder Lazy Blocks te klikken op Create. Hier ziet u drie gebieden:
- Controls: hier maakt u de invoervelden die u later zult vullen met individuele inhoud wanneer u de editor gebruikt – bijvoorbeeld tekst, afbeeldingen, selectievakjes of iets dergelijks.
- Code: hier maakt u de invoervelden die u later zult vullen met individuele inhoud.
- Code:
- Blok/Controle: In de rechterkolom kunt u de basisinstellingen voor uw blok instellen, zoals de naam, beschrijving en opties voor de actieve controle.
Aanmaken van een nieuw Gutenberg blok in WordPress
Geef het blok eerst een naam naar keuze in het Titel veld aan de rechterkant. Zorg er alleen voor dat u geen naam gebruikt die al gereserveerd is door de plug-in (zie documentatie).
Als u wilt, kunt u een geschikt Icon kiezen dat later zal worden weergegeven wanneer u het blok in de editor invoegt. Onder Categorie bepaalt u waar uw nieuwe blok in de editor moet verschijnen. Voor de duidelijkheid bevelen wij de Lazy Blocks categorie aan. Een beschrijving in het Omschrijving veld is optioneel.
Onder Ondersteunt kunt u kiezen uit verschillende opties. Het zou te lang zijn om ze allemaal te beschrijven. U kunt bijvoorbeeld de standaard spatiëring van de blokrand wijzigen, het blok tonen of verbergen afhankelijk van de schermgrootte van de gebruiker, en nog veel meer.
Cursus of training blokken maken en meer in WordPress
Tijdens een basiscursus leer je hoe je optimaal werkt met WordPress en Gutenberg:
- WordPress Bootcamp all-in one spoedcursus
- Online WordPress cursus volgen op afstand vanuit huis
- WordPress Pop-up Bootcamp spoedcursus op maat
Meer handleidingen over Gutenberg blokken in Gutenberg
- WordPress Gutenberg templates sjablonen herbruikbare blokken
- Horizontale lijn maken regelscheidingsteken toevoegen WordPress
- Zelf eigen blokken maken Gutenberg WordPress-editor plugin
- Kader blok maken over hele breedte webbrowser website container
- YouTube video insluiten embed WordPress website Gutenberg blok