search icon

Viavisia cursussen Wordpress, webdesign, fotobewerking Rotterdam en diverse andere locaties

Cursussen op maat

Afgestemd op jouw wensen of de wensen van het bedrijf.

Trainingen aan huis of incompany trainingen.

Groepstrainingen of individuele cursussen

Bedrijfstrainingen of particuliere trainingen mogelijk. Trainingen gaan altijd door, ook bij 1 cursist.

Cursussen worden gegeven door een trainer met praktijkervaring.

Overzicht WordPress thema's

WordPress thema kiezen niet meer nodig?

Inhoudsopgave

WordPress thema kiezen verleden tijd?

Het kiezen van een WordPress thema kan een hele klus zijn. En heb je eenmaal een thema gekozen, dan bepaalt het thema de uitstraling van je website. Na verloop van tijd kom je er misschien achter dat het gekozen thema toch niet helemaal aan je wensen voldoet.

Wil je zoveel mogelijk zelf bepalen? Minder afhankelijk zijn van een thema? Dan is dit een bericht voor jou.

In dit bericht doe ik uit de doeken hoe je zelf met je eigen ontwerp aan de slag kunt gaan. Hierbij ben je niet afhankelijk van de instellingen van het WordPress thema. Of in ieder geval zo min mogelijk.


Benodigdheden om kiezen van een WordPress thema overbodig te maken

  • Elementor (pagebuilder plugin)
  • Elementor Pro (betaalde uitbreiding op Elementor)
  • Thema stijl Elementor
  • Style Kits for Elementor plugin (optioneel)
  • Thema Hello Elementor (b.v.)
  • Custom CSS via Customizer b.v. (Optioneel, wanneer je thuis bent in CSS)

Elementor plugin

Met een page builder als Elementor kun je, je website zelf indelen en ontwerpen. Zonder kennis van codering kun je, je eigen website vorm geven en ontwerpen naar de gewenste huisstijl.

Je deelt je website in met behulp van secties. En in deze secties plaats je dan weer het gewenste aantal kolommen. In een kolom plaats je vervolgens het door jou gewenste blok. Bij een blok kun je aan de volgende voorbeelden denken:

  • Koptekst
  • Paragraaf
  • Afbeelding
  • Knoppen
  • Een verzameling afbeeldingen (gallerij)
  • Video (ook Youtube, Vimeo enz.)
  • Sociale media berichten van diverse kanalen
  • Enz.

In WordPress wordt zo’n blok een widget genoemd.

De secties en kolommen kun je vervolgens de door jouw gewenste opmaak meegeven. Je kunt bijvoorbeeld zelf de breedte van de kolommen bepalen.

Met Elementor kun je zelfs aan de slag met het z.g.n. responsive ontwerp. Hierdoor is het gemakkelijk om je website te ontwerpen voor een tablet en een smart phone. Ook op deze apparaten kun je aan de slag met je eigen indeling en vormgeving.

Tot slot, maakt Elementor het je gemakkelijker om al je pagina’s en berichten een consistent uiterlijk mee te geven.


Elementor pagebuilder plugin
Elementor dashboard

Elementor Pro plugin

Met de Elementor Pro plugin ga je nog een stap je verder. Met deze plugin kun je zelf de header en footer van je berichten en pagina’s vormgeven en indelen. Ook kun je aan de slag met je eigen ontwerpen voor automatisch gegenereerde pagina’s. De vormgeving van de header en footer en de genoemde pagina’s wordt standaard bepaald door het thema.

Op de besproken manier ben je ook voor de vormgeving van bijvoorbeeld je nieuwsberichten overzicht pagina niet meer afhankelijk van het door het WordPress thema geleverde ontwerp. Hieronder geef ik een opsomming van voorbeelden van “automatisch” gegenereerde pagina’s en secties:

  • De header van een pagina (de bovenste sectie van een pagina of bericht)
  • De footer van een pagina (de onderse sectie van een pagina of bericht)
  • Overzicht nieuwsberichten of andere berichten (b.v. portfolio, reviews)
  • Enkelvoudig bericht
  • Archief pagina’s (De pagina waarop je bijvoorbeeld terecht komt wanneer je berichten van een bepaalde maand of van een bepaald jaar wilt bekijken).
  • Foute pagina (deze wordt aan een bezoeker getoond wanneer hij of zij op een pagina terecht kom die niet bestaat.
  • Enz.

Wil je meer willen weten over pagebuilders in het algemeen en Elementor? Volg dan bijvoorbeeld de training WordPress pagebuilders.


Hello Elementor thema

Om WordPress te laten werken moet je uiteraard toch nog een thema kiezen. Het klinkt een beetje tegenstrijdig met de titel en het onderwerp van dit bericht. Maar zonder thema werkt je website eenvoudig niet. Daarom heb ik gekozen voor een thema speciaal op de Elementor plugin afgestemd.

Het betreft een thema zonder “toeters en bellen”. Alleen het noodzakelijke is in het thema aanwezig. Het voordeel hiervan is, dat het thema minder invloed heeft op de laadtijd van je website. Bovendien is het bij dit thema gemakkelijk om de boven- en onderzijde van de website volledig door de page builder (Elementor pro in mijn voorbeeld) te laten bepalen. De “header” en “footer” kun je dus ook helemaal zelf ontwerpen.

Het thema dient eigenlijk alleen maar voor het tonen van de inhoud. De opmaak, huisstijl, indeling en lay-out van de website wordt volledig overgenomen door de pagebuilder van Elementor.

WordPress Thema Hello Elementor
Een (eenvoudig) Thema voor Hello Elementor

Instellingen Elementor (algemeen)

Eerst ga je aan de slag gaat met de algemene instellingen van Elementor. In dit venster vink je de volgende opties aan:

  • Standaardkleuren uitschakelen
  • Standaard lettertypen uitschakelen

Het klikt misschien niet logisch om deze opties aan te vinken. Elementor lijkt hiermee de kleuren en lettertypes van je thema over te nemen. Maar schijn bedriegt. Elementor heeft namelijk nog een troef in handen. Dit is de zogenaamde thema stijl. Hiermee creëer je een consistente huisstijl. Hierover lees je in de volgende paragraaf meer.

Algemene instellingen Elementor (benodigd om WordPress thema kiezen overbodig te maken)
Het dialoogvenster algemene instellingen Elementor

Thema stijl Elementor

Met de thema stijl van Elementor kun je gemakkelijk de opmaakstijlen die je voor iedere pagina of bericht hetzelfde wil houden aanpassen. Je kunt hierbij bijvoorbeeld denken aan de lettertypes en kleuren. Dat heeft ook een bijkomend voordeel. Wanneer je in het Thema stijl dialoog venster een opmaak aanpast, wordt deze meteen op alle onderdelen waarop deze van toepassing is toegepast. Pas je bijvoorbeeld de lettertypes van je kopteksten aan, dan worden automatisch de kopteksten op alle pagina’s en berichten aangepast.

Thema stijl Elementor (benodigd om WordPress thema kiezen overbodig te maken)
Het thema stijl venster van Elementor

Het thema stijl dialoogvenster is dus de uitgelezen plaats om je website van een consistent uiterlijk te voorzien.


Custom CSS

Custom CSS via customizer (benodigd om WordPress thema kiezen overbodig te maken)
Custom CSS via de customizer

Met de thema stijl editor van Elementor kun je helaas niet alle opmaak van de geplaatste onderdelen “overschrijven”.

Mocht je echter thuis zijn in CSS opmaak code, dan kun je tot op zekere hoogte de opmaakstijlen van de geplaatste widgets toch overschrijven en laten bepalen door de thema stijl editor. In de afbeelding zie je een voorbeeld zoals ik het in het Extra CSS venster van de WordPress customizer heb aangepast.

De opmaakstijlen van sommige widgets kunnen echter (nog) niet worden overschreven. Niet met de theme stijl editor en niet via Custom CSS. In dat geval pas je de opmaak in de widget zelf aan.


Header ontwerpen

Met Elementor kun je tevens je eigen header vormgeven. Je maakt via de Theme builder eerst een header sjaloon aan. Dit sjabloon kun je vervolgens toepassen op de door jou gewenste pagina’s.
(Je vindt de Thema bouwer in het dashboard menu aan de linkerkant onder het menu Templates).

type template kiezen (benodigd om WordPress thema kiezen overbodig te maken)
Header template kiezen en benoemen

Waar moet de header worden geplaatst?

Nadat je het header sjabloon hebt aangemaakt, bepaal je waar de header moet worden geplaatst. Wanneer je voor heel de site dezelfde header gebruikt kies je bijvoorbeeld voor Entire site. In de onderstaande afbeelding geldt de header voor alle (enkelvoudige) pagina’s en berichten.

Voorwaarden template Elementor
Voorwaarden kiezen waarbij header sjabloon geplaatst wordt
Voorwaarden template Elementor kiezen
Voorwaarden voor plaatsing kiezen in editor

De voorwaarden waaraan moet worden voldaan om de header te plaatsen kun je ook later nog aanpassen, wanneer je de template in Elementor aan het bewerken bent. Via het groene vlakje met het pijltje onderaan in de linker kolom (naast de “opslaan” knop) , kun je Display Conditions selecteren.


Voorbeeld sjablonen header

Bij het ontwerpen van je header sjabloon kun je eventueel kiezen uit header voorbeelden uit de bibliotheek van Elementor. Dit sjabloon gebruik je dan als basis. Hierna pas je het sjabloon naar je eigen behoeften aan.

Header templates bibliotheek Elementor
Sjablonen bibliotheek header
Invoegen Header template uit bibliotheek Elementor
Header voorbeeld uit bibliotheek Elementor

Eigen ontwerp header

Je kunt er ook voor kiezen om helemaal vanaf “nul” te beginnen. Het ontwerpen van de header gaat hierbij op dezelfde manier als je gewend bent bij het bewerken van een sectie in Elementor.

voorbeeld eenvoudige (eigen ontwerp) header Elementor Pro
Voorbeeld van een eenvoudig ontwerp van een op maat gemaakte Header

Speciale header blokken

Site widgets Elementor Pro
Widget voor met name de header

Wanneer je Elementor pro hebt geïnstalleerd, kun je kiezen uit extra blokken die je vaak voor een header gebruikt:

  • Een logo
  • Een hamburger menu
  • De titel van de site
  • De titel van de pagina
  • Een zoekvak
  • Enz.

(Uiteraard kun je deze blokken ook voor andere secties op je pagina gebruiken).


Footer ontwerpen

Het ontwerpen van de footer gaat nagenoeg op dezelfde manier in zijn werk, als het ontwerpen van de header.


Automatisch gegenereerde pagina’s ontwerpen

Met Elementor Pro kun je ook de pagina’s ontwerpen die normaal gesproken automatisch door je thema worden opgemaakt en ingedeeld.

In Elementor kun je diverse sjablonen aanmaken voor automatisch gegenereerde pagina’s en berichten:

  • Archief pagina
  • Enkelvoudige pagina
  • Enkelvoudig bericht
  • Foute pagina (wanneer een websitebezoeker op een pagina terecht komt die niet bestaat).
  • Een pagina met de zoekresultaten (na een zoek opdracht)

In dit bericht heb ik 2 voorbeelden verder uitgewerkt: een overzichtspagina met portfolioberichten en het portfolio bericht zelf.

Portfolio ontwerpen

Voor het ontwerpen van een portfolio bericht maak je eerst een sjabloon voor een enkelvoudig portfolio bericht aan.

enkelbericht portfolio aanmaken
Sjabloon portfolio bericht aanmaken
Voorbeeld portfolio elementor
Voorbeeld portfolio bericht
widgets Elementor enkel bericht sjabloon
Widgets voor sjabloon enkelvoudig bericht

Voor het opstellen van een portfoliobericht kies je bijvoorbeeld uit de blokken die speciaal voor enkele berichten zijn bedoeld: de titel van het bericht, de uitgelichte afbeelding enz.

Je kunt je berichten op dezelfde manier maken en bewerken zoals je in WordPress gewend bent. In de editor van WordPress plaats je de “kale” tekst, eventuele afbeeldingen e.d. en de uitgelichte afbeelding. Elementor Pro “genereert” automatisch de inhoud voor je.


Portfolio overzicht pagina ontwerpen

Voorbeeld overzicht portfolio elementor
Een voorbeeld van een overzichtspagina (portfolio)

Ook voor het automatisch plaatsen van berichten, kun je gebruik maken van diverse blokken. Dit keer maak je echter geen sjabloon aan. Je plaatst alles direct op de pagina.

widgets voor het maken van een berichten overzicht (berichten en portfolio)
Speciale Widgets voor overzichtspagina’s (Posts en Portfolio bijvoorbeeld)

Met behulp van de Post widget kun je zelf aangeven welke berichten je wilt weergeven. En uiteraard kun je net als bij alle andere widgets het overzicht naar eigen inzicht vormgeven.


Sjablonen direct in Elementor creëren via de Thema bouwer

Thema bouwer kiezen in menu Elementor
Thema bouwer kiezen

Je kunt de diverse sjablonen ook direct in de editor van Elementor zelf bewerken en aanmaken. Klik op het hamburgermenu van Elementor en kies voor Thema bouwer.

In het dialoogvenster van de Thema bouwer kun je het type sjabloon kiezen: archief pagina, enkelvoudig bericht enz.

Vervolgens kun je wederom kiezen uit diverse sjabloon voorbeelden van Elementor zelf. Of je bouwt het natuurlijk vanuit de grond af op.

Elementor Thema bouwer dialoogvenster
Het dialoogvenster van de themabouwer
instellingen Thema bouwer enkelvoudig bericht
Algemene instellingen enkelvoudig bericht

Ieder type sjabloon heeft ook zijn eigen algemene instellingen venster. Op de afbeelding is deze weergegeven voor een enkelvoudig bericht.


Style Kits for Elementor plugin

Met deze plugin ga je nog een stapje verder, wat betreft het creëren van een consistente huisstijl. De plugin biedt meer opmaakstijlen die je aan kunt passen: bijvoorbeeld wanneer je de afstand tussen de kolommen voor iedere sectie gelijk wilt hebben en in één keer aan wilt kunnen passen.

Style kits for Elementor plugin (optie om WordPress thema kiezen overbodig te maken)
Style kits Plugin: uitbreiding stylesheet Elementor

Wanneer je bijvoorbeeld met meerdere websites werkt, kun je voor iedere website een aparte verzameling opmaakstijlen opslaan. Je maakt dus een bibliotheek van opmaak mogelijkheden aan.

Style Kits overzicht (opmaak sheets)
Verzameling van opmaakstijlen

Via de style kits settings kies je de verzameling opmaakstijlen die je wilt gebruiken.

Style Kits Settings: stijlsheet kiezen
Stijle kiezen via style kits settings
opmaakstyle mogelijkhden gekozen stylekit
Uitbreiding opmaakmogelijkheden

In het Theme Style dialoogvenster is zijn er diverse opmaakstijlen bijgekomen. Hiermee kun je de opmaak voor alle pagina’s en berichten “gelijk trekken”.

Via dit venster kun je ook je opmaak verzameling opslaan en exporteren. Na export kun je de verzameling in een andere website toepassen.


Samenvatting

Met bovenstaande methode behoort het kiezen van een WordPress thema (bijna) tot de verleden tijd. Op de beschreven manier kun je, je eigen creatieve ideeën omzetten naar een werkende website.

Verder zoeken op basis categorieën?

Kijk ook op de website van Viavisia Webdesign

Onlangs heb ik bij Peter een cursus fotobewerking gevolgd. Met veel ervaring, logische opbouw en geduld heeft hij mij langs alle facetten van de afzonderlijke onderdelen geloodst. Peter heeft een fijne manier van begeleiden en ik ben zeer blij met de resultaten.

Flossie d’Hont, Zelfstandig psycholoog – Florisand Consultancy

Ik heb onlangs een cursus Photoshop Elements bij Peter gevolgd. Hij heeft kennis van zaken, is geduldig en geeft je precies de aandacht die jij – in jouw tempo – nodig hebt. Kortom, zijn aanpak is persoonlijk, plezierig en prettig en –heel belangrijk – hij heeft er lol in om zijn expertise over te brengen aan zijn cursist en/of het programma af te stemmen op de behoefte van de klant.

Esther Janssen, Allround communicatieprofessional

Wil je ook graag je eigen website aanpassen in WordPress maar zie je op tegen de zogenaamde ‘makkelijke’ methode via WordPress? Peter Buijs is de man die je nodig hebt. Hij ontwikkelt diverse WordPress-cursussen in groepsverband of 1-op-1. Die laatste heb ik met studio Rooijaal aangevraagd. Peter kwam bij mij thuis en samen hebben we in 3 uur alle basiseigenschappen van het programma bekeken en geoefend. Na zijn bezoek kon ik de hele site zelf aanpassen. Hoe fijn en een GROTE zorg minder!!

Linda Rooij, Grafisch vormgever

Tijdens de workshops van Peter Buijs over WordPress en SEO viel het me telkens weer op: Peter weet ongelooflijk veel van deze onderwerpen af, want hij laat geen vraag onbeantwoord. Hij heeft aandacht voor iedereen, waardoor hij uiterst geschikt is voor het geven van één-op-ééncursussen. De follow-up is ook fantastisch: naderhand ontvang je een door hem samengestelde handleiding, die hij met enige regelmaat bijwerkt. Je weet: deze man is gedreven en geduldig. Hij draagt zijn kennis graag over en heeft hart voor zijn cursisten. Kortom: boek een één-op-één, laat je onderdompelen in zijn kennis en pluk er de vruchten van – nu en nog lang daarna!

Bianca Wijnstekers-Handy, Beëdigd juridisch vertaler