Trainingshandleiding – PowerKraut Blocks Trainingshandleiding – PowerKraut Blocks

Jouw online handleiding voor de

CMS & Content Training

Jouw online handleiding voor de

CMS & Content Training

Aan de slag met WordPress

Welkom bij WordPress en PowerKraut Blocks. In deze handleiding vertellen we je alles wat je moet weten over het Content Management Systeem WordPress en hoe PowerKraut dit verrijkt met kennis van de mobiliteitsbranche. We starten met uitleg over WordPress zelf en hoe je alle functionaliteiten vanuit het hoofdmenu gebruikt op jouw (nieuwe) website. In het hoofdstuk daarna gaan we in op het creëren van je eigen pagina’s en content met behulp van (PowerKraut) blocks in de Gutenberg editor. Als laatste laten we zien hoe je zelf templates (patronen) kunt maken, zodat je slim en efficiënt kunt werken.

Vergeet niet om je te abonneren op onze nieuwsbrief, dan mis je geen enkele update!

In dit hoofdstuk

Wat is WordPress?

WordPress is het systeem waarop jouw website draait en waarmee je jouw website kunt bouwen en onderhouden. Het is wereldwijd het meest gebruikte Content Management Systeem. Ongeveer 43% van alles website maakt gebruik van WordPress, waaronder grote bedrijven als CNN, Spotify Newsroom, The Walt Disney Company en Sony.

Voordelen van WordPress

  • WordPress is gratis (m.u.v. maatwerk modules en plugins)
  • WordPress is vrij gebruiksvriendelijk
  • Je kunt je paginadesigns zelf naar wens aanpassen
  • Voor bijna elk stukje functionaliteit op een website bestaat er een plugin die je gratis kunt installeren
  • WordPress is zoekmachine vriendelijk

Inloggen

Inlogscherm WordPress
Inlogscherm van WordPress

Om in te loggen ga je naar jouw website met daarachter /admin (bijvoorbeeld jouwwebsite.nl/admin). Daar zie je een inlogscherm. Vul hier jouw gebruikersnaam en wachtwoord in en klik op ‘Inloggen’. Vink ‘Onthoud mij’ aan om eenvoudig in te loggen voor de volgende keer.

Berichten

Startpagina van WordPress

Na het inloggen kom je terecht op de dashboardpagina. Daar hoef je verder niets mee te doen. We starten bij het eerste handige item in het menu: Berichten. Via deze pagina kun je jouw website voorzien van nieuwsberichten of blogs.

Overzicht berichten

Als je op berichten klikt zie je het volgende overzicht. Elk bericht dat je nieuw toevoegt komt in dit overzicht te staan. Vanuit dit overzicht kun je de bestaande berichten ook bewerken door op de berichttitel te klikken.

  1. Klik op de knop om een nieuw bericht te plaatsen.
  2. Klik op de titel om een bestaand bericht te bewerken.
Instellingen berichten

Links in beeld zie je een lege pagina indien je een nieuw bericht toevoegt of een gevulde pagina indien je een bestaand bericht bewerkt. Aan de rechterzijde staan de instellingen van je bericht. Zo kun je onder andere:

  1. Bericht koppelen aan categorie(ën). Hierop zijn filters toe te passen voor bijvoorbeeld nieuwsoverzichten.
  2. Upload hier een afbeelding die zichtbaar wordt op overzichtpagina’s.
  3. Voeg een samenvatting van je bericht of blog toe. Ook dit kom terug op een overzichtstegel.
  4. Hoort jouw bericht specifiek bij een bepaald merk of bedrijfstak? Vink deze aan zodat ze enkel binnen die omgeving te zien zijn.

Media

Overzicht media

Alle items die jij op pagina’s upload worden opgeslagen in de mediabibliotheek van jouw website. Het volledige overzicht kun je vinden in het menu door op ‘Media’ te klikken. Ook hier kun je los items uploaden.

Type bestanden

Waarschijnlijk zul je in jouw mediabibliotheek vooral afbeeldingen van verschillende bestandstypes terugvinden (jpg, png, webp, gif). Ook kun je video’s uploaden, maar denk ook aan bijvoorbeeld PDF bestanden. Op die manier kunnen je bezoekers een PDF openen als pagina als je dit PDF bestand koppelt als link aan een knop.

Advies voor formaat, bestandsgrootte en resolutie

Er zijn een aantal blocks in de Gutenberg Editor waarbij een bepaald formaat vereist is, omdat deze afbeeldingen bijvoorbeeld terugkomen in een grote galerij. In dat geval staat op de plek waar deze afbeeldingen geüpload dienen te worden aangegeven wat de minimale grootte dient te zijn. Kleinere afbeeldingen vanuit de mediabibliotheek zijn daar ook niet beschikbaar voor plaatsing.

Om jouw pagina’s zo snel mogelijk te laten laden dienen je afbeeldingen qua bestandsgrootte zo klein mogelijk te zijn. Hoe groter je afbeelding, hoe groter het aantal kb’s/mb’s. Op onze systemen draait WP Smush Pro. Dit is een hulpmiddel die afbeeldingen automatisch comprimeert, zodat jouw pagina’s sneller kunnen laden. Houd verder rekening met het volgende:

  • Bedenk waar en hoe groot je de afbeelding wil tonen. Voor een grote afbeelding (bijvoorbeeld een headervisual) dient je afbeelding minimaal 1920 pixels breed te zijn, zodat deze ook op schermen groter dan een laptop voldoende van kwaliteit zijn. Weet je van tevoren dat je een afbeelding veel kleiner zal toepassen, dan kun je daar met je upload al rekening mee houden. Voor een foto van een medewerker die enkel in een overzicht te zien is heb je bijvoorbeeld aan 640×360 pixels al voldoende.
  • Houd rekening met het aantal dpi (dots per inch). Voor websites is het gebruikelijk dat een afbeelding voorzien is van 72 dpi, voor drukwerk is dit 300 dpi. Dit betekent dat foto’s voor drukwerk dus meer dan 3x zoveel ‘puntjes’ per pixel dienen te hebben. Tegelijkertijd houdt dit in dat qua bestandsgrootte een drukwerkafbeelding veel meer mb’s is dan een reguliere webafbeelding. Let dus op dat je niet direct foto’s van drukwerk rechtstreeks uploadt. Er zijn online converters beschikbaar om jouw afbeelding naar een lagere resolutie te zetten, bijvoorbeeld convert.town/image-dpi. Je kunt dit ook eenvoudig aanpassen met Photoshop.
Details van mediabestand

Klik je op één van de items in de mediabibliotheek dan zie je bovenstaand venster. Daarin staat gedetailleerde informatie over het mediabestand en kun je alternatieve teksten toevoegen, net als bijschrift en beschrijving. Het bestand is ook te downloaden naar jouw computer via de opties rechts onder.

Formulieren

Alle formulieren op jouw pagina’s vind je terug onder het menu-item ‘Formulieren’. PowerKraut gebruikt voor formulieren op jouw website een plugin genaamd Gravity Forms. Dit is een extra hulpmiddel waarmee je zelf een formulier in elkaar kunt klikken. Binnenkor meer hierover.

Pagina’s

Alle pagina’s van jouw website vind je via het menu-item ‘Pagina’s’. Er zijn enkele uitzonderingen, denk dan aan de pagina’s die je bij Berichten hebt aangemaakt of pagina’s van de voorraadmodule. Alles wat je zelf kunt bewerken is in het pagina overzicht in ieder geval beschikbaar.

Overzicht media

In het overzicht kun je kiezen voor een sortering op basis van titel (alfabetisch) en datum. Klik dan op ‘Titel’ en op ‘Datum’ bovenin de tabel. Wil je de omgekeerde weergave, dus van Z naar A of van oud naar nieuw, klik dan een tweede keer op de kolomtitel.

Overige opties

Ga je met je muis over een paginatitel, dan verschijnen er enkele links onder de titel. Je kunt niet alleen een pagina bewerken, maar ook het voorbeeld (dus het eindresultaat) van de pagina bekijken. Een andere optie is om de pagina te dupliceren. Er wordt dan een kopie van de pagina gemaakt, maar wel als concept, zodat deze niet direct gepubliceerd wordt. Dit is een zeer handige optie die je een hoop tijd bespaard. Het wiel hoeft immers niet opnieuw uitgevonden te worden.

Nieuwe pagina

Klik op ‘Nieuwe pagina’ en bovenstaande weergave is te zien. Daarin een aantal basiselementen en ruimte voor alle instellingen.

Pagina instellingen

Alle instellingen voor jouw pagina vind je in de rechterbalk. Zie geen balk aan de rechterzijde, klik dan boven in de pagina op het icoon (met zwart vlak erachter) naast de ‘Publiceren’ knop. Op deze manier toon of verberg je de instellingen. Wat kun je vervolgens allemaal instellen:

Vestigingen

Klik in het hoofdmenu op ‘Vestigingen’. De kans is vrij groot dat wij al één of meerdere (voorbeeld)vestigingen voor je hebben aangemaakt. Net als berichten en pagina’s kun je ervoor kiezen om een nieuwe toe te voegen, via de knop ‘Toevoegen’ of je kiest ervoor om een bestaande vestiging te bewerken.

Openingstijden

De openingstijden van de vestiging kunnen ingevuld worden op drie verschillende manieren. Via de tab ‘Standaard openingstijden blok’ kun je voor zowel je showroom als je werkplaats specifieke standaardtijden invullen (de meest gebruikelijke). Vul die tijden in bij Blok 1. Wil je de tijden opsplitsen door bijvoorbeeld lunchpauzes eruit te halen, dan gebruik je de velden van Blok 1 voor 08:00 – 12:00 uur en Blok 2 voor 13:00 – 17:00 uur. Dit is een optie, dus enkel Blok 1 invullen volstaat.

De tweede tab ‘Openingstijden dagelijks’ selecteer je voor elke dag of je showroom en/of werkplaats gebruik maakt van de ingevulde standaardtijden of dat ze eventueel afwijken voor bijv. avondopening of weekenddagen. Kies bij de uitzonderingen voor ‘Aangepaste openingstijden’ en herhaal de stappen van de eerste tab. Natuurlijk is ‘Gesloten’ ook nog een optie.

De derde tab ‘Openingstijden uitzonderingen’ vul je in voor de bijzondere dagen in het jaar, zoals Paasdagen en Kerstdagen. Klik op de knop ‘Nieuwe regel’ om letterlijk een nieuwe regel aan het tijdensysteem toe te voegen. Kies de desbetreffende datum in het eerste veld. Selecteer ‘Gesloten’ of kies voor een ‘Aangepaste tijd’. Hier herhaal je de bovengenoemde stappen voor de nieuwe tijdstippen. Vul als extra toelichting voor je bezoeker eventueel een opmerking toe over de reden achter de aangepaste opening. Dit is echter niet verplicht.

Adresgegevens

Bij het onderdeel ‘Vestiging’ staan diverse velden waarin de adres- en contactgegevens van je vestiging kunnen worden ingevuld. Pagina’s die zijn gekoppeld aan het posttype ‘Vestigingen’ kunnen dynamische informatie inladen, waaronder deze adresgegevens. Je hoeft bij een wijziging dus enkel hier de gegevens van je vestiging aan te passen en het wordt automatisch op elke pagina geupdate.

Aan de rechterkant kun je een afbeelding uploaden bij ‘Uitgelichte afbeelding’. Deze afbeelding wordt in overzichten in tegels getoond.

Klaar met het aanmaken van je nieuwe vestigingen of het bewerken van een bestaande? Vergeet niet rechts bovenin de pagina op de blauwe ‘Publiceren’ of ‘Update’ knop te klikken.

Acties

Klik in het hoofdmenu op ‘Acties’. Mogelijk zijn er al actiepagina’s door ons ingesteld. Indien dit niet het geval is kun je via je knop ‘Toevoegen’ nieuwe acties creëren.

Wanneer gebruik je acties?

De actiemodule is erop ingericht dat je acties maakt voor bijvoorbeeld een bandenwissel of een algemene zomercampagne. Voor beide creëer je een landingspagina waarin de actie zelf kan worden uitgelegd, je de bezoeker de extra voordelen van deze actie toont, de hoeveelheid korting die wordt gegeven of een overzicht of slider van de deelnemende modellen toevoegt. Een actieformulier plaatsen kan natuurlijk ook.

Toevoegen nieuw actie

Geef jouw actie een ‘Titel’ bovenaan de pagina. Upload vervolgens een bijpassende afbeelding (voor in overzichten), plaats een titel en eventuele subtitel die in de overzichtstegels wordt geplaatst en pas indien gewenst actielabel en knoptekst aan.

Klik dan op de tab ‘Prijzen’. Door hier prijzen in te vullen wordt automatisch een label op de tegel getoond met het verschil tussen de oude en nieuwe prijs: het voordeelbedrag. Een campagne voor de hele range? Kies bijvoorbeeld voor de goedkoopste prijsvariant. Of degene met het hoogste voordeelbedrag. Bedenk dan wel goed welke actielabels je plaatst (Voordeel tot…).

Koppel in de balk rechts de eventuele merken waar de actie aan gekoppeld dient te worden.

Klaar? Publiceer dan je pagina.

Creëer de pagina

De actie is nu aangemaakt. Dit betekent dat je bij ‘Pagina’s’ een nieuwe pagina kunt toevoegen. Deze koppelen we in de balk rechts bij Posttype link aan onze nieuwe actie. Kies bij ‘Soort’ voor ‘Acties’. Kies bij ‘Relatie’ de titel van je actie.

Medewerkers

Nieuwe medewerkers

Voor je begint met het toevoegen van medewerkers is het handig om eerst te weten welke functies er allemaal getoond moeten komen. Medewerkers kunnen daar namelijk aan worden gekoppeld, zodat op functie kan worden gefilterd in de weergave. Voeg dus eerst de functies toe. Dan hoef je dat niet achteraf bij elke medewerker toe te voegen.

Functie toevoegen

Medewerker toevoegen

Medewerker toevoegen

Medewerkers tonen in jouw pagina

Het tonen van medewerkers in je pagina doe je door op je pagina een Grid- of Sliderblok te plaatsen. Bij type kies je vervolgens voor ‘Medewerkers’.

Modellen

Bij het menu-item Modellen kan alle informatie over jouw modellen worden gevuld. Het gaat hier specifiek om merk- en modelnamen, een overzichtsafbeelding, eventuele subtitels en knoptekst voor in modeltegels, en prijzen.

Waarom hebben wij deze informatie gescheiden van de volledige paginaopmaak? Je kunt op deze manier eenvoudig prijzen van modellen updaten. Op elke pagina waar dat model gekoppeld staat zal deze prijswijziging direct worden geupdate. Je beheert de belangrijkste elementen van een model dus enkel vanuit deze plek op je website. Dat scheelt een hoop prijzen handmatig updaten.

Nieuw model toevoegen
Prijzen wijzigen

Een modelpagina maken

Zoals beschreven in Posttype link maken kun je een model koppelen aan een pagina. Om een modelpagina te creëren ga je naar Pagina’s en creëer je een nieuwe pagina en koppel je deze aan het posttype ‘Modellen’ en bij relatie kies je een model naar keuze. En klaar, de koppeling is gemaakt, nu kan de paginalayout voor het model helemaal worden vormgegeven zoals je zelf wilt.

Vacatures

Bij het menu-item Vacatures kan alle informatie over jouw vacatures worden gevuld. Net als alle andere menu-items krijg je bij vacatures ook een overzicht te zien en de mogelijkheid om een nieuwe vacature toe te voegen.

Overzicht van vacatures

Klik op de knop toevoegen om een nieuwe vacature aan te maken.

Prijzen wijzigen

Een vacaturepagina maken

Lease modellen

Voor Private Lease hebben we diverse koppelingen met o.a. Mitsubishi, Renault, Dacia en Alpine om het bijhouden van prijs en gegevens eenvoudiger te maken. Voor overige merken kun je ook gebruik maken van de import en export functie. Op die manier wordt het vullen veel eenvoudiger dan wanneer je dit in het CMS doet.

Importbestand private lease modellen

Bestand importeren

Heb je de configuratie voor één uitvoering van een model klaar staan, maar heb je verschillende uitvoeringen van een model? Kopieer dan alle regels van de vorige uitvoering en plak deze direct eronder. Verander de naam van de uitvoering en indien afwijkend kun je de prijs en specificaties ook verder updaten voor de nieuwe uitvoering.

Na het uploaden van je bestand zijn alle uitvoeringen toegevoegd aan het systeem en gekoppeld aan de juiste modellen. Onder het menu-item ‘Alle lease modellen’ zie je de modellen die zijn toegevoegd. Als je deze bewerkt kun je nog een afbeelding van het model uploaden, zodat er in alle modeltegels een afbeelding zichtbaar is. Hetzelfde geldt voor uitvoeringen, deze vind je bij het menu-item ‘Alle lease uitvoeringen’.

Een leasepagina maken

Gutenberg patronen

Bij het menu-item Gutenberg patronen vind je de patronen die PowerKraut tijdens de installatie heef klaargezet. Natuurlijk kan het ook zijn dat er nieuwe patronen zijn toegevoegd die je zelf hebt aangemaakt.

Let op, deze functie is een aantal jaar terug door PowerKraut geïntroduceerd om het opzetten van eigen templates te vereenvoudigen en het bouwen makkelijker te maken. WordPress heeft sinds 2024 hun eigen vorm van Patronen geïntroduceerd. Vanaf dit moment wordt het creëren van patronen via dit menu-item dan ook niet meer ondersteund, maar kun je de patronen die daarin staan nog wel invoegen en wijzigen. Meer informatie over de nieuwe manier van patronen creëren vind je in de link hieronder.

Tijdlijnen

Elke website is voorzien van een speciaal blok om content via tijdlijnen weer te kunnen geven. Handig om toe te passen voor de historie van het bedrijf, maar ook voor de aankondiging van evenementen of nieuwe modellen in de toekomst. De tijdlijn werkt namelijk twee kanten op, zowel naar het verleden als naar de toekomst.

Tijdlijn overzicht
Tijdlijn item maken

Tijdlijn blok plaatsen op een pagina

Om de tijdlijn op jouw pagina te tonen kies je de gewenste pagina en plek voor dit blok. Vervolgens voeg je het blok ‘Tijdlijn blok’ toe.

Tijdlijn instellen

Pagina menu

Jouw website is voorzien van een hoofdmenu. Daarin staan de belangrijkste menu-items van jouw bedrijf of van de merkenomgeving. Het is ook mogelijk om naast dat menu een submenu op specifieke pagina’s te plaatsen. Dit kan handig zijn als je pagina’s met veel informatie hebt waarin het handig is om via dit menu snel naar een bepaald onderdeel te scrollen.

Je kunt qua inrichting kiezen voor twee mogelijkheden als je een pagina menu toevoegt. Een variant die volledig is ingericht op één specifieke pagina, met specifieke links en ankers naar informatie op die pagina. Deze variant is dus enkel toe te passen op één pagina. De andere optie is het creëren van een variant voor meerdere pagina’s die dezelfde opbouw hebben. Zorg er dan voor dat de opbouw van je pagina altijd matcht met de menu-items in je pagina menu. Geef informatie dezelfde naam als html anker, zorg ervoor dat links generiek zijn en niet specifiek.

Een voorbeeld van deze variant is een pagina menu voor modellen. Op jouw modelpagina maak je html ankers aan voor bijvoorbeeld ‘Prijzen’, ‘Voorraad’, ‘Foto’s’ en ‘Interesse’. Dit doe je door het element Groep of de titel van dit onderdeel via het menu rechts een html anker te geven (onder Geavanceerd). In het pagina menu creëer je dan links die als anker werken (selecteer Anchor). Gebruik dezelfde namen, maar dan met een # ervoor, dus #prijzen, #voorraad enzovoort.

Pagina menu maken

Pagina menu plaatsen op een pagina

Om het pagina menu op jouw pagina te tonen kies je de gewenste pagina en plek voor dit blok. Vervolgens voeg je het blok ‘Pagina menu’ toe.

Pagina menu plaatsen