Werken met patronen (MMP)
De Gutenberg editor die wordt gebruikt op de persoonlijke websites beschikt ook over de optie om voorgemaakte content-blokken te plaatsen. Dit kan via de Template Library die bovenaan de editor wordt weergegeven, maar ook door Patronen te gebruiken (Patterns).
Hoe de editor werkt en hoe je de website kunt personaliseren vind je hier, verder vind je op deze pagina meer informatie over de individuele blokken die gebruikt worden in de verschillende patronen.
Opmerking:
Het kan zijn dat er bepaalde blokken of functionaliteiten die hieronder vermeld staan ontbreken op jouw website, als dat zo is meldt dat dan via web.ivm@hu.nl.
Verder is dit een lijst die continu in ontwikkeling is gezien de ontdekkingen en toevoegingen van functies aan de hand van de wensen en ideeën van SvJ studenten.
Patronen bibliotheek
Hieronder vind je een overzicht van de vooropgemaakte content-blokken die vaak in een MMP of bijzondere productie gebruikt werden en daarom als standaard blok worden aangeboden.
Verhaaltje over hoe je een patroon toevoegt.
Een paragraaf item is gewoon een blok tekst waar je in kunt typen. Deze neemt de instellingen over van de typografie van de site (info).
De opties voor de paragraaf zijn vrij beperkt, in de opties-kolom (rechts) kan er een tekst- of achtergrondkleur gekozen worden. En de tekstgrootte kan worden aangepast.
Verder in de opties-balk (boven het blok) kan de uitlijning, bold, italic worden aangepast en een link toegevoegd. En met het pijltje omlaag (Meer) zijn er nog enkele overige opties mogelijk.
Embed codes (bijvoorbeeld MAM) zouden gewoon moeten werken door deze te plakken in de lopende tekst. Mocht dat niet zo zijn dan kunnen deze via een Shortcode blok kunnen worden toegevoegd.
De koptekst is vergelijkbaar met de paragraaf, alleen kan deze een verschillende grootte krijgen door het soort heading in te stellen (H1, H2, H3, etc.). Deze neemt de instellingen over van de typografie van de site (info).
Zie Advanced Heading voor kopjes met meer mogelijkheden hieronder.
Het invoegen van een afbeelding lijkt op hoe het ook ging bij de hyperlocal websites, je kunt deze namelijk uploaden of invoegen vanuit de Media Library (deze is nog hetzelfde als eerst).
In de opties-kolom kies je voor standaard of afgerond (hoeft niet per se) en stel je de grootte en resolutie in.
Over het algemeen is het handig als een afbeelding op automatisch staat qua breedte en hoogte, omdat deze dan mooi meeschaalt op tablets en telefoons. Zeker als deze in een kolom of ander kader is geplaatst.
De grootte van de afbeelding is ook aan te passen door de bolletjes aan de randen te slepen en deze groter of kleiner te maken.
In de opties-balk kun je effecten toepassen, de afbeelding linken, bijsnijden, uitlijnen of een bijschrift toevoegen.
Tip: Bij de link optie in de opties-balk kun je ook kiezen voor ‘Uitvouwen bij een klik’, dit zorgt ervoor dat de afbeelding uitvergroot kan worden in een ‘lightbox’.
Als je kolommen toevoegt op de pagina voeg je meerdere blokken toe, namelijk het kolommen-element en de losse kolommen die daarbinnen vallen.
Wanneer we een complexere opmaak gaan maken binnen de editor hebben we al snel meerdere blokken die dan weer in andere blokken worden geplaatst (ook wel ‘nesting‘), hiernaast zie je hoe dat eruitziet wanneer je op de drie streepjes bovenin de header-balk klikt.
Bij het invoegen van het kolommen element kun je verschillende verhoudingen kiezen, zoals 50%, 50% of 33%, 66%.
Dit wil niet zeggen dat je daar aan vast zit, je kunt namelijk na het plaatsen van het blok een kolom selecteren en in de eigenschappen-balk hier de breedte veranderen.
Verder is het zo dat de niet actieve kolommen niet zichtbaar zijn op de pagina, maar ze zijn er wel. Dus klik in een gedeelte wit waar de kolom zou moeten zijn en je bent verwisseld van kolom en kunt hier iets plaatsten.
Het Shortcode blok kun je gebruiken om shortcode’s zoals die van het MAM (meer info) te plaatsen op de pagina. Deze worden aan de voorzijde van de website weergegeven als een player o.i.d.
Je kunt deze code’s ook gewoon in de lopende tekst plaatsen (Paragraaf), maar als je zeker wilt weten dat deze code’s goed werken kun je deze in dit Shortcode element plaatsen.
Met het Media & tekst element voeg je een combinatie van de verschillende bovenstaande elementen toe aan je pagina. Namelijk aan de ene kant van de twee kolommen staat een kadervullende afbeelding en aan de andere kant tekst (deze kun je ook vullen met andere content-elementen / blokken.
In de opties-kolom kun je de breedte van de twee kolommen aanpassen en zijn er verder vooral standaard instellingen mogelijk.
In de opties-balk kun je kiezen hoe breed deze op de pagina weergegeven wordt. Dit kan ook op volledige breedte (ook zonder de pagina / het bericht hierop in te stellen). Verder kun je aangeven waar de afbeelding moet staan en hoe de content uitgelijnd wordt.
Een lijst item werkt ongeveer hetzelfde als je zou verwachten als in een reguliere tekstverwerker (bijvoorbeeld Word).
Alleen is het net zoals bij de kolommen (zie hierboven) zo dat je een Lijst item hebt met daarbinnen Lijst items. Bij de lijst zelf kun je kiezen voor bullets (stipjes) of cijfers. En bij het lijst item kun je aangeven of deze moet verspringen.
![]()
Met het knoppen blok kun je een of meerdere knoppen toevoegen aan je pagina of bericht.
In de opties-balk (zie hierboven) kun je de uitlijning en tekststijl aanpassen. Hier koppel je ook de link van de knop. Dit kun je doen door een URL (webadres) te kopieëren en plakken of de titel van een bestaande pagina of bericht te typen, WordPress vind dan als het goed is deze vinden in het systeem.
In de instellingen-balk (rechts) kun je de breedte, stijl, kleur, tekstgrootte en afronding instellen.
Een tabel item werkt ongeveer hetzelfde als je zou verwachten als in een reguliere tekstverwerker (bijvoorbeeld Word).
Rijen en kolommen pas je aan in de opties-balk. Verder kun je hier de uitlijning en wat tekst stijlen aanpassen of linkjes toevoegen.
In de opties-kolom kun je kiezen of de achtergrondkleur transparant of om-en-om gestreept moet zijn.
Mocht je echt niet kunnen wennen aan de nieuwe Gutenberg (blokken) editor of zijn er functies die je mist van de oude editor zoals die in de hyperlocals, dan kun je ook een Klassiek blok toevoegen.
Binnen dit blok vind je namelijk de oude-vertrouwde klassieke editor van WordPress met de bekende opties.
Meer hulp nodig?
Lukt iets niet of heb je meer hulp nodig met jouw website? Neem dan contact met ons op via het volgende e-mailadres web.ivm@hu.nl of plan een afspraak in voor een half uur persoonlijke ondersteuning (via Teams) via de volgende link: IvM MTO (office365.com).