Maak je gebruik van Elementor of Elementor Pro dan heb je vast al de update naar versie 3.0 voorbij zien komen in jouw WordPress website. In deze versie zijn veel wijzigingen doorgevoerd. Je zou het best een major upgrade kunnen noemen.
Lees ook zeker even de changelog door voordat je op “bijwerken” klikt. De ontwikkelaars van Elementor geven zelf al aan dat de update breaking changes bevat.
Normaal vormt deze upgrade geen probleem. Maar in Elementor 3.0 zijn er een aantal CSS classes komen te vervallen. Op deze manier zijn er minder HTML regels nodig om een pagina op te bouwen. Dit scheelt in omvang en laadtijd. Eigenlijk alleen maar positief dus.
Het gaat om de volgende CSS wrapper classes:
- .elementor-inner
- .elementor-row
- .elementor-column-wrap
Maak je gebruik van eigen CSS via een van de onderstaande opties:
- WordPress customizer CSS veld
- Elementor aangepaste CSS veld
- Parent of childtheme
Dan loont het de moeite om te kijken of je de eerder genoemde CSS wrapper classes of selectors hebt gebruikt om de visuele presentatie aan te passen. Na de upgrade bestaan deze niet meer en in sommige gevallen kan dit voor grote problemen zorgen. Een oplossing is om een CSS selector een niveau dieper te gebruiken.
Ik gebruik zelf PHPStorm om wijzigingen in PHP of CSS bestanden door te voeren. Zo kan ik eenvoudig in een keer in alle bestanden van een website zoeken op .elementor-inner, .elementor-row of .elementor-column-wrap.
Tip:
In Elementor op de tab geavanceerd kan je per element ook zelf unieke CSS ids of CSS-classes opgeven. Hier heeft Elementor geen invloed op. Door hier gebruik van te maken worden je CSS regels stabieler en zullen ze minder snel deprecated worden.
Nog beter is om zo weinig mogelijk eigen CSS te schrijven. Heb je toch eigen CSS nodig? Plaats het dan in een veld of bestand zodat je het gemakkelijk kan onderhouden.