Afbeelding
Het is mogelijk om een afbeelding toe te voegen in een Alinea-component. Het is echter aan te raden om een afbeelding toe te voegen via de component "Afbeelding" omdat:
- Afbeeldingen op deze manier beter worden geschaald, wat belangrijk is wanneer je website zowel via desktop als mobiele apparaten wordt bezocht. Een afbeelding kan op deze manier namelijk boven/onder een alinea klappen op mobiel, wat de leesbaarheid bevordert.
- Als je afbeeldingen zo inlaadt, wordt het formaat aangepast naar de gewenste grootte. Dat betekent dat dit veel dataverkeer kan schelen voor je bezoekers, maar ook voor de limieten van je hostingpakket. Bovendien verbetert het ook de score in Google PageSpeed Insights.
- Het CMS probeert het gebruik van afbeeldingen te registreren, zodat je weet welke afbeelding op welke pagina wordt gebruikt. Dat werkt alleen als je ze op deze manier toevoegt.
- Je in de Afbeelding-component ook een alternatieve tekst kunt toevoegen voor screen readers. Dit komt ten gunste van de toegankelijkheid van je website.
Afbeelding-vergelijker
Wil je je bezoeker in één oogopslag laten zien wat het verschil is tussen een oude en nieuwe situatie? Gebruik dan de feature afbeelding-vergelijker. Je vult twee afbeeldingen en de bezoeker kan met een schuifbalk het verschil vergelijken.
Standaard staan de afbeeldingen horizontaal ten opzichte van elkaar. Dit kan met een checkbox in het CMS ook verticaal worden getoond. Ook is er een checkbox beschikbaar om aan te geven dat de afbeeldingen licht zijn. Hierdoor wordt de sleepbalk donkerder weergegeven.
Wil je weten hoe dit er uit ziet? Ga dan naar https://www.iwink.nl/modules/afbeeldingvergelijker.
Alinea
Alinea met titel
Deze component zul je waarschijnlijk het meeste gebruiken op je website en is ook standaard beschikbaar. Deze component gebruik je om teksten toe te voegen aan je website. Een Alinea-component bestaat uit een titelveld en een tekstveld. De titel die je invult wordt standaard als een H2 kop weergegeven. De instellingen voor H2 koppen (lettertype, kleur en lettergrootte) zijn afhankelijk van het design van jouw website.
WYSIWYG-editor
Afhankelijk van je installatie kun je meer of minder instellingen hebben in een alinea qua opmaak. De meest voorkomende instellingen worden hieronder uitgelegd.
- HTML: Bekijk de bron van de alinea in HTML-code.
- Formaat: Hier kun je tekst weergeven als normale tekst, als kop of als sub- of superscript.
- Vet: De tekst wordt vetgedrukt weergegeven.
- Cursief: De tekst wordt schuingedrukt weergegeven.
- Doorstreept: De tekst wordt doorstreept weergegeven.
- Lijsten: Maak lijsten. Deze kun je weergeven als bullets of met nummers.
- Afbeelding: Upload een afbeelding uit mediabeheer.
- Bestand: Upload een bestand uit mediabeheer.
- Link: Het toevoegen van een link vergt wat extra uitleg, dat vind je hieronder.
Link toevoegen (en verwijderen)
In het veld 'link invoegen/wijzigen' vind je 3 tabs voor 3 verschillende soorten links die je toe kunt voegen: externe link, interne link en e-mail. Het tabblad 'interne link' kun je gebruiken om een link naar een andere pagina binnen je website te selecteren. Het voordeel van deze functie is dat wanneer je de pagina verplaats (en de url dus verandert), je de link in je tekst niet hoeft aan te passen.
Voor de verwijzingen naar een url buiten je eigen website, gebruik je het tabblad externe link.
In het tabblad 'e-mail' kun je een e-mailadres opgeven en ook eventueel de onderwerp en inhoud van een e-mail invullen. Als een gebruiker op deze link klikt, dan wordt zijn mail-programma geopend en wordt er een nieuwe e-mail aangemaakt waarbij het e-mailadres, onderwerp en eventueel de tekst al is ingevuld. Dit is handig wanneer gebruikers een mail moeten sturen om zich aan te melden voor een evenement. In de onderwerpregel kun je de naam en datum van dat evenement invullen.
Kopiëren uit Word
Veel mensen typen hun tekst eerst in Word, om het vervolgens in het CMS te plakken. Helaas gaat dit niet altijd goed, omdat Word regelmatig HTML-code meegeeft op de achtergrond. Deze code kan vervolgens conflicteren met de code van de website zelf, met als gevolg dat de tekst of zelfs de hele pagina niet goed weergegeven wordt. We raden je aan om de tekst zoveel mogelijk als platte tekst in te voeren en de opmaak vervolgens via het CMS te doen. Indien je tekst eerst moet worden nagekeken door anderen, die geen toegang tot het CMS hebben, dan kun je dit het beste doen via een TXT-bestand.
Call-to-action
Het component Call-to-action is bedoeld om de bezoeker van je website aan te zetten tot een actie. Bijvoorbeeld het invullen van een formulier of het bekijken van een andere pagina binnen of buiten je website.
De knop is er in 2 varianten: primair en secundair. Deze neemt de kleuren over van de website-huisstijl en kan door ons worden aangepast. Mocht je een aanpassing willen, neem dan contact met ons op!
Om een knop te maken die naar een interne pagina (een pagina binnen je eigen website) leidt, kun je onder "Doel" het menu openen. Je kunt hier dan kiezen uit alle pagina's op je website.
Om een knop te maken die naar een externe pagina (een pagina van een andere website) leidt, kun je "Externe link" aanvinken. Er verschijnt nu een invoerveld, waar je de link naar de externe pagina kunt invullen.
Call to action +
Call-to-action +
De Call-to-action + component is een uitbreiding van de normale call-to-action component. Deze heeft extra mogelijkheden om deelknoppen toe te voegen en om feedback buttons te tonen. Deze buttons kunnen gebruikt worden om een gebruiker te vragen wat men van de informatie op een pagina vindt.
De feedback buttons hebben data-attributen, zodat de de clicks kunnen worden geregistreerd met Google Tag Manager. Mocht je hier gebruik van willen maken, dan moeten wij dat nog wel voor je instellen. In dat geval hebben wij een Google Tag Manager API-sleutel van je nodig. Meer informatie over Google Tag Manager staat op deze pagina.
De kleuren van de knoppen worden door ons uit je huisstijl overgenomen. Mocht je hier iets in willen wijzigen, dan kun je contact opnemen met onze supportafdeling.
De extended versie van de call-to-action component ziet er meer uit als een 'normale' alinea, met daarin een knop. Je hebt daarom meer opties. Zo kun je een titel toevoegen en een omschrijving van wat de knop doet schrijven. Ook kun je er een afbeelding bij plaatsen.
Voor de daadwerkelijke knop kun je zelf bepalen wat de tekst wordt. Daarnaast kun je aangeven of het een interne link is (dus binnen de website) of een externe link (dus naar een andere website).
Als laatste kun je nog deelknoppen laten tonen (delen via social media) en feedback-knoppen. Zoals eerder aangegeven, zijn de feedback-knoppen voorzien van data-attributen die je in je Google Tag Manager terug kunt vinden.
Call to action groep
Met deze component kun je meerdere knoppen bij elkaar voegen en uit laten lijnen. De uitlijningsopties zijn "Geen", "Links", "Rechts", "Gecentreerd" en "Uitgevuld".
Onder "Uitlijning" kun je kiezen welke uitlijning je wilt. Daaronder kun je dan de call-to-action knoppen toevoegen. Deze kun je instellen als een normale call-to-action knop, zoals hier uitgelegd is.
Downloads
Met deze component kun je een losse download-link of een lijst van te downloaden bestanden toevoegen aan een pagina. Elke download is voorzien van informatie over het type bestand in de vorm van een icoon. Daarnaast kun je ook een omschrijving toevoegen.
Feiten & cijfers
De feiten en cijfers component bestaat eigenlijk uit twee componenten:
- Feiten en cijfers:
- Bevat een veld voor de titel.
- Bevat een container waaraan "Feit of cijfer" componenten kunnen worden toegevoegd.
- Feit of cijfer:
- Bevat een veld voor de titel / het getal.
- Bevat een veld voor de ondertitel.
Formulier
De naam zegt het eigenlijk al; een verwijzing naar een formulier. Dit component reserveert een plaats op de pagina voor een formulier.
Tip!
In een formulier-verwijzing kun je ook een inleiding zetten. Deze tekst wordt geladen boven het formulier zodat je een bezoeker meer kunt vertellen over het formulier. Deze inleiding verdwijnt zodra iemand het formulier invult. Dat verschilt dus van een normale alinea die je boven de formulier-verwijzing zou zetten (want, die blijft gewoon staan na inzending).
Meer informatie over de werking van formulieren vind je bij de module Formulieren.
Iframe
Met een iframe kun je een andere website of een applicatie vanaf een externe website inladen op een pagina. Denk bijvoorbeeld aan een interactieve kaart, een video, een (sollicitatie)formulier of een online brochure.Er wordt dan een 'frame' gereserveerd op de pagina waarin een webpagina of applicatie geladen wordt.
Als je een applicatie wilt inladen, krijg je hiervoor vaak een iframe-url of script aangeleverd. Die begint altijd met <iframe> en eindigt met </iframe>. Daar tussenin staat de informatie die nodig is om het iframe correct in te laden. Een iframe-url kan er zo uit zien:
<iframe width="100%" height="750" frameBorder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://slimmekaart.groningenbereikbaar.nl/embed/key/lcelkfe"></iframe>
Deze informatie kun je overzetten in het iframe component.
In het veld 'url' vul je de url in van het item dat moet worden ingeladen. De url haal je uit de iframe-url. Het is de url die je ziet staan achter "src=".
Vervolgens ga je naar de eigenschappen van dit component (via het icoontje met het tandwieltje aan de linkerkant van dit component). Hier kun je nog een aantal eigenschappen invullen:
Breedte: deze staat standaard op 100%. Het is aan te raden om dit zo te laten staan, zodat het iframe netjes weergegeven wordt.
Hoogte: de hoogte geef je aan in pixels. Soms staat de hoogte ook al in de aangeleverde iframe url, zoals in het voorbeeld hierboven (height="750"). Als dat niet in de url staat, dan moet je zelf verschillende waardes proberen. Als je het iframe te weinig ruimte geeft (dwz de hoogte die je opgeeft is lager dan de hoogte die het frame nodig heeft) dan krijgt het iframe een scrollbalk. Wanneer je geen scrollbalk meer krijgt, weet je dat de hoogte goed is.
Verder kun je nog extra CSS klassen toevoegen. Meestal is dat niet nodig, maar het kan zijn dat de maker van jouw applicatie wel extra css-opties aanbiedt. Deze kun je dan in het veld 'extra css-klassen' invullen.
Let op: Sommige websites hebben een ingebouwde beveiliging waardoor deze niet als iframe op een andere website kunnen worden ingeladen. Alle websites die door iWink zijn gebouwd, hebben deze beveiliging ook. Het is dus niet mogelijk om jouw website via een iframe in te laden in een andere website.
Lijst met links
Met deze component maak je een handig lijstje van links. Deze lijst kun je een titel geven en vervolgens de links toevoegen. Dit kunnen zowel interne links (binnen je eigen website) als externe links (andere websites) zijn.
Notificatie
Deze component is beschikbaar als container component. Hierin kun je een titel en een tekst invullen. Daarnaast heb je ook nog de mogelijkheid om de sluit-knop te verbergen zodat een melding niet weggeklikt kan worden en altijd blijft staan.
Ook heb je nog een aantal weergave-mogelijkheden, afhankelijk van het type melding:
- Standaard (huisstijl-kleur)
- Kritiek
- Waarschuwing
- Informatief
- Succes
De achtergrondkleur zal aanpassen aan de hand van het type. De tekstkleur wordt dan op wit of op de body-tekstkleur gezet. Dit is afhankelijk van welke kleur meer contrast heeft met de achtergrondkleur van de melding.
Is de sluit-knop wel zichtbaar en sluit je de melding? Dan zal deze vanzelfsprekend niet meer worden getoond wanneer je de melding wegklikt.
Youtube
Door YouTube-componenten te gebruiken (in plaats van de zogenaamde embed-code van YouTube zelf) heb je meer controle over je video's. Het zorgt ervoor dat alle video's er hetzelfde uitzien, want je kunt de weergave zelf instellen over de hele website. Toch heb je ook de vrijheid om van je eigen standaard af te wijken, mocht dat net mooier uitkomen op de pagina.
Een YouTube-component toont een YouTube-video op de pagina. Hiervoor kun je verschillende opties instellen:
- Een titel
- Een of meerdere links naar je YouTube-video
- Standaardinstellingen overnemen (lees meer bij de module YouTube)
- Opties: voor als je wilt afwijken van de standaardinstellingen
- Startpositie in seconden