Aan de slag met Elementor

Elementor Pro zoals Hoasted dit installeert biedt vele mogelijkheden. In dit artikel enkele basiszaken zodat je snel aan de gang kunt.

Een pagina maken en bewerken met Elementor

Je start door in te loggen op je Dashboard (dat kan zonder wachtwoord vanuit je cPanel > My Applications. Klik op de wp-admin link.

In het Dashboard heb je links Pagina's (Pages). Klik daar Nieuwe Pagina (New Page)

Je komt dan in het scherm waarin je een titel kunt geven aan je pagina en dan op Bewerken met Elementor kunt klikken:

Type waar nu staat Titel toevoegen de titel van je pagina. Tip: zorg dat die kort is en precies weergeeft wat de inhoud gaat worden. Klik vervolgens Bewerk met Elementor. Je ziet dan aan de linkerhand een groot aantal zogenaamde Widgets en rechts het Edit gedeelte:

Onderdelen Elementor

Elementor kent drie onderdelen voor het bouwen: Sections, Columns en Widgets.

Sections zijn de grootste (overkoepelende) bouwblokken. Daarbinnen heb je de Columns (kolommen) en binnen die Columns gebruik je de Widgets. Elk heeft een eigen Handle:

Tip: Je kunt zelf kiezen of die Handles al dan niet in beeld komen. Klik als je die niet wilt linksboven op de drie streepjes > Voorkeuren (Preferences) > en zet de Bewerken functies (Editing Handles) uit.

Secties

Om een sectie toe te voegen klik je op de rode Sectie knop of om een vooraf ontworpen pagina te gebruiken klik je op de grijze knop. Dan kun je selecteren uit de vele tientallen voorbeeldpagina's van Elementor.

Vervolgens krijg je de keuze of en hoe je de kolommen wilt:

Je krijgt dan boven de nieuwe sectie een lichtblauwe knop waarop je rechts kunt klikken om deze sectie bijvoorbeeld te kopiëren:

Deze Section Handle kun je vervolgens gebruiken om de sectie te verslepen, of er een sectie aan toevoegen of de sectie verwijderen (met resp. de + of de x).

Kolommen

Je kunt de breedte van de kolommen zelf aanpassen door de gestreepte lijn te verslepen.

Een andere mogelijkheid is via het Lay-out menu, dat verschijnt als je klikt op het kolom ikoon in de kolom:

Widgets

De widgets geven je een ruime keuze in wat je in een kolom wilt hebben staan. 

Sleep een widget naar je kolom toe, bijvoorbeeld de Afbeelding widget. Je krijgt dan:

Ga links met de cursor over de Afbeeldingsikoon en er komt dan een optie Afbeelding kiezen in beeld. Klik daarop om zelf de betreffende afbeelding te selecteren.

De maximale breedte van een widget wordt bepaald door de kolombreedte.

Template toevoegen

Een template is een pagina of blok lay-out die je kunt kiezen. Klik daarvoor op de Template toevoegen ikoon:

Je komt dan in een overzicht van vele tientallen Templates die Elementor biedt. In pagina's zie je pagina lay-out voorbeelden. Op het moment dat je met de cursor erover heen gaat kun je op de loupe klikken om het beter te bekijken en wil je het template gebruiken dan klik je op de groene Invoegen knop

Naast de standaard blokken en templates is er ook de mogelijkheid om zelf een pagina als Template op te slaan en daaruit te kiezen (Tab Mijn Templates) In geval je een standaard voorkeurpagina kiest, klik je op het hartje om die in Mijn Templates op te slaan.

In geval je zelf een template gemaakt hebt kun je die .zip of .json opslaan door op het pijltje te klikken in het rechter bovenmenu:

Je pagina bekijken en publiceren

Als je tussentijds of als je klaar bent het resultaat wilt bekijken zoals de bezoeker het gaat zien, klik dan op het oog-ikoon:

Als je tevreden bent, klik je op de Publiceren knop.

Wil je het concept tussentijds opslaan, klik dan op de driehoekknop naast Publiceren en vervolgens op Concept opslaan:

Verdere documentatie over Elementor

Elementor biedt zeer veel mogelijkheden, vandaar dat het ook favoriet is bij een deel van de website developers. De documentatie daarvan staat op hun website: Elementor documentatie. Inmiddels is er ook een prima Nederlandse handleiding.