Intro. Op deze pagina zie je alle onderdelen die we op webpagina's kunnen inzetten. Je kunt niet zomaar alle elementen op elk type pagina naar believen inzetten, er zijn wat richtlijnen die je terugvindt in de handleidingen.
Contentblock Content. Gewone tekst met simpele opmaak zoals vet en cursief. Met de style Lettertang kun je nadruk op bepaalde getallen of woorden in je artikel leggen. Gebruik hiervan wordt besproken in het redactiehandboek.
Je kunt bestanden uploaden en linken, hier een PDF (1,39MB), of linken naar een andere pagina of naar een anker op de pagina zelf. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus tellus, commodo vestibulum egestas sit amet, malesuada vitae orci. Maecenas non facilisis tortor. Donec aliquam cursus odio, sed cursus purus efficitur non. Nam massa arcu, aliquet id laoreet vel, maximus sit amet sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus tellus, commodo vestibulum egestas sit amet, malesuada vitae orci. In auctor odio varius, euismod orci nec, dictum magna. Vestibulum a rutrum massa.
Nulla gravida dignissim interdum. Maecenas non facilisis tortor. Donec aliquam cursus odio, sed cursus purus efficitur non. Nam massa arcu, aliquet id laoreet vel, maximus sit amet sem.
Een afbeelding kan linken naar een grotere versie of een compleet andere afbeelding. (Zie icoontje rechtsonder)
Een afbeelding heeft optioneel een sitebrede lichtblauwe achtergrond, die al of niet halverwege de afbeelding start.
Content boven de image bloxy
Content onder de image bloxy
Tekst boven de afbeelding is optioneel. Tekst boven de afbeelding is optioneel. Tekst boven de afbeelding is optioneel.
Tekst onder de afbeelding is optioneel. Tekst onder de afbeelding is optioneel. Tekst onder de afbeelding is optioneel. Tekst onder de afbeelding is optioneel.
Caption op de foto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus tellus, commodo vestibulum egestas sit amet, malesuada vitae orci.
© Copyright Getty 1978
Dit is de ContentImage. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus tellus, commodo vestibulum egestas sit amet, malesuada vitae orci. In auctor odio varius, euismod orci nec, dictum magna. Vestibulum a rutrum massa. Nulla gravida dignissim interdum. Maecenas non facilisis tortor. Donec aliquam cursus odio, sed cursus purus efficitur non. Nam massa arcu, aliquet id laoreet vel, maximus sit amet sem.
Op deze school in Soedan krijgen de kinderen les met de nieuwe pakketten over hygiene.
© UNICEF NL/2015-04578/Schoonewille
Dit is de ContentImage mirrored. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus tellus, commodo vestibulum egestas sit amet, malesuada vitae orci.
In auctor odio varius, euismod orci nec, dictum magna. Vestibulum a rutrum massa. Nulla gravida dignissim interdum. Maecenas non facilisis tortor. Donec aliquam cursus odio, sed cursus purus efficitur non. Nam massa arcu, aliquet id laoreet vel, maximus sit amet sem.
Hieronder staat de Gallery. De aangeklikte afbeelding verschijnt in een full screen Lightbox, waarna je door de hele reeks kunt bladeren. Op een mobiel device kun je swipen.
De titel is optioneel. Net als deze tekst. De titel is optioneel. Net als deze tekst.
Ook de tekst onder de gallery is optioneel.
Dit is de ContentSidenote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus tellus, commodo vestibulum egestas sit amet, malesuada vitae orci. In auctor odio varius, euismod orci nec, dictum magna. Vestibulum a rutrum massa. Nulla gravida dignissim interdum. Maecenas non facilisis tortor. Donec aliquam cursus odio, sed cursus purus efficitur non. Nam massa arcu, aliquet id laoreet vel, maximus sit amet sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus tellus, commodo vestibulum egestas sit amet, malesuada vitae orci. In auctor odio varius, euismod orci nec, dictum magna. Vestibulum a rutrum massa. Nulla gravida dignissim interdum. Maecenas non facilisis tortor. Donec aliquam cursus odio, sed cursus purus efficitur non. Nam massa arcu, aliquet id laoreet vel, maximus sit amet sem.
Als je linkjes naar documenten plaatst in een Sidenote, kun je die voorzien van een download-icoontje. Dat doe je door het bestand of de bestanden in een genummerd lijstje te zetten. Als je bijvoorbeeld onderstaande lijst in een Sidenote zet, ziet het er zo uit als hiernaast.
ContentSidenote met afbeelding, optioneel onderschrift en copyright. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit nisi massa, at ultricies orci luctus sit amet. Ut finibus posuere rutrum. Nullam velit massa, sollicitudin eget rutrum vel, euismod ac dolor. Vivamus nec tristique justo, in volutpat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit nisi massa, at ultricies orci luctus sit amet.
Curabitur neque magna, bibendum eget ex id, hendrerit vestibulum ligula.
Dit is de ContentQuote. Deze tekst is optioneel. Laat je 'm weg, dan is alleen de quote zichtbaar, gecentreerd. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus tellus, commodo vestibulum egestas sit amet, malesuada vitae orci. In auctor odio varius, euismod orci nec, dictum magna. Vestibulum a rutrum massa. Nulla gravida dignissim interdum. Maecenas non facilisis tortor. Donec aliquam cursus odio, sed cursus purus efficitur non. Nam massa arcu, aliquet id laoreet vel, maximus sit amet sem.
“Niets zo charmant, als een spreuk aan de wand”
Herman Finkers
“Voor mij is het een fijn idee dat ik ook na mijn dood kan bijdragen aan een betere toekomst voor de kinderen van UNICEF”
Paul van Vliet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus tellus, commodo vestibulum egestas sit amet, malesuada vitae orci. In auctor odio varius, euismod orci nec, dictum magna. Vestibulum a rutrum massa. Nulla gravida dignissim interdum.
Maecenas non facilisis tortor. Donec aliquam cursus odio, sed cursus purus efficitur non. Nam massa arcu, aliquet id laoreet vel, maximus sit amet sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus tellus, commodo vestibulum egestas sit amet, malesuada vitae orci. In auctor odio varius, euismod orci nec, dictum magna. Vestibulum a rutrum massa. Nulla gravida dignissim interdum. Maecenas non facilisis tortor. Donec aliquam cursus odio, sed cursus purus efficitur non. Nam massa arcu, aliquet id laoreet vel, maximus sit amet sem plop.
Hieronder staat het Contentblock Video (normal size)
Optioneel zijn een titel, een boventekst en een ondertekst. Een optionele lichtblauwe achtergrond kan heel of half getoond worden.
Hieronder staat Contentblock Video (large size).
Optionele tekst onder de video. Optionele tekst onder de video. Optionele tekst onder de video. Optionele tekst onder de video.
En dan is er nog contentblock Video (Extra Large):
Optionele tekst boven de video. Optionele tekst boven de video. Optionele tekst boven de video.
Hieronder staat Contentblock Video Sidenote
Video Sidenote. Hier wordt naast de video tekst geplaatst, met optionele share-buttons voor Twitter en Facebook.
Deel deze video
Hieronder staat de Call to Action.
Je kunt het contentblok Call to Action ook linken naar een bestand of een url. In de button komt al naar gelang een download- of een external site-icoontje te staan.
Optionele content. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
Klikken maar!De Call to Action heeft ook een Light-versie. Hierbij is geen kader of achtergrond zichtbaar.
Er zijn hiermee verschillende varianten te maken:
Hieronder staat variant 1 van de Call to Action Light. Light is aangevinkt, de titel is leeggelaten, de content is leeggelaten, alleen de button is ingevuld.
Hieronder is variant 2 te zien: Light is aangevinkt, de titel is ingevuld, content is leeggelaten, de button is ingevuld.
Lees over ons werk in de Cariben
Geef nuDe derde variant: Light is aangevinkt, titel, content en button zijn ingevuld. De tekst wordt automatisch breed en gecentreerd weergegeven om te onderscheiden van de normale paragraaftekst.
Content van de Call to Action. Content van de Call to Action. Content van de Call to Action. Content van de Call to Action. Content van de Call to Action. Content van de Call to Action.
Klikt u maar!Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia massa at lacus viverra lacinia.
Mauris varius justo lectus, sit amet tempus quam faucibus id. Quisque pharetra molestie pharetra. Interbellum constructum.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ut turpis eu orci aliquet sodales at at libero. Mauris varius justo lectus, sit amet tempus quam faucibus id. Quisque pharetra molestie pharetra.
Hieronder staat de Social Media Bar. De titel is vrij te bepalen en de 'media' zijn afzonderlijk aan/uit te zetten. De links zijn in het cms in te vullen, de linkteksten ('vol ons op Twitter') via Translations (dit zijn tevens de mouseoverteksten in de footer).
Hieronder staat de Newsletter-bloxy. Titel, content en footer-content (de tekst onder het invoerveld) zijn alle optioneel.
In het cms kan worden gekozen welk thema deze bloxy heeft (bijv. Voeding, Noodhulp, een lopende campagne), zodat de inschrijving in de juiste database van onze verzendpartij terecht komen.
Hiermee kun je de bezoeker 2 of 3 keuzes aanbieden. Proposities bijvoorbeeld, of te gebruiken als navigatie-element naar vervolgpagina's. Binnenkort worden de keuze uit twee items gecentreerd.
De Gift Example Set heeft optioneel een vlak of een afbeelding als achtergrond.
Hieronder de Kinderrechten-bloxy. Hij bestaat uit een normaal teksblok, maar in de kantlijn kunnen een of meerdere kinderrechten aangehaald worden met het bijbehorende icoon. Deze linkt naar de betreffende kinderrechtenpagina. Zo kun je bij artikelen over een bepaald onderwerp een relevant kinderrecht noemen.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed pretium tortor. Aliquam dictum ligula iaculis nisl eleifend, in lacinia dolor porttitor. Donec erat quam, iaculis a massa id, interdum ullamcorper tortor. Phasellus vel sem et enim sollicitudin imperdiet a non nulla. Nulla mi nunc, malesuada ut eros nec, pretium lacinia libero.
Onderaan de pagina (dit is een vaste plaats) kunnen een FAQ en een Quote naast elkaar gezet worden. Deze zijn onafhankelijk van de losse FAQ en losse Quote die eerder op de pagina worden beschreven.