Module 6: Website vullen

Oké! Je bent nu in het bezit van alle kennis om aan de slag te gaan met het vullen van je website! Tijd voor de laatste fase van het bouwen van je eigen website. In deze module behandelen we de volgende onderwerpen:

– Pagina’s aanmaken en met content vullen
– Blog berichten aanmaken en met content vullen
– Instellen homepagina
– Menu’s aanmaken en zichtbaar maken op de website

Pagina's aanmaken en met content vullen

Laten we even kort door alle mogelijkheden heenlopen:

Titel veld -> Hierin voeg je zoals de naam al zegt de titel van je pagina in. Bijvoorbeeld ‘Over mij’
Inhoud -> onder het titel veld kun je de inhoud van je pagina plaatsen.
Status en zichtbaarheid -> Mocht je de pagina nog  niet zichtbaar willen laten zien dan kun je er hier voor kiezen om de pagina nog even in concept te laten staan. In deze cursus gaan we hier niet verder op in.
Uitgelichte afbeelding -> Dit is de afbeelding die bij sommige thema’s bovenaan je pagina wordt getoond. Deze gebruik ik zelf allen bij Blogs (gaan we later dieper op in)
Discussie -> Mogen bezoekers een reactie achterlaten op je pagina?
Pagina attributen -> Stel dat je een pagina aanmaakt die onder een andere pagina komt te hangen in je menu, dan kun je dit hier aangeven
En dan de instellingen van de weergave van je pagina -> Dit kopje is niet bij alle thema’s zichtbaar, maar in geval van het thema Astra heb ik hier nog wat extra opties. Hier gaan we voor nu even niet verder op in.

Opdracht: Maak drie pagina’s aan. Een ‘over mij’ pagina met een titel en een stuk tekst, een contact pagina met een stukje tekst en een homepagina. Aan de contactpagina gaan we zo een contactformulier toevoegen. Als je pagina’s klaar zijn kun je bovenaan de pagina op de knop ‘Publiceren’ klikken. Je pagina wordt nu online gezet.

Gefeliciteerd! Je eerste twee pagina’s zijn gemaakt! Nu heb je waarschijnlijk op de ‘over mij’ pagina een plat stuk tekst staan. Laten we eens kijken of we hier een leuke afbeelding en een opsomming aan toe kunnen voegen.

Open de ‘over mij’ pagina door via het menu naar pagina’s te gaan en met je muis over de juiste pagina te bewegen. Er komen een aantal links tevoorschijn. Klik op bewerken. We komen nu weer op dezelfde pagina terecht als waar we net waren toen we de pagina gingen maken.

Plaats je cursor aan het begin van je eerste regel tekst en druk op enter. Er zal nu een nieuw blok gemaakt worden boven je tekst.

Rechts van het blok zie je drie iconen. Een T die staat voor het toevoegen van tekst, een vierkantje met bergen erin en twee vierkantjes met bergen. We willen een afbeelding toevoegen dus kiezen voor het vierkantje met de bergen. Klik op het icoon, er opent nu een scherm waarin je een nieuwe afbeelding kan uploaden, via de mediabibliotheek een nieuwe afbeelding kunt kiezen of een afbeelding kan toevoegen via URL.

Klik op uploaden en kies de afbeelding die je wil toevoegen aan je pagina. Je afbeelding wordt nu toegevoegd aan de pagina. 

Opdracht: Voeg een foto van jezelf toe aan de ‘over mij’ pagina. Maak de foto de helft van de breedte van je tekst en zorg dat de tekst eromheen loopt door middel van de knoppen die boven de afbeelding worden getoond. 

Als laatste gaan we in dit hoofdstuk een contactformulier aan je contact pagina toevoegen.Klik in het menu op Contact en ga met je muis over Contactformulier 1. Klik op bewerken.

Zoals je ziet bevat het standaard formulier al 4 velden. Naam, e-mailadres, Onderwerp en bericht. Laten we een telefoonnummer veld toevoegen aan het formulier. Ga met je muis onder de tekst ‘[email* your-email] </label>‘ staan en druk twee keer op enter. Kies vervolgens bovenin de toolbar voor de knop tel. Er opent nu een popup waarin we wat informatie kunnen invullen.

Vul de naam van het veld in en druk op tag invoegen. Er wordt nu een veld toegevoegd aan je formulier, maar dit veld heeft nog geen label. Hier gaan we even een beetje technisch worden, we moeten namelijk zelf een label toevoegen aan het veld. 

Typ boven de net toegevoegde regel de volgende tekst:
<label> Je telefoonnummer

En voeg achter de nieuw toegevoegde regel de volgende tekst toe:
</label>

Als het is heb je nu de volgende tekst staan:
<label> Je telefoonnummer
[tel tel-113] </label>

Klik vervolgens op opslaan.

Bovenaan de pagina zie je een blauwe regel tekst staan. Dit is een shortcode. Shortcodes worden in WordPress vaak gebruikt om content van de ene op de andere plek te krijgen. Door deze blauwe tekst te kopiëren kun je straks je contact formulier in je contact pagina gaan plaatsen.

Opdracht: kopieer de shortcode in het blauwe vlak.

Oké, dat was even wat technischer dan de rest van de cursus, maar het is je gelukt! Op naar de laatste stap, het tonen van het formulier op je contactpagina!

Kies in het menu weer voor Pagina’s en kies voor bewerken bij je contact pagina.

In het tekst vlak kies je voor het plus icoon. Er komt nu een menu omhoog waarmee je allerlei dingen kunt toevoegen aan de tekst. Typ in het zoekveld de tekst shortcode in. Er komt nu een kopje widgets omhoog waaronder je op shortcode kunt klikken. Klik op de knop shortcode en vul de code in van je contact formulier. Sla de pagina op en klik bovenaan de pagina op pagina bekijken om te zien hoe je pagina er nu uitziet.

Blog berichten aanmaken en met content vullen

De standaard pagina’s zitten erin, nu is het tijd voor de blog pagina! Je weet ondertussen hoe je een nieuwe pagina toe moet voegen, dus laten we eerst zorgen dat er een pagina is om alle blogs op te tonen.

Opdracht: Maak een nieuwe pagina aan, genaamd ‘blog’.

Het toevoegen van een blog gaat bijna hetzelfde als het toevoegen van een pagina. We zullen hier dus iets sneller doorheen lopen. Klik in het menu op Berichten en kies voor Nieuw bericht

Zoals je ziet is de pagina bijna hetzelfde als tijdens het aanmaken van een pagina. Er zijn drie kopjes toegevoegd aan het menu aan de rechterkant:

– Categorieën -> hier kun je, zoals de titel al zegt, categorieën aanmaken en toevoegen aan je blog posts.
– Tags -> Ik gebruik het zelf eigenlijk nooit, maar als je tags wilt toevoegen aan je post dan kan dat hier.

Bij het aanmaken van de agina’s had ik het al even gezegd, bij blogs maken we wel gebruik van de uitgelichte afbeelding. klik in het rechtermenu op Uitgelichte afbeelding kiezen en upload zoals we net hebben gedaan een afbeelding voor bij je blog. Deze afbeelding zal op je website getoond worden boven je blog en als afbeelding bij de overzichtspagina/ Een belangrijke om niet te vergeten dus!

Opdracht: Voeg je eerste blog toe.

Instellen homepagina

Zoals we in het begin al hebben gezien worden bij een standaard installatie de blogs op de homepagina getoond. Wij willen hier natuurlijk een gewone informatie pagina tonen, zodat mensen meteen zien bij wie ze op de website terecht zijn gekomen.

Ga in je admin menu naar Instellingen en klik op Lezen.

Kies bij Jouw homepagina toont voor de optie Een statische pagina. Selecteer bij de homepagina je nieuw gemaakte homepagina en bij Bericht pagina je aangemaakte Blog pagina. Kies voor Wijzigingen Opslaan en bekijk je website. Zoals je ziet is je homepagina nu vervangen voor je zelf aangemaakte pagina!

Menu's aanmaken en zichtbaar maken op de website

We hebben al onze pagina’s aangemaakt, dus we kunnen nu het menu goed gaan zetten. Klik met je muis op Weergave in het menu en kies voor Menu’s.

Geef je nieuwe menu een naam. Kies bijvoorbeeld voor Hoofdmenu en klik op Menu aanmaken.

Klik vervolgens helemaal links op de Home, Over mij en Contact pagina en klik op Aan menu toevoegen.

Sleep vervolgens het blokje home helemaal naar boven zodat het menu begint met het home item.

Scroll vervolgens iets naar beneden en vink bij Menu instellingen het vakje hoofdmenu/primary navigation/o.i.d. aan. Klik op Menu opslaan.

En we zijn klaar! Je hebt pagina’s op je website, een blog die je kunt vullen én een mooi menu. Het is nu aan jou om verder te ontdekken met het thema wat je hebt geïnstalleerd.