Welke soorten elementen zijn er?

In het artikel Hoe maak ik de lay-out op? bespraken we hoe je met elementen moet werken tijdens de opmaak van de website. In dit artikel gaan we dieper in op wat de verschillende soorten elementen net doen.

1. Tekst

Tekst spreekt voor zich, dat is natuurlijk een tekstvak waar je in kan typen zoveel je wil. Je kan ook een teksteditor laten verschijnen, zoals je dat in Word bijvoorbeeld ook nodig hebt om je tekst te bewerken. Voor meer informatie over hoe je met die teksteditor werkt en welke mogelijkheden er zijn om je tekstelement te bewerken, lees het artikel Hoe bewerk ik een tekstelement?

2. Knop

Bij het design van een website, probeer je eigenlijk altijd de bezoeker te verleiden om meer te bekijken op jouw website. Hoe meer ze van je weten, hoe nieuwsgieriger men wordt, hoe beter. Is het je al opgevallen dat je vaak op het einde van een websitepagina een korte tekst met een button staat? Dat noemen we een call-to-action, en daar neem je beter een aantrekkelijke knop voor in plaats van een gewone link in een tekst. Deze mogelijkheid hebben we dus ook toegevoegd. Hieronder een voorbeeld.

Zorg er ten eerste voor dat je een knop niet probeert toe te voegen in een tekstvak, want dat gaat niet. Net zoals alle andere elementen, staat de knop ook op zich. Wel kan je natuurlijk meerdere elementen in één lay-out steken. Je krijgt een aantal opties wanneer je een knop invoegt, probeer ze een keertje uit om te zien wat het geeft. Duid telkens terug 'Reset' aan als je de wijziging ongedaan wil maken. Meer uitleg over de velden die je onder 'Link' moet invoegen, vind je in de vorige alinea 'Link leggen'.

3. Afbeelding

Hopelijk ga je deze functie vaak gebruiken, want een beeld zegt meer dan duizend woorden. Het kan je pagina heel wat attractiever maken. Als je een afbeelding toevoegt, krijg je de optie om het fotobestand toe te voegen rechtstreeks vanuit je mappen. Klik daarvoor op 'Toevoegen'. Wil je dat de pagina ergens naartoe leidt, zoals een link? Duid dan 'Gebruik link' aan. Je krijgt nu dezelfde opties als besproken in de alinea 'Link leggen'. Je kan ook nog het type en de verhoudingen aanpassen. Probeer eens uit om te zien wat het doet en wat voor jouw afbeelding het beste uitkomt.

4. Galerij

Een galerij wordt gebruikt om een fotovoorbeeld aan te geven (in dit geval, in een vierkant) waarna de bezoeker op de foto kan klikken om hem in het groot te bekijken. Weet wel dat het fotovoorbeeld automatisch wat van de zijkanten van je foto afknipt als die niet vierkant is. Hieronder een voorbeeld.
 

Je selecteert op dezelfde manier de afbeeldingen uit jouw mappen zoals je een gewone afbeelding zou toevoegen. Het is daarbovenop ook mogelijk om meerdere bestanden tegelijk aan te duiden (met shift of ctrl), dan worden ze tegelijk geüpload in Geni. Je kan een afbeelding nog altijd verwijderen of zelfs bijsnijden door er eerst op te klikken en dan op het kruisje of potlood te klikken.

5. Video

Je kan ook video's uploaden op je websitepagina. Onderaan de pagina Hoe maak ik de layout op? kan je zien hoe een videovoorbeeld eruit ziet. Je voegt het video-element gewoon toe in een lay-out en klik op 'Toevoegen' onder 'Bestand'.
 

7. Collectie

Een collectie-item werkt met modules. In zowat elke website wordt gewerkt met bepaalde modules, een manier om terugkerende inhoud op een uniforme manier weer te geven. Zo kan er bijvoorbeeld een module ontwikkeld zijn voor je realisaties, voor je jobs, enzovoort. Allerhande onderverdelingen van je website worden in modules verdeeld die je kan ophalen met het element 'Collectie'.

De inhoud van die modules, dus bijvoorbeeld het overzicht van je realisaties, jobs, ... ga je willen weergeven op je website. Vaak voorzien we dit bij de initiële bouw van je website, maar stel dat je achteraf ook nog ergens anders de inhoud van één van die modules zou willen weergeven, maak je gebruik van het element 'Collectie' in de pagina-editor. 

Een collectie is dus simpelweg een weergave van de items uit een vooraf gebouwde module. Als je eenmaal het element invoegt in een pagina, kan je dan verder gaan definiëren welke modules je wil tonen, hoeveel items je wil tonen, enzovoort. Hieronder hebben we een voorbeeld gemaakt met een module die we 'Voorbeelden' hebben genoemd, en het sjabloon 'Voorbeelden - cards'. 

Hiervoor ga je eerst terug naar de hoofdpagina, waar je het menu aan de linkerkant weer ziet. Op de afbeelding hieronder zal je dezelfde benamingen voor modules zien terugkomen als wanneer je de module instelt voor de collectie: bij ons zijn dat 'Categorieën', 'Artikels' en 'Voorbeelden', in het linkermenu weergegeven onder 'Inhoud'.