Elementor 3.13 – AI en nog meer containers

Enkele dagen geleden is de eerste publieke Beta versie van Elementor 3.13 vrijgegeven. En deze nieuwe versie heeft weer een groot aantal nieuwe functies die mij eigenlijk heel blij maken.

Voor alle duidelijkheid, een ‘beta’ versie installeer je natuurlijk nooit op je livesite –Dat doe je op een staging site– en ook niet onbelangrijk, niet alle functies die zijn toegevoegd zijn ook straks direct bruikbaar. Een aantal van deze functies is nog experimenteel en verkeert in een alpha of beta fase. Meer hierover lees je in mijn artikel over experimenten in Elementor.

Ook Elementor is kunstmatig intelligent geworden!

De eerste grote verandering die natuurlijk opvalt is de integratie van AI functies met Elementor 3.13. Hierover heb ik letterlijk de dag van het verschijnen van de publieke beta een korte video gemaakt, en ik kan je zeker aanbevelen hiernaar te kijken.

Over de precieze status van deze AI functie en de integratie in de uiteindelijke versie van Elementor 3.13 is echter nog niet veel bekend. Ook hier lees je meer over in het eerdergenoemde artikel.

Nog meer containers: Ditmaal Grid Containers.

Een tweede grote uitbreiding op Elementor is de toevoeging van zogenaamde ‘Grid containers’.

Op dit moment is de implementatie van de mogelijkheden van grid containers nog beperkt. In principe wordt slechts een beperkte subset van al deze mogelijkheden in Elementor 3.13 ondersteund, maar het is wellicht toch goed om naar alle mogelijkheden te kijken, omdat de makers van Elementor hebben aangegeven, dat de ondersteuning van grid containers in de toekomst uitgebreid zal worden.

Grid containers zoals tot nu toe geïmplementeerd

De wijze van implementatie op dit moment is eigenlijk super simpel. Te simpel eigenlijk om gebruik te kunnen maken van alle mogelijkheden.

Natuurlijk moet je om het te kunnen gebruiken de nodige keuzes maken onder Elementor->Instellingen->Functies (de nieuwe naam voor ‘Experimenten).

Deze pagina ziet er vanaf versie 3.13 ongeveer als volgt uit:

Het belangrijkst is dat je ‘Flexbox Container’ en ‘Grid Container’ allebei aan hebt staan.

Wanneer je nu naar de page- of theme editor van Elementor gaat (bijvoorbeeld door een pagina te openen en te kiezen voor ‘Bewerk met Elementor’) dan zal je merken, dat er maar één ‘soort’ container in je tool palette staat. Is er iets fout gegaan?

Nee hoor. wanneer ik namelijk klik op de ‘Plus’ op de pagina om iets toe te voegen

Krijg ik een compleet nieuwe vervolgkeuze:

Klik ik op ‘Flexbox’ dan krijg ik nog steeds een keuze uit verschillende flexbox layouts, maar klik ik op Grid, dan krijg een nieuwe keuze voor grid structuren.

Heb je per ongeluk een verkeerde keuze gemaakt, je had ‘Flex’ bedoeld, maar klikte ‘Grid’ of omgekeerd, dan is dit geen ramp. Bij de instellingen van je container kan je onder de optie ‘Container Layout’ de instellingen makkelijk wijzigen.

Dat is nu natuurlijk allemaal leuk en aardig, maar waarin verschilt een ‘grid structuur’ nu van een ‘flexbox’, en ook, wat is het verschil tussen een grid structuur en een klassieke ‘section / column’ structuur?

Het belangrijkste verschil tussen een grid structuur en de klassieke layout, is dat een grid structuur onder water minder HTML nodig heeft, en veel makkelijker responsive te tonen is.

De items die je in een grid plaatst kunnen van links naar rechts ingevoegd worden, of van boven naar beneden:

geeft als resultaat

en de instelling hieronder:

geeft als resultaat

Een Grid layout is uitermate geschikt om even grote items binnen een pagina op een goede responsive manier te tonen.

De beperkingen van de huidige implementatie

Zoals aangegeven, kan je met een grid layout heel wat meer, dan wat nu als mogelijkheden wordt aangeboden. Eén belangrijke functie van Grid layouts is, dat je kolommen verschillende breedten kan geven. Dat is bij de huidige implementatie (nog) niet mogelijk. Kijk bijvoorbeeld eens naar onderstaand voorbeeld.

Een layout als bovenstaande, waarbij kolommen een ongelijke breedte hebben is op dit moment nog niet direct mogelijk met de grid columns zoals deze op dit moment zijn geïmplementeerd in Elementor. Dit is overigens wel door middel van enkele regels CSS te tweaken.

Zie hieronder de CSS / HTML code die hiervoor gebruikt is

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 30px;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The grid-template-columns Property</h1>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

</body>
</html>

De werkelijke magie zit hem hier in regel 7.

Een tweede zaak die hier ook niet ondersteund wordt is om eenzelfde functionaliteit in de hoogte te kunnen krijgen. Dus iets als hieronder:

Zie de onderstaande code om een idee te krijgen, hoe je dit kan realiseren

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: 80px 200px;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The grid-template-rows Property</h1>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>  
</div>

</body>
</html>

Ditmaal vind je de werkelijke magie in regel 8.

En een derde functie die op dit moment nog niet wordt ondersteund is een item over meerdere kolommen of rijen te plaatsen.

Zoiets als hieronder:

Om bovenstaande voor elkaar te krijgen is er op dit moment ook nog geen ‘makkelijke work-around’.

Samenvattend over de Grid container

De huidige implementatie van de Grid container is een leuk begin, maar beslist nog geen volwaardige implementatie van alles wat met Grid containers mogelijk is. Ik houd de makers van Elementor dan ook aan de belofte dat dit in toekomstige versies verder uitgewerkt zal worden. Wanneer de bovenstaande nu nog missende functionaliteiten volledig zijn geïmplementeerd is de ‘grid container’ layout een krachtig instrument voor het vormgeven van je websites, die de tekortkomingen van zowel de klassieke layout als de flex layout goed compenseren.

Uitbreidingen aan het nieuwe menu

Ik heb in mijn bespreking over Elementor 3.12 al aangegeven, dat Elementor naast het ‘WordPress menu’ een eigen menu widget heeft, waarmee onder meer mega menu’s kunnen worden gebouwd.

Met de komst van 3.13 kan je een tweetal belangrijke zaken instellen voor het ‘Elementor menu’.

Een icon toevoegen aan een menu item

Het is nu ook mogelijk geworden om een menu icon toe te voegen aan je menu-items. Je kan kiezen uit een menu uit de iconenbibliotheek, of een menu via een SVG bestand.

Stijl instellingen voor een ‘active’ menu item

Bij mijn eerste kennismaking met de nieuwe menu widget was het eerste wat ik miste een instelling voor een actief menu-item. Wat nog veel storender was, was dat de kleuren voor een actief menu item wel vanuit het thema werd getoond, waardoor je totaal ongewenste kleureffecten kreeg, die je via CSS op moest lossen.

Dit gebrek is dus met 3.13 opgelost.

De topbar – Een nieuwe manier van navigeren

In 3.12 werd de nieuwe topbar al geïntroduceerd, maar hier ontbrak nog een aantal functies in, om deze echt een goede vervanging van de oude editor interface te laten zijn. Met name de optie om op te slaan als concept of template ontbrak. Toch wel een groot probleem.

In 3.13 is de topbar volledig functioneel en als een leuke extra optie: Je kan makkelijk heen en weer springen tussen de laatste vijf pagina’s, posts of templates waar je aan hebt gewerkt.

Automatisch de samenvatting van je post plaatsen

Tot op de dag van vandaag -of eigenlijk enkele dagen geleden- had Elementor wat mij betreft één groot en serieus bezwaar. De samenvatting van een blogpost wordt alleen getoond, wanneer je daadwerkelijk invult.

Hoewel de meeste thema’s bij het ontbreken van een samenvatting de eerste x woorden van je blogpost laten zien, laat Elementor de samenvatting leeg, wanneer deze leeg is.

Dat is natuurlijk prima, wanneer je dit zo wilt, maar wanneer je toch een teaser wilt tonen, dan is dat toch een serieus bezwaar.

Vanaf versie 3.13 biedt Elementor Pro je dus de keuze. Bij de ‘Post Excerpt’ widget en bij de Post Excerpt dynamische tag staat er aan het begin van de naam een Engelse sleutel. Klik je daarop, dan kan je aangeven hoe lang de samenvatting moet worden (gerekend in woorden, dat staat er niet duidelijk bij), en of je wel of niet de post content als inhoud wilt nemen, wanneer een samenvatting ontbreekt.

Kleurselectie in meerdere mogelijkheden

De kleurkiezer ondersteunt nu het ingeven van kleuren volgens meerdere systemen. Standaard kon je altijd al de kleuren ingeven volgens het HEX(A) kleursysteem, dus een code als #FFFFFF00, waarbij de laatste twee nullen optioneel zijn, die geven de mate van doorschijnendheid aan.

Vanaf versie 3.13 kan je de kleuren ook volgens het RGB(A) systeem opgeven – rgba(255,255,255,1) of HSL(A) – hsla(12%,50%,13%,1).

Dit kan handig zijn wanneer je de kleuren van een bestaand kleurschema in wilt geven, wat je niet in HEX(A) formaat hebt ontvangen.

En er komt nog veel meer…

Zoals ik enige tijd geleden heb aangegeven, is dit nog maar het tipje van de ijsberg van de nieuwe zaken die we nog in dit kwartaal van Elementor mogen verwachten. Persoonlijk ben ik hier zeer blij mee, omdat Elementor met de nieuwste features de noodzaak om extra Elementor add-ons te gebruiken steeds verder verkleint. Per slot van rekening willen we juist met Elementor werken, omdat we hiermee het aantal plugins kunnen verminderen.

Leren werken met Elementor

Met al die vernieuwingen van en rond Elementor kan ik mij heel goed voorstellen, dat je even door de bomen het bost niet meer kan zien. Gelukkig heb ik een aantal cursussen tot je beschikking die helemaal bijgewerkt zijn tot op de stand van zaken van vandaag.

Bijvoorbeeld mijn klassikale cursussen

• Elementor voor Beginners
• Elementor voor Gevorderden
• Elementor voor Aankomend experts

Leer je liever in je eigen tijd, dan kan je nu heel voordelig bij voorinschrijving inschrijven voor mijn online cursus ‘Bouw Vijf Kickass Websites‘, waarin je aan de hand van 5 websites die je bouwt Elementor tot in detail leert kennen.

Ben jij bezig met jouw Elementor Website, en je hebt behoefte aan iets meer persoonlijke begeleiding, dan kan dat ook. Met de WordXPression Support Strippenkaart kan je begeleiding bij de bouw van je eigen website krijgen, op het moment en de manier die jou het beste past!