Editor di contenuto web

L'editor di contenuto web ti consente di progettare, in modo responsive e altamente visivo, i contenuti personalizzati che verranno mostrati ai tuoi contatti dal tuo account, tramite workflow creati a tale scopo, senza la necessità di ulteriori programmazioni sul tuo sito. 

 

Come accedere?

Puoi accedere all'editor di contenuto web tramite due percorsi:

1. Da "Contenuto > Contenuto Web". Fai clic su  Crea nuovo contenuto web per generare un nuovo contenuto, oppure su Altro   e seleziona Modifica per modificare un contenuto web esistente.

2. Dal nodo "Invia contenuto web" di un workflow, facendo clic su  (Modifica configurazione del nodo). Fai clic su  Crea nuovo contenuto o su   Modifica per modificare un contenuto web esistente.

 

Interfaccia

L'editor di contenuto web è composto da tre blocchi:

1. Anteprima e salvataggio: per salvare o annullare le modifiche apportate. Puoi anche visualizzare in anteprima il risultato finale del contenuto che verrà inserito nel tuo eCommerce o visualizzarne la versione in HTML.

2. Pannello di progettazione: per costruire visivamente il contenuto web utilizzando le strutture e i componenti del pannello 3 (strumenti).

3. Strumenti: per configurare tutte le proprietà del contenuto e utilizzare i componenti di layout. Questo pannello può essere compresso o espanso facendo clic su  (Apri strumenti) o  (Chiudi strumenti).

 

Funzionamento

L'editor di contenuto web si basa sul metodo di progettazione "drag and drop" (trascina e rilascia), consentendo di progettare i contenuti in modo rapido, semplice e altamente visivo.

 

1. Modificare lo stile generale

Nel pannello di Strumenti (3), fai clic sulla scheda Generale per modificare i parametri dell'aspetto generale del contenuto. Puoi anche accedere facendo clic su   Proprietà generali dal pannello di progettazione (2).

I parametri comuni da definire sono:

• Nome: nome che desideri assegnare al contenuto per identificarlo nel tuo account Connectif.

• Etichette: cataloga il tuo contenuto web e trovane rapidamente l'ubicazione facendo clic su   Aggiungi etichette e inserendo parole chiave che ti aiutino a identificarlo.

• Bordi: colore, spessore e stile del bordo del tuo contenuto.
• Sfondo del contenuto: colore e effetti dell'immagine per lo sfondo del contenuto.
• Ombra: colore ed effetti di ombreggiatura della struttura che visualizzerà il tuo contenuto.
• Z Index: valore numerico che indica l'ordine di sovrapposizione dei livelli.
• Responsive: soglia di design responsive (fino a quale larghezza dello schermo sarà considerato un dispositivo mobile).

 

2. Costruire un contenuto web per blocchi

Nel pannello di Strumenti (3), fai clic sulla scheda Componenti per creare la tua composizione trascinando e rilasciando strutture o elementi nel pannello di progettazione (2).

 

Struttura

Distribuzione che un blocco di elementi adotterà all'interno del layout del contenuto web. Può presentarsi in una o più colonne, con proporzioni identiche o differenti.

La struttura deve essere definita per prima. In caso contrario, per impostazione predefinita verrà utilizzata la struttura a una colonna.

Una volta creato un blocco di elementi, posiziona il mouse sopra di esso e fai clic su  (Modifica blocco) per modificarlo,  (Duplica blocco) per crearne uno identico o  (Elimina blocco) per rimuoverlo.

 

Elementi

Gli elementi sono le unità minime di contenuto funzionale con cui costruire il design del tuo contenuto web, trascinandoli nei blocchi creati nel pannello di progettazione (2). Come per la struttura, puoi modificarli posizionando il mouse sopra un elemento e facendo clic sul pulsante  (Modifica elemento) o direttamente sul contenuto. Puoi anche duplicarli facendo clic su  (Duplica elemento), o eliminarli facendo clic su  (Elimina elemento).

 

Gli elementi disponibili sono:

• "Testo"
  Scrivi il tuo testo applicando formattazione avanzata (grassetto, corsivo, link...), inserendo variabili dinamiche o modificandone la disposizione all'interno del blocco inserito.

• "Immagine"
  Se l'immagine è già pubblicata su Internet, incolla l' URL dell'immagine per includerla nel contenuto web. Se preferisci caricarla dal tuo dispositivo, fai clic su   Carica immagine o su (   ), e seleziona il file dal browser della finestra popup. Una volta caricata, l'URL dell'immagine sarà completata automaticamente.
  
  Come configurazioni aggiuntive, è possibile assegnare un link all'immagine, regolare la sua disposizione rispetto al blocco che la contiene o cambiare il colore dello sfondo. Facoltativamente, puoi impostare il Testo alternativo (che apparirà in caso di mancato caricamento dell'immagine) e l'Attributo ‘title’ dell'immagine (il testo che appare posizionando il mouse sull'immagine, noto anche come attributo alt).

• "Pulsante link"
  Definisci il testo che apparirà sul pulsante, l'attributo ‘title’ e il link (può essere uno specifico o predefinito per eseguire un'azione concreta). Per configurare il suo aspetto visivo, seleziona i colori di testo e sfondo, personalizza i bordi e gli angoli e regola la sua posizione all'interno del blocco.

• "Divisore"
  Configura sia il colore che la disposizione della linea verticale per separare i contenuti in modo visivo.

• "Spazio"
  Definisci la distanza di spazio che desideri inserire tra due blocchi. Di default questo blocco è trasparente, ma puoi impostare un colore se necessario per il tuo design.

• "Prodotti"
  Inserisci un carosello di prodotti che verrà riempito con gli articoli di interesse per il contatto. Puoi scegliere uno dei tre modelli predefiniti (Prodotto base, Prodotto con marchio o Prodotto con prezzo) o personalizzare il suo aspetto finale nell'editor di testo. Puoi anche definire la struttura di righe e colonne in base al dispositivo.

• "HTML"
  Inserisci un codice HTML personalizzato e regola la sua posizione.

• "WhatsApp"
  Aggiungi un pulsante per consentire agli utenti di contattarti o condividere la pagina che stanno visitando tramite WhatsApp. Definisci il testo che apparirà sul pulsante, l'attributo ‘title’, il tipo di azione e il messaggio predefinito che verrà inviato. Per configurare il suo aspetto visivo, seleziona i colori del testo e dello sfondo, personalizza i bordi e gli angoli e regola la sua posizione all'interno del blocco.

• "Video"
  Incolla l'URL del video di YouTube o Vimeo che desideri mostrare nel tuo contenuto e imposta le sue opzioni di riproduzione. Se l'URL è valido, la copertina del video verrà visualizzata nel pannello di progettazione (2).
  Come impostazioni visive, puoi regolare la posizione del video o cambiare il colore dello sfondo.

• "Conto alla rovescia"
  Configura il timer impostando una data di fine e il suo formato. Personalizza il font, la dimensione e il colore dei numeri e delle etichette, il cui testo può essere modificato. Seleziona un colore di sfondo e regola la posizione del timer.

 

Elementi di form

Gli elementi di form raccolgono informazioni dal contatto tramite il tuo contenuto web, consentendo di acquisire lead, sondaggi, questionari, ecc.

Gli elementi di form disponibili a seconda del tipo di dati raccolti sono:

• "Testo": per una o più parole, tutti i caratteri sono validi.
• "Numero": per qualsiasi valore numerico con o senza decimali.
• "Data": per una data in formato giorno, mese e anno, compatibile internamente con ISO 8601.
• "Email": per un indirizzo email valido.
• "Multilinea": per più righe di testo.
• "Radio": per mostrare un elenco di opzioni tra cui selezionare una sola.
• "Selezione": per mostrare un menu a tendina con un elenco di opzioni tra cui selezionare una sola.
• "Checkbox": per mostrare un elenco di opzioni tra cui selezionare una o più.
• "Pulsante Invia": Consente al contatto di inviare il modulo e raccogliere in Connectif i dati inseriti.

 

3. Crea e utilizza componenti personalizzati esistenti

In Componenti personalizzati del pannello degli strumenti (3), fai clic su   Crea nuovo per salvare il design creato come modello. Seleziona il blocco o i blocchi che faranno parte del modello e, nella barra di anteprima e salvataggio (1), fai clic su   Crea nuovo.

Nella finestra popup assegna un nome e le etichette al componente personalizzato e fai clic su   Salva.

Puoi anche progettare rapidamente i tuoi contenuti web dal pannello di Strumenti (3), trascinando nell'area di progettazione (2) i componenti personalizzati creati da te che si trovano nella sezione Componenti personalizzati della scheda Componenti.

 

4. Revisare le variabili

Le variabili sono un elemento che consente di personalizzare i tuoi contenuti. Esamina le variabili create e quante volte si ripetono negli elementi di testo dal pannello di Strumenti (3), nella scheda Variabili. Per modificare il loro formato, fai clic su  .

 

5. Visualizza il risultato finale e salva

Nel pannello di anteprima e salvataggio (1) puoi visualizzare il risultato finale del tuo contenuto web.

Tutti i contenuti creati sono responsive, quindi puoi fare clic su  Anteprima per rivedere il risultato finale. Fai clic su  (Vista desktop) per visualizzare il risultato su desktop, o fai clic su  (Vista mobile) per visualizzare il risultato sui dispositivi mobili.

Una volta che il risultato del design è soddisfacente, fai clic su   Salva per salvare le modifiche al contenuto web.

 

 

 

---

Continua a imparare!

Per sfruttare al massimo il potenziale del tuo account Connectif, ti consigliamo di continuare con i seguenti articoli:

• Creare blocco di prodotti personalizzati in un contenuto web, per mostrare ai tuoi clienti prodotti di loro interesse.

• Mostrare prodotti personalizzati in un contenuto, per mostrare prodotti personalizzati a ogni contatto tramite un contenuto dinamico e un workflow.
• Mostrare percentuale di sconto solo quando esiste uno sconto in un contenuto web, per evidenziare i prezzi scontati e la percentuale di sconto in un contenuto.

• Raccomandatore in home, per mostrare nella home i prodotti che i tuoi contatti hanno visitato.