WAT NU?
Wat denk je er van? Ga je het zelf proberen, of laat je het over aan een professional?
Misschien een idee om eens te klikken op de knop hieronder en te kijken wat we voor je kunnen betekenen.
Elementor WordPress handleiding
by ICT-mannetje
Deze Elementor WordPress handleiding is een vervolg op de voorgaande blogs waarin we hebben geleerd hoe we WordPress installeren op een localhost en hoe we kunnen beginnen met het bouwen van een website.
‘Een mooie website bouwen, moet je daarvoor niet heel goed zijn in ontwerpen?’
Tenminste, dat is wat ik dacht toen ik ooit aan mijn zoektocht begon om een mooie website te leren bouwen. Toen ik uiteindelijk met Elementor begon te werken (een collega was zo vriendelijk om zijn secret saus te delen), kwam ik erachter dat Elementor je heel goed op weg helpt als het gaat om een mooi design. Beloof ik je nou dat je na het lezen van deze Elementor WordPress handleiding een prachtige website kunt ontwerpen? Een beetje, maar het hangt ook van jou af.
Elementor installeren
Laten we bij het begin beginnen: eerst Elementor installeren. Ga hiervoor naar de linkerbalk van het WordPress dashboard en klik op ‘plugins’. Klik daarna linksboven op ‘nieuwe plugin’ en zoek op ‘Elementor’. Klik bij de plugin van Elementor op ‘nu installeren’ en daarna op ‘activeren’. Elementor is gereed voor gebruik om pagina’s te ontwerpen.
Hoe werkt Elementor
Het doel van deze Elementor WordPress handleiding rijkt natuurlijk verder dan alleen Elementor installeren. Om een pagina op te bouwen kun je het beste gebruik maken van Elementor templates. In deze blogpost nemen we de homepage als voorbeeld. Ik vind het fijn om alle poespas van het WordPressthema uit te schakelen en alleen de ‘header’ en daaronder een lege pagina te zien. Vaak vind je deze instellingen bij ‘pagina’s’. Bij voorkeur ‘volledige breedte’ en ‘titel’ uitgeschakeld. Zo heb je een zo leeg mogelijke pagina om op te vullen.
Stappenplan:
- Je gaat eerst naar het dashboard en klikt op ‘pagina’s’.
- Selecteer nu de pagina die je wilt inrichten.
- In het menu van de door jou geselecteerde pagina klik je op de blauwe knop ‘Bewerk met Elementor’. Je belandt nu in het page builder menu.
Voordat we beginnen met het opmaken van de pagina en het importeren van templates is het handig om uit te leggen hoe Elementor werkt: Binnen Elementor is alles opgebouwd in blokken. Dit klinkt misschien wat beperkend, maar eigenlijk is het heel fijn. Je zult namelijk merken dat het prettig is om een pagina te bouwen op basis van een ‘blokkenstructuur’ en dat je daarmee ook professionele en overzichtelijke pagina’s krijgt.
De pagebuilder kun je eigenlijk in tweeën verdelen. Links heb je een balk met verschillende knoppen waar je je pagina mee kan vullen. Rechts heb je de pagina zelf. Voor nu is de linker balk even wat minder relevant, want we beginnen met templates. Dat zijn al ontworpen pagina’s die je naar hartenwens kan invullen. Dat is ideaal want zo hoef je eigenlijk (bijna) niks te ontwerpen. Dat werk is al voor je gedaan. Je hoeft hem alleen nog in te vullen.
Elementor template importeren
De volgende stap bij het ontwerpen van de pagina is een Elementor template importeren. Klik bovinin in het midden van de pagina op het grijze folder-icoontje (naast de roze ‘+’). Hier vind je templates. Je kunt kiezen uit ‘blokken’, ‘pagina’s’ en templates die je zelf ergens van het internet hebt geplukt. Ben je op zoek naar iets specifieks dan kun je bijvoorbeeld zoeken naar ‘contact’ of ‘homepage’ en dan krijg je templates te zien die passen bij wat je zoekt.
Als je een goede template hebt uitgezocht, klik je deze aan. Ga nu naar de groene knop ‘invoegen’. De pagina zal even moeten laden waarna de template is geïmporteerd. De pagebuilder werkt heel intuïtief: je kunt alles aanklikken en aanpassen. Je kunt bijvoorbeeld de teksten aanpassen, deze een andere kleur geven en een ander lettertype selecteren (ga daarvoor in het linker menu naar ‘stijl’ en dan ‘typografie’).
Je hebt altijd blokken in blokken. Dat klinkt heel moeilijk, maar na een half uur prutsen kom je er zeker wel achter hoe de blokken zijn opgebouwd. De kaders zijn vaak een kleurverandering, dus als je de achtergrond wilt veranderen ga je met je muis over een blok (ook wel sectie genoemd), klik je op het blauwe balkje boven het blok (degene met de puntjes in het midden) en kan je in het linker menu alles aanpassen wat je wilt.
Zelf een pagina bouwen met Elementor
Soms heb je een bepaald ontwerp in gedachten. In zo’n geval kun je zelf een pagina bouwen met Elementor. Elementor templates bieden veel mogelijkheden, maar soms schiet deze databank te kort. Naarmate je een meer ervaren webbouwer wordt, zul je merken dat je minder behoefte voelt om een template te gebruiken.
Om te beginnen bepaal je hoeveel ‘blokken’ de inhoud van je sectie zal beslaan. Zodra je dat weet klik dan op de roze ‘+’ in het midden van de pagina. Kies het aantal blokken dat je wilt gaan vullen en klik daarop. Je zal zien dat je nu twee secties hebt gecreëerd. Als je op de grijze plus klikt kan je in het linker menu ‘widgets’ slepen naar je paginasectie, bijvoorbeeld tekst, afbeeldingen of iconen. Als je tekst naar een sectie sleept verandert het linker menu zich in een tekstverwerker menu, waarin je je teksten kan aanpassen naar bijna alles wat je ook maar bedenkt.
Je bent vrij om te ontwerpen wat je wilt en Elementor geeft je daar ook de ruimte voor. Als je weer terug naar de ‘widgets’ wilt om opnieuw te ontwerpen, dan klik je linksboven op het vierkant met blokjes. Als je een sectie wilt verwijderen (zweef met je muis over de tekst) klik je op het pennetje rechtsboven en druk dan op de rechtermuisknop.
Misschien krijg je het idee dat deze Elementor WordPress handleiding meer een Elementor handboek is. Dit is deels waar, maar je gebruikt WordPress en het thema oceanWP als belangrijke basis voordat je gaat werken met Elementor. Mijn ervaringen met dit thema deelde ik in het blog over zelf een WordPress website maken.
YouTube video's in Elementor
Youtube videos in Elementor verwerken is ideaal. Youtube en Elementor werken erg fijn samen. Aan klanten vragen we dan ook altijd of ze een videomateriaal hebben dat we kunnen laten zien op de website. Video’s zijn catchy en zeggen zoveel meer dan woorden (vraag je je al af waarom je een tekst-blog leest?).
Er zijn meerdere manieren waarop je video’s kan implementeren. Je kan bijvoorbeeld een ‘videoblok’ slepen van het linker menu naar een blok in de pagina, maar je kan ook automatisch een video laten afspelen als achtergrond in plaats van bijvoorbeeld een plaatje. Klik hiervoor op het blauwe vakje dat verschijnt als je met je muis over een paginasectie gaat. Klink links bovenin op ‘stijl’ en dan bij ‘achtergrond’ op het video-icoon. Hier kan je een link plaatsen van een YouTube video die afspeelt zodra je op de pagina komt.
Google maps in Elementor
Google Maps in Elementor verwerken behoort ook tot de mogelijkheden. Net zoals bij video’s zijn mensen ook bij plaatsnamen visueel ingesteld. Hoe fijn is het dan om even op je contactpagina een kleine ‘maps’ van je locatie te weergeven. Om dit te doen moet je naar het linker menu bij ‘widget zoeken’, ‘maps’ intikken en sleep je deze naar de sectie waar je je map wilt laten zien. In het linker menu kan je de locatie naar wens opzoeken en verschijnt deze op je pagina. Deze is ook live, dus de bezoeker kan de map bewegen als ze op je website komen.