Elementor Cloud Templates: Je persoonlijke design bibliotheek

Elementor Cloud Templates: Hergebruik vereenvoudigd!

Vanaf het begin is één van de krachtige onderdelen van Elementor, dat het relatief eenvoudig mogelijk is om reeds eerder gemaakte ontwerpen op nieuw te gebruiken. Het is namelijk mogelijk om secties of gehele pagina’s te exporteren vanuit één site, en te importeren in een andere site. Later, toen Elementor overstapte van ‘Secties’ naar ‘Flexbox containers’ werd het systeem nog krachtiger, want in plaats van alleen secties, kon je nu iedere container exporteren, dus ook deelontwerpen binnen een sectie.

Het principe is eigenlijk kinderlijk eenvoudig: Klik met de rechter muisknop op het icoon linksboven in een container, en geef aan, dat je die container wilt exporteren. Je krijgt dan een JSON bestand met alle instellingen van die container, waardoor je deze zo op een nieuwe site weer kan importeren. Een belangrijk punt om op te letten, is dat de site waar je de template importeert dezelfde of een nieuwere versie van Elementor moet gebruiken, omdat anders bepaalde onderdelen verloren kunnen gaan.

Wil je meerdere templates exporteren, is het ook mogelijk om vanuit de ‘Templates’ menu optie te klikken op ‘Opgeslagen Templates’ (of ‘Saved Templates’), en vanuit hier aan te klikken welke templates je wilt exporteren. Al deze templates worden daarna als ZIP bestand gedownload. Wanneer je deze op een slimme manier bundelt en namen geeft, kan je bij het starten met een nieuwe site met het importeren van één enkel ZIP bestand, die je dan vervolgens vanuit jouw template-bibliotheek in Elementor kan gebruiken.

Toch is dit een omslachtige manier van werken, wanneer je met een groot aantal sites werkt. In de eerste plaats omdat je iedere keer moet uploaden en downloaden. Natuurlijk kan je dit al een stuk efficienter maken door je her te gebruiken templates niet op te slaan op een lokale drive, maar op een drive voor cloudopslag, zoals bijvoorbeeld OneDrive of Google Drive.

Maar wanneer je Elementor Pro gebruikt, heeft Elementor een handige oplossing vanaf versie 3.29 ingebouwd: Elementor Cloud Templates

Templates vs. webkits

Tijdens de verschillende cursussen die ik voor WordPress professionals heb gegeven over Elementor Pro, zoals bijvoorbeeld de cursus ‘Elementor Pro voor Designers‘ bleek er nogal eens wat onduidelijkheid te bestaan over de verschillen tussen ‘Templates’ en ‘Webkits’.

Elementor templates zijn individuele bouwstenen binnen je site. Denk hierbij aan een losse header, een footer, een specifieke pagina (zoals een contactpagina) of een sectie (bijvoorbeeld een testimonial-slider). Je kunt templates zelf opslaan of downloaden van de Elementor library. Ze zijn ideaal voor hergebruik binnen één website of om onderdelen op maat te maken zonder steeds opnieuw te beginnen.

Wanneer je een nieuwe site bouwt, dan kun je deze individuele elementen importeren in die nieuwe website en daar waar nodig hergebruiken. Belangrijk hier is te realiseren, dat er geen pagina’s automatisch worden aangemaakt.

Een Webkit (of Sitekit) is een volledig ontwerp voor een complete website, inclusief meerdere pagina’s (home, over ons, contact, blog, etc.), globale instellingen, kleuren, typografie én vaak ook themastijlen en headers/footers. Webkits worden meestal geleverd als een totaalpakket dat je in één keer importeert in Elementor, waardoor je snel een volledige, professioneel ogende site kunt opzetten. Ze zijn vooral handig voor wie snel een consistente look-and-feel wil neerzetten zonder alles vanaf nul te ontwerpen.

Iets later in dit artikel bespreek ik een workflow waarbij je Templates en Webkits op een ideale manier met elkaar samen kunt laten werken.

Wat zijn ‘Elementor Cloud Templates’?

De naam zegt het eigenlijk al. Elementor Cloud Templates zijn Elementor Templates die opgeslagen zijn in de Elementor Cloud. Nu is deze opslag niet onbeperkt en de opslag (en toegang) is gekoppeld aan jouw Elementor account.

Laten we even kijken naar de verschillende opties die er zijn voor Elementor Pro licenties en de bijbehorende cloud templates. Omdat Elementor toch regelmatig de licentieplannen en wat er allemaal wel en niet bijhoort wijzigt, is het goed om het altijd even te controleren.

De verschillende Elementor Pro licenties

Er zijn verschillende licentietypes voor Elementor Pro, waarbij de gewenste functionaliteit en het maximaal aantal websites de meest bepalende -en beperkende- factor is.

• Essential
  De ‘Essential’ licentie is bedoeld voor één website. Je hebt hierbij toegang tot 57 pro widgets (plus alle gratis widgets) en een beperkte versie van de ‘Form Builder’. Je kan formulieren maken, die per email verstuurd worden, maar de ingevulde formulieren worden niet opgeslagen in de database, en integraties met andere diensten is niet mogelijk.
  
  Bij deze licentie kan je maximaal 10 ‘cloud templates’ opslaan. Persoonlijk zie ik het nut niet in om met een Essential licentie cloud templates te gebruiken. Overigens ook geen enkel nadeel om dit te doen. Aangezien je slechts één website hebt, heb je geen enkel voordeel bij het delen van templates tussen sites.
• Advanced Solo
  De ‘Advanced Solo’ licentie biedt alles wat de ‘hogere licentievormen’ van Elementor Pro ook bieden. Dus 86 Pro widgets en ook de geavanceerde functies die ‘Essential’ niet biedt, zoals een integratie met verschillende diensten via de Elementor Form Builder, de Pop-up Builder en WooCommerce functies.
  
  Bij deze licentie kan je maximaal 20 ‘cloud templates’ opslaan. Aangezien je ook met deze licentie slechts één website mag bouwen, zie ik ook geen echte voordelen van de cloud templates hier.
• Advanced Pro
  Advanced Pro biedt alles wat Advanced Solo ook biedt, met twee belangrijke verschillen: Je kan de licentie voor 3 sites gebruiken en je kan maximaal 30 cloud templates opslaan. En dat begint leuk te worden. Wanneer je 2 of 3 sites hebt, dan zal je waarschijnlijk waarde hechten aan enige uniformiteit binnen het design van de website, en via de cloud templates is het makkelijk deze templates tussen sites te gebruiken.
• Expert en Agency
  Vanaf het begin van Elementor Pro hebben de mensen van Elementor nogal lopen goochelen (en dat is geen tikfout voor ‘googelen’) met de professionele licenties. In 2017, toen ik met Elementor Pro begon, was de ‘Expert licentie’ goed voor 1000 websites. Daarvoor betaalde je 199 euro. Enkele jaren later besloten de mensen van Elementor, dat dit toch wel heel veel waarde voor je geld is, en veranderden het hele licentieplan met een aantal tussenstappen, waarbij er een licentie voor 100 sites, 250 sites, 500 sites en 1000 sites reintroduced werden. En je betaalde hiervoor bedragen tussen de 199 en 999 euro per jaar. Gelukkig voor de mensen die ooit een ‘Expert licentie’ hadden gekocht voor 199 euro, is voor die mensen de jaarlijkse prijs hetzelfde gebleven. Nou ja, pas is deze met 5 euro omhoog gegaan naar 204 euro, maar 7 jaar lang heb ik een licentie voor 1000 websites, voor slechts 199 euro gehad.
  Van dit hele ingewikkelde plan zijn er twee stappen over gebleven. Expert (voor maximaal 25 websites) en Agency (voor maximaal 1000 websites). En de huidige prijs voor ‘Agency’ is 399 euro per jaar.
  
  Met een ‘Expert‘ licentie, en daarbij maakt het niet uit of je een ‘oude’ licentie hebt, of een ‘nieuwe’ kan je 5.000 templates opslaan in de cloud. Met een ‘nieuwe’ expert licentie kan je zoals al gezegd 25 websites bouwen, en dan is 5.000 cloud templates eigenlijk ‘oneindig veel’. Wanneer je meer dan 200 ‘templates per site’ hebt, die je ‘tussen sites wilt delen’, heb je duidelijk niet begrepen, hoe je werk kunt besparen door deelontwerpen her te gebruiken.
  En zelfs wanneer je een ‘oude expert licentie’ hebt, dan zal dit waarschijnlijk meer dan genoeg zijn. Want van die 1000 sites die ik mag bouwen met mijn Elementor Pro licentie, heb ik er in de afgelopen bijna 8 jaar er ‘slechts’ zo’n 250 licenties daadwerkelijk actief.
  
  Met een Agency license mag je maximaal 50.000 cloud templates opslaan. Ik geef het je te doen!

Werken met Elementor Cloud Templates

Zoals eerder al aangegeven, het werken met Elementor Cloud Templates is kinderlijk eenvoudig. Hierbij is een tweetal dingen echter heel belangrijk:

1. Je moet een versie van Elementor Pro gebruiken groter dan of gelijk aan 3.29.
2. De site waar je de cloud templates toe wilt passen moet groter of gelijk zijn aan de versie van de site waarvan geëxporteerd.

In principe dus, wanneer je altijd werkt op alle sites met de nieuwste versies van Elementor Pro, is er geen vuiltje aan de lucht.

Een ander punt om rekening mee te houden, is dat het aantal templates en de beschikbare templates gekoppeld zijn aan jouw licentie.

Met andere woorden, wanneer jij een website voor een klant maakt, en zowel jij als je klant ‘Admin’ rechten hebben voor de WordPress site, heeft jouw klant geen toegang tot de templates in jouw cloud omgeving. Het zijn dus jouw templates, ongeacht wie de eigenaar van de licentie is waar de site onder draait, of de rol die een gebruiker heeft. Wil jij bepaalde templates uit jouw ‘cloud’ beschikbaar maken voor je klant (zoals bijvoorbeeld het ontwerp van een contactformulier, zodat hij het later op verschillende pagina’s in zou kunnen voeren), dan moet je dit template ook importeren in de lokale library.

De widgets binnen een template wat je exporteert, moeten ook toegankelijk zijn in de nieuwe site!

Gebruik je widgets via Elementor Add-ons, dan moeten dezelfde add-ons geïnstalleerd zijn op de nieuwe site voordat je het template importeert. Heeft de nieuwe website een ‘Elementor Pro Essentials’ licentie, dan moet je er rekening mee houden dat alleen de widgets voorkomend binnen de Essentials licentie geïmporteerd zullen worden.

Je kunt alleen content binnen containers exporteren, geen individuele widgets!

Wat je wilt exporteren moet altijd in zijn geheel binnen een container zijn. Je kunt niet binnen één container een specifieke widget exporteren.

Exporteren van een container

Wanneer je te maken hebt met een ‘hoofd’ container (met een tab in het midden met zes punten), dan klik je met je rechter muisknop op de zes punten. Heb je te maken met een geneste container -een container in een container- dan klik je op het icoontje wat verschijnt wanneer je de cursor plaatst in de linker hoek.

Daarna krijg je een menu als het onderstaande te zien.

Je klikt hier op ‘Save as Template’ of ‘Opslaan als Template’, daarna krijg je het volgende scherm te zien:

Hier vul je dus de naam voor de template te zien. Het scherm suggereert dat je ook mappen kan toevoegen, maar dat is helaas niet helemaal juist. Het kan wel, maar je zal voor je dit kunt doen eerst één template hebben geupload.

Omdat het een goed idee is om je templates in mappen op te slaan afhankelijk van het type template, wil ik graag verschillende mappen aanmaken. Bijvoorbeeld een map ‘headers’, een map ‘contactformulieren’, een map ‘winkelpaginas’ etc.

Maar om dat te doen moeten we eerst in een vervolgscherm komen. En de enige manier om dat te doen is om in ieder geval alvast één template op te slaan. Bij de naam tikken we dus ‘contractformulier-elegant’ in (of wat je ook maar wilt) en klikken we op ‘Save’.

Je kan nu een folder aanmaken, waarin je het bestand op wilt slaan, door op het mapje te klikken. Hier tikken we de gewenste naam voor de folder in. Bijvoorbeeld ‘Contactformulieren’.

En door op de drie punten aan het einde van een regel te klikken kunnen we de template verplaatsen naar een map.

Wanneer je direct meerdere mappen aanmaakt, dan kan je in het vervolg direct naar de juiste map uploaden.

Bestaande templates naar cloud templates verplaatsen

De Elementor Cloud Templates is een betrekkelijk nieuwe functie in Elementor. Op het moment dat ik dit schrijf maakt deze functie net iets meer dan een maand deel uit van Elementor Pro. Wanneer je een professionele webdesigner bent en -net zoals ik- al enkele jaren met Elementor werkt, heb je waarschijnlijk in die jaren al een groot aantal templates gemaakt, die je graag in meerdere sites zou willen gebruiken.

Eén van de dingen die je kan doen is de ZIP of JSON bestanden die je eerder al hebt geëxporteerd direct te uploaden naar Elementor Cloud Templates. Dit doe je op eenzelfde manier als je templates lokaal zou importeren, maar je zorgt ervoor, dat de knop ‘Cloud templates’ in plaats van ‘Site templates’ is aangeklikt (1). Daarna klik je op de knop om te uploaden (pijl omhoog(2)).

Heb je een oudere site waarvan je de templates niet gedownload hebt? Geen enkel probleem. Deze kan je direct naar de Elementor Cloud Templates verplaatsen.

In de ‘Template Library’ zorg ik ervoor, dat ik op ‘Site Templates heb geklikt.

Vervolgens kies ik de templates die ik naar de cloud wil verplaatsen of kopiëren.

Wanneer ik één of meerdere templates heb geselecteerd wordt er een extra werkbalk zichtbaar met onder meer 3 iconen:

1. Kopiëren: Ik maak een kopie van de template
2. Verplaatsen: Ik verplaats de template: Hij verdwijnt van deze lijst, maar wordt zichtbaar in de folder waar ik hem heen verplaats
3. Verwijderen. Dat is duidelijk.

Wanneer ik templates in de cloud plaats, dan wil ik deze niet meer in mijn lokale template library hebben. Althans niet met dezelfde naam. Hierdoor voorkom ik dat ik in de war raak, welke template nu ook al weer welke was. Ik kies hier dus voor de tweede icoon. ‘Verplaatsen’ (Move).

Het enige wat ik nu nog hoef te doen is een folder in de cloud te kiezen en op ‘Move’ te klikken. De template zal nu wel in de cloud, maar niet meer lokaal op de site staan.

Het template hernoemen

Wanneer je een template voor een contactformulier aanmaakt op een site, dan is de meest voor de hand liggende naam voor dat contactformulier ‘contactformulier’. Wanneer je echter in de Elementor Cloud Templates tien templates hebt met de naam ‘contactformulier’, dan kan het wat onoverzichtelijk worden, welk formulier dit nu werkelijk is. Daarom is het goed direct na het uploaden van een formulier naar de cloud deze te hernoemen naar een beschrijvende naam.

Bij contactformulieren zou ik dat dus bijvoorbeeld doen als ‘contactformulier-bedrijven’, ‘contactformulier-consument-met-adres’, etc. Of op basis van de gebruikte stijl ‘contactformulier-elegant’, ‘contactformulier-ronde-hoeken’, ‘contactformulier-flat-design’.

Importeren van een container

Een template importeren vanuit de Elementor Cloud Templates is zo mogelijk nog eenvoudiger. Je klikt op de folder voor het importeren van een template en bij ‘Mijn bibliotheek/My library’ kies je voor de Cloud Templates en daar voor het template wat je wilt importeren.

Wat is beter? Webkits of Templates?

Eerder in dit artikel heb ik het verschil tussen webkits en templates al aangegeven. Maar waar kun je beter vanuit gaan? Webkits of templates? En als het beter is om met webkits te werken, is het dan nog zinvol om een hele template library op te zetten?

Mijn antwoord op deze vraag is vrij simpel. Gebruik ze allebei naast elkaar, want het één sluit het ander niet uit.

De kracht van Webkits is dat je met een klein aantal handelingen al een groot deel van de site op kunt zetten.

Denk bijvoorbeeld aan een standaard ondernemerssite. Daar komt een aantal pagina’s vast in voor: Een homepage, een ‘over mij/ons’ pagina, een testimonials pagina en een contactpagina.

Waarschijnlijk heb je zo ook de favoriete plugins waarmee je werkt, en een aantal favoriete typografieën.

Bij het aanmaken van een webkit, kun je aangeven wat je van een bepaalde site allemaal ‘mee wilt nemen’ in die kit.

Tijdens de cursus ‘Elementor Pro voor Designers‘ leer je hoe je makkelijk een webkit op kunt bouwen met Elementor Pro door ‘het beste van je beste sites’ te verenigen in een ‘starterkit’, waarmee je in een paar minuten de basis van een nieuwe site op kan bouwen. Daarna gebruik je jouw template bibliotheek om -ook weer behoorlijk vlot- de ‘standaard componenten’ uit je webkit te vervangen door componenten zoals jouw klant ze graag ziet.

In enkele uren kan je het eerste concept voor een website van je klant klaar hebben, en dat zonder AI te gebruiken!

Een bestaande site als webkit exporteren

Even voor de duidelijkheid, de methode om binnen een dag een eerste concept voor een klant klaar te zetten die ik hierboven noem, leg ik alleen uit aan de cursisten van Elementor Pro voor Designers. Per slot van rekening zou ik mijn eigen markt kannibaliseren, wanneer ik deze gratis en voor niets beschikbaar zou stellen. Wat ik wel in dit artikel uit wil leggen, is hoe je een bestaande site als webkit zou willen gebruiken om een nieuwe site te bouwen. Bijvoorbeeld omdat je klant een tweede site wil met eenzelfde design, of omdat een klant ‘bijna hetzelfde, maar dan net iets anders’ wil.

Ik heb gemerkt, dat deze krachtige functie binnen Elementor Pro toch bij veel Elementor gebruikers, ook veel ervaren gebruikers, totaal onbekend is.

In het dashboard ga je naar ‘Elementor’ en vervolgens naar ‘Tools’. Vanuit ‘Tools’ kies je voor de tab ‘Website Templates’.

Hier klik je op ‘Export this website’.

Hier kun je aangeven wat je allemaal wilt exporteren en hoe je jouw webkit wilt noemen. Heb je dit gedaan, klik je op ‘Next’.

Op het laatste scherm kun je de plugins selecteren en de hele site als een ZIP bestand exporteren. Hierbij moet opgemerkt worden, dat de ‘Save as library’ optie die je ook ziet op dit moment niet (goed) werkt. Of je nu een Elementor Pro licentie hebt of niet, je krijgt hier een scherm met een ‘upgrade aanbod’. Dit is inmiddels doorgegeven aan Elementor en als het goed is wordt er aan gewerkt. Ook is het, na enige kinderziekten, mogelijk om de gehele site naar je persoonlijke library te exporteren.

Samenvattend

Elementor Cloud Templates is voor de WP Professional een welkome en nuttige toevoeging aan Elementor Pro. Wanneer je WordPress/Elementor gebruikt om één enkele site te bouwen, dan heeft deze functionaliteit geen of weinig meerwaarde, maar wanneer je meerdere sites onder je beheer hebt, kan het de workflow van je webdesign sterk verbeteren, waardoor je meer werk in veel kortere tijd kan verrichten.

Wil je werkelijk een professionele workflow ontwikkelen, dan is de cursus ‘Elementor Pro voor Designers‘ zeker aan te bevelen. Hier leer je niet alleen hoe je sneller en beter met Elementor Pro kunt werken, maar krijg je bovendien een schat aan extra resources, zoals templates en kort video instructies hoe bepaalde taken uit te voeren. Schrijf je vandaag nog in!