WordPress: zelf je website ontwerpen
In deze blog leggen wij uit wat je nodig hebt om zelf je website te ontwerpen. Door zelf een website te ontwerpen ben je nauwelijks afhankelijk van het gekozen WordPress-thema!
Zoals je misschien weet, bepaalt het thema dat je kiest voor een groot gedeelte de uitstraling van je website. Het kiezen van een WordPress-thema is een lastige taak. Gaandeweg ontdek je vaak dat het door jou gekozen thema niet helemaal past bij hetgeen je voor ogen had.
Wil je zoveel mogelijk zelf de regie in handen nemen? Lees dan snel verder om te zien wat er mogelijk is in WordPress!
Wat heb je nodig?
Om zelf een website te ontwerpen, heb je de volgende zaken nodig:
- Elementor (of een andere vergelijkbare pagebuilder-plugin);
- Elementor Pro (een plugin waarvoor je een jaarlijks abonnement aanschaft);
- Thema Hello Elementor (of een ander eenvoudig thema);
- Dialoogvenster Thema stijl Elementor;
- Style Kits for Elementor-plugin (extra);
- Custom CSS via Customizer (extra, voor webbouwers die met CSS kunnen werken).
Elementor
Met een page builder als Elementor kun je zelf aan de slag met het ontwerp van je website. Hiervoor heb je geen kennis van codering nodig.
Een website is meestal opgebouwd uit secties. Een sectie kun je vergelijken met een rij. Met een pagebuilder plaats je telkens eerst een rij. Vervolgens plaats je in deze rij het aantal gewenste kolommen. In de volgende stap plaats je in iedere kolom de gewenste onderdelen (een onderdeel of blok wordt in WordPress een widget genoemd). Een aantal voorbeelden van blokken (widgets):
- afbeelding;
- koptekst;
- paragraaf;
- video;
- galerij;
- knoppen;
- social-mediabericht.
De rijen en kolommen kun je geheel naar eigen inzicht opmaken en indelen. Later kun je ook het aantal kolommen en de breedte van de kolommen wijzigen.
Ontwerpen voor verschillende schermgroottes
Het voordeel van een pagebuilder als Elementor is dat je ook kunt ontwerpen voor verschillende schermgroottes. In Elementor kun je een ontwerp maken voor smartphone, tablet en laptop/desktop. De opmaak en indeling die voor alle schermen hetzelfde moet blijven, is ook voor alle schermen hetzelfde. Je hoeft in Elementor alleen de opmaak en indeling voor de gewenste schermgrootte te veranderen, die afwijkt van de standaard.
Bovendien is het met Elementor eenvoudig om de opmaak van alle pagina’s en berichten ‘gelijk te trekken’. Hierdoor krijgt je website op iedere pagina en bij ieder bericht dezelfde uitstraling. Zo wordt het eenvoudiger om toe te werken naar de gewenste huisstijl van je website!
Elementor Pro
Met de premium-plugin van Elementor heb je nog meer mogelijkheden om een WordPress-thema te ‘overschrijven’. Met deze plugin kun je zelfs de secties die normaal gesproken door het thema worden vormgegeven zelf ontwerpen. Hieronder staat een aantal voorbeelden van dit soort secties:
- header van een pagina (de bovenste sectie van een pagina of bericht);
- footer van een pagina (de onderste sectie van een pagina of bericht);
- overzicht nieuwsberichten;
- enkel bericht;
- overzicht portfolio;
- archiefpagina’s;
- onbekende pagina (deze wordt getoond wanneer een bezoeker op een pagina terechtkomt die niet bestaat).
Het betreft dus secties die standaard door het thema worden gegenereerd en die je in het algemeen niet zelf kunt aanpassen.
Hello Elementor
Zonder thema werkt WordPress niet. Omdat het thema niet meer het ontwerp bepaalt, kun je het beste voor een eenvoudig thema kiezen. Een eenvoudig thema heeft minder invloed op bijvoorbeeld de snelheid waarmee je website wordt weergegeven. Het thema heb je slechts nodig om de inhoud van de website te tonen.
Het voordeel van het Hello Elementor-thema is dat het header- en footergedeelte van het thema automatisch is uitgeschakeld. Op deze manier wordt alleen de zelf ontworpen header en footer weergegeven. Bij andere thema’s moet je wellicht nog zelf de header en footer van het thema onzichtbaar maken.
Algemene instellingen Elementor
Voordat je met een huisstijl aan de slag kunt gaan die voor iedere pagina of bericht gelijk is, moet je eerst de algemene instellingen van Elementor aanpassen.
Bij de algemene instellingen vink je de volgende opties aan:
- standaardkleuren uitschakelen;
- standaardlettertypen uitschakelen.
Het lijkt alsof Elementor hiermee de kleuren en lettertypes van je thema overneemt. Maar dat is niet zo. Elementor heeft namelijk het dialoogvenster Thema stijl geïntroduceerd. Deze bepaalt de algemene opmaak van je website en overschrijft daarmee de opmaak van je thema. Hierover lees je in de volgende paragraaf meer.
Dialoogvenster Thema stijl – Elementor
Via het dialoogvenster Thema stijl van Elementor pas je eenvoudig de opmaak aan die op iedere pagina of bericht hetzelfde moet zijn. In het algemeen gebruik je bijvoorbeeld telkens dezelfde lettertypes en kleuren.
Wanneer je in het dialoogvenster Thema stijl een kleur van een onderdeel aanpast, wijzigt automatisch de kleur van alle gelijksoortige onderdelen. Wijzig je bijvoorbeeld de kleur van een koptekst met niveau twee, dan krijgen alle geplaatste kopteksten van niveau twee deze gewijzigde kleur. Nu hoef je dus niet onderdeel voor onderdeel af te gaan, wanneer je een bepaalde wijziging wilt doorvoeren die voor de gehele website geldt. Het dialoogvenster Thema stijl is dus bijzonder geschikt om je website een bepaalde huisstijl mee te geven.
Eventuele opmaakstijlen widget verwijderen
De ingevulde stijlen in het dialoogvenster Thema stijl werken echter alleen wanneer in een widget nog geen opmaak is ingevuld. Je kunt dan eventueel de desbetreffende opmaak in de widget verwijderen en naar de standaardstijl terugzetten. De standaardstijl is de stijl zoals deze in het dialoogvenster Thema stijl is ingevuld.
Custom CSS
Met het dialoogvenster Thema stijl van Elementor kun je helaas niet alle opmaak van de geplaatste onderdelen ‘overschrijven’.
Mocht je echter thuis zijn in CSS, dan kun je tot op zekere hoogte de opmaakstijlen van de geplaatste widgets tóch overschrijven en laten bepalen door het dialoogvenster Thema stijl. In de afbeelding zie je een voorbeeld zoals wij het in het extra CSS-venster van de WordPress-customizer hebben aangepast.
Custom CSS en het dialoogvenster Thema stijl bieden helaas nog niet de oplossing voor alles. Bij sommige widgets worden opmaakstijlen altijd van de widget overgenomen. Je kunt daarbij niet aangeven dat de standaardopmaak van bijvoorbeeld het dialoogvenster Thema stijl moet worden overgenomen. Nu zit er niets anders op dan de opmaak in de widget zelf aan te passen. Wie weet, komt hier in de toekomst verandering in. Houd de ontwikkelingen van Elementor dus in de gaten!
Header ontwerpen
Met Elementor kun je tevens je eigen header vormgeven. Je maakt via de Theme builder eerst een headersjabloon aan. Dit sjabloon kun je vervolgens toepassen op de door jou gewenste pagina’s.
Wanneer wil je deze header plaatsen?
Wanneer je het headersjabloon een naam hebt gegeven, geef je vervolgens aan waar de header moet worden geplaatst. Je kunt er bijvoorbeeld voor kiezen om de header alleen voor enkelvoudige berichten te gebruiken. In het venster van onderstaande afbeelding is dit het geval.
Later kan nog gewijzigd worden wanneer de header moet worden geplaatst. Dat kan op het moment dat je je template in Elementor aan het wijzigen bent. In het Display Conditions-venster kun je selecteren via het groene vlakje met het pijltje onderaan in de linker kolom (naast de publiceren/bijwerken knop).
Voorbeeld van headersjablonen
Bij het creëren van een sjabloon van je header kun je eventueel kiezen uit headervoorbeelden die Elementor aanbiedt. Hierna kun je het sjabloon aanpassen, zodat het aan je wensen voldoet.
Eigen headerontwerp
Het is uiteraard ook mogelijk om vanuit het niets een header op te bouwen. Een header creëer je dan op dezelfde manier als andere secties.
Speciale headerblokken
Met Elementor pro kun je kiezen uit extra blokken die je vaak voor een header gebruikt. Zoals een logo, een hamburgermenu en een zoekvak.
Footer ontwerpen
Het vormgeven van de footer gaat op dezelfde manier als het ontwerpen van een header.
Automatische pagina’s vormgeven
Met Elementor Pro kun je ook de pagina’s en berichten vormgeven die standaard door je thema worden samengesteld. In deze blog geven wij twee voorbeelden:
- een overzichtspagina met portfolioberichten;
- het portfoliobericht zelf.
Portfoliobericht vormgeven
Sjabloon voor enkelvoudig bericht aanmaken
Net als bij het maken van de header en footer maak je een sjabloon (template) voor een bericht aan. Dit sjabloon wordt dan automatisch op het bericht toegepast. Zoals bij de header en de footer moet je aangeven wanneer het sjabloon moet worden toegepast. Ook kun je eventueel aangeven voor welk type berichten je het sjabloon wilt gebruiken. In het voorbeeld betreft het portfolioberichten.
Portfolio overzichtspagina opstellen
Ook voor het creëren van een overzicht staan er diverse blokken tot je beschikking. In dit geval hoef je echter geen sjabloon aan te maken, maar ga je direct in de gewenste pagina aan de slag.
Het is het eenvoudigst wanneer je gebruikmaakt van de Posts widget. Hiermee kun je aangeven welk type berichten getoond moet worden. Elementor regelt automatisch de rest voor je.
Vanzelfsprekend kun je onder andere via de Posts-widget ook het overzicht zelf indelen en opmaken.
Style Kits for Elementor-plugin
Met de Style Kits for Elementor heb je nog meer mogelijkheden om de huisstijl van je website aan te passen. Het aantal stijlen dat je standaard wilt toepassen, wordt met deze plugin uitgebreid. Je kunt bijvoorbeeld de afstand tussen de kolommen voor iedere sectie gelijk trekken en je hebt uitgebreidere mogelijkheden om je formulier op te maken.
Werk je met meerdere websites? Dan kun je voor iedere website een aparte groep opmaakstijlen opslaan.
Wanneer je meerdere groepen opmaakstijlen hebt opgeslagen, kun je via het dialoogvenster style kits settings kiezen voor de opmaakstijlen-groep die je wilt gebruiken.
Nu kun je eventueel ook je opmaakstijlen opslaan en exporteren. Zo kun je je stijlen bijvoorbeeld ook op andere websites toepassen.
Reeds aangepaste opmaakwidgets verwijderen
Met de betaalde versie van deze plugin kun je in één keer de opmaakinstellingen die in de widgets zijn ingevuld verwijderen (resetten). Dit kan handig zijn wanneer je voorbeeldsjablonen (templates) van Elementor hebt ingevoegd. In al deze templates zijn diverse opmaakinstellingen reeds ingevuld. En uiteraard kun je deze instellingen meestal een voor een verwijderen. Dit is echter soms nogal arbeidsintensief. Dan is het handig wanneer je meteen met een schone lei kunt beginnen om zo direct naar je eigen huisstijl toe te werken.
In het kort
Door bovenstaande plugins te gebruiken ben je veel minder afhankelijk van het gekozen WordPress-thema. Je kunt je eigen idee vertalen naar een door jou gewenste website. Wél moet worden gezegd dat het een arbeidsintensievere manier van werken betreft. Gaat het je vooral om de inhoud en vind je het niet erg dat je bepaalde onderdelen niet zelf kun vormgeven, kies dan gewoon een thema dat het beste bij je past.
Wil je wél alles zelf kunnen bepalen? Dan kun je aan de slag met de bovenstaande besproken methoden!
Ben je na het lezen van dit artikel enthousiast geworden over het zelf ontwerpen van een website? En wil je graag stap voor stap leren hoe je je eigen huisstijl kan toepassen op een website? Bekijk dan onze cursus WordPress – Website bouwen.