WordPress Elementor handleiding

Website handleiding

Introtekst over de WordPress en Elementor uitleg van Studio Campo creatieve communicatie. Introtekst over de WordPress en Elementor uitleg van Studio Campo creatieve communicatie. Introtekst over de WordPress en Elementor uitleg van Studio Campo creatieve communicatie.

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. Het voordeel van dit systeem is dat er meerdere mensen aanpassingen binnen de website kunnen verrichten.

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. Voorheen had jullie gebruiker nog minimale rechten omdat jullie nog geen handleiding ontvangen hadden, jullie rechten zijn nu aangepast naar maximaal. Op het dashboard is nu daarom veel te zien, maar alleen het menu aan de linker kant is belangrijk.

  • Bovenaan staat de knop Website Naam, via deze knop kun je de website bekijken.
  • Door middel van de zwarte balk bovenaan de website kun vanaf de frontend snel naar de Elementor Page builder via de knop 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 rechter kant aangepast worden onder Document / Permalink.
  • Onderaan de pagina staat een SEO blok van Yoast SEO, hier meer over het invullen hiervan.

  • De uitgelichte afbeelding onder het tabje “Sociaal” kan nog 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 met alle 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 Posts (of bijvoorbeeld vacatures, projecten of Portfolio) en kies hier voor Add New. Nu is het een kwestie van de titel en de tekst in te vullen en de blog te Publishen met de blauwe knop. Deze drie onderdelen worden vervolgens in het stramien gegoten wat wij al hebben gemaakt in de achterkant van de website. Aan de rechter kant moet nog een Featured Image toegevoegd worden, deze afbeelding wordt in het overzicht getoond.

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

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 kan dit in het menu van de backend onder Gebruikers. Wanneer je bovenaan de pagina kiest voor Nieuwe toevoegen kun je de gegevens van de nieuwe gebruiker invullen, let hierbij op het volgende:

  • Zorg dat de gebruikersnaam goed is. Deze kan later niet meer veranderd worden.
  • Het e-mailadres moet juist zijn, hierop kan het wachtwoord later namelijk opnieuw op aangevraagd worden.
  • Je kunt ervoor kiezen de nieuwe gebruiker een e-mail te sturen met het de gebruikersnaam en de optie om zelf een wachtwoord aan te maken. Let op! 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 Media in het menu.
  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 weer 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 de een Titel.
  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 je 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 linker kant 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 kopieë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 grijs witte stippellijn. Een sectie kan meerdere kolommen bevatten welke altijd naast elkaar staan.

In een kolom kunnen widgets 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 doormiddel van de rechtermuis.

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

Op de zelfde wijze kun je elementen “kopiëren, dupliceren en plakken”.

Layout (inhoud), Style (stijl) en Advanced (geavanceerd)
Layout
(inhoud):
geeft aan wat een element (tekst, knop, afbeelding, blog enz.) uit bestaat. Hier worden dan ook de basic en benodigde informatie ingevuld. Bij een tekst module zal dit inderdaad tekst wezen. Voor een galerij module zullen dit afbeeldingen wezen.

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 kunt aanpassen.

Advanced (geavanceerd):
Onder dit tabje is het mogelijk om voor de sectie, kolom of widget uitgebreide instellingen te doen. 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 uw sectie.
  • CSS-klassen: stel CSS-klassen in voor uw sectie.

Bewegingseffecten:

  • Sticky: stel uw 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 uw kolommen om te keren (ideaal voor mobiel)
  • Zichtbaarheid: toon of verberg uw 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. 

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

  • U kunt een element (widget, kolom of sectie) niet verwijderen terwijl u een voorbeeld van één modus bekijkt (bijvoorbeeld mobiel) en verwachten dat het alleen wordt verwijderd van dat type apparaat. Als u elementen verwijdert, worden ze op alle apparaten verwijderd. U kunt 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.
  • U kunt elementen niet verplaatsen terwijl u een voorbeeld van één modus bekijkt, en verwacht dat ze alleen voor dat type apparaat worden verplaatst. Als u elementen in elke voorbeeldmodus verplaatst, worden ze op alle apparaten verplaatst. Een uitzondering hierop is de functie Sectie> Geavanceerd> Responsief> Omgekeerde kolommen, die kolommen wel naar hun omgekeerde positie verplaatst.

Elementor Templates
Je kunt met elementor secties hergebruiken door deze te kopiëren en verder op de pagina te plakken. Dit kun je doen door met je rechtermuis knop 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.

  1. Klik met je rechtermuis op het blauwe icone bovenaan een sectie.
  2. Selecteer “Als template opslaan”.
  3. Geef je template een naam en klik op “Opslaan”.
  4. Template’s kun je weer oproepen door op het blauwe icone te klikken met een + symbol . 
  5. Klik op het “+” symbol.
  6. Klik op het map symbol. 
  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: Zijn standaard elementen je zo kunt gebruiken.

Pagina’sZijn standaard Pagina’s 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 rechtermuis knop links bovenin op het kolom icoontje (grijs icoontje met raam werk daar in). Klik ‘Nieuwe kolom toevoegen’

Breedte aanpassen van een kolom.
Na het toevoegen van een nieuwe kolom zal deze de zelfde 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 tot dat 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 rechtermuis knop 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 maken Ctrl / Cmd + Z Maak een wijziging ongedaan op de pagina
Redo Ctrl / Cmd + Shift + Z Maak elke wijziging ongedaan op een pagina
Kopieer Ctrl / Cmd + C Kopieer een sectie, kolom of widget
Plakken Ctrl / Cmd + V Plak een sectie, kolom of widget
Stijl plakken Ctrl / Cmd + Shift + V Plak de stijl van een sectie, kolom of widget
Verwijderen Delete Verwijder een sectie / kolom / widget
Dupliceren Ctrl / Cmd + D Dupliceer een sectie / kolom / widget
Opslaan Ctrl / Cmd + S Bewaar je pagina in de revisie geschiedenis
Sneltoetsen voor snel te kunnen navigeren
Elementor Panel / Preview Ctrl / Cmd + P Schakel tussen het panel en de preview
Mobiele aanpassingen Ctrl / Cmd + Shift + M Schakel tussen desktop, tablet en mobiele views
Geschiedenis Ctrl / Cmd + Shift + H Ga naar het geschiedenis panel
Navigator Ctrl / Cmd + I Opent de Navigator
Template Bibliotheek Ctrl / Cmd + Shift + V Opent de Template bibliotheek
Keyboard Shortcuts Ctrl / Cmd + ? Opent de Keyboard Shortcuts Help venster
Verlaten ESC Opent de instellingen en springt naar het dashboard

Berichten template aanpassen

Om ervoor te zorgen dat berichten altijd een zelfde 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. Hier onder leggen we uit hoe je dit het beste kunt doen per browser.

Cache legen

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 uw 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. “Browsergeschiedenis 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 tandwielsymbool 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” op uw toetsenbord. 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 kunt u middels het bovenste selectiemenu instellen, over welke periode u de cache wenst te legen. U kunt kiezen voor “afgelopen uur”, “afgelopen dag”, “afgelopen week”, “afgelopen 4 weken” of “alles”.
  4. Als u uw 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. Reload your site.

Via de internetopties

  1. Open het “Menu” in de rechter bovenhoek van Google Chrome en ga naar de Instellingen. U herkent het menu aan de 3 boven elkaar staande stippen.
  2. Daarna kiest u de optie “Geavanceerd”.
  3. Vervolgens klikt u 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 een vertaling te maken.

Vertaling toevoegen

Wanneer je een nieuwe pagina hebt gemaakt en deze 

Vertaling bewerken

Een vertaling kan bewerkt worden door in de backend naar het pagina overzicht te gaan 

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!