Spiegazione tecnica dei template CleverReach®

Nota Bene: hai bisogno di queste informazioni solo se vuoi programmare il tuo modello o fare modifiche molto grandi ai modelli esistenti nel codice sorgente.

In questo post dell’helpcenter descriveremo le caratteristiche del nostro vecchio Editor Classico per creare le tue newsletter. L’Editor Classico non è più supportato tecnicamente.

Consigliamo di creare le tue email con il nuovo Newsletter Editor da ora in poi. È sviluppato e migliorato costantemente, molto più semplice da usare e offre tante nuove funzioni utili.

Puoi trovare la tecnologia del modello per il redattore della newsletter qui.

Con la nostra tecnologia di template (template = modello) puoi trasformare ogni modello di newsletter (HTML) in un template gestibile tramite l'editor classic. Posiziona i tag specifici del template nel codice sorgente del tuo file HTML. Quasi ogni tag consiste di due parti, una di apertura e una di chiusura. Tra le due parti può essere posizionato un testo standard che appare con l'utilizzo del template e successivamente può essere modificato. Con i tag Online-Version, Unsubscribe e Aboutus viene impiegato automaticamente un testo standard di CleverReach®. I contenuti presenti in questi tag vengono quindi completamente sovrascritti.

Versione online: <!--#online_version #--><!--#/online_version#-->
Nuovi elementi: <!--#loop #--><!--#/loop#-->
Link di cancellazione: <!--#unsubscribe #--><!--#/unsubscribe#-->
Colophon: <!--#aboutus #--><!--#/aboutus#-->
Immagine: <!--#image #--><!--#/image#-->
Link: <!--#link #--><!--#/link#-->
Area HTML: <!--#html #--><!--#/html#-->
Riga di testo: <!--#text_line #--><!--#/text_line#-->
Area di testo: <!--#text #--><!--#/text#-->
Indice <!--#summary #--><!--#/summary#-->
Separatore di elementi: <!--#loopsplit#-->
Elemento modello: <!--#my_element name="Name" #--><!--#/my_element#-->
Configurazione di stili: data-cr-edit="Nome dell'area"
Stili di elementi propri: class="editable"

Versione online

Tramite il link della versione online, il destinatario può visualizzare l'e-mail online nel suo browser.

Esempio con testo predefinito:

<!--#online_version #-->

In caso di visualizzazione errata della newsletter, clicca <a href="{ONLINE_VERSION}">qui (online)</a>.

<!--#/online_version#-->

Indicazione importante: se definisci contenuti tuoi all'interno di questo tag, caricando il modello quest'ultimo viene completamente sovrascritto con testo standard di CleverReach®. In questo caso devi definire un'area HTML.


Elementi

Una marcatura posizionata nel codice sorgente (tag loop) ti consente di inserire nuovi elementi nel tuo mailing. Nell'area in cui posizioni il tag loop, tramite drag & drop puoi trascinare il rispettivo elemento nella posizione desiderata.

Esempio con testo predefinito:

<!--#loop #-->

<h2><!--#text_line #-->Esempio titolo<!--#/text_line#--></h2>
<!--#html #-->
Sono il testo riempitivo. Sin dalla nascita. Ci è voluto molto tempo prima che capissi che cosa significa essere un testo riempitivo. Non ha alcun senso. Funziona qui e là slegato dal contesto. Spesso non viene proprio letto.
<!--#/html#-->

<!--#/loop#-->

I nuovi elementi possono essere inseriti in qualsiasi formato. CleverReach® offre alcuni elementi predefiniti nell'editor, ma naturalmente puoi utilizzare anche i tuoi elementi per i mailing.


Cancellazione

Con il tag cancellazione inserisci un campo in cui si trova un link tramite il quale il destinatario può cancellare l'iscrizione.

Esempio con testo predefinito:

<!--#unsubscribe #-->

<a href="{UNSUBSCRIBE}" >Cancellare l'iscrizione</a>

<!--#/unsubscribe#-->

Indicazione importante: se definisci contenuti tuoi all'interno di questo tag, caricando il modello quest'ultimo viene completamente sovrascritto con testo standard di CleverReach®. In questo caso devi definire un'area HTML.


Colophon:

tramite il tag Colophon viene incorporato il colophon inserito nel tuo account.

<!--#aboutus #-->

<!--#/aboutus#-->

Indicazione importante: se definisci contenuti tuoi all'interno di questo tag, caricando il modello quest'ultimo viene completamente sovrascritto con testo standard di CleverReach®. In questo caso devi definire un'area HTML.


Immagine

Utilizza il tag immagine per posizionare un'immagine modificata; può essere utilizzato anche per i collegamenti.

Esempio con immagine predefinita:

<center>
<!--#image #-->

<img src="http://www.tuodominio.it/logo.jpg" border="0" >

<!--#/image#-->
</center>

Indicazione importante: affinché possa poi essere centrata nell'editor classic, l'immagine deve essere circondata da un tag center, altrimenti è possibile solo la direzione destra/sinistra.


Link

Utilizza il tag link per posizionare un link modificabile.

Esempio con link predefinito:

<!--#link #-->

<a href="http://www.tuodominio.it">Link</a>

<!--#/link#-->

Indicazione importante: questo elemento è previsto esclusivamente per link di testo, non per le immagini collegate. Per le immagini collegate usa l'elemento immagine.


Area HTML

Utilizza il tag HTML per posizionare un'area modificabile tramite l'editor HTML.

Esempio con testo predefinito:

<!--#html #-->
<div>

<h2>Esempio titolo</h2>
Sono un testo riempitivo. Sin dalla nascita. Ci è voluto molto tempo prima che capissi che cosa significa essere un testo riempitivo. Non ha alcun senso. Funziona qui e là slegato dal contesto. Spesso non viene neanche letto.

</div>
<!--#/html#-->

Indicazione importante: affinché poi sia possibile impostare una direzione del testo nell'area HTML (sinistra/destra/centrato/allineato), deve essere presente un elemento blocco all'interno dell'elemento HTML, quindi un tag p o div.


Righe di testo

Utilizza il tag testo per posizionare una riga di testo modificabile per le parti di testo (per es. per le intestazioni). In questo caso non sono possibili le formattazioni, ma possono essere inseriti collegamenti ipertestuali.

Esempio con testo predefinito:

<!--#text_line #-->

Io sono una riga di testo modificabile!

<!--#/text_line#-->


Area di testo

Utilizza il tag testo per posizionare una riga di testo modificabile per le parti di testo brevi. In questo caso non possono essere inseriti collegamenti ipertestuali.

Esempio con testo predefinito:

<!--#text #-->

Io sono un'area di testo modificabile!

<!--#text #-->


Sommario

Questo elemento crea automaticamente un sommario con collegamenti interni ai diversi elementi degli articoli inseriti nell'editor classic. Quasi ogni elemento inserito appare come punto separato nel sommario. In linea di massima alcuni elementi vengono inclusi sempre nel sommario. Con un clic sul sommario i relativi articoli possono essere visualizzati o no tramite il simbolo di un occhio. Piccolo suggerimento: questo elemento è disponibile anche come elemento standard nella selezione degli elementi.

Esempio:

<div class="summary">
<!--#summary #-->
<ul>
</ul>
<!--#/summary#-->
</div>


Separatore di elementi

All'interno di un loop puoi posizionare a piacere molte aree modificabili sotto forma di HTML, immagini, link o righe di testo. Se queste aree devono essere anche spostabili o cancellabili, allora devi separarle con il tag loopsplit.

Esempio:
<!--#loop #-->
<!--#html #-->Testo di esempio 1<!--#/html#-->

<!--#loopsplit#-->

<!--#html #-->Testo di esempio 2<!--#/html#-->
<!--#/loop#-->

Elemento modello

La creazione di e-mail con l'editor classic non si limita agli elementi standard di CleverReach®. Puoi definire all'interno dei tuoi modelli i cosiddetti elementi modello e inserirli all'interno dell'editor. In questo caso devi contrassegnare l'area corrispondente solo come elemento separato.

Esempio:
<!--#loop #-->

<!--#my_element name="Nome del tuo elemento" #-->

<h2><!--#text_line #-->Titolo<!--#/text_line#--></h2> <!--#html #-->
Io sono il tuo elemento :-)
<!--#/html#-->

<!--#/my_element#-->

<!--#loopsplit#-->

<!--#/loop#-->

Indicazione importante: ogni elemento deve essere denominato individualmente, altrimenti non appare nella selezione. Questi elementi disponibili soltanto quando viene utilizzato il relativo modello per il mailing e gli elementi sono quindi riferiti ai modelli. Verifica che la definizione dell'elemento modello avvenga all'interno di un loop. In alternativa, andando nell'account in [E-mail] > [Elementi] è possibile inserire elementi propri indipendenti disponibili in ogni modello (consigliato).


Configurazione di stili

Nella barra laterale destra dell'editor puoi modificare le aree corrispondenti del modello, naturalmente in base alle aree che hai definito. Tramite [Design] puoi modificare quindi l'area corrispondente. Puoi configurare anche gli stili di certe aree nel tuo modello tramite la barra degli strumenti. Per farlo gli elementi HTML (per es. tabelle) possono essere dotati del tag cr_edit="Nome dell'area". Il nome apparirà quindi nella barra degli strumenti.

Esempio:
<table data-cr-edit="Nome dell'area">
<tr>
<td></td>
</tr>
</table>

Configurazione di stili per propri elementi

Se gli stili di elementi propri devono essere configurabili, è necessario attribuire all'elemento la classe class="editable". Passando con il mouse sopra questo elemento, il simbolo di configurazione per la modifica degli stili appare in basso a destra nella finestra di configurazione.

Esempio:
<table class="editable">
<tr>
<td></td>
</tr>
</table>

Informazioni importanti

  1. Il tag loop di apertura e chiusura deve essere contenuto nello stesso tag HTML (TD, DIV), con una larghezza limitata. Una larghezza del 100% causerà problemi nella modifica degli elementi.
  2. Non puoi annidare i tag loop (<!--#loop #--><!--#/loop#-->). All'interno di un tag loop non puoi inserire un secondo loop. Anche gli elementi non possono essere annidati l'uno con l'altro.
  3. Se utilizzi elementi tuoi o specifici del modello, questi devono essere sempre integrati sulla base di contenitori HTML completi (tabella/div).
  4. Nel caso in cui i tuoi modelli non vengano inclusi nella selezione del template del mailing, il modello non contiene alcun tag wizard oppure contiene tag wizard errati (per ulteriori informazioni vedere qui)
  5. Per l'utilizzo di un proprio modello consigliamo i nostri Consigli e suggerimenti per modelli HTML
  6. Attenzione, CleverReach® non offre alcun supporto per modelli o elementi propri.