Componenten
Hieronder vind je een overzicht van de componenten in ons cms. Hoe werken ze? Dat leggen we in tekst en beeld uit. Ook delen we tips en weetjes die je op elk component kunt toepassen.
Veelgestelde vragen
Plaats achter de url van de pagina een hashtag (#) en dan de titel van het component met-koppeltekens-tussen-de-woorden. Zo kom je meteen op de juiste plek op die pagina terecht.
Let op:
- Laat leestekens weg (zoals !?,)
- Gebruik alleen kleine letters
voorbeeld: een rechtstreekse link naar het component 'De ALPO, hoe zit het precies?' wordt dan: #de-alpo-hoe-zit-het-precies
Werkt de directe link niet?
- Haal de hoofdletters weg in de titel van het component waar je naartoe linkt
- Kijk of in het component de optie 'inpage navigation' op 'yes' staat
- Laat /index.xml staan in de url
Achter een url op han.nl staat vaak /index.xml. Als je intern linkt is het normaalgesproken goed om index.xml weg te halen uit de link. Maar bij een take-over moet je dat juist niet doen, want dan werkt de take-over niet meer. Link je naar een take-over, dan moet je dus altijd /index.xml erachter laten staan.
- Selecteer bij link type de 'take-over'
In sommige componenten kun je aangeven of je naar een pagina of een take-over linkt. Bij het text&media component bijvoorbeeld kun je bij 'link type' kiezen voor 'button', 'link' of 'take-over'. Link je naar een take-over, geef dat daar dan aan. Dan wordt de take-over ook echt als een take-over geopend en niet als een pagina.
Met het Spotify component kunnen we een podcast integreren op een pagina. Wanneer op de afspeelknop wordt geklikt, speelt de podcast direct af binnen de pagina.
Meer informatie Spotify componentStel, je moet op 1 september een belangrijke aanpassing doen op een pagina, maar je hebt daar op 1 september geen tijd voor (omdat je dan bijvoorbeeld niet werkt). Je kunt de aanpassing van te voren klaarzetten, zodat het die dag nog maar 1 druk op de knop is.
Dat doe je zo:
- Pas de pagina aan alsof het nu 1 september is
- Publiceer de pagina – zet er bijvoorbeeld bij ‘klaargezet voor 1 september’
- Ga direct na je publicatie via revert naar de laatste aanpassing vóór ‘klaargezet voor 1 september’ en klik daarop. Publish weer meteen en zet er bijvoorbeeld bij ‘teruggezet tot 1 september'. De pagina is nu weer zoals hij was.
- Op 1 september ga je via ‘revert’ naar 'klaargezet voor 1 september’ en je pagina is in 1 klik up to date. Klik op publish en je bent klaar.
- Belangrijk: spreek met collega's af dat er tot (in dit geval) 1 september geen aanpassingen gedaan worden op deze pagina, anders gaan ze verloren als jij revert naar jouw aangepaste pagina.
Als je op een pagina gaat werken, check dan eerst altijd even of het vinkje links bovenin groen is.
- Zie je een groen vinkje met 'published'? Dan zit je goed en kun je verder.
- Staat er een rood bolletje met 'old'? Dan zie je een oude versie van de pagina.
1. Klik op revert en klik dan de bovenste aanpassing aan
2. Klik op Publish
3. Nu zie je de actuele versie van de pagina
Uitleg per component
Een Accordion component, ook wel collapsible of openklapper genoemd, is een container component en bevat de volgende onderdelen:
- Accordion item
- Text
- Accordion link list (voor links / buttons / takeovers)
Een Baankansen component wordt gebruikt om informatie over een baan en/of een beroep te plaatsen. Dit component wordt een 'container' genoemd. Het bevat de volgende onderdelen
- Job/Skills List (subcomponent)
- Buttons baankansen (subcomponent)
Een Billboard component wordt gebruikt om een testimonial/case opvallend en groot te tonen. Het bevat de volgende onderdelen:
- Afbeelding
- Eyebrow
- Titel
- Alinea
- Button / link / takeover
Het Buttonbar component is bedoeld om tot maximaal drie verschillende buttons naast elkaar toe te voegen op een pagina. De button kan weer conversie of informatief zijn. Een conversie button is de bekende HAN-roze button, terwijl een informatieve button weer de witte button (minder opvallend) is. In dit component kan er uiteraard een eyebrow, titel en intro tekst (tot max. 300 tekens) gebruikt worden.
Een Call to action component wordt gebruikt om informatie over een baan en/of een beroep te plaatsen. Het kent meerdere varianten;
- Shout for action
- Scream for action
- Uitlijning van afbeelding en tekst
Een Card container component wordt gebruikt om bijv. de specialisaties van een opleiding uit te lichten met een foto, korte alinea en een link. Het kent de volgende onderdelen:
- Regular card
- Skinny card
Het Cards component wordt gebruikt om afbeeldingen voorzien van een titel en tekst weer te geven in een rij. Het component als geheel heeft een titel en de 'kaarten' ook. Het bevat de volgende varianten:
- Skinny
- Regular
Het Facts Ribbon component wordt gebruikt om bijv. de feiten (facts) en data uit te lichten. Dit component bestaat weer uit een apart subcomponent:
- Facts Item
Een Future of Education component wordt gebruikt om informatie over een baan en/of een beroep te plaatsen in combinatie met een titel, alinea en een button. Het bestaat weer uit een apart subcomponent:
- FE Facts item
De Header Insite component is specifiek ontworpen voor gebruik op Insite en wordt meestal toegepast bij CvB-besluiten en andere Insite-pagina's die geen hero component vereisen. Dit component zorgt ook voor een kruimelpad naar de bovenliggende pagina's.
Een Hero component is geplaatst in de top van een pagina. Het bestaat uit een eyebrow, titel, intro tekst en een afbeelding/video. Dit component kent een aantal varianten:
- Course superhero
- Course hero
- Takeover (hero)
- Takeover (open dag)
- Fat hero (voor campagnepagina's)
Een Highlight component wordt gebruikt als content meer aandacht moet krijgen. Dit kan je combineren met een afbeelding en een button. Dit component kent drie varianten:
- Highlight left
- Highlight right
- Rendier werk, privé, studie deeltijd
Een rendier is content die uit een andere pagina 'gerenderd' wordt. Het aanpassen van die pagina zorgt ervoor dat op alle andere pagina’s de content ook verandert.
Het Image component is bedoeld om een afbeelding in de volledige breedte van de pagina weer te geven, die je weer kan combineren met de bekende Eyebrow, title, intro tekst en een image caption.
Dit component kent 3 varianten:
- 12-koloms afbeelding (deze wordt over de volledige breedte getoond)
- 8-koloms (deze is iets kleiner dan de 12-koloms)
- Infographic (deze wordt over de volledige breedte getoond, en biedt de mogelijkheid om de afbeelding in het oorspronkelijke formaat weer te geven, met het vergrootglas)
Meer informatie Image componentMet de Insert Overview component kun je automatisch nieuwsberichten of artikelen op een pagina tonen die gekoppeld zijn aan specifieke categorieën, zoals projecten of lectoraten. Dit is handig om bijvoorbeeld nieuwsartikelen te filteren en uit te lichten op basis van hun categorie.
Met dit component kun je eenvoudig relevante content zoals nieuws of artikelen uitlichten op basis van categorieën.
Meer informatie Insert Overview component
Een Link List component wordt simpelweg gebruikt om een lijst met links te presenteren. Dit component bevat geen buttons, maar kan wel linken naar een takeover.
Meer informatie Link List componentEen Logo grid component wordt gebruikt om een lijst met max. 20 logo's te presenteren. Deze logo's worden in het zwart-wit getoond. Wanneer je over een logo hovert, dan verschijnt dit in kleur.
Meer informatie Logo grid componentHet page copy component is gebouwd om content op 1 centrale plek te zetten en deze als een kopie te tonen op andere plaatsen.
Dit is bijvoorbeeld handig zodat een academie hun pagina voor bijvoorbeeld examencommissie maar op 1 plek hoeft bij te houden en deze pagina bij alle opleidingen te tonen via het page copy component.
Een Quote component is bedoeld om een korte quote (tot max. 140 tekens), inclusief een foto van de persoon te tonen op han.nl.
Een Rich Text component is bedoeld om alleen tekst te plaatsen. Het is ook mogelijk om tabellen en links toe te voegen.
Een Slider component wordt gebruikt om in een klikbare etalage foto's (max. 6) te presenteren. Dit component heeft mogelijkheden voor het plaatsen van een foto en een caption (onderschrift).
Met het Spotify component kunnen we een podcast integreren op een pagina. Wanneer op de afspeelknop wordt geklikt, speelt de podcast direct af binnen de pagina.
Meer informatie Spotify componentHet Team component is bedoeld om grote groepen mensen (max. 20) te tonen door middel van een foto, naam en functie.
Het Testimonial component wordt gebruikt om bijvoorbeeld informatie van een persoon/informatie over een studie uit te lichten met een titel, foto, link en een korte alinea.
Het Text list container component is een samengesteld component en bestaat uit de volgende onderdelen:
- Text list container
- Text list item
- Text list text
- Text list button
Het Text & Media component is bedoeld om tekst met een afbeelding/video te combineren.
Het Video component kan een video tonen. Wanneer er op de knop in het midden van de video wordt geklikt wordt de fullscreen versie getoond in een takeover.
Het Videowall component kan 3 video's naast elkaar tonen. Dit component is vooral handig als je meerdere video's wil gebruiken op een pagina. Voor elke video heb je de mogelijkheid om een titel en een korte intro tekst toe te voegen.
Heb je een goede tip of ontbreekt er uitleg over een component? Stuur dan een e-mail naar ASK@han.nl!