Gutenberg demo

Dit is de introductie van een pagina en zal zichtbaar zijn in de header van de pagina. Meestal onder de titel of boven / naast een header afbeelding. Meer informatie over dit blok verder op deze demopagina.

Algemene uitleg CMS

Gereedschappen linksboven

  1. Blok invoeger. Overzicht van alle blokken die in de editor geplaatst kunnen worden.
  2. Gereedschap. Hier kan tussen bewerken en selecteren gewisseld worden.
  3. Ongedaan maken en Opnieuw uitvoeren (ctrl/cmd + Z en ctrl/cmd + shift + Z).
  4. Document overzicht. Hier worden alle blokken die gebruikt worden overzichtelijk in een lijst weergegeven. Dit kan ook gebruikt worden om blokken snel van positie te verslepen, dupliceren of verwijderen.

Overzichten

Agenda

Het agenda-overzichtsblok in WordPress biedt de mogelijkheid om agenda-items weer te geven. Met dit blok kun je kiezen of je alle agenda-items wilt tonen of alleen die binnen specifieke categorieën vallen en het aantal agenda items dat getoond moet worden. Hier is een overzicht van hoe dit werkt:

1. Alle agenda-items tonen

  • Standaard toont het agenda-overzichtsblok alle aankomende beschikbare agenda-items.
  • Je kunt dit gebruiken om een volledig overzicht van alle geplande evenementen te bieden of een overzicht van alle items te tonen in de vorm van een archief.

2. Agenda-items filteren op categorie

  • In de blokinstellingen heb je de mogelijkheid om te filteren op specifieke categorieën.
  • Dit is handig als je bijvoorbeeld alleen evenementen wilt weergeven die binnen een bepaalde categorie vallen, zoals ‘Workshops’ of ‘Webinars’.
  • Wanneer je een categorie selecteert, worden alleen de agenda-items binnen die categorie in het blok getoond.

3. Aantal berichten

  • Standaard worden alle berichten weergegeven door de waarde -1. Door dit getal aan te passen kun je controleren hoeveel berichten er in totaal binnen het overzicht getoond worden.

Berichten carrousel

Tekst

Paragraaf

Het paragraaf blok in de WordPress Gutenberg editor is een van de meest gebruikte blokken voor het toevoegen van tekst aan je pagina’s en berichten. Het stelt je in staat om eenvoudig tekst in te voeren, te bewerken en op te maken zonder dat je code hoeft te gebruiken. Het paragraaf blok is de basis voor het schrijven van inhoud in WordPress.

Opmaakopties:

  • Tekst uitlijnen: Kies links, rechts of gecentreerde uitlijning voor de tekst.
  • Vetgedrukt: Maak de geselecteerde tekst vet.
  • Cursief: Maak de geselecteerde tekst schuin.
  • Link: Voeg een hyperlink toe aan de tekst.

Koptekst

Het koptekst blok in de WordPress Gutenberg editor is een belangrijk blok dat wordt gebruikt om koppen of titels in je content te creëren. Het helpt je om de inhoud op je pagina of bericht op te delen in logische secties, wat de leesbaarheid verbetert en de hiërarchie van de tekst aangeeft. Kopteksten worden ook vaak gebruikt voor SEO-doeleinden, omdat zoekmachines zoals Google deze gebruiken om de structuur van je pagina beter te begrijpen.

Kopniveau kiezen (H1, H2, H3, etc.):

  • H1: Dit is het hoogste kopniveau en wordt doorgaans gebruikt voor de hoofdtitel van een pagina. Deze wordt over het algemeen via de code al uitgelezen en hoeft niet in de editor geplaatst te worden.
  • H2: Dit is een subkop en wordt vaak gebruikt voor secties onder de hoofdtitel.
  • H3: Nog een niveau lager, vaak gebruikt voor subsecties binnen een H2-sectie, enzovoorts tot H6.

Dit is een H1

Dit is een H2

Dit is een H3

Dit is een H4

Dit is een H5
Dit is een H6

Lijst

Het lijst blok in de WordPress Gutenberg editor is een eenvoudig maar krachtig hulpmiddel waarmee je lijsten met items kunt maken, zowel genummerde (geordende) als opsommingstekens (ongeordende) lijsten. Dit blok is handig voor het opsommen van punten, stappen of elke reeks items die gestructureerd gepresenteerd moeten worden.

In de toolbar van het lijst blok kun je kiezen tussen twee soorten lijsten:

Ongeordende lijst:

  • Lijst optie 1
  • Lijst optie 2
  • Lijst optie 3

Geordende lijst:

  • Lijst optie 1
  • Lijst optie 2
  • Lijst optie 2

Citaat / Quote

Het quote blok in de editor stelt je in staat om citaten op een opvallende en gestileerde manier toe te voegen aan je berichten of pagina’s. Citaten worden vaak gebruikt om belangrijke uitspraken of teksten te benadrukken. Het quote blok biedt standaardopmaak om de citaten visueel aantrekkelijk te maken, en je kunt de stijl en indeling van het citaat aanpassen.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend eros augue, eu posuere leo aliquam id. 

Citaat bron

Tabel

Het tabel blok maakt het gemakkelijk om tabellen toe te voegen aan je pagina’s en berichten. Een tabel is handig voor het overzichtelijk weergeven van gegevens in rijen en kolommen, zoals prijzen, vergelijkingen, specificaties of elke andere vorm van gestructureerde informatie.

  • Standaardstijl: Een eenvoudige, basisstijl voor de tabel.
  • Gestreepte rijen: Dit maakt de rijen in de tabel afwisselend gekleurd, wat het visueel aantrekkelijker en gemakkelijker te lezen maakt.
Tabel headTabel headTabel head
Tabel inhoudTabel inhoudTabel inhoud
Tabel inhoudTabel inhoudTabel inhoud
Tabel inhoudTabel inhoudTabel inhoud
Tabel footTabel footTabel foot
Onderschrift tabel
Tabel headTabel headTabel head
Tabel inhoudTabel inhoudTabel inhoud
Tabel inhoudTabel inhoudTabel inhoud
Tabel inhoudTabel inhoudTabel inhoud
Tabel footTabel footTabel foot
Onderschrift gestreepte tabel

Media

Afbeelding

Het afbeeldingen blok is een van de meest gebruikte blokken, omdat het je in staat stelt om gemakkelijk afbeeldingen toe te voegen en te beheren in je pagina’s of berichten. Je kunt afbeeldingen uploaden, selecteren uit je mediabibliotheek, of via een URL invoegen. Dit blok biedt verschillende opties voor uitlijning, bijschriften en opmaak, zodat je afbeeldingen op een aantrekkelijke manier kunt presenteren.

Afbeelding onderschrift

Galerij

Het galerij blok maakt het eenvoudig om een groep van meerdere afbeeldingen op een visueel aantrekkelijke manier weer te geven. Dit blok is perfect om bijvoorbeeld een fotogalerij, portfolio, of verzameling productafbeeldingen te maken. Met het galerij blok kun je afbeeldingen uploaden, uit de mediabibliotheek kiezen, de lay-out aanpassen, en de weergave van de galerij volledig beheren.

Audio

Het audio blok maakt het mogelijk om audiobestanden toe te voegen aan je pagina’s of berichten. Dit blok is ideaal voor het delen van podcasts, muziek, gesproken woord of andere audio content. Het audio blok biedt een ingebouwde audiospeler waarmee bezoekers direct op je website naar de audio kunnen luisteren.

Bestand

Het bestand blok is een handige manier om bestanden, zoals PDF’s, Word-documenten, Excel-spreadsheets, of andere downloadbare bestanden, beschikbaar te stellen op je website. Dit blok biedt een eenvoudige interface om bestanden te uploaden en aan bezoekers aan te bieden, met een ingebouwde download knop. De tekst van de knop kan aangepast worden en met de extra opties die in de rechterbalk verschijnen kan worden ingesteld of de link in het eigen of een extern venster geopend wordt.

Video

Het video blok maakt het gemakkelijk om video’s toe te voegen aan je pagina’s of berichten. Dit blok biedt je de mogelijkheid om video’s te uploaden vanaf je computer, of video’s in te voegen die gehost worden op platforms zoals YouTube, Vimeo, of andere videodiensten.

Nadat de video is toegevoegd, verschijnt er een ingebouwde videoplayer op de pagina. Hiermee kunnen bezoekers de video afspelen, pauzeren, en door de video heen spoelen.

De video wordt weergegeven op je website in een standaard HTML5 videoplayer, waardoor het bestand compatibel is met verschillende apparaten en browsers.

In de rechterzijbalk van de editor kun je verschillende instellingen aanpassen voor het video blok:

  • Autoplay: Hiermee kun je instellen dat de video automatisch begint te spelen wanneer de pagina wordt geladen. Houd er echter rekening mee dat autoplay door sommige browsers kan worden geblokkeerd of beperkt.
  • Loop (herhalen): Wanneer deze optie is ingeschakeld, wordt de video automatisch opnieuw afgespeeld zodra deze is afgelopen.
  • Mute (dempen): Deze optie dempt het geluid van de video wanneer deze automatisch afspeelt of wordt geladen.
  • Vooruit- en achteruitspoelen toestaan: Dit geeft gebruikers de mogelijkheid om door de video te spoelen, zowel vooruit als achteruit.
  • In de zijbalkopties kun je een posterafbeelding instellen. Dit is een afbeelding die wordt weergegeven voordat de video begint af te spelen, wat handig is als je een specifieke thumbnail wilt tonen die de inhoud van de video weergeeft.

Klik in de editor op de onderstaande video om de voorkeurs instellingen te bekijken.

Media & tekst

Het media en tekst blok is een veelzijdig blok waarmee je eenvoudig afbeeldingen, video’s, of andere media naast tekst kunt plaatsen. Dit blok is ideaal om een aantrekkelijke lay-out te creëren waarin media en tekst naast of boven elkaar staan, wat vaak wordt gebruikt om bijvoorbeeld afbeeldingen met beschrijvingen of een combinatie van tekst en video weer te geven.

Door de vele mogelijkheden van dit blok is hier een stap-voor-stap uitleg over hoe het media en tekst blok werkt.

Hier kan de achtergrondkleur van het blok ingesteld worden. Er kan een thema (licht en donker), een vaste achtergrond kleur of een handmatige achtergrond- en tekstkleur geselecteerd worden.

  1. Media toevoegen – maak een keuze tussen een afbeelding of een video.
    • Afbeelding selecteer een bestaande afbeelding uit de mediabibliotheek of upload een nieuwe afbeelding.
  2. Positionering – In de rechterzijbalk van de editor, kun je bepalen of de media aan de linkerkant, aan de rechterkant of boven de tekst wordt geplaatst.
    • Links – media wordt links weergegeven en de tekst rechts
    • Rechts – media wordt rechts weergegeven en de tekst links
    • Bovenaan – media wordt boven de tekst weergegeven. Deze optie is het beste te gebruiken in combinatie met het kolommen blok. Zie voorbeeld Media en tekst binnen kolommen met uitlijning boven.
  3. Verhouding
    • Hier kun je de grootte van de linker- en rechterkant bepalen.
  4. Tekst uitlijning
    • Hier kan de uitlijning van de tekst ten opzichte van de media ingesteld worden.
  5. Witruimte
    • Met de schuifregelaar kan de witruimte van de tekst ingesteld worden.
  6. Achtergrond
    • Hier kan de achtergrondkleur van het blok ingesteld worden. Er kan een thema (licht en donker), een vaste achtergrond kleur of een handmatige achtergrond- en tekstkleur geselecteerd worden.

Uitlijning media links

Tekst gecentreerd, 50/50 uitlijning gemiddelde witruimte met een licht thema.

Uitlijning media links

Tekst gecentreerd, 33/66 uitlijning gemiddelde witruimte met een aangepaste achtergrond en tekstkleur.

Media en tekst blok binnen een kolommen blok met uitlijning boven

Uitlijning media boven

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Uitlijning media boven

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Afbeeldingen carrousel

Een afbeeldingen carrousel blok in WordPress stelt je in staat om een reeks afbeeldingen in een roterend formaat te tonen, waarbij gebruikers door de afbeeldingen kunnen scrollen. Dit type blok is handig voor het tonen van meerdere foto’s, portfolio’s, of productafbeeldingen op een overzichtelijke en visueel aantrekkelijke manier.

Je kunt kiezen uit afbeeldingen die al zijn geüpload naar de mediabibliotheek, of je kunt nieuwe afbeeldingen uploaden vanaf je computer. Nadat je de afbeeldingen hebt geselecteerd, kun je ze eenvoudig in de gewenste volgorde slepen.

Impressies

Ontwerp

Knoppen

Normaal

Groot

Outline normaal

Outline groot

Kolommen

Het kolommen blok kan maximaal 4 kolommen beslaan en van iedere kolom kan een breedte worden ingesteld. Binnen een kolom kunnen de volgende blokken gebruikt worden:

  • Knoppen
  • Paragraaf
  • Koptekst
  • Lijst
  • Afbeelding

3 koloms

Titel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem orci, accumsan convallis vestibulum sed, tincidunt ac nulla.

Titel

  • Listitem
  • Listitem
  • Listitem
  • Listitem

Titel

2 koloms

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam, enim fringilla tincidunt vehicula, tellus risus varius tortor, in tempus lorem ipsum a magna. Pellentesque bibendum mollis nunc, in porta ipsum luctus ut. Nulla arcu ante, eleifend id lacus vitae, maximus posuere nisi. In at nulla commodo, vehicula orci eget, eleifend metus.

Integer convallis, felis ut tincidunt rutrum, metus nisl eleifend nibh, ac tristique massa nulla quis neque. Quisque id finibus nisl, in feugiat ipsum. Vestibulum ac ipsum vitae justo volutpat dignissim sed quis nulla. Vestibulum eu auctor magna. Donec condimentum tortor felis, id euismod nunc pharetra sit amet. Mauris erat sapien.

Container

Het container blok is een veelzijdig blok waarmee je de opmaak van een pagina naar een hoger niveau kan brengen. Dit blok is ideaal om een aantrekkelijke lay-out te creëren waarin media, kleur en tekst samenkomen. Binnen dit blok kan vervolgens weer een grote selectie van de andere blokken geplaatst wat veelzijdige combinaties mogelijk maakt.

Door de vele mogelijkheden van dit blok is hier een stap-voor-stap uitleg over hoe het blok werkt.

  1. Kader instellingen
    • Er kan gekozen worden om het blok gekaderd of over de gehele breedte te tonen.
  2. Witruimte
    • Met de schuifregelaar kan de witruimte van het blok ingesteld worden.
  3. Achtergrond
    • Hier kan de achtergrond van het blok ingesteld worden. Er kan een thema (licht en donker), een vaste achtergrond kleur, een afbeelding, een video of een handmatige achtergrond- en tekstkleur geselecteerd worden.

Voorbeeld

Dit is een containerblok.

Introductie

Het introductie blok wordt gebruikt om een korte inleiding (vaak in een groter of afwijkende letter) weer te geven in bijvoorbeeld de header van de pagina. Er kan maximaal 1 introductieblok per pagina geplaatst worden .

Witruimte

Het Witruimte blok is een handig hulpmiddel waarmee je lege ruimte kunt toevoegen tussen blokken op je pagina of in je bericht. Dit blok voegt visuele luchtigheid toe en helpt om de lay-out van je content beter te structureren, vooral als je secties wilt scheiden of een bepaald element beter wilt laten opvallen door ruimte eromheen te creëren.

Door de schuifregelaar heen en weer te bewegen kan er uit 3 verschillende witruimtes gekozen worden.

Widgets

In WordPress zijn de blokken “Eigen HTML” en “Shortcode” handige opties binnen de Gutenberg-editor, maar ze worden over het algemeen minder vaak gebruikt in vergelijking met andere blokken. Hier is een uitleg over wat deze blokken doen en waarom ze vaak een niche-toepassing hebben.

Eigen HTML-blok
Eigen HTML-blok stelt je in staat om handmatig HTML-code toe te voegen aan een pagina of bericht. Dit is ideaal voor gebruikers die aangepaste HTML willen invoegen die niet mogelijk is met de standaard Gutenberg-blokken.

Shortcode-blok
Het Shortcode-blok maakt het mogelijk om WordPress-shortcodes in te voegen. Shortcodes zijn speciale codes die je kunt invoeren om specifieke inhoud of functies in te voegen, zoals formulieren, galerijen, of andere dynamische content van plugins.

Insluitingen

Embed

Het embed blok maakt het eenvoudig om inhoud van externe websites, zoals video’s, sociale media posts, muziek, documenten en meer, direct in je WordPress-pagina’s of -berichten in te voegen. Er is ondersteuning voor een breed scala aan populaire platforms, waardoor je gemakkelijk multimedia en andere bronnen kunt delen zonder handmatige code in te voegen.

Je kan een video embedded door het Embed, YouTube/Vimeo (of andere sociale media) blok te plaatsen en hier vervolgens de url naar de video in te plakken. Ook kan de link naar de video direct in de editor geplakt worden. Dan wordt dit automatisch omgezet naar het juiste embed blok.

YouTube

Video bron

Vimeo

Video bron

Soundcloud

Bron

Spotify

Bron

Formulieren

Het Formulieren blok maakt het eenvoudig om formulieren die je met de Gravity Forms plugin hebt gemaakt, direct in je pagina’s of berichten in te voegen. Gravity Forms is een populaire plugin waarmee je geavanceerde formulieren kunt maken voor contact, inschrijvingen, betalingen en meer.

Let er op dat de volgende instellingen worden toegepast (te vinden aan de rechterkant).

  • Formulier titel – uitgeschakeld
  • Formulier beschrijving – uitgeschakeld
  • Voorbeeld – ingeschakeld
  • AJAX* – ingeschakeld

* Als je wilt dat het formulier wordt ingediend zonder dat de pagina opnieuw wordt geladen (asynchroon), kun je de optie Ajax inschakelen selecteren. Dit zorgt voor een vloeiendere gebruikerservaring.

Handleiding formulieren module

Beheren en verwerken persoonlijke gegevens
Aan het verwerken van persoonlijke gegevens zitten

Voorlopige planning

De precieze planning en duur van de werkzaamheden bespreken we met bewoners en ondernemers zodra dit bekend is. Natuurlijk wordt hier ook rekening gehouden met andere werkzaamheden in de binnenstad. De Nieuwestad moet altijd bereikbaar blijven en we proberen zo weinig mogelijk voor overlast te zorgen.

01

februari 2025

Eerste schetsontwerp klaar

Diverse werksessies met de Werkgroep Nieuwestad Vernieuwt

02

februari 2025

Voor en na de zomervakantie

Diverse werksessies met de Werkgroep Nieuwestad Vernieuwt

De toekomst van de binnenstad

Praktische informatie van de Gemeente
leeuwarden.nl

Uitjes en activiteiten in Leeuwarden
visitleeuwarden.nl

Ondersteuning voor ondernemers
ondernemendleeuwarden.nl


Werken bij Gemeente Leeuwarden
werkenbijleeuwarden.nl