Maak het eigen
fase 3
Nu zullen we dieper in webdesign duiken. Wanneer je een individueel element selecteert (zoals een afbeelding of tekstvak), zullen nieuwe instellingen verschijnen aan de rechterkant van je scherm. We zullen door alle verschillende opties lopen. Nu wordt het interessant!
Maak het ‘eigen’
- Design elements overzicht
- Tekst aanpassen
- Afbeeldingen aanpassen
- Links toevoegen
- Social media iconen aanpassen
- Website koppelen aan je domein
Stappen in deze fase:
a. Tekst/afbeelding/vorm
Wanneer je een afbeelding, tekstvak of vorm selecteerd, kun je verschillende instellingen aanpassen. Je vind de aanpassingen onder de tab ‘tekst style’.
b. Text properties
Deze tab bevat de optie voor een bezoeker om wat in te vullen in iets als een tekst box voor bijvoorbeeld een contactformulier. Kies een tag voor SEO (google vindbaarheid) doeleinden.
c. Size and Position
Verander de grootte van een element of roteer het. Je kunt hier ook het element centreren in het canvas. Met ‘horizontal locking’ kun je een element in 1 of meerdere zijkanten van je scherm vast zetten. Klik hier om meer te leren over deze design optie.
d. Click actions
Link je element naar een pagina, canvas of link of kies een andere optie. Dit doe je wanneer je een beeld klikbaar wilt maken of wanneer je van een vorm een button wilt maken.
e. Transitions
Je kunt hier een type transitie instellen voor een element, zoals fade, slide of ounce. Je kunt dit ook voor een canvas instellen.
f. Hover
Selecteer een type hover, die verschijnt wanneer een bezoeker met de muis op het element staat zonder te klikken. Dit is slim om te gebruiken voor klikbare elementen, waar een link achter staat. Zo is duidelijk voor de bezoeker dat het onderdeel klikbaar is en dat er meer te vinden is :).
g. Effects
Hier kun je de opacity (transparantie) instellen en de vorm van een element.
Wanneer je een afbeelding, tekstvak of vorm selecteerd, kun je verschillende instellingen aanpassen. Je vind de aanpassingen onder de tab ‘tekst style’.
b. Text properties
Deze tab bevat de optie voor een bezoeker om wat in te vullen in iets als een tekst box voor bijvoorbeeld een contactformulier. Kies een tag voor SEO (google vindbaarheid) doeleinden.
c. Size and Position
Verander de grootte van een element of roteer het. Je kunt hier ook het element centreren in het canvas. Met ‘horizontal locking’ kun je een element in 1 of meerdere zijkanten van je scherm vast zetten. Klik hier om meer te leren over deze design optie.
d. Click actions
Link je element naar een pagina, canvas of link of kies een andere optie. Dit doe je wanneer je een beeld klikbaar wilt maken of wanneer je van een vorm een button wilt maken.
e. Transitions
Je kunt hier een type transitie instellen voor een element, zoals fade, slide of ounce. Je kunt dit ook voor een canvas instellen.
f. Hover
Selecteer een type hover, die verschijnt wanneer een bezoeker met de muis op het element staat zonder te klikken. Dit is slim om te gebruiken voor klikbare elementen, waar een link achter staat. Zo is duidelijk voor de bezoeker dat het onderdeel klikbaar is en dat er meer te vinden is :).
g. Effects
Hier kun je de opacity (transparantie) instellen en de vorm van een element.
1. Design elements overzicht
Tekst aanpassen is makkelijk! Volg gewoon deze stappen:
- Selecteer het canvas waarin je de tekst wilt aanpassen
- Klik dubbel op het tekstvak zodat de cursor zichtbaar wordt
- Pas de tekst aan
- Pas indien nodig de grootte van het tekstvak aan
- Switch nu naar de mobiele weergave om de aanpassingen te checken en zo nodig apart aan te passen.
2. Pas de tekst aan
Volg de volgende stappen om een afbeelding in te stellen:
- Selecteer het canvas waarin je de afbeelding wilt aanpassen
- Klik dubbel op de afbeelding (rechtsboven in je scherm), de media library zal openen
- Selecteer de afbeelding die je wilt plaatsen of upload een nieuwe vanaf je computer
- Indien nodig kun je de afbeelding resizen.
- Switch nu naar de mobiele weergave om de aanpassingen te checken en zo nodig apart aan te passen.
3. Pas de afbeeldingen aan
In de tekst:
In de buttons
- Selecteer het tekstvak waar je een link in wilt plaatsen
- Selecteer de woorden waar de link moet komen. Een kleine popup verschijnt. Klik de 3e optie (create link) en kies wat voor soort link je wilt plaatsen (page, canvas, url etc.)
- Click ‘save’ en de link is geplaatst.
In de buttons
- Maak een ‘rectangle’ (midden onderin je scherm) en plaats hier tekst overheen (bijv. ‘read more’).
- Selecteer de tekst en de vorm. De tab ‘click actions’ verschijnt rechts in je scherm.
- Stel nu de link in op dezelfde manier als je deed bij stap 2 van de tekst.
4. Voeg links toe
Nu weet je hoe je je website template eigen kunt maken. Veel plezier met het vullen van het template! Wanneer je hier klaar mee bent kun je door naar de volgende fase: ‘seo’.
