Elementor update 3.0 is uit. En daar worden wij enorm enthousiast van! Het is alweer even geleden dat er een grote Elementor update (2.0) uitkwam. In Elementor 3.0 tilt Elementor het designen van je website naar een hoger niveau. Je kon al bijna compleet thema onafhankelijk werken met de komst van Theme Style, maar met deze nieuwe update heb je helemaal geen thema meer nodig (maar moet wel geïnstalleerd zijn). We lichten alle nieuwe features van Elementor 3.0 uit.
Waarom globale settings?
Als je werkt met Elementor is de verleiding enorm groot om van alles uit te proberen. Ook bij onze klanten die support afnemen, zie ik dat ze enthousiast bezig zijn geweest met Elementor templates. Het nadeel hiervan is dat je op een website vaak veel verschillende stijlen en kleuren ziet. Niets mis mee als je dat graag wilt, maar het is in de basis niet de manier waarop je een website wilt bouwen.
Het is enorm tijdrovend (zeker als je daarna weer aanpassingen wilt doen) en het zorgt ervoor dat je website een onrustige uitstraling krijgt. Gewoon jammer dus. Met globale settings, kun je de styling van je website vanuit één plek instellen. Daarmee kun je met Elementor 3.0 dus een flinke efficiëntieslag maken. Daar word ik sowieso blij van!
Site settings
Wanneer je linksboven in het Elementorpanel op het hamburgermenu klikt, zie je dat de opties zijn aangepast. Je kunt nu rechtstreeks vanuit het panel naar de theme builder, maar ook zie je nu de instelling: site settings.
In site settings zie je drie verschillende onderdelen:
- Design system (nieuw): hier kun je de globale kleuren en topografieën instellen
- Thema stijl: hier kun je stijlen instellen voor body, headings, knoppen, afbeeldingen en formuliervelden. Dit zat al in Elementor.
- Instellingen (uitgebreid): Deze functionaliteiten zijn uitgebreid. Eerder moest je nog via het thema je logo uploaden. Dit kun je nu ook doen in Elementor. Eigenlijk heb je nu helemaal geen thema meer nodig om een website te bouwen.
1) Globale kleuren
Als je gaat naar site settings -> globale kleuren, heb je hier de mogelijkheid om kleuren in te stellen voor je site. Standaard kleuren instellen zat al in Elementor, maar deze functionaliteit is nog meer uitgebreid. Wat is het verschil met hoe het eerst was?
Stel je wilt op de website een specifieke achtergrondkleur voor bepaalde secties gebruiken. Eerder kon je dan kiezen uit de kleuren die je zelf hebt opgeslagen. Of misschien was je nog niet zover en voerde je deze nog handmatig in. Dat werkt allemaal prima, maar wat als de klant opeens een andere achtergrond kleur wil gebruiken? Dan moet je ALLE secties weer opnieuw nalopen om de kleur aan te passen.
Met global colors kun je die kleur overal in één keer aanpassen. Stel bijvoorbeeld een global kleur ‘Achtergrond donker’ (je er titels aan hangen, heel handig!). Als je deze gebruikt voor alle achtergronden en je past deze kleur vervolgens aan, is het overal op je website aangepast. Een enorme efficiëntieslag dus. Daar word ik wel blij van!
Voorbeelden van globale kleuren:
- Tekstkleur (body)
- Primaire kleur (bv. voor headings)
- Button kleur
- Achtergrondkleuren
- Accentkleuren (voor links)
2) Globale typografie
Net als globale kleuren, kun je nu ook globale typografie instellen. Was dat dan nog niet zo, hoor ik je denken. Inderdaad, via de Theme Style kon je al typografie instellen voor de body, headings, links, buttons etc. Dus wat heb je hier aan?
Afhankelijk van je design, worden soms meerdere fonts gebruikt. Bijvoorbeeld in subtitels of om ergens extra nadruk op te leggen. Met globale typografie heb je meer vrijheid in het toepassen van een typografie. Zo kun je bijvoorbeeld voor een call-to-action blok een ander font gebruiken, zodat deze meer opvalt. Als je meerdere call-to-actions op je website hebt staan, is het mooi als je het font hiervan in één keer kunt aanpassen. Dat kan dus nu met globale typografie!
Een ander voorbeeld is stijl instellen voor een intro / lead tekst. Deze wijken vaak af van de standaard body tekst met een groter font. Hiervoor kun je nu ook een global font instellen. Super handig!
3) Vernieuwde Theme Builder
In Elementor update 3.0 heeft de Theme Builder een geheel nieuwe uitstraling. Ik moest even wennen, maar ik vind het echt een hele verbetering. Je kunt nu namelijk direct een voorbeeld van de ingestelde templates zien. En ook kun je de publicatie condities direct instellen vanuit de Theme Builder (eerder moest je hiervoor eerst het template openen, om vanuit daar de condities aan te passen).
Tot slot: verbeterde performance
De nieuwe Elementor update 3.0 heeft een verbeterde performance. Zonder er al te technisch op in te gaan, zijn er grote updates doorgevoerd in de code en infrastructuur van Elementor waar je pagina snelheid beter is. Wil je graag meer weten over deze verbeteringen, lees dan even de blog van Elementor hierover.
Elementor update 3.0: een hele verbetering?
Ja, de nieuwe update is absoluut een verbetering! Maar, het vraagt wel om een andere manier van bouwen dan je gewend was. Daar moet je even in komen. Maar hoe langer je er mee werkt, hoe fijner het wordt.
8 reacties
Hallo Sanne,
Bedankt weer voor je informatie!
Inderdaad veel nieuwe verbeteringen! Maar ook wel wat verwarrend vind ik:
– Zijn de global settings inmiddels zo uitgebreid dat je adviseert het hello thema te gaan gebruiken? Of zijn er nog steeds dingen die beter met bijvoorbeeld astra kunnen worden ingesteld?
– Er zijn nu zoveel mogelijkheden om templates toe te passen dat ik niet meer goed weet wanneer ik welke moet toepassen: wordpress templates, template blokken, template-widget, global widgets enz. Is daar meer informatie over?
Nogmaals bedankt voor alle informatie die je deelt!
Hoi Tak,
Goede vragen!
– Ja, voor deze update zou ik je al adviseren om het Hello thema te gebruiken. De globale fonts en kleuren zijn een extra toevoeging op de ‘Theme style’ die eerder al werd geïntroduceerd. Met de nieuwe uitbreidingen (waaronder ook het uploaden van je logo en favicon) heb je nu in principe geen (uitgebreid) thema meer nodig.
– Ik snap je verwarring met betrekking tot de templates. Ik denk dat je het onderscheid zo moet zien:
1) WordPress templates / pagina’s templates: ik denk dat je hiermee de templates bedoelt die je voor een volledige pagina kunt gebruiken? In ieder geval zijn deze beschikbaar in de Elementor bibliotheek. Deze kunnen je helpen om (sneller) een pagina te bouwen. Deze importeer je op een pagina en pas je ook op die pagina aan. Dit heeft geen gevolgen voor andere pagina’s of templates. Het is een ‘los’ template.
2) Template blokken: template blokken zijn eigenlijk content blokken. Denk bijvoorbeeld aan een blok met reviews, een call to action, medewerkers of een overzicht van diensten. Deze zijn geplaatst binnen secties (deze kan weer bestaan uit meerdere widgets of innersecties). Dit zijn dus geen complete pagina’s, maar slechts onderdelen.
3) Template widget: dit is een widget van Elementor waarmee je een compleet template op een bepaalde plek op de pagina kunt inladen. Je kunt het template dan niet op die pagina bewerken, maar alleen vanuit de Elementor bibliotheek. Dit is bijvoorbeeld handig als je een content blok op meerdere plekken op je website wilt laten terug komen, maar vanuit één plek wilt aanpassen. Denk bijvoorbeeld aan een CTA blok. Het zou onhandig zijn als je alle pagina’s moet nalopen om deze aan te passen. Met de template widget hoeft dat dus niet. Lees meer hierover –> https://www.sijweb.nl/global-secties-maken-elementor/
4) Globale widgets: een globale widgets kun je ook op meerdere plekken op je website plaatsen en vanuit één plek aanpassen. Een widget is meestal slechts één onderdeel van een blok template. Denk bijvoorbeeld aan contactgegevens. Als je deze aanpast, is het handig dat deze op alle plekken op de website wordt aangepast. Dat kun je doen door een global widget te maken. Hierover lees je meer –> https://www.sijweb.nl/global-widget-elementor/
Hopelijk geeft dit wat duidelijkheid en kun je hier mee verder!
Groetjes,
Sanne
Hi Sanne,
Bedankt voor je reaktie.
Wordt er inderdaad wel duidelijker van. Maar behalve de door jou genoemde templates zijn er denk ik ook nog de templates die je dynamisch met publicatie condities kunt toepassen. En dan wordt het lastig vind ik: moet ik de header van een standaard pagina bijvoorbeeld baseren op zo’n template met publicatie conditie, of kan ik de header beter als template opslaan (want centraal onderhouden) en met een template widget op elke pagina toevoegen? Of is dat een kwestie van smaak?
Groetjes,
Tak
Dat is zeker geen kwestie van smaak. Een header publiceer je doorgaans voor de hele website. Tenzij je afwijkende gedeeltes op je website hebt waarvoor je een andere header wilt gebruiken of uitschakelen. Zo heb ik op onze website ook een andere header ingeschakeld voor het blog gedeelte. En veel van onze klanten kiezen voor een zogenoemde no-escape landingspagina. Daarbij wordt of de header uitgeschakeld of een andere header ingesteld. Daarvoor kun je ook de ‘Elementor canvas’ lay-out gebruiken. Die schakelt namelijk automatisch de header en footer op die pagina uit (je hebt dus een leeg canvas).
Dynamische content gebruik je voor single templates. Denk bijvoorbeeld aan single templates voor blogartikelen, vacatures, medewerkers, cases etc. Lees hier meer –> https://www.sijweb.nl/template-maken-voor-custom-post-types-elementor/ of https://www.sijweb.nl/wordpress-blog-layout-aanpassen-elementor/
Maar ook op single templates maak je doorgaans gewoon gebruik van de header (en footer) die je instelt voor de hele website.
Hallo
Ik heb met veel aandacht bovenstaande artikel gelezen. De nieuwe versie van Elementor maakt dat mijn logo niet goed meer zichtbaar is. Het is net alsof er een witte pagina voor staat. Ook is de Blog pagina niet meer te bewerken. Hier staat dan het logo wel nog perfect zichtbaar zoals opgeladen in WordPress.
Mocht je hierover tips hebben, ben ik zeer benieuwd.
Met warme groet
Webbouwer in spe.
Hoi Réjane,
Dit probleem komt mij niet bekend voor. Heb je het logo ingesteld via Elementor site instellingen, via het thema of heb je het logo los toegevoegd aan de header? En bedoel je met blogpagina het single template of de overzichtspagina waarop alle blogartikelen staan?
Tip: probeer eens van thema te wisselen om te kijken of dat het probleem oplost (wel eerst een back-up maken).
Groetjes,
Sanne
Hi Sanne,
sinds het gebruik van Elementor 3.xx heb ik enorm veel problemen, en, kijkend op het internet, ben ik niet de enige. Als ik bijvoorbeeld op een pagina een tekstvlak toevoeg, en dit in een bepaald lettertype in het midden van de pagina zet, dan staat die, bij nazicht, niet in het midden, maar links, en in een standaard lettertype. Nog een voorbeeld: onderaan een pagina zet ik een volle lijn, wel, geen lijn te zien als ik dan kijk. Het liefst zou ik teruggaan naar versie 2.xx, daar had ik die problemen niet. Wat denkt u? Graag je antwoord.
Hoi Luc,
In het begin waren er wat problemen met deze versie, maar dit is allemaal vorig jaar zomer ook opgelost. Ik ervaar ze in ieder geval zelf niet en ik werk om heel veel sites. Heb je misschien een caching plugin aanstaan die deze problemen veroorzaakt? Of werk je met een specifiek thema?
Groet,
Sanne