A cosa serve l’editor
L’editor visuale di Stackly è lo stesso strumento per tutti i contenuti che crei: pagine web, landing page, pagine di raccolta contatti, messaggi email, newsletter e gli altri contenuti che la piattaforma ti fa comporre. Una volta imparato, lo usi ovunque nello stesso modo.
Si lavora a blocchi: trascini gli elementi dal pannello di destra nell’area centrale, li disponi dentro una struttura a colonne e ne modifichi testi e aspetto direttamente sulla pagina. Non serve scrivere codice.
Cambia solo il risultato finale: una pagina viene pubblicata online, un’email viene inviata ai contatti, il form lo puoi inserire sulle pagine del sito.
Panoramica dell’interfaccia
Lo schermo è diviso in tre zone.
| Zona | Posizione | A cosa serve |
|---|---|---|
| Toolbar superiore | barra scura in alto | Cambia la vista (computer, tablet, smartphone), mostra l’anteprima, annulla/ripeti, salva e chiude |
| Area di lavoro | al centro, sfondo bianco | È il contenuto che stai costruendo: qui trascini, selezioni e modifichi gli elementi |
| Pannello laterale | colonna scura a destra | Contiene tre schede: Stili (pennello), Livelli (fogli sovrapposti), Blocchi (+ viola) |
Quando selezioni un elemento nell’area di lavoro, compare un bordo blu attorno all’elemento e un’etichetta blu in alto a sinistra con il suo tipo (per esempio Input, Testo, Immagine). Così sai sempre su cosa stai lavorando.
Toolbar superiore
Le icone sono raggruppate in due blocchi: a sinistra la scelta del dispositivo, a destra i comandi di lavoro.
Scelta del dispositivo
| Icona | Nome | Cosa fa |
|---|---|---|
| Monitor | Desktop | Mostra il contenuto come lo vede chi usa un computer. È la vista predefinita (icona evidenziata in viola) |
| Rettangolo orizzontale | Tablet | Restringe l’area di lavoro alla larghezza di un tablet |
| Smartphone | Mobile | Mostra il contenuto come appare su un telefono |
Le modifiche di stile fatte in vista Tablet o Mobile valgono solo per quel dispositivo. Per esempio puoi ridurre la dimensione di un titolo solo su smartphone, senza toccare la versione desktop. Testi, immagini ed elementi inseriti invece sono gli stessi su tutti i dispositivi.
Comandi di lavoro
| Icona | Nome | Cosa fa |
|---|---|---|
| Quadrato tratteggiato | Mostra contorni | Attiva o disattiva i bordi tratteggiati attorno a ogni blocco. Utile per vedere colonne e contenitori vuoti mentre costruisci |
| Occhio | Anteprima | Nasconde pannelli e bordi e mostra il contenuto come lo vedrà il visitatore. Clicca di nuovo sull’occhio per tornare a modificare |
| Quattro angoli | Schermo intero | Porta l’editor a tutto schermo per avere più spazio. Premi Esc per uscire |
| Freccia curva a sinistra | Annulla | Toglie l’ultima modifica fatta |
| Freccia curva a destra | Ripeti | Ripristina la modifica appena annullata |
| Cestino | Svuota | Cancella tutto il contenuto dell’area di lavoro. Da usare con attenzione: chiede conferma, ma poi il contenuto sparisce |
| Floppy disk | Salva | Salva il lavoro. Salva spesso, soprattutto prima di chiudere |
| X rossa | Chiudi | Esce dall’editor. Se non hai salvato, le ultime modifiche vanno perse |
Pannello a destra: le tre schede
In cima al pannello ci sono tre icone. Ognuna apre una scheda diversa; quella attiva è evidenziata.
Pennello – Stili
Cambia l’aspetto dell’elemento selezionato: colori, sfondo, caratteri, dimensioni del testo, allineamento, margini, spaziature, bordi, angoli arrotondati, larghezza e altezza.
- Seleziona un elemento nell’area di lavoro.
- Clicca il pennello.
- Apri la sezione di proprietà che ti serve e modifica il valore: il risultato si vede subito.
Se nessun elemento è selezionato, la scheda è vuota.
Fogli sovrapposti – Livelli
Mostra la struttura del contenuto come un albero: ogni sezione contiene le sue colonne, ogni colonna i suoi elementi. Serve a:
- selezionare elementi piccoli o nascosti, difficili da cliccare nell’area di lavoro;
- controllare dove si trova un elemento (per esempio se un campo è davvero dentro il modulo);
- spostare elementi trascinandoli nell’albero;
- nascondere temporaneamente un elemento con l’icona dell’occhio accanto al suo nome.
+ viola – Blocchi
È l’archivio degli elementi da inserire. I blocchi sono raccolti in tre gruppi, che si aprono e chiudono cliccando sul titolo:
| Gruppo | Contiene |
|---|---|
| Base | Strutture a colonne ed elementi generici: testo, link, immagine, video |
| stackly | Blocchi già collegati ai dati della tua attività: orari, mappa, coupon, fidelity, ecc. |
| Moduli | Moduli di raccolta dati e i campi da aggiungere ai moduli |
Per inserire un blocco: tienilo premuto col mouse, trascinalo nell’area di lavoro e rilascialo nel punto desiderato. Mentre trascini, una linea verde indica dove verrà posizionato.
Blocchi del gruppo Base
Le strutture a colonne sono lo scheletro della pagina: vanno inserite prima, e dentro si mettono tutti gli altri elementi.
| Blocco | Tipo | Cosa fa |
|---|---|---|
| 1 colonna | Struttura | Una riga a tutta larghezza. È il contenitore più usato, ideale per titoli, testi e moduli |
| 2 colonne | Struttura | Una riga divisa in due colonne uguali (50% + 50%). Per esempio immagine a sinistra e testo a destra |
| 3 colonne | Struttura | Una riga divisa in tre colonne uguali. Adatta a tre vantaggi, tre servizi, tre prodotti affiancati |
| 2 colonne 3/7 | Struttura | Due colonne di larghezza diversa: una stretta (30%) e una larga (70%). Utile per icona + testo o menu laterale + contenuto |
| Testo | Contenuto | Un paragrafo di testo modificabile. Doppio clic per scrivere |
| Link | Contenuto | Un testo cliccabile che porta a un indirizzo web, a una pagina o apre un’email |
| Immagine | Contenuto | Inserisce un’immagine. Doppio clic per sceglierla dall’archivio o caricarla dal computer |
| Video | Contenuto | Inserisce un video (per esempio da YouTube) indicando il suo indirizzo |
Su smartphone le colonne si dispongono una sotto l’altra, così il contenuto resta leggibile. Controllalo con l’icona Mobile della toolbar.
Blocchi del gruppo Stackly
Questi blocchi mostrano informazioni che hai già inserito nella piattaforma: non devi riscriverle. Se aggiorni un dato in Stackly (per esempio un orario), il blocco lo riprende senza rifare la pagina.
| Blocco | Cosa mostra |
|---|---|
| Chi Siamo | La presentazione della tua attività |
| Orari | Giorni e orari di apertura |
| Mappa | La posizione della sede su una mappa |
| Contatti | Telefono, email e recapiti dell’attività |
| Social | I collegamenti ai tuoi profili social |
| Fidelity Card | Una tua fidelity card, con il modo per aderire |
| Coupon | Un coupon o un’offerta da far ottenere al visitatore |
| Volantino | Un tuo volantino promozionale |
| Catalogo | Prodotti o servizi del tuo catalogo |
| Recensioni Google | Le recensioni ricevute su Google |
Dopo averlo trascinato, per i blocchi che lo richiedono (Coupon, Fidelity Card, Volantino, Catalogo) seleziona quale elemento mostrare fra quelli che hai creato. Se non ne hai ancora creato nessuno, crealo prima nella relativa sezione della piattaforma.
Blocchi del gruppo Moduli
I blocchi Moduli sono di due tipi: i moduli completi, che si inseriscono da soli, e i campi aggiuntivi, che vanno messi dentro un modulo già presente.
Moduli completi
| Blocco | Cosa fa |
|---|---|
| Modulo Lead | Modulo di raccolta contatti (nome, cognome, email e pulsante di invio). Chi lo compila diventa un contatto nella piattaforma |
| Modulo Messaggio | Modulo “scrivici”: il visitatore lascia i suoi dati e un messaggio libero |
| Modulo Newsletter | Modulo di iscrizione alla newsletter, essenziale (di solito solo email) |
Campi aggiuntivi
| Blocco | Cosa aggiunge al modulo |
|---|---|
| Scelta lista | Un menu a tendina con una sola risposta possibile (es. Tipo attività: Freelance / Agenzia) |
| Check | Una o più caselle da spuntare, anche più di una insieme (es. Cosa gestisci: Marketing Automation, Social, CRM) oppure il consenso privacy |
| Scelta (Radio) | Un elenco di opzioni a pallino, una sola selezionabile |
| Dati demografici | Campi anagrafici come sesso e data di nascita |
| Dati geografici | Campi di indirizzo: città, provincia, CAP |
| Paese e Lingua | Paese di provenienza e lingua preferita |
| Dati lavoro | Dati professionali: azienda, ruolo, settore |
I dati raccolti con i campi aggiuntivi vengono salvati sulla scheda del contatto e puoi usarli per filtrare, segmentare e personalizzare i messaggi.
Come inserire i moduli nella pagina
La regola è una sola: prima la struttura, poi il modulo, poi i campi dentro il modulo.
La pagina di esempio (Compila il modulo per ricevere il tuo login di accesso) è costruita proprio così: un Modulo Lead con Nome, Cognome ed Email, a cui sono stati aggiunti un campo Nome Attività, due Scelta lista (Tipo Attività e Numero clienti gestiti) e un Check a più risposte (Cosa gestisci per i tuoi clienti?).
Passo 1 – Crea la struttura
- Clicca il + viola e apri il gruppo Base.
- Trascina 1 colonna nell’area di lavoro, nel punto in cui vuoi il modulo.
- Se vuoi un titolo sopra il modulo, trascina un blocco Testo nella colonna e scrivi il titolo.
Usa 1 colonna per i moduli: su 2 o 3 colonne i campi diventano stretti e poco leggibili, soprattutto su smartphone.
Passo 2 – Inserisci il modulo completo
- Chiudi il gruppo Base e apri il gruppo Moduli (clic sul titolo).
- Trascina Modulo Lead, Modulo Messaggio o Modulo Newsletter dentro la colonna appena creata.
- Rilascia quando la linea verde compare dentro la colonna, non sopra o sotto.
Usa un solo modulo per pagina, salvo casi particolari: due moduli confondono il visitatore e raccolgono dati separati.
Passo 3 – Aggiungi i campi
- Trascina il campo che ti serve (es. Scelta lista o Check) dentro il modulo, fra un campo esistente e il pulsante di invio.
- Mentre trascini, la linea verde deve comparire fra i campi del modulo. Se compare sotto il pulsante o fuori dal riquadro del modulo, sposta il mouse.
- Seleziona il nuovo campo e imposta etichetta, testo segnaposto, opzioni e obbligatorietà (l’asterisco * indica un campo obbligatorio).
- Ripeti per ogni campo.
Attenzione: un campo trascinato fuori dal modulo viene mostrato nella pagina ma i dati non vengono inviati. È l’errore più frequente.
Passo 4 – Controlla con Livelli
- Clicca l’icona Livelli (fogli sovrapposti).
- Espandi l’albero fino al modulo.
- Verifica che tutti i campi compaiano rientrati sotto il modulo. Se un campo è allo stesso livello del modulo, trascinalo dentro direttamente nell’albero.
Passo 5 – Verifica e salva
- Clicca l’occhio per l’anteprima e prova a compilare il modulo.
- Controlla la vista Mobile: i campi devono essere leggibili e il pulsante facile da premere.
- Clicca il floppy disk per salvare.
Mentre sei in modifica, cliccando su un campo obbligatorio può comparire l’avviso del browser Compila questo campo: è normale e non indica un errore.
Configurare una “scelta lista”
Una Scelta lista è un menu a tendina da cui chi compila il modulo sceglie una sola risposta. Il suo ID select diventa il nome del dato salvato sul contatto. Lo ritrovi poi nella scheda del contatto e fra i filtri di ricerca.
Aprire le impostazioni
- Clicca la lista nell’area di lavoro.
- Sopra compare la barra blu (freccia su, sposta, copia, cestino).
- Apri la scheda Stili (pennello) nel pannello di destra.
- Controlla la riga Selezionato: deve indicare Scelta lista (con accanto il suo codice interno, es. #i7ejb).
- Apri la sezione Impostazioni blocco.
I campi delle Impostazioni blocco
| Campo | Cosa inserire | Esempio |
|---|---|---|
| Etichetta | Il testo mostrato sopra la tendina. Aggiungi l’asterisco se la risposta è obbligatoria | Tipo Attività * |
| Valori separati da :: | Tutte le risposte possibili, separate da due volte i due punti, senza spazi attorno | Freelance::Agenzia |
| Obbligatorio | Spunta la casella se il modulo non deve partire senza una scelta | spuntato |
| Nome campo (condizioni) | Nome tecnico generato in automatico. Serve solo per le condizioni di visualizzazione (vedi sotto). Di norma non va modificato | sceltalista-1ukoa |
| ID select | L’identificativo della lista: il nome con cui il dato viene salvato sul contatto | tipoattivita |
| conferma valori | Pulsante da premere dopo aver scritto o cambiato etichetta e valori, per aggiornare la tendina nell’area di lavoro | — |
Dove finiscono le risposte
Quando un visitatore invia il modulo, la risposta viene salvata automaticamente sulla scheda del contatto.
Non serve creare prima il campo.
- Scheda contatto: in Crm → Contatti, apri un contatto e vai alla scheda DETTAGLI. Sotto Aggiungi Informazioni Personalizzate trovi una riga per ogni ID select, con la risposta data. Esempio:
tipoattivita=Freelance,nclienti=1-5. Da qui puoi anche correggere il valore a mano e premere Salva. - Filtri di ricerca: nella lista contatti, apri aggiungi filtri per ricerca. Ogni ID select compare nell’elenco dei filtri insieme ai campi standard (telefono, provincia, settore…). Scegli per esempio
tipoattivita, poi il valore, e premi applica filtro per vedere solo i freelance.
Mostrare la lista solo in certi casi
La parte bassa delle Impostazioni blocco permette di far comparire la lista solo se un altro campo ha un certo valore. Esempio: mostrare Numero clienti gestiti solo a chi ha scelto Agenzia.
- Seleziona il campo che deve comparire o sparire (qui Numero clienti gestiti).
- In Mostra se campo (name) scrivi il Nome campo (condizioni) del campo da controllare (qui quello di Tipo Attività, es.
sceltalista-1ukoa). - In Valore scrivi il valore che fa comparire il campo (es.
Agenzia). - In Tipo confronto lascia Uguale (=) o scegli un’altra regola dal menu.
- Premi Applica condizione.
Per tornare a mostrare il campo sempre, selezionalo e premi Rimuovi condizione. Verifica il comportamento con l’Anteprima (occhio).
Aspetto della lista
Sotto le Impostazioni blocco ci sono le sezioni di stile (Generale, Dimensione, Carattere, ecc.) per cambiare dimensioni, caratteri e colori. In alto, Classi mostra gli stili condivisi applicati alla lista (es. formlista, formlistadett). Se modifichi lo stile con una classe attiva, la modifica vale per tutte le liste con quella classe. Il menu Stato permette di impostare lo stile in situazioni particolari, per esempio al passaggio del mouse.
Creare i Checkbox
Ogni checkbox è una singola casella con la sua etichetta. Per una domanda con più risposte selezionabili insieme, come Cosa gestisci per i tuoi clienti?, crei una casella per ogni risposta. Ogni casella è un dato a sé sul contatto.
Creare la domanda con più caselle
- Trascina un blocco Testo dentro il modulo e scrivi la domanda (es. Cosa gestisci per i tuoi clienti ?).
- Dal gruppo Moduli trascina Check sotto la domanda, sempre dentro il modulo.
- Configura la casella (tabella sotto).
- Per la risposta successiva selezionala e premi l’icona copia nella barra blu. Poi cambia Id e Testo etichetta della copia.
- Ripeti fino all’ultima risposta (nell’esempio: Marketing Automation, Social, CRM, Content Marketing, eCommerce, Campagne ADV).
I campi delle Impostazioni blocco
Seleziona la casella, apri la scheda Stili (pennello) e controlla che Selezionato indichi Checkbox. Poi apri Impostazioni blocco.
| Campo | Cosa inserire | Esempio |
|---|---|---|
| Id | L’identificativo della casella: il nome con cui il dato viene salvato sul contatto. Minuscole o maiuscole, senza spazi, accenti o simboli, diverso per ogni casella | MA, ContentMarketing, eCommerce |
| Testo etichetta | Il testo mostrato accanto alla casella | Marketing Automation |
| Obbligatorio | Spunta solo se la casella deve essere selezionata per inviare il modulo. Per le risposte di una domanda lascialo vuoto | vuoto |
| Nome campo (condizioni) | Nome tecnico automatico, usato solo dalle condizioni di visualizzazione | checkbox-2p8n6 |
| Mostra se campo (name) / Valore / Tipo confronto | Fanno comparire la casella solo se un altro campo ha un certo valore. Funzionano come per la Scelta lista | — |
| Applica condizione / Rimuovi condizione | Attivano o tolgono la condizione | — |
Dove finiscono le risposte
Come per la Scelta lista, all’invio del modulo ogni casella viene salvata automaticamente sulla scheda del contatto, nella scheda DETTAGLI, con il suo Id come nome. Il valore indica se la casella è stata spuntata: per chi non l’ha selezionata compare No (es. ContentMarketing = No). Anche questi dati diventano disponibili come filtri di ricerca dei contatti.
Per questo conviene scegliere Id leggibili: ContentMarketing si capisce al volo nella scheda contatto, un codice breve come MA è meno chiaro. Come per la lista, non cambiare l’Id dopo che il modulo ha raccolto contatti.
Caselle di consenso
Le caselle autorizzo trattamento dati * e acconsento il trattamento dei miei dati per ricevere offerte… in fondo al modulo sono caselle di consenso privacy, non domande:
- quella del trattamento dati deve essere obbligatoria, con il link all’informativa;
- quella per offerte e promozioni deve restare facoltativa, perché il consenso al marketing deve essere libero;
- tienile dopo tutte le domande e prima del pulsante di invio.
Aspetto delle caselle
Sotto le Impostazioni blocco ci sono le sezioni Generale, Flex, Dimensione, Bordo/Sfondo, ecc. Per dare lo stesso aspetto a tutte le caselle, aggiungi una classe comune con il + accanto a Classi e modifica lo stile con quella classe attiva.
Lavorare sugli elementi
| Operazione | Come si fa |
|---|---|
| Selezionare | Clic singolo sull’elemento. Compare il bordo blu con l’etichetta del tipo |
| Modificare un testo | Doppio clic sul testo e scrivi. Una piccola barra permette grassetto, corsivo, sottolineato e link |
| Cambiare l’aspetto | Seleziona l’elemento e apri la scheda Stili (pennello) |
| Spostare | Trascina l’elemento in un’altra posizione, oppure trascinalo nella scheda Livelli |
| Duplicare | Seleziona l’elemento e usa l’icona di copia nella piccola barra che compare accanto alla selezione |
| Eliminare | Seleziona l’elemento e usa l’icona cestino della piccola barra, oppure il tasto Canc |
| Selezionare il contenitore | Usa la freccia verso l’alto nella piccola barra di selezione, oppure clicca il livello superiore in Livelli |
| Annullare un errore | Freccia “annulla” nella toolbar, oppure Ctrl+Z (Cmd+Z su Mac) |
Non confondere il cestino della piccola barra (elimina solo l’elemento selezionato) con il cestino della toolbar superiore (svuota tutta l’area di lavoro).
Adattare il contenuto ai dispositivi
- Costruisci e rifinisci il contenuto in vista Desktop.
- Passa a Tablet e poi a Mobile e controlla ogni sezione.
- Se qualcosa non va (testo troppo grande, spazi eccessivi), seleziona l’elemento e correggi lo stile restando in quella vista: la correzione vale solo per quel dispositivo.
Pagine ed email: cosa cambia
L’editor è identico, ma una pagina si apre in un browser mentre un’email si apre in un programma di posta (Gmail, Outlook, app del telefono), che ha regole più strette.
| Elemento | In una pagina | In un’email |
|---|---|---|
| Strutture a colonne, Testo, Link, Immagine | Funzionano | Funzionano |
| Video | Si riproduce nella pagina | Quasi nessun programma di posta lo riproduce: usa un’immagine con link al video |
| Mappa | Interattiva | Non interattiva: preferisci l’indirizzo con un link alla mappa |
| Moduli (Lead, Messaggio, Newsletter e campi) | Funzionano | La maggior parte dei programmi di posta li blocca: metti un pulsante che porta a una pagina con il modulo |
| Coupon, Fidelity, Volantino | Funzionano | Funzionano come immagine e link verso il contenuto |
Per le email valgono inoltre tre accorgimenti:
- preferisci 1 o 2 colonne: più colonne su smartphone diventano strette;
- usa immagini leggere e scrivi sempre il testo importante come testo, non dentro l’immagine;
- prima dell’invio, manda un’email di prova a te stesso e aprila sia da computer sia da telefono.
Problemi frequenti
| Problema | Causa probabile | Soluzione |
|---|---|---|
| Non riesco a rilasciare un blocco | Manca una struttura dove appoggiarlo | Inserisci prima una struttura a colonne dal gruppo Base |
| Un campo del modulo non arriva nei contatti | Il campo è fuori dal modulo | Controlla in Livelli e trascinalo dentro il modulo |
| Non riesco a cliccare un elemento piccolo | È coperto da un contenitore | Selezionalo dalla scheda Livelli |
| La scheda Stili è vuota | Nessun elemento selezionato | Clicca prima l’elemento da modificare |
| Su smartphone il contenuto è sbagliato | Stili pensati solo per desktop | Passa alla vista Mobile e correggi lì |
| Non vedo le colonne vuote | Contorni disattivati | Clicca il quadrato tratteggiato nella toolbar |
| Ho cancellato qualcosa per errore | — | Freccia “annulla” o Ctrl+Z, prima di chiudere l’editor |
| Ho perso le ultime modifiche | Editor chiuso senza salvare | Salva spesso con il floppy disk, sempre prima della X rossa |
