WEBDESIGN STAPPENPLAN
VOORBEREIDING
1. Zet wordpress website in het nederlands
a. Settings → general → naar onder scrollen → site language → Nederlands → save changes
2. Maak de template een statische pagina
a. Instellingen
b. Lezen
c. Je homepage toont → 2de bolletje aankruisen → eerste keuzevak: ‘sample page’ → wijziging
opslaan
ALGEMENE INFO:
• Berichten → berichten bewerken
• Pagina → pagina’s bewerken (zoals sample page)
• Website bewerken = template bewerken → WIJ WERKEN NIET MET TEMPLATES!
• WIJ WERKEN MET ‘BERICHTEN’ EN ‘PAGINA’S’
o ALTIJD DRUKKEN OP ‘TEMPLATE TONEN’ (en eerst template wijzigen)
o Links: document overview
o Rechts: blok eigenschappen (van de blok die je links selecteerde)
• Wordpress werkt met blokken
o Lijstweergave → dan zie je de verschillende blokken
o Alle blokken selecteren en verwijderen → standaard altijd een lege paragraaf die over blijft
o Als je op het ‘+’ drukt in de sample page dan heb je meer keuze voor de blokken
o Bij ‘patronen’ kan je ene kiezen
• Groep = elementen verzamelen
o Het heeft een breedte en een hoogte
1
, VRAGEN EXAMEN EN OPLOSSINGEN WORDPRESS WEBSITE
Kies een nieuwe layout voor de header en de footer voor je website. Geef een andere achtergrondkleur aan je
header en footer. Zorg ervoor dat de tekst goed leesbaar blijft. Maak de header “sticky”. Voeg een zoekoptie
toe aan je header.
1. Dashboard → pagina’s → bewerken sample page
2. Template tonen (rechts)
3. Lijstweergave (links)
4. Header kleur veranderen
a. Header (links) → bewerken
b. Groep (links)
c. Stijlen (half gekleurd bolletje rechts) → achtergrond en tekst kleur aanpassen
5. Footer kleur veranderen
a. Footer (links) → bewerken
b. Groep (links)
c. Stijlen (halfgekleurd bolletje rechts) → achtergrond en tekst kleur aanpassen
6. Header sticky maken
a. Website bezoeken → website bewerken → template ‘pagina’
b. Header selecteren en daarvan een groep maken → 3 puntjes en op groeperen drukken (links)
c. Die groep aanduiden (links)
d. Instellingen (rechts → positie → sticky header → opslaan
e. Header is nu ingekort dus je moet dat veranderen:
i. Header (links) aanduiden
ii. Icoon met dikke streep met erboven en onder dunne streep op klikken → volledige
breedte
7. Zoekoptie
a. Header bewerken (die gegroepeerd is) → groep selecteren → druk op ‘+’ → type ‘zoeken’ in en
druk daarop → zet die (links)
b. OPSLAAN‼
Maak op een willekeurige pagina een galerij aan met 5 foto’s. Maak de galerijbreedte “wijd”. Zorg ervoor dat
de foto’s uitvouwen bij een klik. Geef de 5 foto’s een radius van 20px en een slagschaduw naar keuze.
1. Maak een pagina aan (dashboard → pagina’s → nieuwe pagina)
2. Druk op ‘+’ en typ ‘galerij’ in → maak een groep van ‘galerij’
3. Voeg 5 foto’s toe
4. Klik op een foto → blok (rechts: half gekleurd bolletje) → bij ‘radius 20px’ → ‘rand en schaduw’ op 3 puntjes
drukken → ‘schaduw’ → slagschaduw instellen → doe dit voor elke foto & SLA OP‼
5. Druk op ‘galerij’ (links) → wijde breedte instellen
6. Druk op het ‘link’ icoon → druk op ‘vergroten door te klikken’
7. SLA OP ‼
2
VOORBEREIDING
1. Zet wordpress website in het nederlands
a. Settings → general → naar onder scrollen → site language → Nederlands → save changes
2. Maak de template een statische pagina
a. Instellingen
b. Lezen
c. Je homepage toont → 2de bolletje aankruisen → eerste keuzevak: ‘sample page’ → wijziging
opslaan
ALGEMENE INFO:
• Berichten → berichten bewerken
• Pagina → pagina’s bewerken (zoals sample page)
• Website bewerken = template bewerken → WIJ WERKEN NIET MET TEMPLATES!
• WIJ WERKEN MET ‘BERICHTEN’ EN ‘PAGINA’S’
o ALTIJD DRUKKEN OP ‘TEMPLATE TONEN’ (en eerst template wijzigen)
o Links: document overview
o Rechts: blok eigenschappen (van de blok die je links selecteerde)
• Wordpress werkt met blokken
o Lijstweergave → dan zie je de verschillende blokken
o Alle blokken selecteren en verwijderen → standaard altijd een lege paragraaf die over blijft
o Als je op het ‘+’ drukt in de sample page dan heb je meer keuze voor de blokken
o Bij ‘patronen’ kan je ene kiezen
• Groep = elementen verzamelen
o Het heeft een breedte en een hoogte
1
, VRAGEN EXAMEN EN OPLOSSINGEN WORDPRESS WEBSITE
Kies een nieuwe layout voor de header en de footer voor je website. Geef een andere achtergrondkleur aan je
header en footer. Zorg ervoor dat de tekst goed leesbaar blijft. Maak de header “sticky”. Voeg een zoekoptie
toe aan je header.
1. Dashboard → pagina’s → bewerken sample page
2. Template tonen (rechts)
3. Lijstweergave (links)
4. Header kleur veranderen
a. Header (links) → bewerken
b. Groep (links)
c. Stijlen (half gekleurd bolletje rechts) → achtergrond en tekst kleur aanpassen
5. Footer kleur veranderen
a. Footer (links) → bewerken
b. Groep (links)
c. Stijlen (halfgekleurd bolletje rechts) → achtergrond en tekst kleur aanpassen
6. Header sticky maken
a. Website bezoeken → website bewerken → template ‘pagina’
b. Header selecteren en daarvan een groep maken → 3 puntjes en op groeperen drukken (links)
c. Die groep aanduiden (links)
d. Instellingen (rechts → positie → sticky header → opslaan
e. Header is nu ingekort dus je moet dat veranderen:
i. Header (links) aanduiden
ii. Icoon met dikke streep met erboven en onder dunne streep op klikken → volledige
breedte
7. Zoekoptie
a. Header bewerken (die gegroepeerd is) → groep selecteren → druk op ‘+’ → type ‘zoeken’ in en
druk daarop → zet die (links)
b. OPSLAAN‼
Maak op een willekeurige pagina een galerij aan met 5 foto’s. Maak de galerijbreedte “wijd”. Zorg ervoor dat
de foto’s uitvouwen bij een klik. Geef de 5 foto’s een radius van 20px en een slagschaduw naar keuze.
1. Maak een pagina aan (dashboard → pagina’s → nieuwe pagina)
2. Druk op ‘+’ en typ ‘galerij’ in → maak een groep van ‘galerij’
3. Voeg 5 foto’s toe
4. Klik op een foto → blok (rechts: half gekleurd bolletje) → bij ‘radius 20px’ → ‘rand en schaduw’ op 3 puntjes
drukken → ‘schaduw’ → slagschaduw instellen → doe dit voor elke foto & SLA OP‼
5. Druk op ‘galerij’ (links) → wijde breedte instellen
6. Druk op het ‘link’ icoon → druk op ‘vergroten door te klikken’
7. SLA OP ‼
2
