Creare pagine senza HTML: xoContentEditor
Creare landing page, testi di categoria e descrizioni dei prodotti con pochi clic anziché programmare: basta selezionare i moduli, compilare i campi e visualizzare nell’anteprima come la pagina viene visualizzata su desktop e su cellulare. Questa guida vi accompagna dall’avvio fino alla pagina finita e spiega come integrare widget di servizi esterni.
La guida in video (3:25 min.): avvio, struttura del sistema modulare, inserimento dei moduli, layout per desktop e dispositivi mobili, anteprima, modelli e widget di terze parti. I capitoli e la trascrizione sono disponibili nella pagina del video. I sottotitoli possono essere attivati nel lettore. Voce fuori campo generata dall’IA.
In sintesi
- Dove: pagine CMS, categorie (descrizione e testo SEO), prodotti, notizie, FAQ e produttori. Un pulsante sopra l’area dei contenuti attiva il kit di costruzione, per ogni lingua.
- Struttura: una pagina è composta da blocchi di contenuto. Ogni blocco contiene fino a 16 elementi e ogni elemento è uno dei 22 moduli disponibili.
- Anteprima: versione desktop e mobile affiancate. I caratteri e i colori del vostro negozio sono visibili solo sulla pagina del negozio stesso.
- Modelli: è possibile salvare una struttura già pronta come modello e riutilizzarla in altre pagine o in altre lingue.
- Widget di terze parti: l’editor rimuove il codice script al momento del salvataggio. Per Trusted Shops, il widget Google Store, Sovendus e l’avviso PayPal «Paga più tardi», il negozio dispone di impostazioni specifiche.
- Attivazione: xoContentEditor è un modulo aggiuntivo. È incluso nei pacchetti XONIC a partire dal livello Basic, ma non nei modelli contrattuali precedenti. Senza attivazione, il pulsante non viene visualizzato. XONIC Premium: Content Editor
In questa guida
Cosa fa xoContentEditor
Un sistema modulare al posto di una semplice casella di testo.
Senza xoContentEditor, i contenuti vengono digitati in un unico grande campo di testo. Tutto ciò che va oltre il testo continuo e un'immagine inserita – due colonne affiancate, schede con immagine e pulsante, una linea temporale, una citazione di un cliente – dovrebbe essere scritto manualmente in HTML o fatto programmare.
Con xoContentEditor, invece, potete comporre la pagina utilizzando moduli già pronti. Ogni modulo dispone dei propri campi di inserimento: il modulo «Card» richiede immagine, titolo, testo e destinazione del pulsante e si assicura autonomamente che il risultato appaia corretto su qualsiasi schermo. Voi compilate i campi, il layout si crea automaticamente.
Dove potete utilizzarlo
Sei sezioni nel backend – lo stesso funzionamento ovunque.
Pagine CMS
Pagine di destinazione, «Chi siamo», guide, pagine promozionali. In CMS → Gestione CMS, clicca sul pulsante «Contenuto (xoContentEditor)» sopra il campo «Contenuto della pagina CMS».
Categorie
Descrizione e testo SEO, ciascuno con il proprio pulsante «Usa xoContentEditor». In questo modo, un elenco di prodotti diventa una pagina tematica. In Prodotti → Categorie / Prodotti.
Prodotti
La descrizione del prodotto come pagina strutturata con tabella comparativa, schede e immagini di dettaglio. Pulsante «Descrizione del prodotto (xoContentEditor)».
Notizie
Articoli con sottotitoli, citazioni e gallerie fotografiche. In CMS → Articoli di attualità, pulsante «Contenuto (xoContentEditor)». Anche la biografia degli autori può essere strutturata in questo modo.
FAQ
Risposte con sezioni a tendina, riquadri informativi e tabelle. In CMS → Articoli FAQ, pulsante «Contenuto (xoContentEditor)».
Produttori
Pagine dedicate ai marchi con logo, storia del marchio e prodotti selezionati. In Prodotti → Produttori, pulsante «Usa xoContentEditor».
Attivazione: un clic per ogni campo
L’editor non sostituisce il campo di testo, ma prende il suo posto.
Se l’interruttore «Contenuto (xoContentEditor)» è attivato, al posto del campo di testo compare il builder con la sua barra di intestazione e i blocchi di contenuto relativi a quella lingua. Clicca per ingrandire.
Sopra il campo di contenuto è presente un pulsante. Se è disattivato, vedrete il consueto campo di testo. Attivandolo, nella stessa posizione apparirà il builder. A seconda dell’area, l’interruttore si chiama «Contenuto (xoContentEditor)», «Descrizione del prodotto (xoContentEditor)» o «Usa xoContentEditor».
L’interruttore è valido per ogni lingua. È possibile creare la versione tedesca di una pagina con il builder e lasciare inizialmente quella inglese come semplice testo – o viceversa.
L’interfaccia: blocchi di contenuto a tre colonne
In alto la barra di intestazione, sotto i blocchi di contenuto. Ogni blocco presenta le sezioni Struttura, Modifica e Anteprima.
Ecco come appare l’editor aperto. Le tre colonne funzionano in sinergia: a sinistra si seleziona un elemento, al centro lo si compila e a destra si vede come viene disposto.
Barra di intestazione
«Comprimi tutto» chiude tutti i blocchi, «Gestione modelli» apre i modelli. Il pulsante «Aggiungi nuovo elemento» nella barra di intestazione e alla fine dell’elenco crea un nuovo blocco di contenuto.
Nel backend, un blocco è denominato «Layout flessibile». Più blocchi sono disposti uno sotto l’altro; è possibile modificarne l’ordine trascinando l’intestazione di un blocco.
Intestazione di un blocco di contenuto
L’intestazione mostra il numero di elementi. Con l’interruttore «Attivo» è possibile nascondere un blocco nel negozio online senza eliminarlo. La modifica avrà effetto dal prossimo salvataggio.
Il cestino rimuove immediatamente l’intero blocco dalla schermata senza richiedere conferma. Il blocco viene eliminato solo al momento del salvataggio: se si esce dalla pagina senza salvare, il blocco rimane intatto.
Due pulsanti, due funzioni: «Aggiungi nuovo elemento» nella barra di intestazione crea un nuovo blocco di contenuto, mentre «Aggiungi nuovo elemento» sotto la struttura aggiunge un altro elemento all’interno di quel blocco. Clicca per ingrandire.
1. Struttura
L’elenco degli elementi di questo blocco. «Aggiungi nuovo elemento» aggiunge un elemento, fino a un massimo di 16 per blocco. Trascinando gli elementi è possibile riordinarli; in questo modo l’ordine sarà lo stesso sia su desktop che su dispositivi mobili.
2. Modifica
I campi dell’elemento selezionato. In alto si trovano le schede «Contenuto» e «Layout e visualizzazione». Nella scheda «Contenuto» sono presenti il nome dell’elemento (che appare nell’anteprima sopra il riquadro) e il tipo di componente, seguiti dai campi del modulo. Il pulsante «Rimuovi elemento» nell’intestazione elimina l’elemento dopo una richiesta di conferma; l’ultimo elemento di un blocco rimane invariato.
3. Anteprima
Due visualizzazioni affiancate: desktop e dispositivo mobile. È possibile verificare a colpo d’occhio se una serie di schede a tre colonne funziona ancora sul cellulare. Cliccando su una tessera si seleziona l’elemento.
6 passaggi per creare la prima pagina
Esempio: una pagina tematica come pagina CMS o come categoria.
| Passo | Cosa fare | A cosa prestare attenzione |
|---|---|---|
| 1 | Creare una pagina – come pagina CMS in CMS → Gestione CMS (scheda «Inserisci») oppure come categoria in Prodotti → Categorie / Prodotti. | Una categoria viene visualizzata nella barra di navigazione come qualsiasi altra categoria. È possibile inserire un link a una pagina CMS nel piè di pagina oppure nell’intestazione utilizzando l’opzione «Inserisci link alla pagina CMS nella navigazione dell’intestazione», come indicato nel Gestore CMS. |
| 2 | Attivare l’interruttore sopra il campo di contenuto. | L’interruttore è valido per ogni lingua: impostarlo singolarmente per ogni versione linguistica. |
| 3 | Nel primo elemento, selezionare «Hero / Palcoscenico» come tipo di componente. | L’Hero è l’ampia area di testa con immagine, titolo e pulsante: è la prima cosa che vede il visitatore. |
| 4 | Con «Aggiungi nuovo elemento» aggiungere ulteriori elementi: testo, mappe, elenco prodotti, testimonianze dei clienti. | L’ordine può essere modificato in seguito trascinando gli elementi. Inizia con una struttura di massima, poi perfezionala. A partire da 16 elementi, crea un nuovo blocco di contenuto. |
| 5 | Controllare entrambe le visualizzazioni nell’anteprima a destra. | Soprattutto in caso di tabelle e righe a più colonne, vale la pena dare un’occhiata alla visualizzazione mobile. |
| 6 | Salvare. | Successivamente, apri la pagina nel negozio; per le pagine CMS, clicca su «Visualizza nel negozio». Solo lì potrai vederla con i tuoi caratteri e i tuoi colori. |
Consiglio per iniziare: non create la vostra prima pagina su una pagina importante già esistente. Create una nuova pagina CMS, non inserite alcun link ad essa e disattivate l’opzione “Inserisci nei sitemap XML per i motori di ricerca”. Tramite «Visualizza nel negozio» potete verificare il risultato senza che i clienti trovino la pagina. Una pagina inattiva, invece, non viene visualizzata affatto nel negozio, nemmeno da voi.
Selezionare e compilare i moduli
Un campo di selezione determina quali campi di inserimento vengono visualizzati.
Ecco come procedere
Un nuovo elemento è vuoto. Selezionate nel campo «Tipo di componente» quale tipo di elemento desiderate creare e l’editor caricherà i campi di immissione corrispondenti.
Il tipo può essere modificato in un secondo momento. I campi non riconosciuti dal nuovo modulo vengono ignorati. Le impostazioni nella scheda «Layout e visualizzazione» vengono mantenute. In caso di dubbi, creare un nuovo elemento ed eliminare quello vecchio non appena il nuovo è pronto.
Nel blocco di testo, selezionate i titoli (riga 2-6) tramite il campo di selezione della barra degli strumenti. 4.9.0
Layout per desktop e dispositivi mobili
Larghezza, ordine e visibilità si impostano per ogni elemento, mentre lo sfondo e il carosello si impostano per ogni blocco.
Per ogni elemento: «Layout e visualizzazione»
Nella scheda «Layout e visualizzazione» è possibile impostare larghezza, rientro, ordine e allineamento separatamente per desktop e dispositivi mobili, oltre alla visibilità e al colore di sfondo. Clicca per ingrandire.
Con il pulsante di selezione «Desktop» / «Dispositivi mobili» è possibile definire separatamente per entrambe le visualizzazioni:
- larghezza, offset (rientro a sinistra) e ordine,
- allineamento verticale e orizzontale.
Sotto sono disponibili «Visibilità» (Sempre visibile, Solo desktop, Solo mobile), il colore di sfondo, «Classi personalizzate» e un «ID personalizzato», ad esempio per un link che rimanda esattamente a questo punto della pagina. Per «Desktop» si intendono schermi con larghezza pari o superiore a 1.200 pixel.
Per ogni blocco: «Opzioni widget»
Le opzioni del widget si applicano all’intero blocco: in questo caso una striscia colorata a tutta larghezza, in cui scorrono tre testimonianze dei clienti sotto forma di carosello. Clicca per ingrandire.
L’area a tendina «Opzioni widget (larghezza, sfondo, visualizzazione)» si applica all’intero blocco:
- Larghezza: larghezza della pagina, larghezza intera con contenuto nel contenitore o larghezza intera senza bordi – per bande colorate che coprono l’intera larghezza dello schermo.
- Sfondo: colore o immagine, a scelta con effetto parallasse, oltre a una distanza interna verticale.
- Visualizzazione: griglia o «Carosello / Slider» con riproduzione automatica, frecce, punti e più schede per ogni slide.
«Hero / Palcoscenico» e «Elenco prodotti / Slider prodotti» occupano sempre l’intera larghezza del proprio blocco; l’editor nasconde i campi relativi alla larghezza per questi elementi.
Il catalogo dei moduli
22 moduli – ordinati per funzione, con il nome visualizzato nel campo di selezione.
| Modulo | A cosa serve |
|---|---|
| Testo e struttura | |
| Testo | Testo continuo con titolo opzionale e allineamento del testo – il modulo più utilizzato. |
| Hero / Area in primo piano | Ampia area di intestazione con titolo, sottotitolo, pulsante e immagine di sfondo, a scelta con sfondo scuro o chiaro e altezza minima. |
| Schede / Navigazione a schede | Diversi contenuti disposti in modo compatto dietro delle schede. |
| Accordion / Sezioni a scomparsa | Sezioni da aprire e chiudere – ideali per domande e risposte. |
| Spazio vuoto / Separatore | Spazio vuoto o colonna libera; sia su cellulare che su desktop, nascosta o con una propria spaziatura. |
| Immagini e contenuti multimediali | |
| Immagine | Immagine singola con didascalia (testo alternativo), arrotondamento a forma di cerchio, ritaglio e messa a fuoco. Il modulo immagine non dispone di un link. |
| Video | YouTube, Vimeo o un file video proprio, con riproduzione automatica (senza audio) e riproduzione in loop. |
| Scheda / Riquadro con immagine, testo e pulsante | Immagine, titolo, testo e pulsante come unità unica: il modulo per le file di tessere. |
| Riquadro icona / Riquadro caratteristiche | Icona, titolo e breve testo, a scelta come link all’intera tessera – per vantaggi e servizi. |
| Vendere e convincere | |
| Elenco prodotti / Slider prodotti | Articoli reali dal vostro negozio inseriti nel testo – da una categoria, tramite “Seleziona prodotti” oppure tra i bestseller, le novità e le offerte. Come galleria o elenco, a scelta come slider, con pulsante del carrello. |
| Pulsante / Call-to-Action | Un singolo pulsante con destinazione, stile e icona. |
| Callout CTA / Icona + Testo + Pulsante | Riquadro in evidenza con titolo, testo e pulsante: la classica conclusione di un'argomentazione. |
| Testimonianza / Recensione del cliente | Citazione con nome, posizione o azienda, immagine del profilo e valutazione a stelle. |
| Contatore / Contatore animato (in aumento) | Dato che aumenta durante lo scorrimento – per indicare anni di esperienza, clienti soddisfatti, articoli in assortimento. |
| Conto alla rovescia (live shopping, lancio) | Orologio che conta alla rovescia fino a un determinato momento, dopodiché viene visualizzato il messaggio di scadenza. |
| Informazioni | |
| Tabella / Tabella responsive | Confronto e dati tecnici, scorrevole lateralmente su cellulare. |
| Timeline / Cronologia | Sviluppi e storia aziendale come sequenza di tappe fondamentali. |
| Avviso / Riquadro di avviso | Riquadro colorato per avvisi, consigli e messaggi di successo, chiudibile a scelta. |
| Mappa / Integrazione mappa | Mappa di OpenStreetMap o Google Maps con indicatori. La funzione «Calcola le coordinate dall’indirizzo» inserisce la posizione in base al vostro indirizzo. Per Google Maps è necessaria una chiave, che potete trovare in Impostazioni → Design → Generale → Chiave API di Google Maps. |
| Contatti e aspetti tecnici | |
| Modulo / Modulo incorporato | Un modulo creato in CMS → Moduli inserito in questa posizione. |
| Newsletter / Modulo di iscrizione | Iscrizione alla newsletter, su richiesta con titolo e nome. Se è attivato il double opt-in, viene inviata un’e-mail di conferma. |
| Codice / HTML personalizzato a partire da 4.9.21 | HTML personalizzato per tutto ciò che non dispone di un proprio modulo, ad esempio un'immagine con link o un'incorporazione tramite iframe. Non viene tradotto. Il codice script viene rimosso dall'editor, vedi Widget esterni. |
Come interpretare correttamente l’anteprima
Due visualizzazioni e due modalità di presentazione.
Desktop e mobile affiancati
L’anteprima mostra entrambe le visualizzazioni contemporaneamente, con larghezza, rientro, allineamento e ordine. Ciò che sul desktop sono tre schede affiancate, sul cellulare diventa tre schede una sotto l’altra: lo vedrete immediatamente, invece di scoprirlo in seguito.
Pseudo o Live
Nella parte superiore dell’anteprima è possibile passare da “Pseudo” a “Live”. La modalità Pseudo mostra per ogni elemento un riquadro con l’icona e il nome del modulo: ideale per verificare la disposizione e l’ordine. La modalità «Live» mostra una versione ridotta dei contenuti con testi abbreviati. Entrambe le visualizzazioni sono bozzetti del backend; i caratteri, i colori e le distanze del vostro negozio sono visibili solo sulla pagina aperta nel negozio stesso.
Modelli: riutilizzare una struttura
Una volta creata, utilizzabile tutte le volte che volete – anche in altre lingue.
Salva modello
Nella scheda «Applica», un modello sostituisce la struttura precedente o viene aggiunto alla fine; se non si seleziona la casella «Adotta i contenuti del modello», viene importata solo la struttura. Clicca per ingrandire.
- Salvare prima la pagina. Solo una versione salvata può essere utilizzata come modello.
- Aprire il «Gestore modelli» nella barra superiore, scheda «Salva».
- Inserire un nome (obbligatorio nella lingua predefinita, facoltativo nelle altre lingue).
- Lasciare selezionata l’opzione «Salva anche i contenuti» per includere testi e immagini, oppure deselezionarla per salvare solo la struttura e il layout.
- «Salva come modello».
Nella scheda «Gestisci» è possibile rinominare o eliminare i modelli; nella sezione «Importa/Esporta» è possibile scambiarli come file con un altro negozio.
Applicare un modello
Nella scheda «Applica» selezionare un modello (l’anteprima lo mostra in anticipo) e poi:
- «Sostituisci (sovrascrivi il contenuto esistente)» – la struttura precedente di questa lingua verrà sostituita.
- «Inserisci (aggiungi al contenuto)» – i blocchi del modello vengono inseriti alla fine.
Se non si seleziona la casella «Adotta i contenuti del modello», verrà visualizzata solo la struttura vuota.
Importante: l’operazione di applicazione comporta il ricaricamento della pagina; le modifiche non salvate in altri campi andranno perse. Successivamente, salvare la pagina almeno una volta, altrimenti il negozio continuerà a mostrare la versione precedente.
Applicare la struttura a un’altra lingua
Salvate la versione tedesca completata come modello con i contenuti. Passate alla scheda della lingua di destinazione, attivate lì il kit di costruzione, salvate e applicate il modello con «Sostituisci». Successivamente, sostituite i testi con la traduzione.
I modelli non collegati a una pagina si creano in CMS → Gestione modelli (xoContentEditor) con «Nuovo modello».
Widget esterni e codice HTML personalizzato
Marchi di valutazione, buoni dei partner, indicazioni sui pagamenti rateali: prima l’integrazione predefinita, poi il modulo codice.
Cosa può fare il blocco di codice
Il blocco «Codice / HTML personalizzato» è adatto all’incorporamento tramite iframe; l’editor rimuove gli script al momento del salvataggio. Clicca per ingrandire.
«Codice / HTML personalizzato» visualizza il vostro codice HTML senza modifiche e senza traduzione – con un’eccezione, vedi sotto. È adatto per un’immagine collegata, un’incorporazione tramite