La tecnologia dei template CleverReach spiegata

 

Nota bene: queste informazioni sono necessarie solo se si desidera programmare il proprio modello o apportare modifiche molto importanti ai modelli esistenti nel codice sorgente.

Questa tecnica di template si riferisce all'Editor classico. Tecnicamente, l'Editor classico non è più supportato. Vi consigliamo di creare il vostro mailing nel nostro Editor di newsletter in futuro. Questo editor è in fase di sviluppo permanente e offre molte funzioni facili da usare.

La tecnica del modello per la redazione della newsletter è disponibile qui.

Con la nostra tecnologia di template è possibile trasformare qualsiasi newsletter (HTML) in un template che può essere utilizzato in un editor classico. A tal fine, è necessario inserire speciali tag di template nel codice sorgente del file HTML. Quasi tutti i tag sono composti da due parti: una di apertura e una di chiusura. Tra queste parti è possibile inserire un testo standard che verrà precompilato durante l'utilizzo del modello e potrà essere modificato di conseguenza. Per la versione online dei tag , l'annullamento dell'iscrizione e le informazioni su di noi CleverReach inserisce automaticamente il proprio testo standard. Qualsiasi testo esistente all'interno di questi tag verrà completamente ignorato.

Versione online: <!--#versione_online #--><!--#/versione_online#-->
Nuovi elementi: <!--#loop #--><!--#/loop#-->
Link di annullamento dell'iscrizione: <><!--#/unsubscribe#-->
Avviso legale: <!--#aboutus #--><!--#/aboutus#-->
Immagine: <!--#image #--><!--#/image#-->
Link: <!--#link #--><!--#/link#-->
Area HTML: <!--#html #--><!--#/html#-->
Linea di testo: <><!--#/text_line#-->
Area di testo: <!--#testo #--><!--#/testo#-->
Indice: <!--#summary #--><!--#/summary#-->
Separatore di elementi: <>
Elemento modello: <!--#my_element name="Nome" #--><!--#/my_element#-->
Configurazione degli stili: data-cr-edit="Nome del Bereichs"
Stili per elementi personalizzati: class="editabile"

Versione online

Con il link alla versione online consentite ai destinatari di consultare l'e-mail online nel loro browser.

Esempio con testo predefinito:

<!--#online_version #-->

Se questa newsletter non viene visualizzata correttamente, cliccare <a href="{ONLINE_VERSION}">qui (online)</a>.

<!--#/online_version#-->

Nota importante: se si definisce un contenuto personalizzato all'interno di questo tag, esso verrà sovrascritto dal testo standard di CleverReach. In questo scenario è necessario definire un'area HTML.


Elementi

I marcatori inseriti nel codice sorgente (tag loop) consentono di aggiungere un nuovo elemento all'e-mail. È possibile utilizzare la funzionalità Drag & Drop per posizionare un elemento nell'area definita con il tag loop.

Esempio con testo predefinito:

<!--#loop #-->

<h2><!--#text_line #-->Beispiel Titel<!--#/text_line#--></h2>
<!--#html #-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<!--#/html#-->

<!--#/loop#-->

È possibile aggiungere nuovi elementi in qualsiasi formato. CleverReach offre alcuni elementi predefiniti nel suo editor, ma potete anche utilizzare elementi personalizzati per le vostre e-mail.


Annullamento dell'iscrizione

Con il tag unsubscribe si aggiunge un'area che include un link che consente al destinatario di annullare l'iscrizione alle vostre e-mail.

Esempio con testo predefinito:

<!!!--#disiscriviti #-->

<a href="{UNSUBSCRIBE}" >Abmelden</a>

<!--#/unsubscribe#-->

Nota importante: se si definisce un contenuto personalizzato all'interno di questo tag, esso verrà sovrascritto dal testo standard di CleverReach. In questo scenario è necessario definire un'area HTML. definieren.


Avviso legale

Questo tag consente di aggiungere un avviso legale ai messaggi di posta elettronica.

<>

<>

Nota importante: se si definisce un contenuto personalizzato all'interno di questo tag, esso verrà sovrascritto dal testo standard di CleverReach. In questo scenario è necessario definire un'area HTML.


Immagine

Utilizzare il tag image per inserire un'immagine. L'immagine può essere modificata e collegata.

Esempio con immagine predefinita:

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

<img src="http://www.ihredomain.de/logo.jpg" border="0" >

<>
</center>

Nota importante: se si desidera centrare l'immagine nell'editor classico, è necessario inquadrarla con un tag centrale. Altrimenti è possibile scegliere solo tra l'allineamento a destra e a sinistra.


Collegamento

Utilizzare il tag link per inserire un collegamento modificabile.

Esempio con link predefinito:

<!--#link #-->

<a href="http://www.ihredomain.de">Link</a>

<!--#/link#-->

Nota importante: questo elemento può essere utilizzato esclusivamente per i collegamenti testuali. Se si vuole collegare un'immagine, è necessario utilizzare l'elemento image.


Area HTML

Utilizzare il tag HTML per posizionare un'area HTML modificabile all'interno dell'editor.

Esempio con testo predefinito:

<>
<div>

<h2>Titolo di esempio</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidididunt ut labore et dolore magna aliqua.

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

Nota importante: per abilitare l'allineamento del testo all'interno dell'area HTML (sinistra/destra/centro/blocco) è necessario includere un elemento di blocco all'interno dell'HTML - un tag P o DIV.


Linea di testo

Utilizzare il tag text per inserire una riga di testo modificabile (ad esempio, per i titoli). Questo tag consente i collegamenti ipertestuali.

Esempio con testo predefinito:

<!--#text_line #-->

Sono una riga di testo che può essere modificata!

<!--#/text_line#-->


Area di testo

Questo tag può essere utilizzato per inserire una riga modificabile di testo breve Non è possibile formattare il testo all'interno e non esiste una funzione di hyplerlink.

Esempio con testo predefinito:

<!--#testo #-->

Sono un'area di testo modificabile!

<!--#/text#-->


Indice

Questo elemento crea automaticamente un indice con i collegamenti interni ai singoli elementi dell'articolo che sono stati aggiunti tramite l'editor classico. Quasi ogni nuovo elemento apparirà come voce separata nell'indice. Gli elementi personalizzati vengono visualizzati nell'indice per impostazione predefinita. Facendo clic sull'indice è possibile nascondere singoli articoli facendo clic su sul simbolo dell'occhio. Suggerimento: Questo elemento è già disponibile come elemento standard.

Esempio:

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


Separatore di elementi

È possibile inserire all'interno di un ciclo tutti gli elementi modificabili che si desidera, indipendentemente dal fatto che si tratti di elementi HTML, immagini, collegamenti o righe di testo. Per poter spostare o cancellare questi elementi, è necessario separarli con il tag loopsplit.

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

<>

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

Elemento modello

La creazione di e-mail con l'editor classico non si limita agli elementi standard di CleverReach. All'interno dei modelli è possibile dichiarare elementi specifici e inserirli nell'editor. A tal fine è sufficiente contrassegnare l'area in questione come elemento separato.

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

<!--#my_element name="Name Ihres Elements" #-->

<h2><!--#text_line #-->Titel<!--#/text_line#--></h2> <!--#html #-->
Sono il tuo elemento personale:-)
<!--#/html#-->

<!--#/my_element#-->

<!--#loopsplit#-->

<!--#/loop#-->

Nota importante: ogni elemento deve avere un nome individuale, altrimenti non apparirà nella panoramica. Questi elementi possono essere utilizzati se il modello corrispondente è stato selezionato per l'e-mail su cui si sta lavorando. Quindi gli elementi sono legati a un modello. Assicurarsi di definire l'elemento modello all'interno di un ciclo. In alternativa, potete andare su [Emails] > [Elements] nel vostro account e inserire elementi personalizzati indipendenti che sono disponibili in ogni modello (consigliato).


Configurazione degli stili

Nella barra laterale destra dell'editor è possibile modificare le aree all'interno del modello, a seconda di quelle definite dall'utente. Tramite [Design] è possibile modificare l'area in questione. È inoltre possibile configurare gli stili di alcune aree all'interno del proprio modello utilizzando la barra degli strumenti. Per attivare questa funzione, gli elementi HTML (ad esempio le tabelle) possono includere il tag cr_edit="Nome dell'area". Il nome verrà visualizzato nella barra degli strumenti.

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

Stili per elementi personalizzati

Se si desidera rendere modificabili gli stili all'interno degli elementi personalizzati, è necessario aggiungere class="editable". Passare il mouse su questi elementi e fare clic sul simbolo di modifica che appare per modificare gli stili.

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

Note importanti:

  1. I tag di apertura e chiusura del ciclo devono essere inseriti all'interno di un tag HTML congiunto (TD, DIV) con una larghezza limitata. Una larghezza del 100% causerà problemi durante la modifica degli elementi.
  2. Non è possibile annidare i tag loop (). Non è possibile inserire un secondo ciclo in un tag loop.
  3. Se si utilizzano elementi personalizzati, occorre sempre crearli sulla base di tabelle HTML o di livelli DIV.
  4. Se il vostro modello non è elencato nel vostro account, il modello non contiene tag Wizard o non sono corretti (maggiori informazioni qui).
  5. Quando si utilizzano i propri modelli, si consiglia di leggere i nostri suggerimenti e trucchi per i modelli HTML.
  6. CleverReach non offre supporto per modelli ed elementi personalizzati.