Componenten

Wat zijn componenten?

In Kirra kun je verschillende componenten toevoegen om een pagina mee te vullen. Welke componenten kunnen worden toegevoegd op een pagina zijn afhankelijk van het ontwerp van de pagina. De componenten 'Alinea' en 'Afbeelding' zijn op de meeste pagina's beschikbaar.

Je kunt ons vragen om meer onderdelen toe te voegen zodat je meer mogelijkheden hebt om de perfecte pagina te maken.

Wil je meer weten over een component verplaatsen, verwijderen of de eigenschappen van een component? Lees dan hier verder.

Alinea

Dit component zul je waarschijnlijk het meeste gebruiken op je website. Dit 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.

Boven het tekstveld zie je een aantal knoppen staan. Hiermee kun je de tekst bewerken. De eerste 9 knoppen spreken redelijk voor zich. Deze functies komen overeen met de basisfunctionaliteiten die je terug vindt in de meeste tekstverwerkers en kun je gebruiken om de tekst op te maken en de uitlijning aan te passen.

De knoppen die daarnaast staan lichten we iets uitgebreider toe:


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.


 

Media invoegen

Via de knop 'Voeg media in' kun een afbeelding toevoegen die je in mediabeheer hebt geüpload. Zodra je op deze knop klikt, krijg je direct het mediabeheer te zien. Hier klik je op de gewenste afbeelding. De afbeelding wordt direct in het alinea-component geplaatst. 

Als je dubbelklikt op de afbeelding, kun je enkele eigenschappen van de afbeelding aanpassen, waaronder de grootte van de afbeelding en de uitlijning.


Afbeelding

Wanneer je via deze knop een afbeelding wilt toevoegen, krijg je direct het scherm 'Eigenschappen afbeelding' te zien (zie de afbeelding hierboven). Via het veld 'url' kun je de url van een afbeelding toevoegen. Dit kan een url zijn van een afbeelding die in de map 'media' staat of een afbeelding op een andere website. 

Ondanks dat je via bovenstaande manieren een afbeelding aan de pagina kunt toevoegen, raden we aan om een afbeelding bij voorkeur toe te voegen via een afbeeldingcomponent

Tabel

Met de knop 'tabel' voeg je een tabel toe aan de pagina. Deze tabel heeft niet zoveel functionaliteiten als bijvoorbeeld Excel, maar een simpele tabel kun je hier wel mee maken. Wanneer je op de knop 'tabel' klikt, krijg je direct een scherm te zien waarin onder andere je het aantal rijen en kolommen kunt invullen, de breedte van de gehele tabel kunt instellen en dikte van de rand kunt instellen. Houd er rekening mee dat breedte van de kolommen niet kan worden ingesteld. Kirra bepaalt de breedte van de kolom automatisch op basis van de inhoud van de cellen. 

Wanneer je een tabel hebt toegevoegd, kun je nog enkele eigenschappen van de tabel aanpassen. Door in de tabel te klikken met je rechtermuisknop krijg je een menu te zien met diverse opties waaronder de optie om cellen samen te voegen en om rijen of kolommen toe te voegen of te verwijderen.

Ondanks dat je via bovenstaande manieren een tabel aan de pagina kunt toevoegen, raden we aan om een tabel bij voorkeur toe te voegen via een tabelcomponent. Dit voornamelijk omdat je de tabel kunt koppelen aan een spreadsheet zoals Microsoft Excel, Libre/OpenOffice Calc of Numbers. 

</> Broncode

Wanneer je op deze knop klikt, krijg je opmaak van de tekst in html te zien. Als je een beetje met html overweg kunt, kun je op deze manier ook de tekst bewerken. Niet alle html code die je toevoegt wordt hier ook daadwerkelijk opgeslagen. Wanneer je deze optie gebruikt om de kleuren van de tekst aan te passen, zal Kirra deze html tags niet opslaan. Aanpassingen waarvoor je deze functie wel kunt gebruiken zijn:

- Het instellen van de kolombreedte van een tabel. De kolombreedtes worden door Kirra automatisch ingesteld, maar je kunt de waarden in de broncode aanpassen.
- Het toevoegen van een iframe url. 
- Het aanpassen van de instellingen van een afbeelding.

Afbeelding

Zoals je bij het onderdeel 'Alinea' hebt gezien, is het mogelijk om een afbeelding toe te voegen in een alinea-component. Het is echter aan te raden om een afbeelding toe te voegen via het 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.
  • Kirra 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. 

Tabel

Een tabel kun je toevoegen in een alinea, maar het component 'Tabel' heeft een aantal handige extra functies.


Een tabel toevoegen

Het component Tabel heeft enkele opties:

Naam van de tabel
Wordt gebruikt als titel boven de tabel, in de voorbeeldtabel hiernaast gevuld met "Voorbeeldtabel"

Eerste rij is header
De bovenste rij van de tabel mag gezien worden als kolomkoppen. In het voorbeeld hiernaast "Kolom A" en "Kolom B"

Eerste kolom is header
De meest linker kolom mag gezien worden als kop. In het voorbeeld hiernaast "Rij 1", "Rij 2" en "Rij 3"

 

Voorbeeldtabel

Voorbeeldtabel
  Kolom A Kolom B
Rij 1 Inhoud voor A1 Inhoud voor B1
Rij 2 Inhoud voor A2 Inhoud voor B2
Rij 3 Inhoud voor A3 Inhoud voor B3

Tabel koppelen aan spreadsheet

Let op: deze functie is alleen beschikbaar als je de module Data & Visualisatie hebt.

Het Tabel component kun je ook koppelen aan een spreadsheet. Je kunt hiermee dus tabellen maken in een spreadsheetprogramma zoals Microsoft Excel, Libre/OpenOffice Calc of Numbers. Het bestand dat hieruit komt (een .xlsx-, .xls- of .csv-bestand) kun je uploaden in dit component.

Kies hiervoor de optie 'Bestand kiezen of uploaden' onder het component 'Tabel'. Wanneer je het bestand hebt geselecteerd is het belangrijk dat je het bereik selecteert. Dit kan bij 'Bereik'. Je selecteert hier de cellen en rijen die weergeven moeten worden of typt als volgt: A1;C3 in het vak. 

Kirra neemt de waarden uit het bestand over in de stijl van je website. De stijl van het spreadsheet zelf wordt genegeerd zodat het altijd mooi in de website staat.

iframe

Met een iframe kun je een andere website inladen op een pagina. Er wordt dan een 'frame' gereserveerd op de pagina waarin een webadres (URL) geladen wordt. In het component iframe geef je dit webadres in.

Tip: Omdat Kirra op het moment van laden nog niet weet hoe groot de webpagina is die ingeladen gaat worden is het verstandig om dit zelf te controleren en eventueel te corrigeren. Je kunt het formaat van de iframe aanpassen bij de eigenschappen van het component (meer info over de eigenschappen van een component vind je onderaan deze pagina).

Zie-ook lijst

Met een zie-ook-lijst maak je een lijst met een titel en daaronder een of meerdere links. Deze links kunnen verwijzen naar je eigen website (interne link) of naar andere websites (externe link). 

Hiernaast een voorbeeld met een titel, een interne link en een externe link. Met de groene knop onderaan kun je meer items toevoegen.

Tip: je kunt de titel van interne links leeg laten om de titel van deze pagina automatisch over te nemen. Handig als die titel een keer veranderd wordt.

 

Formulierverwijziging

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 formulierverwijzing 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 formulierverwijzing zou zetten (want, die blijft gewoon staan na inzending).

Meer informatie over de werking van formulieren vind je bij de module Formulieren.

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