Elementor 3.27 beta – Wat is nieuw?

Elementor 3.27 heeft een paar leuke nieuwe dingen te bieden!

Elementor 3.27

De ‘landingpages’ gaan verdwijnen!

Maar laten we beginnen met een toch wel heel droevig bericht. Elementor voegt niet alleen leuke nieuwe dingen toe, soms worden er oude zaken die ons toch dierbaar zijn verwijderd. Vanaf versie 3.27 zal Elementor namelijk geen ondersteuning meer bieden aan ‘landing pages’. Want -zo redeneert men- landing pages zijn eigenlijk gewone pagina’s met een wat andere template.

Helemaal waar. Maar veel van mijn klanten willen wel graag landingpages kunnen maken, maar hebben niets met de verdere opzet van Elementor. Landing pages waren een leuke feature voor het maken van sales pagina’s. Maar helaas, je oude landing pages kan je nog steeds gebruiken en nog even zal je er zelfs nieuwe aan kunnen maken, maar dit gaat ooit als feature verdwijnen uit Elementor. Houdt daar dus rekening mee.

elementor 3.27 | Elementor 3.27 beta - Wat is nieuw?

De Grid container wordt eindelijk nuttig!

Er is een aantal nieuwe zaken toegevoegd aan Elementor 3.27, waarvan een aantal zeker de moeite waard zijn. En één is er wel heel in het bijzonder van belang, omdat dat in mijn optiek een vrij nutteloos onderdeel van Elementor eindelijk nuttig heeft gemaakt. Namelijk de ‘Grid contrainer’.

Wat is de deal met de ‘grid container’?

Het idee ooit achter de Grid container (een HTML/CSS onderdeel) was om in het verre verleden het misbruik van tabellen te voorkomen. Om een fatsoenlijke layout te krijgen in de pioniersjaren van het WWW was er eigenlijk maar één mogelijkheid: Je maakt een tabel, en plaatst de inhoud van je pagina daarin. Maar daar was een tabel nooit voor bedoeld! Een tabel was er juist om informatie in een tabellarisch formaat te tonen!

Dus toen er druk aan CSS3 en HTML5 gewerkt ging worden, moest er een oplossing komen voor dat misbruik van tabellen. En die oplossing werd in ‘grid containers’ geïmplementeerd.

Een Grid Container is dus een layout hulpmiddel. Eén van de coole dingen in een grid container is juist, dat je binnen een ’tabelachtige matrix’ layout elementen over meerdere kolommen of rijen kan plaatsen. En dat was nu net, wat in de implementatie niet mogelijk was tot Elementor 3.27.

Om hier gebruik van te kunnen maken, moet je het overigens wel eerst activeren, als je dat nog niet gedaan hebt.

Dat doe je in ‘Elementor -> Instellingen -> Functies’.

elementor 3.27 | Elementor 3.27 beta - Wat is nieuw?

Vervolgens kan ik aan de slag met de grids. Dus maak een pagina en sleep de ‘Raster’ widget (de Nederlandse vertaling voor ‘Grid widget) naar het scherm, en binnen de grid laat ik een drietal andere widgets vallen. In mijn voorbeeld heb ik afbeelding widgets genomen, ik zal je zo uitleggen waarom.

Elementor 3.27

Mooi. Drie afbeeldingen naast elkaar. Maar dat is toch niets bijzonders? Daar waren altijd al mogelijkheden voor. En inderdaad, je hebt helemaal gelijk. Dat was ook één van de redenen, dat ik helemaal niet begreep, waarom Elementor niet gelijk gebruik gemaakt had van de mogelijkheid om ook van ‘Column span’ en ‘Row span’ gebruik te maken.

Zoals je ziet heb ik de eerste afbeelding geselecteerd (roze rechthoek eromheen). In de linker kolom zie je een extra koptekstje staan: Grid Item.

Hier kan ik dus aangeven hoeveel plaats de afbeelding in de breedte (column span) of in de hoogte (row span) in mag nemen. Eerst geef ik een columnspan van 2 op. Ik krijg dan het volgende resultaat:

Elementor 3.27

De widget is heeft nu een breedte van twee cellen gekregen, waardoor hij ook 2x in de hoogte groeit. Dat is interessant, wat zou er gebeuren, als we het omgekeerde doen? Dus een colspan van 1 en een rowspan van 2?

elementor 3.27 | Elementor 3.27 beta - Wat is nieuw?

Dat is interessant… de afbeelding wordt dus niet 2x zo hoog. Het vlak wat de afbeelding tot zijn beschikking heeft wordt wel 2x hoger, maar de afbeelding niet.

Wat wanneer we iets vergelijkbaars met tekstbewerking velden doen?

elementor 3.27 | Elementor 3.27 beta - Wat is nieuw?

Om het één en ander duidelijker te maken, heb ik het eerste tekstveld een ‘dubbele vulling’ gegeven. Wat krijgen we, wanneer we hem nu over twee kolommen spannen?

elementor 3.27 | Elementor 3.27 beta - Wat is nieuw?

Wat nu wanneer ik een koptekst boven de eerste tekst wil plaatsen?

Ik kan proberen wat ik wil, maar dat gaat mij niet lukken. De kop komt links of rechts van de eerste tekst te staan, maar nooit erboven. Dat komt omdat in iedere cel van het raster maar één widget mag staan.

Eén widget… maar een container is ook een widget… een widget waar je widgets in kan plaatsen. De juiste manier om het voor elkaar te krijgen is dus in iedere cel, waar je meer widgets in wil plaatsen éérst een container te plaatsen.

elementor 3.27 | Elementor 3.27 beta - Wat is nieuw?

In bovenstaande afbeelding zie je hoe in de eerste grid cel een container is geplaatst, en in die container een koptekst en de tekstbewerker met de dubbele tekst. Omdat deze eerste cel een row- en colspan van beide 2 heeft, staat de hele container plus inhoud over 2 cellen hoog en 2 cellen breed. De andere cellen worden vanaf daar gevuld.

Voor andere devices (tablet, telefoon) kan je zowel de grootte van het grid als de ‘span’ van de items in het grid aanpassen.

Daarmee geeft een grid container je eigenlijk enorm krachtige mogelijkheden om je layout in hoge mate responsive te maken zonder veel inspanning. Omdat echter de ‘span’ mogelijkheden niet aanwezig waren voor Elementor 3.27 was de implementatie tot dan toe eigenlijk maar halfslachtig en viel er weinig mee te doen. Het goede nieuws is echter, het komt er eindelijk aan!

Google Fonts lokaal laden

Al een heel lange tijd geleden heb ik aangegeven, dat het laden via Google van Google Fonts bepaalde vraagtekens oproept in het kader van de GDPR.

In de instellingen van Elementor is er een nieuwe instelling bijgekomen:

elementor 3.27 | Elementor 3.27 beta - Wat is nieuw?

Heb je deze instelling aan staan, dan zal Elementor detecteren welke Google fonts je gebruikt en deze -en ook alleen deze- downloaden van Google naar je website. Ook wordt de CSS aangepast om deze fonts ook voortaan lokaal te laden. Uit mijn eigen tests is gebleken, dat het ook nodig is de cache leeg te maken en in de ‘Tools’ van Elementor de CSS bestanden opnieuw te laten genereren, wanneer ik dat niet deed, kreeg ik nogal merkwaardige resultaten.

Het kan dat het euvel na de betaphase is opgelost. Maar houdt het wel even in de gaten.

elementor 3.27 | Elementor 3.27 beta - Wat is nieuw?

Performance: Alle stijlen laden in de <head> sectie

Eén van de dingen die Elementor al sinds het begin fout heeft gedaan, en waar vele groot-gebruikers (inclusief ikzelf) vele malen ons ongenoegen over hebben uitgesproken is het feit, dat CSS die via widgets wordt toegevoegd in de body sectie van het HTML document van de pagina worden geladen. Het werkt. Dat heeft meer met de tolerantie van de browsers te maken dan met de HTML/CSS specificaties zelf, want volgens de HTML specificaties mag CSS niet in de body voorkomen, anders dan via ‘style’ attributen van HTML tags (en zelfs liever dat niet).

Behalve dat het ‘niet zo hoort’, is een andere belangrijke reden, dat dit helemaal fout is, omdat de CLS negatief beïnvloed kan worden door CSS in de body – Delen van de pagina kunnen hierdoor ‘vertraagd’ gaan verschuiven.

Maar vanaf 3.27 gaat alle CSS in de <head> sectie.

Support voor verticale video

Sinds TikTok en YouTube shorts zijn verticale video’s niet meer uit het online leven weg te denken. De videospeler van Elementor ondersteunt dat nu ook. Eerlijk gezegd verbaasde me dit bericht, omdat bij mijn weten dit al gebeurde. De releasenote heeft het echter specifiek over YouTube Shorts, en wellicht leverde YouTube Shorts wel problemen op bij het gebruik in Elementor. Aangezien ik niets met YouTube Shorts doe, en mijn klanten klaarblijkelijk ook niet (anders had ik wel vragen gehoord), waren specifieke YouTube Short problemen mij onbekend. Mocht jij wel tegen dat probleem zijn aangelopen, het zou nu opgelost moeten zijn.

AI Motion Effects

Het zou nu mogelijk moeten zijn om je tekst te animeren door in een prompt te beschrijven wat een widget zou moeten doen. Enkele pogingen tot animatie die niet gelukt zijn (ik kreeg wel een animatie, maar niet waar ik om vroeg)

Zoom de tekst in vanuit het midden tot 20% groter dan standaard en laat hem dan drie keer om het midden draaien om uiteindelijk tot rust te komen.

Stuiter van bovenaf het beeld in en ga via links het beeld weer uit

De zaken die wel werkten had ik ook direct uit het lijstje met mogelijke animaties kunnen kiezen. Laten we zeggen, dat ze hier nog hard aan moeten werken, voordat ik ook maar een beetje onder de indruk ben.

Nog meer performance optimilisatie

Met Elementor 3.25 is een grote slag van performance optimalisaties ingezet, waar nog steeds hard aan gewerkt wordt en een lange lijst met suggesties die nu geïmplementeerd zijn, zijn bezig uitgevoerd te worden.

Haal alles uit Elementor!

Met onder meer uit uitbreiden van de functies van het Container Grid heeft Elementor weer een nieuwe stap gemaakt, waarmee professionele designers met Elementor Pro aan de slag kunnen gaan. Ben jij een WordPress professional of een webdesigner die nog niet met WordPress werkt en wil jij effectief en efficient met Elementor Pro leren werken, dan is de cursus Elementor Pro voor Designers typisch iets voor jou. Zorg dat je erbij bent, wanneer de nieuwe cursus start!

Extra aanvulling – De nieuwe Elementor Editor 4

Vanaf Elementor 4.x zal de nieuwe Elementor Editor 4 volledig beschikbaar komen, maar in Q2 van 2025 zullen onderdelen al als ‘preview’ gepresenteerd worden. De Elementor Editor 4 is de volgende stap in het bouwen van een volledige site met Elementor.

Wat biedt deze editor, wat nu nog niet beschikbaar is? Dit is wellicht het makkelijkst aan te geven in een aantal korte punten.

Class definitions

Op dit moment kan je de stijl van een website bepalen door kleuren en fonts de benoemen. Met de introductie van Editor 4 (wat eigenlijk een vreemde naam is, omdat het de derde versie van de ‘Elementor Editor’ is, Elementor 1 en 2, en de eerste paar versies van Elementor 3 deelden dezelfde ‘Editor 1’, en -uit mijn hoofd- rond Elementor 3.4 – 3.6 deed Editor 2 zijn intrede. Maar wanneer we een versie over willen slaan voor de editor om het gelijk op te laten lopen met de Elementor versie, heb ik er geen moeite mee) kan je niet alleen meer kleuren en fonts definiëren, maar kan je ieder element binnen je website met behulp van (visueel te definiëren) CSS klassen definieren.

Stel je voor. Op de website van je klant zie je graag lichtgroene knoppen met afgeronde hoeken, een border van 3 pixels in een meer donkere kleur en bij een ‘hover’, moet de achtergrond van de knop dezelfde kleur krijgen als de border. Wanneer je dat nu wilt, dan moet je dat voor iedere knop afzonderlijk definiëren. Met Editor 4 definieer je een specifieke class waarin deze kenmerken worden vastgelegd, en ken je de class toe aan elke knop die aan die eisen moet voldoen. Dat bespaart je al een hoop tijd, maar het bespaart je nog veel meer tijd, wanneer je dit aan moet passen!

Want stel je voor, je bent een WP Professional, en jouw klant vertelt je, dat die rand van 3 pixels toch wel iets te vet is. Of je dit wilt aanpassen naar 2 pixels.

In de huidige situatie betekent dit, dat je iedere knop handmatig aan moet passen. Afhankelijk van de grootte van de site kan dit een kwestie van minuten, of van dagen zijn. Met de Elementor Editor 4 is het nog geen minuut werk. Je past de class aan, en alle knoppen verbonden met die class worden ook aangepast.

De winst hier is overigens niet alleen de tijd die je bespaart. Maar omdat een instelling per element ook CSS code per element betekent, genereer je een enorme hoeveelheid feitelijk overbodige CSS code. Bij goed gebruik van deze functie, kan je jouw CSS code met 20-30% verminderen, wat een enorme performance verbetering teweeg brengt.

Alle properties zijn responsive

Op dit moment is het zo, dat een groot aantal van de properties responsive instelbaar zijn. Maar een ander groot aantal properties is dat beslist niet. Vanaf Editor 4 zijn alle properties responsive. Daarmee krijg je een grotere vrijheid tot het maken van specifieke responsive designs.

Atomaire widgets

In Editor 4 zijn widgets in principe atomair. Laat me je dit uit proberen te leggen aan een concreet voorbeeld. Stel je voor, er is een CTA widget met een afbeelding, knop en promotionele tekst daaronder. En hoewel ik dolgraag een CTA widget wil hebben, is dat niet de widget die ik wil. Wat belemmert mij een nieuwe ‘widget’ te maken, waarbij ik de tekst links plaats in een container, de afbeelding rechts en de knop zich uitstekkend onder tekst en afbeelding, en dit toevoeg aan mijn palet als nieuwe ‘CTA Widget’.

Door het samenvoegen van widgets in containers kan ik een nieuwe ‘widget’ maken, die ik vanuit mijn palet op andere plaatsen in de website kan gebruiken. Dat is een enorme tijdsbesparing.

Verbetering van de workflow

Vanuit mijn cursussen ‘Elementor Pro voor Designers‘ heb ik geleerd, dat veel WordPress designers die Elementor Pro gebruiken nog te weinig gebruik maken van de mogelijkheden tot verbetering van de huidige workflow. Met de introductie van Editor 4 kan je workflow nog veel efficiënter worden. Heb je er wel eens bij stil gestaan hoeveel tijd je kan besparen, wanneer je de mogelijkheden die Elementor je biedt om je werkprocessen te verbeteren echt volledig benut?

Vanaf heden gaat ook jouw tijdswinst met Editor 4 deel uitmaken van de tijdsbesparingen die je kan behalen met Elementor Pro. Heb je de cursus ‘Elementor Pro voor Designers’ al eerder gevolgd, houd je mailbox dan in de gaten, want wanneer Editor 4 publiek beschikbaar komt plan ik een aantal webinars in voor voormalige cursisten van de voornoemde cursus. Deze webinars zijn gratis.

Heb jij de cursus ‘Elementor Pro voor Designers’ nog niet gevolgd, maar schaam jij je er niet voor om een ‘unfair advantage’ te krijgen op jouw concullega’s schrijf je dan nu in voor de cursus!

Dit blogartikel beantwoord ondermeer de volgende vragen:

  • Welke nieuwe functies introduceert Elementor 3.27?
  • Hoe kunnen deze nieuwe functies de prestaties van je website verbeteren?
  • Wat zijn de belangrijkste wijzigingen in de gebruikersinterface van Elementor 3.27?
  • Hoe kun je de nieuwe mogelijkheden van Elementor 3.27 optimaal benutten bij het ontwerpen van je website?
  • Zijn er compatibiliteitsproblemen waar je rekening mee moet houden bij het updaten naar Elementor 3.27?

Nog niet uitgelezen?

Vind je dit artikel interessant? Mooi! Want ik heb nog veel meer te bieden. Op deze site vind je letterlijke honderden artikelen over WordPress, marketing, e-commers, e-learning en nog veel meer onderwerpen. Op zoek naar meer informatie? Kies één van de trefwoorden hieronder of tik een zoekopdracht in.

Meest populaire blogposts
Enkele trefwoorden om vergelijkbare posts te vinden:

Voeg je koptekst hier toe

Word je website de baas. Neem vandaag nog contact op!

Contact Informatie

WordXPression 

Aardoliestraat 14-I
7553GT Hengelo

085-8001964 (van 9:00 tot 17:00 van ma-vr)
Let op, gewijzigd telefoonnummer

KVK : 75580152 

Social media
Stuur een bericht

Beginnen met Elementor?

Nu is het juiste moment!

Tijdens de BFCM Sales van Elementor heb je tot 75% korting op de Elementor producten

De tijd tikt...

Dagen
Uren
Minuten
Seconden

Deze post rapporteren

Wanneer deze post niet meer relevant is of verouderde informatie bevat, zou ik het op prijs stellen wanneer je dit door wilt geven., zodat ik dit eventueel bij kan werken. De persoonlijke gegevens die je hieronder invult worden alleen gebruikt om de mail te versturen en zal niet voor marketingdoeleinden worden gebruikt.