Paragraph pagina alle onderdelen

Hoe stel je een pagina samen?

Sectie kiezen

Eerst kies je voor de lay-out: wil je alles in 1 kolom laten verschijnen, of wil je spelen met 2, 3, 4, 5 of 6 kolommen? Dat heet een sectie. 

Component toevoegen

In zo'n sectie voeg je vervolgens componenten toe. Dit zijn de bouwstenen waarmee je de inhoud van je pagina kan samenstellen (foto's, tekst, accordeon voor vaak gestelde vragen, een inhoudstafel, een fotogalerij ... ). In dit lijstje vind je de meest interessante mogelijkheden:

  • Paragraph library
  • Accordeon
  • Banner
  • Inhoudstafel
  • Bestanden
  • Galerij
  • Afbeelding
  • Link lijst
  • Geluidsfragment
  • Horizontale lijn
  • Tabel
  • Tekst
  • Tekst met icoon
  • Video

Op deze pagina krijg je een overzicht van de mogelijkheden per contenttype per sectie.

Lay-out = Secties combineren

Je kan ook meerdere secties onder elkaar toevoegen om je inhoud te presenteren. Probeer uiteraard wel om pagina's die bij elkaar horen (vb dossiers) op eenzelfde manier te lay-outen.

Tekstblok - zonder kleur - met witruimte

Dit is een standaard tekstblok waarin je tekst kan invoeren en opmaken met stijl (vet, cursief, heading 2 - 3 - 4 - 5 - 6). Je kan ook linkjes invoegen, buttons aanmaken, bullets toevoegen of genummerde lijstjes). Indien nodig kan je ook nog een afbeelding toevoegen.

Inhoudsopgave (Kop 3)

Het vorige blok is een automatische inhoudsopgave

  • Hoe maak je een inhoudsopgave? (Kop 4)

  • Voeg aan je sectie je het contenttype Inhoudsopgave toe.
  • Vervolgens vink je in elk blok dat je in de inhoudsopgave wil laten verschijnen in het tabje Stijlen de optie Toevoegen aan de inhoudstafel aan. Voeg dan ook nog een titel voor het blok in, en je bent klaar.
  • De inhoudsopgave wordt automatisch klaargezet bij het opslaan van je pagina.

Accordeon - zonder kleur - met witruimte

Vraag 1

Hier kan je het antwoord formuleren.

  • Er is opmaak voorzien,
  • je kan woorden vetjes zetten,
  • of cursief

Vraag 2

Sla de Accordeon op en bewerk hem opnieuw om een tweede item toe te voegen.

Heading 3

Er is nog meer opmaak voorzien. 

  1. Genummerde lijstjes
  2. Bullets
  3. En indien nodig kan je ook iets invoegen uit de mediabibliotheek

Vraag 3

Je kan linkjes toevoegen.
Leg eerst je link via het icoontje, en maak er dan een button van via de knop Stijl. 

Externe linkjes krijgen een speciaal tekentje. Dat gebeurt automatisch.
 

Groene button

Groene button (2) 

Oranje button

Externe link in Rode button

Externe link in button (2)

Paragraph library - zonder kleur - met witruimte

Het volgende blok (download de Egelgids) is een Paragraph Library. Hierin kan je content laten verschijnen die centraal beheerd wordt op de website (vb downloads van tuingidsjes, oproepen om deel te nemen aan een campagne, algemene contactgegevens ...). Het voordeel van de info centraal te beheren is dat we wijzigingen slechts op één plaats moeten doorvoeren om de info overal te updaten.

  • Enkel de webmasters kunnen zo'n Paragraph blokken aanmaken en beheren.
  • Webeditors kunnen de content oproepen. Plaats hiervoor een Paragraph Library blok in je selectie en typ een kernwoord. Er volgt een dropdown lijstje waaruit je kan kiezen.
  • Heb je een suggestie voor een paragraph blok? Mail [email protected]
Afbeelding
Download je gratis Egelgids
NP

Hoe zorg je voor de egel in je tuin?

Hoe maak je jouw tuin egelvriendelijk? En hoe zorg je ervoor dat egels veilig van tuin naar tuin kunnen lopen?  In de gratis Egelgids vind je tonnen praktische tips om het hele jaar door voor de egels in je tuin te zorgen.

Vraag je Egelgids aan

Standaard tekstblok - tekst gecentreerd

met kleur - met witruimte

Je kan in een standaard tekstblok ook kiezen om de tekst gecentreerd weer te geven. Dat doe je met het tabje Stijlen. Hier kreeg het tekstblok ook een de donkergroene achtergrondkleur en bleef de standaard witruimte onderaan behouden.

Tekst - zonder kleur - met witruimte

Hoe voeg je speciale icoontjes toe?

  • Maak van je tekst eerst een opsomming met bullets, (Vraagteken)
  • Daarna kan je een rij selecteren en, (Kompas)
  • bij Stijl kiezen om een ander type bullet te tonen (Boek).

Tabel - zonder kleur - met witruimte

Tabel cation wordt hier getoond
Titel kolom 1 Kolom 2 Kolom 3 Kolomtitel 4 En nog kolom 5
Rij 1 Waarde Tekst Onderaan kan je het aantal rijen en kolommen aanpassen Tekst
Titel Rij 2 Een korte zin Tekst Maak de tekst niet te lang 5,5
Rijtitel 3 1.309.567 101 491,23 7
En ook nog rij 4 Dit was in 2023 Dit was in 2022 Dit was in 2021 Dit was in 2020

Tabel - met kleur - met witruimte

Tabel caption
Kolom 1 Kolom 2 Kolom 3
Rij 1 X
Rij 2 X X
Rij 3 X X X

Tekst met icoon

met kleur - met witruimte

Deze sectie is een 1 column. Deze zin staat in de stijl 'intro paragraph', waardoor het lettertype een beetje groter is dan in 'Normale' tekst.

Het icoon kan je selecteren uit een vaste set iconen die we gebruiken doorheen de website.

Tussentitel (H3)

  • In het tabje Stijlen kan je extra keuzes maken. Hier werd gekozen om:
  • de witruimte weg te halen onder het tekstblok.
  • een achtergrondkleur toegevoegd (donkergroen)

Je kan dan nog extra tekst toevoegen. Zoveel je maar wil. 
En je kan je tekst ook opmaken met de standaard stijlen (vetjes, cursief, bullets, genummerde lijstjes). Ook kan je linkjes toevoegen en buttons. Hieronder lees je daar meer over.

Hoe voeg je een banner toe?

Hieronder zie je een banner. Die werd toegevoegd met het contenttype Banner.

  • Je kan het veld enkel een titel geven.
  • De banner die getoond wordt, wordt opgehaald op basis van de tag die je in het tabje Details toevoegt.
  • De afbeelding wordt centraal beheerd waardoor we ze gemakkelijk up to date kunnen houden.

Banner

1 kolom - Blok (zonder kleur - met witruimte)

Hieronder voegden we een blok toe. Voorlopig kan je enkel kiezen voor Partners Homepage.
Dit contenttype hoef je dus zelf niet te gebruiken op je pagina's.

De uitlijning is nog niet in orde.

1 kolom - Entity Embed: Getuigenis

Hieronder voegden we een getuigenis toe. Die worden centraal aangemaakt. Op elke pagina kan je kiezen wie je aan het woord laat. Er zullen medewerkers, partners, leden, klanten van de winkel, vogeltellers, vrijwilligers, donateurs .... aangemaakt worden om uit te kiezen.

  • Om een getuigenis in te voegen, kies je voor de component Entity Embed en typ je vervolgens 'Getuigenis' in. Er verschijnt dan een lijstje van mensen die je aan het woord kan laten.
  • Aan de lay-out hiervan kan je zelf niets veranderen. Je kan ze ook niet opnemen in de Inhoudsopgave.
  • De uitlijning is nog niet in orde.

Entity Embed - Getuigenis

Afbeelding
Getuigenis Luc
NP

Lid aan het woord

Tijdens de eerste Corona-lockdown ontdekten we alle natuurgebieden in onze buurt. We waren opgelucht dat we naar buiten konden, en beseften plots waarom natuur in de buurt zo belangrijk is. Ik sloot ons gezin onmiddellijk aan bij Natuurpunt.

Luk, lid van Natuurpunt
Icon
Icoon - natuurgebied

Tekst met icoon - zonder witruimte - met kleur

  • Weinig gevaar 
  • Er is geen bijzonder risico op natuurbrand.
  • Indien er toch een natuurbrand uitbreekt, rukt de brandweer uit op normale sterkte.
  • Het volgende icoon kleeft nu tegen dit blok.
Icon
Icoon - Temperatuur

Tekst met icoon - zonder witruimte - zonder kleur

  • Weinig gevaar 
  • Er is geen bijzonder risico op natuurbrand.
  • Indien er toch een natuurbrand uitbreekt, rukt de brandweer uit op normale sterkte.
  • Het icoon kleeft tegen het vorige blok.

Horizontale lijn

Als laatste onderdeel van de sectie met 1 kolom voegen we nog een horizontale lijn toe. Die zie je hieronder

 
Afbeelding
Bosanemoon_ Gert Benaets
Gert Benaets
Dit is het onderschrift van de afbeelding

Tekstblok - zonder kleur - met witruimte

Zo ziet een sectie met 2 kolommen er uit. Per kolom kan je componenten toevoegen. Hier kozen we voor een tekstblok. Hierin kan je uiteraard tekst invoegen en die opmaken met headings, bullets en alle dingen die je ook bij een één kolom sectie kan.
In de andere kolom kan je ook voor componenten kiezen (tekst, afbeeldingen, tabellen, gallerijen ...). 

Kolombreedte aanpassen

Bij de sectie kan je kiezen (in het tabje Stijlen) kiezen of je de kolommen 50/50 over je scherm wil tonen of een brede en een smalle. Hier kozen we voor een smalle kolom (met de afbeelding) en een brede (met deze tekst).

Anders dan 1 kolom

  • Bij een 2 kolommen sectie kan je géén inhoudstopgave laten opmaken.
  • Je kan wel een actieblok invoegen. Daar zie je verderop een voorbeeld van (bij de voorbeelden van de 3 kolommen).
  • Je kan wel een tijdslijn invoegen.

2 Columns - Stacked - zonder kleur - met witruimte

Bij 2 kolommen kan je ook voor een 'Stacked' lay-out kiezen. Daarbij heb je eerst een rij over de volledige breedte van de pagina, vervolgens 2 kolommen om in te vullen en dan weer een volledige rij onderaan.

Wanneer je hiervoor kiest, kan je de componenten van deze sectie wel verslepen binnen de sectie, maar niet naar een andere sectie.

Lente

In de lente zijn tuinvogels druk in de weer met het bouwen van hun nest en zoeken ze natuurlijk voedsel voor de jongen. Enkel de ouders genieten nu van je strooivoer. Het voedsel moet nu meer kalk en eiwit bevatten, bijvoorbeeld meelwormen of fijngestampte eierschalen. Vetbollen en pinda’s bied je nu beter niet meer aan.

Herfst

In de herfst zoeken vogels actief naar een voedselplek voor de winter. Door nu te voederen, weten ze dat ze in de winter in jouw tuin terecht kunnen. Enkel als het al erg koud wordt, kan je vetbollen en pindaslingers aanbieden.

Zomer

In de zomer gaan vogels zelf op zoek naar de wormen en insecten die ze nodig hebben. Help hen door boeiende planten in je tuin planten die insecten lokken. Door je gazon te besproeien, lok je regenwormen.

Winter

In de winter hebben vogels veel extra energie nodig om hun lichaamstemperatuur op peil te houden. Van december tot februari voorzie je vetrijke producten (vetbollen, pindaslingers, pindakaas, halve kokosnoten …) en mag je voedertafel goed gevuld zijn. De vetrijke producten laat je achterwege als de temperaturen niet meer schommelen rond het vriespunt. 

Vogels gebruiken het voedsel dat je aanbiedt als aanvulling op wat ze in de natuur vinden. In elk seizoen mag je vogels voederen. 

  • Voorzie het hele jaar door kruimels en fruit, aangevuld met een goede voedertafelmix die aansluit bij het seizoen.

2 kolommen - zonder kleur - met witruimte

Dit is een sectie met 2 kolommen. 

  • In de linkerkolom kozen we ervoor om een tekstveld toe te voegen. Hierin kan je tekst kleven, en kan je opmaak toevoegen.
  • In de rechterkolom voegden we een Afbeelding met tabs toe. Deze component laat je toe om meerdere foto's te tonen. We zullen dit vooral gebruiken op de Soortenfiches om foto's van mannetjes, vrouwtjes en juveniele dieren te tonen zodat de bezoeker goed de verschillen kan bestuderen.
Galloway - Wim Dirckx
Pijlstaart - Luc Meert
IJsvogel in verticale duikvlucht _ Marc Dauwe
Roerdomp - François Van Bauwel

2 kolommen: Tekst + Tijdlijn (met kleur - met witruimte)

Deze sectie bevat 2 kolommen. 

  • De linker component vulden we met een tekstblok (achtergrondkleur donkergroen). Door een achtergrondkleur toe te voegen, lijnt de kolom mooi uit met de rechterkolom.
  • Voor de rechter component gebruikten we een tijdlijn (zonder kleur, met witruimte)

Wat is een tijdlijn?

De tijdlijn is een volledig nieuw contenttype. We gebruiken het op de homepage om elke dag de kleine stapjes van natuurherstel in de kijker te zetten, maar je kan het ook toevoegen op jouw tekstpagina. Het is een handige tool om het verloop van een event duidelijk te maken. Hiernaast bouwden we met de tijdlijn het verloop op van de terugkeer van de wolf. Aan elk onderdeel kan je een link toevoegen naar onze website, of een externe bron.
De tijdlijn kan ook interessant zijn voor projecten (vb LIFE).

Tekstblok

Dit is een tekstblok in een sectie van 3 kolommen. De sectie kreeg de Containerbreedte SMAL én een achtgrondkleur.

Optie Slider

Op een mobiel scherm zullen de 3 kolommen in een slider getoond worden. Daarbij kan je scrollen om de verschillende inhoud te zien. Als je deze optie niet aanvinkt, zullen de kolommen onder elkaar getoond worden op een mobiel scherm.
Deze optie vind je in het tabje 'Stijlen' bij de sectie van de 3 kolommen: Maak een slider op apparaten met aanraakscherm

Afbeelding
Averbode_Plas ven_Wille_Jossip
Wille Jossip
Afbeelding met achtergrondkleur
Icon
Icoon - Leden - Vrijwilligers
40.000
actieve vrijwilligers

Tekstblok

Dit is een tekstblok in een sectie van 3 kolommen. De sectie kreeg de Containerbreedte WIDE.

Component Icoon

Hiernaast zie je de component Icoon. Die laat je toe om uit een aantal iconen van de website te kiezen en er een waarde bij te voegen.

Icon
Icoon - Wandeling met gids
Bij Containerbreedte WIDE
krijg je enkel de middelste kolom te zien
Icon
Icoon - natuurgebied
500
aantal natuurgebieden in beheer (achtergrond Aquamarijn)

Tekstblok

Dit is een tekstblok in een sectie van 3 kolommen. De sectie kreeg de Containerbreedte WIDE.

Component Icoon

Hiernaast zie je de component Icoon. Die laat je toe om uit een aantal iconen van de website te kiezen en er een waarde bij te voegen.

Icon
Icoon - Wandeling met gids
Bij Containerbreedte WIDE
krijg je enkel de middelste kolom te zien
Icon
Icoon - natuurgebied
500
aantal natuurgebieden in beheer (achtergrond Aquamarijn)

Actieblok

In de omschrijving van een actieblok als deze kan je tekst vetjes of cursief zetten, maar je kan geen andere opmaak toevoegen.
Vervolgens kan je nog een titel, afbeelding, link en knop toevoegen.

4 kolommen - zonder kleur - met witruimte

Deze sectie bevat 4 kolommen.
Je kan aan elke kolom een component toevoegen. 

Icon
Icoon - Drankgelegenheid
1
kopje koffie met achtergrondkleur
Afbeelding
IJsvogel in verticale duikvlucht _ Marc Dauwe
Marc Dauwe
Onderschrift foto

Tekstblok met kleur

Hier volgt weer een tekstblok.

Je zal zien dat 4 kolommen veel breder getoond worden op de website dan 3 kolommen.

4 kolommen - Stacked - zonder kleur - met witruimte

Uiteraard kan je de 4 kolommen ook als stacked kiezen. Dat betaat uit

  • 1 veld over de hele breedte
  • 4 kolommen
  • 1 veld over de hele breedte
Afbeelding
Dag van de Trage Weg
Dag van de Trage Weg
Onderschrift
Afbeelding
vilda_jeroen_mentens_maan_boven_een_nevelige_heide
Vilda - Jeroen Mentens
Onderschrift afbeelding
Icon
Icoon - Vrijwilligers - Helpende handen

Tekst met icoon - zonder kleur - met witruimte

Het laatste veld van het stacked blok is er weer eentje over de volledige breedte van de pagina. Bij 4 kolommen is dat nog breder dan bij 2 of 3 kolommen.

Hier kozen we voor een tekst met icoon. De iconen werden al toegevoegd aan de website, en je kan uit het hele lijstje kiezen.