Hoe stel je een pagina samen?
Stap 1: 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.
Stap 2: 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.
Stap 3: 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.
Automatische Inhoudstafel - met kleur
- 1 Column - Tekstblok
- 1 Column - Accordeon
- 1 Column - Paragraph library
- 1 Column - Tekst - Gecentreerd
- 1 Column - Tekst - Speciale icoontjes
- 1 Column - Tabel
- 1 Column - Tabel - met kleur
- 1 Column - Bestanden
- 1 Column - Gallerij grid
- 1 Column - Gallerij lijst
- 1 Column - Tekst met icoon
- 1 Column - Tekst met icoon - zonder kleur
- Linklijst - zonder kleur - Omschrijving
- 1 Column - Linklijst - Link stijl
- 1 Column - Linklijst - Link stijl - met kleur
- 1 Column - Linklijst - Button stijl
- 1 Column - Banner
- 1 Column - Blok
- 1 Column - Entity Embed: Getuigenis
- 1 Column - Horizontale lijn
- 2 Columns sectie
- 2 Columns - Tekstblok
- 2 Columns - Linklijst - Link stijl
- 2 Columns - Stacked
- 2 Columns - Tekst + Afbeelding met tabs
- 2 Columns - Tekst + Tijdlijn
- 3 Columns sectie - Container SMAL - zonder achtergrondkleur
- 3 Columns sectie - Container WIDE - met achtergrondkleur
- 3 Columns Stacked
- 3 Columns Stacked - zonder kleur
- 4 Columns Sectie - Smal
- 4 Columns Sectie - Wide - mét kleur
- 4 Columns Stacked
Tekstblok - zonder kleur
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
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.
- Genummerde lijstjes
- Bullets
- 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.
Paragraph library - zonder kleur
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]
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.
Standaard tekstblok - met kleur - tekst gecentreerd
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
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
| 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
| Kolom 1 | Kolom 2 | Kolom 3 | |
|---|---|---|---|
| Rij 1 | X | ||
| Rij 2 | X | X | |
| Rij 3 | X | X | X |
Bestanden - zonder kleur
Gallerij (grid) - met kleur
Gallerij (lijst) - met kleur
Tekst met icoon - met kleur
Tekst met icoon - zonder kleur
Linklijst - met kleur - Omschrijving
Hier zie je een linklijst. Het is een overzichtelijk lijstje van linkjes.
Je kan kiezen voor 1 link met een omschrijvend tekstje zoals deze. Of je kan kiezen voor een lijstje van links. Zoals je hieronder ziet. Daarbij voorzie je bij elke link een omschrijving. Via het tabje Stijlen kan je kiezen of je linkjes wil zien of buttons (met keuze uit groene, witte of oranje knoppen. Klik onderaan (naast Opslaan) op Item toevoegen om extra linkjes te kunnen toevoegen.
Als je voor een omschrijving kiest, voeg geen extra linkjes toe. Kies je voor een linklijstje, dan voeg je geen extra omschrijving toe onderaan.
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.
1 kolom - Blok - zonder kleur
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
Horizontale lijn
Als laatste onderdeel van de sectie met 1 kolom voegen we nog een horizontale lijn toe. Die zie je hieronder
Tekstblok - zonder kleur
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
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 (van vb 1 kolom of 3 kolommen).
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.
2 kolommen - zonder kleur
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.
2 kolommen: Tekst + Tijdlijn - met kleur
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.
- Bij een smal breedte wordt het tekstblok niet over de hele breedte van je scherm getoond.
- Bij de Wide breedte wordt het tekstblok wel over de volledige breedte van je scherm getoond. Dat zie je hieronder.
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 aan vinkt, 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
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.
Foto's hergebruiken of invoeren
Foto's hergebruiken
In de website zit al een grote bibliotheek aan prachtige natuurfoto's die je makkelijk kan opzoeken en hergebruiken.
Je kan foto's terugvinden op basis van een bestandsnaam of een tag. Wil je bijvoorbeeld een foto van een ijsvogel tonen, zoek dan op ijsvogel of op de tag vogels. De website filtert dan alle foto's en toont je de beschikbare foto's van ijsvogels.
Vink de mooiste aan, en je bent klaar.
Nieuwe foto's invoeren
Geen mooie foto gevonden? Laad er zelf eentje op.
Zorg dat je foto een goede bestandsnaam heeft, zodat jouw foto gemakkelijk terug te vinden is. Vb 'Lepelaar - Wouter Cardoen.jpg' is beter dan Img_452.jpg.
Selecteer je foto en laad hem op met de wizard van de website.
Vul vervolgens in het formulier de eigenschappen van de foto in.
- Bestandsnaam wordt automatisch ingevuld
- Tekstalternatief: noteer wat je op de foto ziet. Deze tekst wordt getoond wanneer de foto door een technische storing niet zichtbaar is, of wordt voorgelezen bij mensen met een beperkte toegankelijkheid. vb: Lepelaar in water - Wouter Cardoen.
- De Tekst mag je eventueel leeglaten. Wil je hem wel invullen, noteer dan wat er moet verschijnen wanneer je met de muis over de foto hoovert. Vb: Lepelaar
- Auteur: De naam van de fotograaf is verplicht. Mogen we vragen dit veld serieus in te vullen. Het toont ons respect naar de fotograaf van de foto, en is belangrijk voor de auteursrechten.
- Voor foto's die via Shutterstock komen, mag je NP noteren.
- Tot slot kan je nog een tag toevoegen (vb vogels, amfibieën ...): die laat toe om foto's in de bibliotheek gemakkelijk te filteren
- Oriëntatie is ook verplicht: Geef aan of je foto staand, liggend of vierkant is.
Vraag altijd toestemming aan de fotograaf
Gelieve nooit foto's op te laden waarvoor we géén toestemming kregen van de fotograaf. We ontvangen elk jaar meerdere claims van fotografen omwille van auteursrechten die niet nagekomen werden. Dat is een kostelijke zaak.
4 kolommen - zonder kleur
Deze sectie bevat 4 kolommen - de optie SMAL of WIDE maakt geen verschil wanneer er geen achtergrondkleur is.
Je kan aan elke kolom een component toevoegen. Het mooiste is uiteraard om overal dezelfde componenten toe te voegen, zoals tekstblokken, actieblokken of iconen.
Tekstblok met kleur
Hier volgt weer een tekstblok.
Je zal zien dat 4 kolommen veel breder getoond worden op de website dan 3 kolommen, ookal kies je voor de Smal.
4 kolommen - optie WIDE - mét kleur
Deze sectie bevat 4 kolommen - met optie WIDE
Je kan aan elke kolom een component toevoegen. Het mooiste is uiteraard om overal dezelfde componenten toe te voegen, zoals tekstblokken, actieblokken of iconen.
Tekstblok met kleur
Hier volgt weer een tekstblok.
4 kolommen - Stacked - zonder kleur
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
Bestanden
Linklijst met kleur - met witruimte
Ontvang nieuws over onze natuur en activiteiten rechtstreeks in je mailbox.
Abonneer je op onze nieuwsbrief