Selecteer een pagina

Blog aanpassen en personaliseren. In het eerste deel van “Begin je eigen blog in 10 minuten” heb ik in detail uitgelegd hoe je je eigen blog kunt beginnen in 10 minuten met WordPress en Siteground.
Vandaag gaan we een stukje verder, voornamelijk het aanpassen, vullen en opmaken van je nieuwe blog.

Blog aanpassen en personaliseren. Stap voor stap uitleg.

Ook deze keer delen we het weer op in stappen:

1. Design en layout
2. Aanpassen van elementen en kleuren (zoals de menu balk, logo en meer.)
3. Plugins en widgets
4. Toevoegen van (statische) pagina’s
5. Menu items, social media en reacties

Stap 1. Design en layout

De eerste stappen zijn voltooid en je blog staat online. Wat nu? Precies… de website is zo saai en het design ziet er niet uit. Laten we dit veranderen!
Wordpress werkt op basis van themes. Een theme of een template is een kant en klaar design die je zo kunt toevoegen aan de website. Deze kun je dan personaliseren door de kleuren aan te passen, logo en foto’s toe te voegen of de indeling te wijzigen. Oke leuk maar waar kun je deze themes krijgen?
Op het internet zijn er enorm veel themes te vinden. Sommige gratis en sommige betaald. Natuurlijk kun je ook je eigen theme ontwikkelen, maar hier gaan wij ons nu niet in verdiepen.
Zoals verwacht zijn betaalde themes vaak completer en hebben veel meer functionaliteiten. Gratis WordPress themes kun je vinden op o.a. de WordPress website zelf of op websites zoals Themeisle.com
Betaalde themes zijn de holy grail van WordPress. De goede betaalde themes zijn vaak ontwikkeld met een framework. Dit kan gezien worden als het brein van de functionaliteiten die je theme bied.
Themes waarvoor betaald moet worden zijn enorm populair en vaak ook de juiste keuze voor de meeste bloggers. Zelf maken wij veel gebruik van Themeforest. Daarnaast is TemplateMonster ook een hele bekende.

Voor deze uitleg maken we gebruik van het theme Divi. Divi is een van de beste themes die verkrijgbaar is en kan voor alle doeleinden gebruikt worden. Als je Divi koopt ontvang je ook 86 andere (betaalde) themes van de maker van Divi; Elegantthemes.

Laten we beginnen.

A. Download je theme die je wilt gebruiken. Dit is vaak een .zip bestand. Pak deze uit en je zult in deze map nog een .zip bestand zien. Vaak is dit: “themenaam.zip”
B. Log in op je website via www.jouwdomein.nl/wp-admin
C. Ga naar Weergave -> Thema’s en klik op Nieuwe toevoegen.
(klik op de foto om te vergroten)
Nieuw thema toevoegen

D. Klik bovenaan op Thema uploaden en klik dan op Choose File.
F. Kies je .zip bestand met je thema en klik op Open
G. Als het goed is gegaan zie je nu naast Choose File het .zip bestand staan. Klik dan op Nu installeren.
H.  Zodra het proces voltooid is zal er het volgende staan: Thema succesvol geinstalleerd. Krijg je een foutmelding? Kijk dan eens hier: Foutmeldingen
I. Klik op Activeren
Thema activeren
J. Gefeliciteerd! Je thema is nu geinstalleerd en geactiveerd. Je kunt alvast een kijkje nemen door naar je website te gaan: www.jouwdomein.nl
Natuurlijk ziet het er nog niet hetzelfde uit als het voorbeeld maar hier gaan we zo voor zorgen.
K. Ga naar pagina’s -> nieuwe pagina, in het linker menu.
L. Voer de titel in: Blog en klik op “De Divi opbouwfunctie gebruiken”
Divi opbouwfunctie

M. Om het even makkelijk te doen klikken we op “Opladen vanuit bibliotheek” en kies Blog standaard of Blog Masonry. Dit kunnen we op een later moment altijd veranderen.
opladen vanuit bibliotheekblog standaard of masonry

N. Klik hierna aan de rechterkant op de blauwe knop “Publiceren”. Nu kun je bovenaan klikken op “Pagina bekijken” en je zult het resultaat zien.
O. Nu gaan we het zelfde doen voor de homepage. Klik bovenaan op Nieuwe pagina, voer de titel “Home” in en gebruik de Divi opbouwfunctie. Klik op opladen vanuit bibliotheek en kies Home-pagina Basis. Klik op laden en dan aan de rechterkant op “Publiceren”.
P. Nu gaan we ervoor zorgen dat “Home” gezien word als startpagina. Ga links onderaan naar Divi en klik op “Systeem aanpasser van thema”.
Systeem aanpasser van thema
Q. Klik links onderaan op “Statische startpagina” en bij STARTPAGINA TOONT kies je “Een statische pagina”.
R. Bij Startpagina kies je “Home” en bij Berichtenpagina kies je “Blog”. Klik hierna op Opslaan & Publiceren.
startpagina instellen

Ga nu naar je website via www.jouwdomein.nl en bekijk het resultaat!

 

Stap 2. Aanpassen van elementen en kleuren

Nu we de basis van het thema hebben ingesteld gaan we verder met het aanpassen van de layout en het design.
Allereerst beginnen we met het logo van de website. Heb je nog geen logo? Neem dan gerust contact met mij op en we zullen je hiermee helpen.

A. Ga in je admin gedeelte naar Divi -> Thema opties (links onderaan).
B. Bovenaan vind je onder Algemeen opties om je logo en favicon in te stellen. Klik op Afbeelding uploaden en kies je logo. “Klik hierna op Stel in als logo”
C. Scroll naar beneden en klik op Save. Bekijk het resultaat door naar je website te gaan. In ons geval ziet het er nog niet zo goed uit (zie foto). Dit gaan we aanpassen. Heb je dit probleem niet? Ga dan verder na stap F.
logo proxico slecht
D. Ga weer terug naar je admin panel en ga naar Divi -> Systeemaanpasser van thema. Klik op Koptekst en navigatie -> Primaire menubalk.
E. Hier kunnen we de grootte van het logo en de menu balk aanpassen. Bij “Logo max hoogte” is een slider waarmee je de grootte van het logo kunt aanpassen. Ins ons geval is 80 perfect. Klik hierna op Opslaan & publiceren.
logo hoogte

F. Als je de kleuren wilt aanpassen van de menu balk, ga dan weer naar Koptekst en navigatie -> Primaire menubalk en speel met de kleuren onderaan. In het rechterscherm kun je direct de veranderingen zien.
G. Per element kun je de kleuren en lettertypen aanpassen en dit allemaal via de systeemaanpasser van thema. Stel je wilt de knoppen aanpassen dan klik je op Knoppen -> Knoppenstijl en hier vind je alle opties die beschikbaar zijn.
Als je verdere vragen hebt over de kleuren en het aanpassen van deze elementen, neem dan gerust contact met mij op. Wij kunnen je kostenloos helpen.
Stap 3. Plugins en widgets

Wat zijn plugins en wat zijn widgets?
Plugins zijn simpel gezegd extensies. Plugins kunnen door iedereen gemaakt worden en aangeboden worden op de website van WordPress. Plugins kunnen functionaliteiten toevoegen, je leven gemakkelijker maken en natuurlijk veel meer zoals automatische backups van je site.
Op het begin hebben we eigenlijk nog geen plugins nodig maar in stap 5 zullen we ze wel gebruiken.

Widgets zijn elementen die overal op de site geplaatst kunnen worden. De meeste widgets halen bepaalde informatie op, denk bijvoorbeeld aan Facebook posts of Tweets, en plaatst deze op de site. Veel widgets komen in combinatie met plugins. In stap 5 zullen we zowel plugins als widgets gaan gebruiken.

Stap 4. Toevoegen van (statische) pagina’s

Een statische pagina’s of vaste pagina’s zijn pagina’s die (haast) nooit veranderd zullen worden. Denk bijvoorbeeld aan de homepage, contact pagina, algemenevoorwaarden, diensten… noem maar op.
Dynamic pages of dynamische pagina’s zijn pagina’s zoals blog posts, portfolio items etc.

Het is aan jou om te bepalen welke (statische) pagina’s je nodig hebt. Als voorbeeld noemen we: Homepage, over mij en contactpagina.
De homepage hebben we al aangemaakt dus deze kunnen we overslaan.
We beginnen met de contactpagina.

A. Om een pagina aan te maken ga je in je admin panel naar Pagina’s -> Nieuwe pagina.
B. Voer de titel “Conntact” in en klik weer op De Divi opbouwfunctie gebruiken.
C. Klik op “Opladen vanuit bibliotheek” en kies “Neem contact met ons op”.
D. Nu zie je onderaan “Contact Form” staan. Klik op de 3 streepjes. (Zie foto)
(klik op foto om te vergroten)
contactformulier instellen

E. In dit scherm kun je alles instellen. We beginnen met het e-mail adres. Voer hier je email in.
F. Bij “Titel” voer je “Neem contact met mij op”.. Klik hierna op Opslaan en verlaten.
(klik op foto om te vergroten)
contactformulier instellingen

G. Klik nu op de 3 streepjes bij Tekst en onderaan zie je een tekst veld staan. Dit kun je leeglaten of informatie in zetten. Klik ook hier weer op “Opslaan en verlaten”.
H. (optioneel) als je de map wilt veranderen klik je op de 3 streepjes bij Fullwidth Map en hier je gegevens intypen. Je kan er ook voor kiezen om dit te verwijderen door op het kruisje aan de linkerkant te klikken.
I. Klik nu op publiceren en bekijk je pagina.

J. Nu beginnen we aan de Over mij pagina. Klik bovenaan op Nieuwe pagina, voer de titel in en klik de Divi opbouwfunctie.
K. Klik op Opladen vanuit bibliotheek en kies Over mij.
L. Ook hier kun je, net zoals de contactpagina, alle elementen aanpassen door op de 3 streepjes te klikken. Klik hierna op Publiceren.

Nu we klaar zijn met de eerste statische pagina’s, kunnen we verder gaan met het menu

Stap 5. Menu items, footer en reacties

Als je nu naar je website gaat zie je dat het aardig de goede kant op gaat. Maar we missen nog wat dingen!
Laten we beginnen met het menu bovenaan de website. Waarschijnlijk staan al je pagina’s er al maar niet in de juiste volgorde. Misschien is er ook een menu item die je helemaal niet wilt. Laten we dit gaan fixen.

A. Ga naar Weergave -> menu’s, in je admin panel.
B. Bij Menunaam typ je een naam voor je menu. Wij noemen het Main. Klik hierna op Menu aanmaken.
C. Aan de linkerkant zie je de pagina’s die je hebt aangemaakt. Selecteer de gene die je wilt hebben en klik op “Aan menu toevoegen”.
D. Om de volgorde te bepalen kun je de menu items slepen. Zorg ervoor dat ze precies onder elkaar staan, anders word het een submenu! Ik kies de volgorde Home, Over mij, Blog, Contact.
E. Onder menu instellingen vink je Hoofdmenu aan. Klik hierna op Menu opslaan.
(klik op foto om te vergroten)
menu instellingen

Ga nu weer naar de homepage van je website en bekijk het resultaat.

De footer… die willen we natuurlijk netjes hebben! Dat gaan we dan bij deze ook doen.
F. Ga naar Weergave -> widgets en klap Footer Area #1 uit.
G. Verwijder alle elementen door ze uit te klappen en op verwijderen te klikken.
Widget verwijderen
De reden hiervoor is simpel… we willen deze onzin helemaal niet op onze blog hebben.
H. Wat we wel willen is relevante informatie zoals een korte introductie of meest recente berichten. Dit kun je doen door aan de linke kant de Widget te slepen naar Footer Area #1 en Footer Area #2.
Zie voorbeeld:
(klik op foto om te vergroten)
Widget voorbeeld

I. Klik hierna op Opslaan bij de twee Widgets en bekijk het resultaat op je website.
Voorbeeld:
(klik op foto om te vergroten)
905f3e32d20877be9ef67fec188dbdc0

Reacties! Dat willen we allemaal natuurlijk. Maar is het wel zo simpel en waar moet je op letten?
Het grootste probleem met reacties zijn SPAM reacties. Hier hebben we iets voor… een CAPTCHA plugin!
J. Ga naar Plugins -> Nieuw plugin. Zoek rechts bovenin naar Captcha en kies Captcha by BestWebSoft. Klik op “Nu Installeren”.

captcha installatie

K. Klik hierna op Plugin activeren en ga links onderaan naar BWS Plugins -> Captcha.
L. Haal alle vinkjes weg behalve die van Commentaar formulier. Klik hierna op Wijzigingen opslaan.

Gefeliciteerd! Mensen kunnen nu commentaar geven op je blog posts zonder dat je 50 spam reacties per dag ontvangt. Handig he?
Heb je vragen, opmerkingen of kom je er niet helemaal uit? Laat dan een reactie achter of neem contact met ons op via het contactformulier.

Volgende keer gaan we ons verdiepen in SEO ofwel zoekmachine optimalisatie!

 

Wil je korting op het Divi theme en tegelijkertijd ons steunen? Klik dan op deze link: Divi theme bekijken en kopen

 

Heb je daarnaast nog geen hosting en wil je levenslang 25% korting ontvangen op je hosting pakket bij Siteground? Klik dan op deze link:  Siteground webhosting.