Wat heeft Elementor 3.25 ons te bieden?

Elementor 3.25 beta – De onzichtbare verbeteringen

In de laatste paar nieuwe versies van Elementor Pro en Elementor waren er spectaculaire nieuwe functionaliteiten toegevoegd. Elementor 3.25 is op dat gebied wat minder spectaculair maar daarom niet minder sensationeel. De grootste krachtinspanning die het Elementor team voor deze versie heeft geleverd zit hem vooral onder de motorkap. Maar er zijn toch ook op het visuele gebied een aantal leuke nieuwe functionaliteiten te melden.

Zero CSS

Op dit moment wordt er bij het laden van Elementor automatisch een aantal CSS bestanden meegeladen. Zelfs op pagina’s waar je eventueel geen CSS zou gebruiken. Dat is met versie 3.25 dus afgelopen. Elementor zal alleen die CSS laden die nodig is voor het tonen van de widgets die daadwerkelijk gebruikt worden.

Een tweede, daarmee samenhangende verbetering is, dat wanneer je WooCommerce widgets gebruikt, wordt tot en met versie 3.24 een compleet WooCommerce/Elementor CSS bestand geladen. Ook dat bestand is ‘opgeknipt’ in de nieuwe versie.

In de praktijk zal dit betekenen, dat er minder CSS geladen wordt en hierdoor je website tussen de 10-20% sneller kan worden (dit laatste gebaseerd op een eigen benchmark, waarbij twee identieke sites, één onder 3.24 en de ander onder Elementor 3.25 draaiend werden gemeten op het 10.000 maal laden van eenzelfde pagina).

Het laden van Global Styles

Wanneer je goed werkt met Elementor Pro (zie ook mijn artikel over de zeven ‘Pro tips voor Elementor’) zal je gebruik maken van ‘Global Styles’, de instellingen voor globale kleuren en lettertypen. Op dit moment is het nog zo, dat deze ‘global styles’ ook ‘globaal’ geladen worden. Dus op iedere pagina. worden alle stijlinstellingen geladen.

Vanaf Elementor 3.25 worden alleen de globale stijlen die op die pagina gebruikt worden geladen.

JavaScript vervangen door Native CSS

Eén van de nadelen van moderne CSS (de ‘visuele opmaak taal’ voor websites) is dat niet alle browsers direct de standaarden ondersteunen. En dat is de reden geweest, dat voor een vloeiende doorloop op de pagina’s bij het gebruik van ‘ankers’ toen in 2016 voor het eerst werd geïntroduceerd, ondersteunden de meeste browsers de CSS nog niet, waarmee een pagina vloeiend naar een anker verschuift.

Daarom gebruikten de makers van Elementor een JavaScript bibliotheek, AnchorJS. Op zich een prima keuze destijds. Maar inmiddels ondersteunen alle respectabele browsers de CSS standaarden die voor deze overgang nodig zijn, en is het tijd deze JavaScript bibliotheek vaarwel te zeggen, en het via alleen CSS op te lossen.

Dit scheelt opnieuw tijd, niet alleen door het niet meer laden van het JavaScript bestand, maar ook omdat de uitvoering van JavaScript altijd langzamer is, dan het werken met CSS.

Alfa experiment: Vereenvoudiging van de mark-up van widgets

Een andere ’time saver’ is voorlopig nog een alfa experiment, wat je zelf moet activeren, wanneer je het wilt gebruiken en wat je zeer zeker niet op een live site moet gebruiken.

Onder Elementor -> Instellingen -> Tools / Extra -> Functies vind je de mogelijkheid om ‘Geoptimaliseerde markup’ te activeren.

Vooral met betrekking tot de oudere widgets is er soms een overdaad aan HTML gebruikt om een component te laten doen, wat het component behoort te doen. Een beruchte widget hier is iets simpels as de ‘Knop’, de ‘Button’ widget. Deze bevat veel meer HTML dan strict noodzakelijk en zo is er nog een aantal boosdoeners te noemen.

Het probleem is echter, dat je deze niet zomaar aan kan passen. Wanneer Elementor geen rekening zou hoeven te houden met anderen zou het geen enkel probleem zijn, maar er zijn talloze add-ons van derde partijen en soms hebben designers ook extra CSS toegevoegd, die uitgaat van een specifieke markup voor deze widgets. Dingen zouden dus zomaar ‘kapot’ kunnen gaan, wanneer Elementor zomaar dingen zou wijzigen.

Dat is de reden, dat dit een ‘alfa’ experiment is. Er kan nog van alles wijzigen aan hoe de onderliggende widgets ‘vereenvoudigd’ worden, op dit moment is er geen enkele commitment of belofte van Elementor, dat deze functie ongewijzigd zal blijven, en wanneer je deze toch gebruikt, dan kan je later tegen verrassingen aanlopen. Je kan deze functie op staging en test sites gebruiken, om te zien of het werkt voor jou, en als het niet zo is, dit eventueel terugkoppelen richting Elementor. Gebruik het nooit op een live site.

De zichtbare verbeteringen

De zichtbare verbeteringen aan Elementor zijn deze versie niet zo erg opvallend. Geen nieuwe widgets, geen spectaculaire nieuwe functionaliteiten. Er is toch wel een aantal kleine dingen toegevoegd, die het werken met Elementor weer tot een klein feestje maken. Al is het alleen maar, om te weten dat je wensen als Elementor gebruiker ook gehoord worden.

Anchor offset control

Al sinds Elementor 2.0 een kleine irritatie voor vele Elementor gebruikers.

Wanneer je gebruik maakt van ‘sticky headers’ (of footers, of welke andere ‘sticky’ componenten dan ook), liep er tot en met Elementor 3.24 iets niet lekker. Klikte je namelijk op de link naar een ‘anchor’, dan rolde Elementor door, tot het anchor boven aan de pagina stond.

Bij een wat hogere header betekende dat ook, dat de content behorende bij het anchor onder de header verdween. Iedere webbouwer had zijn of haar eigen trucjes om dat te voorkomen.

Nu is de tijd van de trucjes voorbij en kunnen we in een ‘sticky section’ een aantal offsets aangeven. Eén nieuwe offset is de ‘anchor offset’. Hiermee geef je aan, waar -na het klikken op een anchor link- het anker heen moet schuiven. Normaliter zal dit de waarde van de hoogte van de header, plus enige tussenruimte tussen de header en de content zijn.

Is je header bijvoorbeeld 100 pixels hoog, dan zou je offset 120 kunnen zijn.

Wat hier alleen jammer is, is dat hier alleen rekening met pixels wordt gehouden, niet met andere eenheden. Maar het is nog steeds een beta versie, en ik heb al gesuggereerd dat het ook anders zou moeten kunnen.

Paginering voor de (niet meer zo) nieuwe search functie

In Elementor 3.23 is de Search functie van Elementor sterk gemoderniseerd. Eén van de mogelijkheden is nu om live resultaten tijdens het zoeken te laten zien. Een machtig mooie functie die ik enkele maanden geleden uitgebreid heb besproken.

Eén nadeel van deze nieuwe functie was tot en met Elementor 3.25 dat het aantal live-results beperkt was. Je kon zelf wel aangeven hoeveel resultaten je wilde hebben, maar het moest allemaal wel binnen de container passen, waarbinnen je de resultaten wilde tonen.

Vanaf Elementor Pro 3.25 is er een mogelijkheid om de resultaten ook te pagineren. Krijg je dus meer resultaten dan er binnen jouw opgegeven aantal resultaten past, wordt onder de resultaten de paginering getoond.

Ook deze functie is mooi meegenomen, nietwaar?

Tenslotte

Naast deze zichtbare en onzichtbare aanpassingen, die ik zeker een verbetering wil noemen, zijn er tientallen kleine issues aangepast. Hoewel aan de ‘zichtbare’ kant ditmaal de toevoegingen minimaal zijn, zijn de -onzichtbare- aanpassingen aan de CSS een enorme verbetering.

Op dit moment is er nog geen geplande releasedatum voor de stabiele versie van 3.25, maar ‘begin november’ wordt regelmatig genoemd. Er vanuit gaande, dat het toch altijd één of twee weken later is dan gepland, verwacht ik dat de update naar Elementor 3.25 rond 15 november uit zal komen.

Wil je op de hoogte blijven van onder andere de laatste ontwikkelingen rond Elementor? Abonneer je dan op de gratis nieuwsbrief door het formulier onder deze pagina in te vullen.

Zelf op zoek naar een website in Elementor, of wil je jouw bestaande website naar Elementor om laten zetten? Of zoek je een WooCommerce/Elementor webshop? Neem dan eens contact op met WordXPression.