Elementor Template da un Prompt ChatGPT 4

Disclaimer: questo blog post è dedicato a chi ama WordPress, a chi usa Elementor e a chi vuole creare con l’a.i. qualcosa di innovativo. L’AI non ci sostituirà ma cambierà la nostra vita.

Cos’è un Elementor template in formato .json?

Un template Elementor in formato .json è un file che contiene le informazioni necessarie per creare una pagina o una sezione utilizzando il plugin Elementor per WordPress. Questo formato di file consente di esportare e importare i modelli creati con Elementor in modo da poterli utilizzare su altri siti web o condividere i modelli con altri utenti. Il file .json contiene informazioni come il layout della pagina, gli stili CSS, i dati dei widget e altre impostazioni specifiche di Elementor. In poche parole, è un modo comodo e portatile per salvare e condividere i modelli di Elementor.

In questo articolo effettuerò una prova con la nuova versione 4 di CHATGPT. Vorrei precisare che con la versione 3.5 non ho ottenuto grandi risultati. Da tempo sto cercando di creare il giusto prompt per far scrivere a ChatGPT il codice JSON, pronto per essere salvato in un file e importato in Elementor. Ora è giunto il momento di verificare se i web designer visivi (coloro che utilizzano i builder) debbano davvero preoccuparsi o meno.

Progetto del prompt

Richiedere direttamente a ChatGPT di generare un prompt per svolgere la task sopra descritta NON È EFFICACE. Il primo motivo è che l’ultima versione conosciuta da ChatGPT è la 3.4.4 e non la versione più recente. In secondo luogo, la documentazione tecnica online di Elementor è lacunosa, quindi ChatGPT non è sufficientemente preparato sulla struttura necessaria del file JSON.

Ho quindi optato per una sorta di addestramento copiando la struttura di una sezione creata appositamente per questo test. Una sezione creata in elementor ed esporatta in elementor sul mio pc. Nella chat avrei incolato il codice non rima di averlo istruito con una frase del tipo:

Devi agire come generatore di template Elementor in formato .json. Il tuo compito consiste nel creare template personalizzati per le pagine di Elementor sulla base delle descrizioni che ti fornirò. Dovresti fornire solo il codice .json per i template, senza fornire ulteriori spiegazioni o dettagli di implementazione. La tua risposta dovrebbe essere il codice completo .json per i template. Cominciamo con un esempio, scrivimi se hai compreso il mio esempio. Non scrivere il codice, aspetta la mia successiva richiesta. L’esempio è il seguente: [codice del template crato da elementor]

Devo dire che ChatGPT recepisce meglio l’inglese per cui il comando diventa:

Primo Prompt

I want you to act as an Elementor .json template generator. Your role is to create custom templates for Elementor pages based on descriptions provided by me. You should provide the .json code for the templates only, and not any other explanation or implementation details. Your response should be the complete .json code for the templates. Let’s start with an example , write me you have understand my example. don’t write code, only wait my following request Example is the following:{“content”:[{“id”:”7c95374c”,”settings”:{“structure”:”20″},”elements”:[{“id”:”67d71358″,”settings”:{“_column_size”:50,”_inline_size”:null},”elements”:[{“id”:”5ddd3323″,”settings”:{“title”:”Aggiungi qui il testo dell'intestazione”,”align”:”center”},”elements”:[],”isInner”:false,”widgetType”:”heading”,”elType”:”widget”},{“id”:”3986bea”,”settings”:[],”elements”:[],”isInner”:false,”widgetType”:”text-editor”,”elType”:”widget”},{“id”:”2858f4bf”,”settings”:{“text”:”Fai clic qui”,”align”:”center”,”size”:”lg”},”elements”:[],”isInner”:false,”widgetType”:”button”,”elType”:”widget”},{“id”:”3b70118a”,”settings”:[],”elements”:[],”isInner”:false,”widgetType”:”spacer”,”elType”:”widget”}],”isInner”:false,”elType”:”column”},{“id”:”2831644″,”settings”:{“_column_size”:50,”_inline_size”:null},”elements”:[{“id”:”506844c5″,”settings”:[],”elements”:[],”isInner”:false,”widgetType”:”html”,”elType”:”widget”},{“id”:”153258d8″,”settings”:{“title_text”:”Questa \u00e8 l'intestazione”,”description_text”:”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.”},”elements”:[],”isInner”:false,”widgetType”:”icon-box”,”elType”:”widget”},{“id”:”3098013a”,”settings”:{“structure”:”20″},”elements”:[{“id”:”4b955915″,”settings”:{“_column_size”:50,”_inline_size”:null},”elements”:[{“id”:”34ae045e”,”settings”:[],”elements”:[],”isInner”:false,”widgetType”:”icon”,”elType”:”widget”}],”isInner”:true,”elType”:”column”},{“id”:”2cf550f”,”settings”:{“_column_size”:50,”_inline_size”:null},”elements”:[{“id”:”11dbda3f”,”settings”:[],”elements”:[],”isInner”:false,”widgetType”:”image”,”elType”:”widget”}],”isInner”:true,”elType”:”column”}],”isInner”:true,”elType”:”section”}],”isInner”:false,”elType”:”column”}],”isInner”:false,”elType”:”section”}],”page_settings”:[],”version”:”0.4″,”title”:”templetesez”,”type”:”section”}

La sua risposta è stata:

I understand your example. Please provide the description for the custom Elementor template you want me to generate, and I will provide you with the .json code for it.

Molto bene, lo schiavetto è pronto a fornirmi la risposta per cui gli incollo il comando, poi tradotto in inglese:

Vorrei scrivere una sezione di Elementor con 3 colonne. Nella prima colonna vorrei inserire un titolo e un editor di testo, nella seconda colonna un’immagine con sorgente https://www.gabrieleferrari.net/wp-content/uploads/2018/04/logomain.png, e nella terza colonna un editor di testo con il seguente testo:”Gestisco i server, i domini e tutti gli aspetti tecnici riguardanti un sito web, programmo soluzioni frontend e backend, effettuo modifiche e integrazioni, ho piena conoscenza degli aspetti del web marketing, email marketing e delle problematiche relative alle intrusione malevole in siti web e sistemi aziendali. Le competenze professionali acquisite negli anni, mi permettono di poter gestire completamente un progetto in tutte le sue fasi di realizzazione.”

Risultato: un template che non funziona per qualche piccolo motivo :

• Il dato colonna deve essere un numero intero (se la dimensione della colonna in larghezza è 50% il suo valore deve essere 50)
• L’id deve essere una stringa alfanumerica con 8 caratteri
• Il dato struttura è variabile a seonda che a sezione abbia 2-3-4 colonne (es. deve essere=20 con 2 colonne, =30 con 3 colonne e  così via)

Ho deciso pertanto di sottoporre il primo prompt, alla sua risposta di istruirlo per prevenire gli errori che non poteva prevedere:

Secondo Prompt

In all elementor .json “id” are string of random character both number or letters with len=8. Section with 2 column have structure”:”20″, sections with 3 columns have structure”:”30″, sectins with 4 columns have structure”:”40″, column size is always an integer, let me know if you are ready to receive my following task

Risposta:

I understand the requirements for the Elementor .json template structure and the “id” values. I am ready to receive your task. Please provide the description of the custom template you want me to generate.

Schiavetto ready 🙂

Ecco la mia richiesta

Terzo Prompt

i want to write a section of elementor with 3 column, in the first column a headline and a text editor, in seond column a image with source https://www.gabrieleferrari.net/wp-content/uploads/2018/04/logomain.png, in third column a text editor with the following text: “Gestisco i server, i domini e tutti gli aspetti tecnici riguardanti un sito web, programmo soluzioni frontend e backend, effettuo modifiche e integrazioni, ho piena conoscenza degli aspetti del web marketing, email marketing e delle problematiche relative alle intrusione malevole in siti web e sistemi aziendali. Le competenze professionali acquisite negli anni, mi permettono di poter gestire completamente un progetto in tutte le sue fasi di realizzazione.”

……

Generazione testo, copio e incollo inun file di testo (UTF-8 la codicifa) e lo salvo con il nome template.json, lo importo come template in elementor e….. BOOM!

 

LO HA FATTO!

Puoi scaricare il template generato cliccando QUI

Cosa significa questo?

Semplicemente che istruendo nel modo giusto si possono agevolare tante task anche ai frontend developer, non sostituirli per ora, spaventarli un pochino però sì!

Se ti è piaciuto il post commentalo su FB o scrivimi a gabriele@gabrieleferrari.net