Vooraleer je kan beginnen met je site te ontwerpen, moet je eerste zorgen dat de paginas bestaan. Hiervoor zoek je naar "pages", in de sidebar van je dashboard.

Hier druk je op de "add page" knop. Op deze manier wordt er een pagina gemaakt voor je site. Je kan hem zelf dan nog een nieuwe naam geven. Dit doe je voor elke pagina die je nodig hebt

Na heel wat opzoekwerk online, was de consensus dat Elementor één van de beste plugins is, om al het werk net iets vlotter te doen verlopen. Zoek in de sidebar deze keer naar "Plugins".

Druk op de "add plugin" knop. Op deze manier kan je plugins die je nog niet hebt toevoegen.

Zoek naar "Elementor" tot je deze plugin vindt.

Druk eerst op install en dan op activate. Je kan deze plugin nu in je product gebruiken.

Hover met je muis over "Appearance" en selecteer "Themes" in het submenu.

Je hebt standaard een paar themes, maar als je een groter aanbod wilt, kan je klikken op "add theme".

Veel themes zijn compatibel met elementor, maar na mijn eigen opzoek werk, zou ik aanraden om de theme "astra" te gebruiken. Dit is een theme dat afgestemd is op Elementor. Klik op "install" en dan op "activate"

Astra leidt je dan nog langs hun site en laat je daar dan nog eens een thema kiezen. Dit is niet standaard bij alle themas. Hier vind je een rap overzicht van wat je nog moet doen voor je effectief aan de slag kunt.

1. Je wordt naar de site van Astra geleidt. en deze melding verschijnt.
   
   

2. De volgende vraag die je krijgt is: "How do you want to build your website?" . Hier selecteer je "Classic Starter Templates".
   
   

3. Astra heeft een library van templates. Om deze gratis te kunnen gebruiken kies je een "non-premium template" .
   
   

4. Wanneer je op een theme klikt krijg je al een klein menu waarmee je de template al een beetje kunt bewerken. Alles wat je hier aanpast kan achteraf nog veranderd worden. Wanneer je hier mee klaar bent, klik je op "Continue.

5. In de volgende stap vraag Astra welke additionele features je wilt implementeren in je website. Voor deze website hebben we geen enkele feature nodig. Druk op "Skip this step".
   
   

6. Als laatste vraagt Astra nog om persoonlijke informatie. Je kan zonder info in te vullen op de "Submit & Build My Website ->" knop drukken.
   
   

7. Astra bouwt nu het begin van je website op basis van je template.
   
   

Onze workflow bestaat uit twee delen. Werken vanuit de "WordPress Customize", en werken vanuit de "Elementor-editor". Terugkomen elementen zoals de header en de footer bewerken we in de "WordPress Customize". De inhoud van individuele pagina's bewerken we in de "Elementor-editor". Er bestaat ook "Edit page" in WordPress, wat gelijk aardig is aan Elementor, maar Elementor is gebruiksvriendelijker.

Hier zie je waar je beiden kunt selecteren.

"WordPress Customize in combinatie met Astra en Elementor, verzorgt enkel de gemeenschappelijke delen die op elke pagina tergukomen. Zo zie je in onderstaande afbeelding dat ik de plaatsing, fontsize en content van mijn header en footer en de menus hier in kan bepalen. Als je een globaal lettertype of kleurenschema of dingen in die aard wilt, Kan dat ook via de WordPress-editor.

Hoofdmenu Wordpress Customize

Een drag en drop menu om te kiezen waar welke items van de header mogen staan.

Een menu om te kiezen welke links ik in mijn navigatie menu wil.

Elementor laat je oneindig veel containers maken. Elke container kan dan weer meerdere containers bevatten. Je hebt op een makkelijke wijze controle over de lay-out en de content. Elke container heeft een menu waar in je de meeste parameters kan aanpassen. Elk Content-type heeft dit ook. Elementor heeft ook een gebruiksvriendelijke interface wat het voor iedereen die een minimum aan ervaring heeft, makkelijk gebruikbaar maakt. Hier onder toon ik een paar voorbeelden featurs van Elementor die ik gebruikt heb.

Het hoofdmenu van Elementor.

Een image menu. Zoals je kan zien heeft elk content-menu een submenu Content, Style, en Advanced. Content is wat je content bevat. Style is dingen zoals tekstgrootte, borders en andere dingen die je traditioneel in CSS zou doen. Advanced draait vooral om margin en padding en de relaties van het kind-element met de flexbox of grid parent.

Een standaard lege container in Elementor

Werken met Elementor en WordPress Customize voelt als een gebruiksvriendelijke drag en drop tool met veel diepgang. Als je snel een website wilt maken laten deze tools dat toe, maar als je elk detail nauwkeurig wilt bewerken hebben deze twee tools een menu om elke kleine aanpassing waar je aan kunt denken door te voeren.