WordPress Elementor handleiding

Website handleiding

Welkom bij onze WordPress Handleiding! In deze handleiding vind je alle informatie die je nodig hebt om de ‘achterkant’ van jouw website te begrijpen en wijzigingen te kunnen aanbrengen. Je vindt hier informatie over WordPress, Elementor, Cachegeheugen, WooCommerce en Vertalen met WPML. Mocht je na het doornemen van de handleiding nog vragen hebben, neem dan gerust contact met ons op.

WordPress

De website is gemaakt in WordPress, dit is een open source softwaresysteem. Dit betekent dat WordPress voor iedereen te gebruiken is.

WordPress is het grootste CMS systeem dat er op dit moment bestaat. Omdat WordPress zo groot is komen bijna alle webbouwers het tegen en kunnen hier dus mee werken. Ook wordt ieder probleem wat zich voordoet snel opgelost, omdat er zoveel mensen mee gemoeid zijn. 

WordPress bestaat uit twee delen:

  1. De backend (de achterkant waar jullie de pagina’s kunnen indelen en de website kunnen bijhouden).
  2. De frontend (wat de bezoeker ziet wanneer hij de website bekijkt). 
studio campo backend handleiding
1. Backend
2. Frontend

WordPress inloggen

Om in te loggen op de website ga je naar jouwdomein.nl/wp-admin. Log hier in met de inloggegevens die u van ons heeft ontvangen. Wanneer jullie zijn ingelogd kunnen jullie zelf meer accounts aanmaken, zie Gebruiker aanmaken helemaal onderaan de handleiding.

WordPress dashboard

Wanneer je bent ingelogd, kom je terecht in het dashboard van de backend van de website. Op het dashboard is veel te zien, maar alles wat je nodig hebt staat in het menu aan de linkerkant van de pagina. Verder staan er bovenaan de pagina nog een aantal nuttige knoppen:

  • Bovenaan staat de knop Website Naam, via deze knop kun je de website bekijken.
  • Door middel van de zwarte balk bovenaan de website, kun je vanaf de frontend snel naar de Elementor Page builder via de knop Bewerken met Elementor of (als deze knop er niet staat) door te kiezen voor Pagina bewerken en in de pagina te kiezen voor Bewerken met Elementor.
  • Je kunt weer terug door links bovenin op het menu-icoon te klikken en te kiezen voor Pagina bekijken.

Nieuwe pagina

Een pagina moet eerst aangemaakt worden in WordPress en kan vervolgens in Elementor gevuld worden, dit kan op onderstaande manier:

  • Ga in de backend naar Pagina’s en kies voor Nieuwe pagina.
    Vul vervolgens de Paginatitel (bovenaan), titel voor in het paginaoverzicht en het menu in.
  • Vervolgens kan de Permalink (url) van de pagina aan de rechterkant aangepast worden onder Document / Permalink.
  • Onderaan de pagina staat een SEO blok van Yoast SEO, hier meer informatie over het invullen hiervan.
  • De uitgelichte afbeelding onder het tabje Sociaal kan gebuikt worden voor het geval de pagina op social media gedeeld wordt, deze afbeelding zal dan automatisch als thumbnail getoond worden.
  • Wanneer je hiermee klaar bent klik je op de blauwe button Update (de eerste keer staat hier Publiceren).
  • Vervolgens kun je kiezen voor Bewerken met Elementor en kun je de pagina vullen in de Elementor page builder.
  • Omdat je nieuwe pagina nu nog leeg is, kun je een andere pagina openen in Elementor en hier de Elementen uit kopiëren/plakken of een template van de pagina maken en deze in de nieuwe pagina plaatsen. Je kunt ook zelf widgets toevoegen en deze stijlen, maar we raden aan zo veel mogelijk te kopiëren van bestaande elementen zodat er een lijn in de website blijft.

Post/bericht plaatsen

  • Ga in de backend van de website naar Berichten (of naar bijvoorbeeld Cacatures, Projecten of Portfolio als je deze nodig hebt).
  • Kies hier voor Nieuw bericht.
  • Vul de titel en de tekst in en publiceer de blog met de blauwe knop Publiceren. Deze onderdelen worden vervolgens in het template gegoten wat wij al hebben gemaakt in de achterkant van de website.
  • In het menu aan de rechterkant moet nog een uitgelichte afbeelding toegevoegd worden. Deze afbeelding wordt in het (berichten)overzicht getoond.
  • Mocht je bijvoorbeeld een knop toe willen voegen kan een bericht ook in Elementor bewerkt worden, zodat je gebruik kunt maken van de Elementor widgets. Ook hier kun je Elementen uit eerder gemaakte pagina’s in plakken.

    Berichten overzicht:

    • De blogs kunnen in de backend teruggevonden worden in het menu onder Berichten.
    • Wanneer een bericht is aangemaakt kan deze opgezocht worden in de frontend en bewerkt worden door hier te kiezen voor Bericht bewerken.

    Yoast SEO

    Onderaan iedere pagina, bericht of Event kan de SEO ingevuld worden in het vak Yoast SEO.

    1. Klik op Edit snippet en vul vervolgens de meta-omschrijving in. Dit is de kleinere tekst die Google weergeeft onder de dikgedrukte titel.
    2. Vul vervolgens een Focustrefwoord in (hier gaat Google op zoeken).

    Het is belangrijk dat het Focustrefwoord voorkomt in de:

    • Meta-omschrijving
    • Paginatitel
    • Eerste alinea van de pagina
    • Naam van een uitgelichte afbeelding

    Gebruiker aanmaken

    Mocht je een extra gebruiker aan willen maken, dan kan dit in het menu van de backend onder Gebruikers. Wanneer je bovenaan de pagina kiest voor Nieuwe gebruiker toevoegen kun je de gegevens van de nieuwe gebruiker invullen, let hierbij op het volgende:

    • Zorg dat de gebruikersnaam in één keer goed is. Deze kan later niet meer veranderd worden.
    • Het e-mailadres moet juist zijn, hierop kan het wachtwoord later namelijk opnieuw aangevraagd/gewijzigd worden.
    • Je kunt ervoor kiezen de nieuwe gebruiker een e-mail te sturen met de gebruikersnaam en de optie om zelf een wachtwoord aan te maken. Deze e-mail kan in de spam terechtkomen.
    • Een andere optie met het wachtwoord is het vinkje uitzetten. Wanneer je hiervoor kiest zie je het wachtwoord later niet meer terug, het is dus handig om dit wachtwoord alvast ergens op te slaan.
    • Zorg dat het wachtwoord een sterk wachtwoord is!
    • Het is belangrijk dat de gebruiker de rol Beheerder heeft, anders kan hij niet alles in de achterkant van de website bekijken en aanpassen.

    Beelden website

    1. Ga in de backend naar Media.
    2. Hier staan alle bestanden die zich op de website bevinden, denk hierbij aan afbeeldingen, video’s en PDF-bestanden.
    3. Hier kun je zoeken op naam of eventueel alleen de beelden van de laatste maand laten weergeven.
    4. Vul altijd een alt-tekst in bij een afbeelding die slaat op de titel van de afbeelding en op de pagina waar deze afbeelding te zien is. Ook dit zal helpen bij de vindbaarheid van de website.

    PDF uploaden

    Als je een link naar een eigen pdf-bestand wilt maken kan dit op onderstaande manier:

    1. Ga in de backend naar Media.
    2. Sleep je pdf in de media en geef deze een titel en alt-tekst.
    3. Kopieer vervolgens de Bestand URL en plak deze in de tekst of afbeelding die naar de pdf moet linken.

    Zorg altijd dat de pdf-bestanden niet te groot zijn voordat je deze in de media plaatst. Gebruik eventueel een online converter als smallpdf.com om de pdf te verkleinen.

    Elementor

    Binnen WordPress maken we gebruik van de page builder Elementor. Het voordeel van Elementor is dat het een frontend page builder is. Dit betekent dat je de aanpassingen direct in de voorkant van de website kan doen. Hierdoor zie je ook direct wat er verandert wanneer je iets wijzigt.

    Elementor Page builder

    Elementen/widget overzicht
    In de Elementor page builder staan aan de linkerkant alle widgets waar je uit kunt kiezen om de pagina uit op te bouwen. Je kunt de widgets vanaf het overzicht slepen naar waar je deze in de pagina wilt gebruiken.

    Als je een widget al eerder gebruikt hebt, kun je de nieuwe daar beter vandaan kopiëren/plakken, zodat hij gelijk is aan de eerder gebruikte widget.

    Secties, kolommen en widgets/elementen
    Iedere pagina is opgebouwd uit horizontale secties die onder elkaar geplaatst worden. Deze secties hebben een blauwe omlijning wanneer je er overheen gaat.

    In iedere sectie staan kolommen, deze zijn te herkennen aan de grijs witte stippellijn. Een sectie kan meerdere kolommen bevatten welke (behalve op de mobiele weergave) altijd naast elkaar staan.

    In een kolom kunnen widgets (elementen) geplaatst worden. Deze kun je uit het widget overzicht slepen of kopiëren van een andere plek uit de website.

    Verwijderen, dupliceren, nieuwe toevoegen en verslepen
    Het verwijderen van elementen kan door middel van de rechtermuis.

    1. Beweeg met je muis over het onderdeel dat je wilt verwijderen. Deze onderdelen worden aangeduid met blauwe- of stippellijnen. 
    2. Klik op de rechtermuisknop. Nu verschijnt er een optie-menu.
    3. Kies onderaan het menu Verwijderen selecteren.

    Op dezelfde wijze kun je elementen kopiëren, dupliceren en plakken.

    Layout (inhoud), Style (stijl) en Advanced (geavanceerd)
    Layout
    (inhoud):
    Geeft aan waar een element (tekst, knop, afbeelding, blog enz.) uit bestaat. Hier wordt dan ook de basis en benodigde informatie ingevuld. Bij een tekst module zal dit inderdaad tekst zijn en voor een galerij module de afbeeldingen.

    Style (stijl):
    Hier kun je bijvoorbeeld de hoogte/breedte van een element aanpassen. Kleuren, lettertype, lettergrootte randkleur, achtergrondkleur of afbeelding. Elke module heeft zo zijn eigen stijlen die je kunt aanpassen.

    Advanced (geavanceerd):
    Onder dit tabje is het mogelijk om voor de sectie, kolom of widget uitgebreide instellingen aan te passen. Niet alle instellingen zijn voor elk element beschikbaar.

    • Marge: stel de sectiemarge in.
    • Padding: stel de sectiemarge in.
    • Z-index: stel de Z-Index in. Hoogte of diepte van een element.
    • CSS-ID: stel een CSS-ID in voor de sectie.
    • CSS-klassen: stel CSS-klassen in voor de sectie.

    Bewegingseffecten:

    • Sticky: stel de sectie in als Sticky en kies tussen Top of Bottom.
    • Scrolling-effecten: stel Scrolling-effecten in op Aan om te kiezen uit een verscheidenheid aan animaties en interacties die kunnen optreden wanneer de gebruiker door de pagina scrolt.
    • Entree-animatie (Inkomende animatie): klik op de vervolgkeuzelijst om een animatie te kiezen.

    Achtergrondtype:

    • kies tussen Klassiek of een Verloop van kleuren.
      Klassiek geeft de optie om 1 vaste kleur te kiezen of de optie om een achtergrondplaatje te selecteren via de mediabibliotheek.

    Border (rand)

    • Randtype: selecteer het type rand en kies uit geen, effen, dubbel, gestippeld, onderbroken of gegroefd.
    • Border Radius: stel de randradius in om de ronding van de hoeken te bepalen.
    • Box Shadow: pas de opties voor boxschaduw aan.

    Responsive

    • Kolommen omkeren: schuif om de volgorde van de kolommen om te keren (ideaal voor mobiel).
    • Zichtbaarheid: toon of verberg de sectie op desktop, tablet of mobiel
      Attributen (alleen Pro).

    Desktop, tablet en mobiele weergaven

    Schakel tussen desktop-, mobiele- of tablet-weergaven door op de bijbehorende pictogrammen onder aan het paneel te klikken. 

    Dit geeft je de mogelijkheid om je website te bekijken in desktop, tablet en mobiele weergaven. Wijzigingen die je aanbrengt op de desktop, mobiele en tablet weergaven worden grotendeels onafhankelijk opgeslagen. 

    Help! Ik heb iets veranderd terwijl ik in de mobiele preview was, en het veranderde ook op het bureaublad! Waarom?

    • Je kan een element (widget, kolom of sectie) niet verwijderen, terwijl je een voorbeeld van één modus bekijkt (bijvoorbeeld mobiel) en verwachten dat het alleen wordt verwijderd van dat type apparaat. Als je elementen verwijderd, worden ze op alle apparaten verwijderd. Je kan echter de functie Responsieve zichtbaarheid van het element gebruiken door naar het tabblad Geavanceerd> Responsief van het element te gaan en een van de zichtbaarheidsopties in te schakelen (Verbergen op desktop, Verbergen op tablet of Verbergen op mobiel). Hoewel het element op die apparaten niet wordt verwijderd, wordt het wel verborgen.
    • Je kan elementen niet verplaatsen terwijl je een voorbeeld van één modus bekijkt. Als je elementen in elke voorbeeldmodus verplaatst, worden ze op alle apparaten verplaatst. Een uitzondering hierop is de functie Sectie> Geavanceerd> Responsive > Omgekeerde kolommen, die kolommen wel naar hun omgekeerde positie verplaatst.

    Elementor Templates
    Je kunt Elementor secties hergebruiken door deze te kopiëren en verder op de pagina te plakken. Dit kun je doen door met je rechtermuisknop op een element te klikken, deze te kopiëren en weer op de gewenste positie te plakken.

    Een andere optie is om secties op te slaan als een template, zie onderstaand:

    1. Klik met je rechtermuis op het blauwe icoon bovenaan een sectie.
    2. Selecteer Als template opslaan.
    3. Geef je template een naam en klik op Opslaan.
    4. Templates kun je weer oproepen door op het blauwe icoon te klikken met een + icoon. 
    5. Klik op het + icoon.
    6. Klik op het map icoon. 
    7. Klik op mijn templates.
    8. Selecteer het template wat je zojuist een naam hebt gegeven. 
    9. Nu is het template ingeladen.

    Bij het inladen van je template ben je ook nog twee andere opties tegen gekomen:
    blokken en pagina’s. 

    Blokken: dit zijn standaard elementen, die je zo kunt gebruiken.

    Pagina’s: dit zijn standaard Pagina’s die je zo kunt gebruiken. (dit raden wij af omdat zo’n pagina er anders uit kan zien dan de rest van de pagina’s )

    Kolommen en widgets/elementen
    Een kolom voeg je toe binnen een sectie. Een sectie kan uit meerdere kolommen bestaan. Wil je een kolom toevoegen binnen de sectie, dan ga je als volgt te werk:

    1. Klik met je rechtermuisknop links bovenin op het kolom icoontje (grijs icoontje met raamwerk erin). Klik op Nieuwe kolom toevoegen.

    Breedte van een kolom aanpassen.
    Na het toevoegen van een nieuwe kolom zal deze dezelfde grootte hebben als de rest. De verhouding van de kolommen kun je op 2 manieren aanpassen.

    1. Schuiven: ga met je muis op de verticale stippellijn (scheidingslijn) staan, totdat het schijf icoon zichtbaar is. Sleep de scheidingslijn heen en weer om de kolombreedte te vergroten of te verkleinen.
    2. Invoeren: de kolom kun je ook aanpassen door met je rechtermuisknop op het kolom icoon te klikken, kies Kolom bewerken. Links in het scherm onder lay-out pas je bij Breedte kolom het percentage aan.

    Een kolom dupliceren
    Het is ook mogelijk om een kolom te dupliceren binnen in een sectie. Klik met je rechtermuisknop op het kolom icoon en kies dan Dupliceren.

    Elementor toetscombinaties

    Sneltoetsen zijn sneltoetsen die kunnen worden gebruikt om enkele veelvoorkomende acties in Elementor uit te voeren. Het bespaart u veel tijd omdat u nergens op hoeft te klikken.

    Ongedaan makenCtrl / Cmd + ZMaak een wijziging ongedaan op de pagina
    RedoCtrl / Cmd + Shift + ZMaak elke wijziging ongedaan op een pagina
    KopieerCtrl / Cmd + CKopieer een sectie, kolom of widget
    PlakkenCtrl / Cmd + VPlak een sectie, kolom of widget
    Stijl plakkenCtrl / Cmd + Shift + VPlak de stijl van een sectie, kolom of widget
    VerwijderenDeleteVerwijder een sectie, kolom of widget
    DuplicerenCtrl / Cmd + DDupliceer een sectie, kolom of widget
    OpslaanCtrl / Cmd + SBewaar je pagina in de revisie geschiedenis


    Sneltoetsen om snel te kunnen navigeren

    Elementor Panel / PreviewCtrl / Cmd + PSchakel tussen het panel en de preview
    Mobiele aanpassingenCtrl / Cmd + Shift + MSchakel tussen desktop, tablet en mobiele views
    GeschiedenisCtrl / Cmd + Shift + HGa naar het geschiedenis panel
    NavigatorCtrl / Cmd + IOpent de Navigator
    Template BibliotheekCtrl / Cmd + Shift + VOpent de Template bibliotheek
    Keyboard ShortcutsCtrl / Cmd + ?Opent de Keyboard Shortcuts Help venster
    VerlatenESCOpent de instellingen en springt naar het dashboard

    Berichten template aanpassen

    Om ervoor te zorgen dat berichten altijd dezelfde indeling hebben, maken we hierbij gebruik van een Elementor template. De velden die je bij het maken van een bericht invult, worden in template gegoten. De templates zijn op onderstaande manier aan te passen:

    1. Ga in de backend naar Templates / Theme Builder.
    2. Ga met je muis op het berichten template staan die je aan wilt passen. In de tweede kolom staat Single en in de derde kolom het post type waar het template voor gebruikt wordt.
    3. Bewerk dit template met Elementor en sla het weer op. 

    Cachegeheugen

    Als je websites niet worden geladen met de laatste recente gegevens, kan dit zijn omdat je de cache met opgeslagen bestanden moet wissen om de browser nieuwe gegevens te laten downloaden. Deze cache kan opgeslagen zijn in de browser of in een plugin die ervoor zorgt dat de pagina’s sneller geladen worden.

    Hieronder leggen we uit hoe je de cache uit de plugin kunt wissen en hoe je de browsercache het beste kunt verwijderen per browser.

    Cache legen

    Cache uit cacheplugin

    Waneer je bent ingelogd staat er in de toolbar bovenaan de website de naam van je cacheplugin (WP Rocket, WP Optimize, Clearfy of W3 Total Cache). Ga hier met je muis opstaan en kies voor Cache legen/verwijderen.

    Microsoft Edge

    Met de sneltoets.

    1. Druk op de toetsen [Ctrl], [Shift] en [Del].
    2. Een nieuw venster opent. Selecteer de optie tijdelijke services en bestanden.
    3. Bevestig de selectie door op de knop Verwijderen te klikken.

    Via het menu.

    1. Klik op het pictogram Hub in het hoofdmenu.
    2. Blader vervolgens naar de Geschiedenis.
    3. Nu kunt u klikken op De hele geschiedenis verwijderen.
    4. Vink de optie tijdelijke diensten en bestanden aan en bevestig de selectie met een klik op de knop Verwijderen.

    Internet Explorer 11

    Met de sneltoets:

    1. Druk tegelijkertijd op de toetsen [Ctrl], [Shift] en [Del]. Een pop-upvenster wordt geopend. Browsegeschiedenis verwijderen.
    2. Vink alle opties uit, behalve tijdelijke internetbestanden.
    3. Klik op de knop Verwijderen om de browsercache leeg te maken. In vergelijking met andere browsers is er geen optie om de tijdsperiode te selecteren. U verwijdert alle cachegegevens.
    4. Vernieuw de pagina.

    Via de internetopties:

    1. Klik op het tandwiel icoon in de rechterbovenhoek van de browser en open het menu Extra’s.
    2. Selecteer het item Internetopties.
    3. In het tabblad Algemeen vindt u een sectie Browser geschiedenis. Wanneer u op de knop Verwijderen klikt, wordt een nieuw venster geopend.
    4. Nu bevindt u zich op dezelfde pagina als in de bovenstaande beschrijving. Volg de stappen vanaf stap 2.

    Mozilla Firefox

    Met de sneltoets:

    1. Druk de volgende toetsen tegelijk in: [Ctrl], [Shift] en [Del]. Een pop-up wordt geopend met de titel Recente geschiedenis wissen.
    2. In het vervolgkeuzemenu kunt u het tijdbereik definiëren waarover u de cache wilt verwijderen. U hebt de volgende opties: laatste uur, laatste twee uur, laatste vier uur, vandaag of alles.
    3. Als u alle gegevens wilt verwijderen, selecteert u Alles in het vervolgkeuzemenu.
    4. Klik daarna op de pijl naast Details en schakel de verschillende mogelijkheden in om te kiezen welke gegevens moeten worden verwijderd. Als u alleen de cache wilt verwijderen, markeert u alleen het selectievakje naast Cache.
    5. Met een klik op de knop Leegmaken verwijdert u de cache.
    6. Herlaad de site.

    Via de internetopties:

    1. Druk op de toets Alt. Het venstermenu van Firefox wordt geopend.
    2. Selecteer chronisch in het menu verwijder laatste chronisch.
    3. Nu wordt het pop-upvenster geopend zoals beschreven in de bovenstaande instructies.
    4. Volg de stappen hierboven vanaf de tweede stap.

    Google Chrome

    Met de sneltoets:

    1. Gebruik de toetsencombinatie: [Ctrl], [Shift] en [Del]. Let op: deze toetsen drukt u tegelijk in.
    2. Een nieuw venster opent: browsergegevens wissen.
    3. Hier kun je middels het bovenste selectiemenu instellen, over welke periode je de cache wenst te legen. Je kunt kiezen voor afgelopen uur, afgelopen dag, afgelopen week, afgelopen 4 weken of alles.
    4. Als je jouw browser cache volledig wilt verwijderen, selecteer dan alles.
    5. Zet een vinkje voor Gecachte afbeeldingen en bestanden.
    6. Bevestig door te klikken op de knop Gegevens wissen.
    7. Herlaad de site.

    Via de internetopties:

    1. Open het Menu in de rechter bovenhoek van Google Chrome en ga naar de Instellingen. Je herkent het menu aan de 3 boven elkaar staande stippen.
    2. Daarna kies je de optie Geavanceerd.
    3. Vervolgens klik je op de optie Browsergegevens wissen.
    4. Vervolg hierna het proces in de hierboven uitgeschreven stappen, vanaf stap 3 (periode selecteren).

    WooCommerce

    WooCommerce is de webshop plugin van WordPress. Voor WooCommerce zijn veel uitbreidingen beschikbaar maar hier bespreken we de basis:

    • Alle algemene instellingen zijn te vinden onder WooCommerce / Instellingen.
    • Alle producten zijn in het menu te vinden onder Producten. Hier kan ook een nieuw product toegevoegd worden.
    • Alle bestellingen zijn te vinden onder WooCommerce / Bestellingen.
    • WooCommerce heeft zelf een mooie documentatie waar alles netjes in staat omschreven. 

    Vertalen met WPML

    In de plugin WPML zorgen we ervoor dat er in een plaats in waar de vertaling ingevoerd kan worden en dat deze in de frontend van de website getoond wordt. Het is niet het doel van de plugin om tekst te vertalen.

    Vertaling toevoegen

    Wanneer je een nieuwe pagina hebt gemaakt en deze wilt vertalen kan dat op onderstaande manier:

    1. Zorg dat het vlaggetje bovenaan de pagina op de originele taal staat.
    2. Ga naar het pagina overzicht.
    3. Ga met je muis op de te vertalen pagina staan en kies voor bewerken.
    4. Ga in het rechter menu naar Taal, vink het vakje onder Kopie aan en klik op Kopie.
    5. Vertaal de velden en zorg dat ze allemaal op Vertaling is voltooid staan.
    6. Sla de pagina op en bekijk de vertaling aan de voorkant van de website.

    Vertaling bewerken

    Er zijn twee manier om een pagina te vertalen. 

    Ga in de frontend naar de pagina die je wilt vertalen en kies bovenaan de pagina voor Edit Translation of: 

    1. Ga naar Pagina’s.
    2. Zorg dat het vlaggetje bovenaan de pagina op Engels staat.
    3. Ga met je muis op de pagina staan en kies voor Bewerken.
    4. Kies in de popup voor Openen in Vertaaleditor.
    5. Pas de velden aan die je aan wilt passen en sla de pagina op.

    Hulp nodig?

    Kom vrijblijvend langs, vertel ons wat voor project jij in gedachten hebt. Wij vertellen je graag hoe wij daar een aanvulling in kunnen zijn!