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.

Voorbeeldknop

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'.
 

Pas op met zware videobestanden

Video's kunnen heel zwaar zijn en de pagina te hard belasten. Zorg er dus voor dat je bestand niet te groot is, of maak er een .webm van. Dat zal de grootte van je video drastisch naar beneden halen, zodat je het gemakkelijk kan uploaden en weinig vraagt van je pagina. Adobegebruikers kunnen zulke video's converteren via Media Encoder of Premiere Pro met een Plug-In van Fnord:  https://www.fnordware.com/WebM/ Nadien zal je onder 'exporteren' .webm zien staan.

 

6. Formulier

Een formulier bestaat uit een of meerdere invulvelden die je kan aanmaken, zodat je gegevens van je bezoekers kan verzamelen. Dat kan bijvoorbeeld een invulformulier zijn om een reservatie te maken bij een restaurant, een contactformulier, inschrijving op de nieuwsbrief, enzovoort.  Hier rechts zie je een voorbeeld van hoe zoiets eruit kunnen zien. Voor meer informatie hierover, ga naar Hoe stel ik een formulier op?

 

Meerkeuze (meer opties mogelijk)
Meerkeuze (1 optie mogelijk - radiobuttons)

 


7. Collectie

In opmaak
 

8. Embed

'Embed' is eigenlijk hetzelfde als 'Video', alleen hier is het een video die al geüpload is op het internet. Hieronder zie je een voorbeeld van een YouTube-filmpje. Je voegt gewoon de link toe in het veld 'URL' en Geni voegt dit automatisch toe op jouw pagina als je bewaart.
 

 

9. Menu

In opmaak

 

10. HTML-code

Ken je HTML-code en wil je dat graag toevoegen op je websitepagina? Dan kan je dat via dit element doen. Ook de HTML-code zet je in een lay-out. Nadien krijg je een veld waar je de code in kan plakken.

 

11. Downloads

Met dit element kan je een download toevoegen op je websitepagina, zoals het voorbeeld hieronder. Dit is een afbeelding die geopend wordt op een nieuw tabblad. Probeer het gerust uit. Hier krijgt de bezoeker de mogelijkheid om het bestand te downloaden.