Newsletter Editor: introduzione alla creazione di modelli HTML

Tempo di lettura: 6 min

Noi di CleverReach vi offriamo un gran numero di modelli che potete facilmente utilizzare e personalizzare. Se desiderate comunque creare il vostro modello, potete utilizzare queste istruzioni:

Esempio

Cominciamo con questo semplice esempio. Immaginiamo che questo sia il nostro modello e che vogliamo renderlo il più semplice possibile da modificare per l'utente:

<html>
<body bgcolor="#ffffff">
    <h1>Newsletter quotidiana</h1>
    <p>Il vostro aggiornamento quotidiano su tutto ciò che sta accadendo con XXXXX</p>
    <table >
        <tr><td>
            <div>
                <h3>è appena successo?</h3>
                <img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" />
                <p>Non potete credere a quello che è appena successo. Se volete saperne di più, cliccate sul link qui sotto!</p>
                <a href="http://www.example.com">Leggi tutto</a>
            </div>
            <div>
                <h3>Aspetta, è successo anche questo??</h3>
                <img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" />
                <p>Forse non così impressionante come la notizia precedente, ma comunque molto molto interessante.</p>
                <a href="http://www.example.com">Per saperne di più</a>
            </div>
        </td></tr>
    </table>
</body>
</html>

In questo codice è possibile modificare solo testi, immagini e link.

Di norma, il testo e i link vengono trattati come semplice HTML, quindi è possibile inserire solo questi due tipi principali: HTML e IMMAGINE

Per rendere il testo modificabile, lo si avvolge con 
Per rendere le immagini modificabili, le avvolgiamo con

Nel nostro esempio, l'aspetto è il seguente:

<html>
<body bgcolor="#ffffff">
    <h1><!--#html#-->Newsletter quotidiana<!--#/html#--></h1>
    <p><!--#html#-->Il tuo aggiornamento quotidiano su tutto ciò che accade con ACME<!--#/html#--></p>
    <table >
        <tr><td>
            <div>
                <h3><!--#html#-->è appena successo?<!--#/html#--></h3>
                <!--#image#-->
                    <img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" /><!--#/image#-->
                <p><!--#html#-->Non credereste mai a quello che è appena successo. Se volete saperne di più, cliccate sul link qui sotto!<></p>
                <!--#/html#--><a href="http://www.example.com">Leggi tutto</a><!--#/html#-->
            </div>
            <div>
                <h3><!--#html#--><!--#/html#-->Aspetta, è successo anche questo??</h3>
                <!--#image#--><img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" /><!--#/image#-->
                <p><!--#html#-->Forse non così impressionante come la notizia precedente, ma comunque molto molto interessante.<></p>
                <!--#/html#--><a href="http://www.example.com">Per saperne di più</a><!--#/html#-->
            </div>
        </td></tr>
    </table>
</body>
</html>

Ora è possibile caricare questo modello nell'editor e fare clic sulle aree di testo o di immagine per modificarle.

Nota: è possibile utilizzare l'editor del codice sorgente durante il processo di creazione e passare facilmente da un editor all'altro (in alto a destra) per verificare i risultati ottenuti.

Blocchi di contenuto HTML

Il metodo precedente funziona bene se non si vuole che l'utente abbia troppa influenza, ma di solito è più comune avere aree specifiche in cui l'utente può semplicemente rilasciare pezzi HTML precostituiti che contengono varie forme di layout.

Queste aree sono chiamate loop. Ogni blocco di contenuto è racchiuso da  per tenere separati questi elementi.

Nell'esempio precedente, si può notare che ci sono 2 DIV, ognuno dei quali rappresenta un blocco di contenuto. Aggiungiamo il nostro tag loop e tralasciamo uno dei blocchi di contenuto, perché sono comunque abbastanza simili:

<html>
<body bgcolor="#ffffff">
    <h1><!--#html#-->Newsletter giornaliera<!--#/html#--></h1>
    <p><!--#html#-->Il tuo aggiornamento quotidiano su tutto ciò che accade con ACME<!--#/html#--></p>
    <table >
        <tr><td>
        <!--#loop#-->
            <!--#loopitem#-->
                <div>
                    <h3><!--#html#-->è appena successo?<!--#/html#--></h3>
                    <!--#image#--><img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" /><!--#/image#-->
                    <p><!--#html#-->Non credereste mai a quello che è appena successo. Se volete saperne di più, cliccate sul link qui sotto!<></p>
                    <!--#/html#--><a href="http://www.example.com">Per saperne di più</a><!--#/html#-->
                </div>
            <!--#/loopitem#-->
        <!--#/loop#-->
        </td></tr>
    </table>
</body>
</html>

Nota: i loop non possono essere inseriti tra strutture simili.

Tag dei modelli

Questo è un elenco di tutti i tag disponibili per i template, utilizzati per renderli modificabili. Li abbiamo suddivisi in 3 categorie:

Contenuto (grundlegende Bearbeitung)
Hilfebezogen (Schaltflächen, Abstandshalter usw.)
Designbezogen (Assistenza nella progettazione del vostro progetto)

Contenuti

Questi tag offrono opzioni di modifica di base::

HTML

Il tag HTML può gestire una serie di cose legate all'HTML. Dal semplice testo ai contenuti più complessi, offre diverse opzioni per controllare singolarmente ogni tag HTML.

<!--#html mode="default" inline="true "#--><!--#/html#-->

modalità imposta varie opzioni per il controllo dei contenuti

default: formattazione di base del testo, link e segnaposto
completo: come quello predefinito, ma con immagini
solo testo: visualizza solo i segnaposto nella barra degli strumenti
link: mostra solo le impostazioni e i segnaposto dei link
safelink: Nessuna barra degli strumenti, non può rimuovere i link, ma ha invece una barra laterale

inline="true" rende l'elemento un elemento inline e non un blocco (solo all'interno dell'editor). Questo corregge solo gli errori visivi nell'editor e non influisce sull'output effettivo.

replace="true" contrassegna l'intero testo quando viene selezionato per la prima volta, in modo da poterlo sostituire più facilmente.

IMMAGINI

Viene utilizzato per rendere le immagini modificabili, ma anche per renderle "sicure per il browser". Posizionare le immagini nelle e-mail non è così facile come si potrebbe pensare. Pertanto, l'editor cerca di incorporare l'immagine in una tabella per allinearla correttamente. Se l'immagine è già incorporata in una tabella, posizionare il tag image al di fuori della tabella e non intorno all'immagine. Se non si desidera che l'immagine vada a capo, è possibile utilizzare l'opzione "nowrap".

<!--#image align="center" #--><!--#/image#-->

align="center|left|right" Definisce l'orientamento standard dell'immagine. Se non è impostata, si tenta di trovarla.

margine="10px 20px" Definisce il bordo esterno dell'immagine (valore predefinito "0px").

nowrap="true" L'immagine non è inclusa nella tabella, per cui non è possibile alcun allineamento.

noresize="true|fasle" Rimuove la possibilità di ridimensionare

forcepx="true" Le immagini in percentuale sono convertite in px. In genere funziona meglio con tutti i client di posta elettronica

replace="true" Apre il browser dei file non appena si fa clic sull'immagine. Utilizzato solo una volta e per sostituire le immagini segnaposto.

inline="true" Rende l'immagine (nell'editor) un'immagine in linea e non un blocco. Questo corregge solo gli errori visivi nell'editor e non ha alcun effetto sull'output effettivo.

LOOP

Gli schleifen rappresentano un'area diversa, in cui l'utente può inserire nuovi elementi della lista di testo. Gli schleifen non possono essere inseriti tra gli elementi delle tabelle come <table><tr> or <ol><li>

<>
    <!--#loop#-->...<!--#/loopitem#-->
<!--#/loop#-->

loopitem nome: se impostato, lo rende un elemento staccabile nella barra laterale

loopitem sidebaronly: è incluso solo nella barra laterale, ma non nel contenuto vero e proprio (default:false)

loopitem pieghevole: rende i pulsanti collassabili (default:false)

PILA / INGRESSO PILA

Gli stack funzionano come i loop, ma il loro uso è molto limitato. L'idea è quella di dare all'utente un luogo dove poter disporre solo elementi semplici (HTML, IMAGE, BUTTON, BUTTON, SPACER e DIVIDER). Questo può essere usato per rendere le colonne modificabili senza interrompere le colonne stesse.

<table>
    <tr>
        <td>
            <!--#stacks#-->
                <!--#stack-entry#--><p>A</p><!--#/stack-entry#-->
                <!--#stack-entry#--><p>B</p><!--#/stack-entry#-->
            <!--#/stacks#-->
        </td>
        <td>
            <!--#stacks#--><!--#/stacks#-->
        </td>
    </tr>
</table>

Tag Aiutante

Queste etichette sono principalmente elementi prefabbricati, che vanno da semplici distanziatori a elementi complessi.

PULSANTE

Questo crea un pulsante HTML sicuro per il client. Nessuno dei valori è effettivamente richiesto.

<!--#button bgcolor="#e9703e" color="#000000" align="center" text="Leggi tutto" #--><!--#/button#-->

text="Clicca qui!" Testo di visualizzazione standard

href="http://example.url"

bgcolor="#e9703e" Definisce il colore di sfondo

colore="#ffffff" Definisce il colore del carattere

align="center|left|right|block" cambia l'allineamento. Il blocco corrisponde all'intera larghezza

margine="10px 10xp 20px 20px" margine esterno

SPAZIATORE

Crea un distanziatore modificabile.

<!--#spacer size="50px "#--><!--#/spacer#-->

size="20px" imposta l'altezza predefinita a 20px.

DIVIDENDO

Crea un separatore di linee (come <hr>).

<!--#divider padding="40px" width="85%" align="center" height="2px" color="#888888" bgcolor="transparent "#--><!--#/divider#-->

padding = "20px" imposta l'altezza predefinita di questo elemento (non della riga stessa)
larghezza = "20px" la larghezza della riga corrente
altezza = "20px" l'altezza della riga corrente
bgcolor = "#ffffff"
colore = "#ffffff"
align = "sinistra|centro|destra|block"

DISISCRIVERSI

Permette all'utente di scegliere tra i messaggi di logout predefiniti.
Nota: deve essere precompilato con il testo

<!--#unsubscribe#-->Per favore <a href="{UNSUBSCRIBE}">unsubscribe</a> me!<!--#/unsubscribe#-->

SU DI NOI

Questo aggiunge un'area in cui l'utente può scegliere tra impronte predefinite.

Nota: questo contenuto verrà sovrascritto non appena si carica il modello nell'editor. Se non si desidera questo, utilizzare invece l'HTML.

<!--#aboutus#--><!--#/aboutus#-->

VERSIONE ONLINE

Un'altra sezione per la visualizzazione di un testo e di un link alla versione online (browser).
Nota: deve essere precompilata con un testo.

<!--#onlineversion#-->Se questo messaggio non viene visualizzato correttamente, <a href="{ONLINE_VERSION}">clicca qui</a> per favore.<!--#/onlineversion#-->

CSS e design

Queste impostazioni si concentrano sul design e sui CSS per fornire all'utente opzioni di stile più ampie e completamente personalizzate.

TEMI

Questo cerca <style data="cr/theme"></style> e poi offre una scheda Theming sotto la scheda Design sul lato. Tutte le classi definite qui sono anche aggiunte in linea per garantire la massima compatibilità.

Funziona essenzialmente come SASS, ma sostituisce solo le variabili.

Nota: tutto ciò che si trova al di sotto di "*/" sarà sostituito, poiché si tratta dell'output CSS reso.

<style data="cr/theme">
/*
    $my_var: 15px;
    $slider-Max_width: 600px;
    $quad-Text_to_display: 12px 12px 24px 24px;
    $color-use_me: #ffffff;
    $image-Background_image: https://example.com/batman.png;


    .mytest { 
        width: $my_var; 
        margin: $quad-Text_to_display; 
        background-color: $color-use_me
    }
    .background {url($image-Background_image);}
*/
...
</style>

Offriamo una serie di preimpostazioni e prefissi che possono essere utilizzati per controllare il tipo di campo di input.

$slider- utilizza un cursore invece di un ingresso

$quad- visualizza un campo di input quadruplo (ad es. per i margini e i padding)

$color- si otterrà un selezionatore di colori

$image- restituisce un selettore di immagini

$my_var Il risultato è un campo di input intitolato My var. Il simbolo "_" è generalmente sostituito da " " (spazio).

Impostazioni dell'editor definite dall'utente

Controlla l'editor stesso e dà la possibilità di mostrare e nascondere alcune impostazioni.
Nota: idealmente dovrebbe essere nella prima riga, ma funziona anche altrove.

<!--#template css="false" settings="false" #-->

css = "false" Nasconde la scheda Design nella barra laterale principale
settings = "false" Nasconde la scheda Impostazioni nella barra laterale
default-elements = "false" Nasconde tutti gli elementi nella barra laterale
user-elements = "false" Nasconde tutti gli elementi dell'utente nella barra laterale
agency-elements = "false" Nasconde tutti gli elementi dell'agenzia nell'area della pagina
custom-elements = "false" Nasconde tutti gli elementi, tranne il template, nella barra laterale
css-to-inline= "true|false" Forza i CSS/stili in modalità inline
version = "2. 0" Disattivazione delle vecchie funzioni di fallback per i template (ad esempio la modifica automatica).0" Disattivazione delle vecchie funzioni di fallback per i template (ad esempio, la modifica automatica delle classi "body", ".a", ".text")
hideplugins = "edithtml,conditional" Richiede di nascondere alcuni plugin. Questo non è supportato da tutti i plugin
fix-top = "true" Aggiunge uno spazio supplementare in alto (solo nell'editor) per correggere la barra degli strumenti HTML mancante
image-nowrap = "true" Disattiva il table wrapping delle immagini
image-nohref = "true" Disattiva le impostazioni dei link per tutte le immagini
loops-collapsible = "true" Rende tutti i pulsanti degli elementi del ciclo collassabili

Editierbares CSS / Stile

Ciò consente di avere blocchi CSS modificabili nella scheda di progettazione, in modo che gli utenti possano modificare il modello a loro piacimento.

Collocare /* @title Display Name */ sopra una classe CSS per renderla (e tutti i suoi valori) disponibili nella scheda Design.

<style>
    /* @title Display Name */
    .exampleclass {
    background-color: #080708 !important;
    color: #ffeeff;
    padding: 5px;
    margin: 10px 5px;
}
</style>

Si possono anche combinare diverse definizioni di CSS in un gruppo, aggiungendo @gruppo-nome del gruppo al commento.

<style>
    /* @title margini e imbottiture
        @group Il mio gruppo personalizzato 
    */
    .exampleclass1 {
    padding: 5px;
    margin: 10px 5px;
    }

    /* @titolo soprattutto colori
        @gruppo Il mio gruppo personalizzato 
    */
    .exampleclass2 {
    background-color: #080708 !important;
    color: #ffeeff;
}

</style>

.modificabile

Se si aggiunge uno degli elementi HTML all'interno di un , tutti gli stili vengono rilasciati per la modifica.

Per impostazione predefinita, questi elementi sono denominati "Elemento #", dove # è un numero che dipende dal numero di elementi modificabili. È possibile modificare questo nome aggiungendo nome-dati.

Opzionale: È possibile utilizzaredati-limite-a per rendere modificabili solo gli stili CSS elencati (separati da virgole) e lasciare intatto il resto.

Opzionale: si può usare data-style per fornire all'utente stili aggiuntivi senza scrivere effettivamente questi valori nello stile, purché non differiscano dal valore originale. Qui verrebbe scritto solo se background-color fosse qualcosa di diverso da inherit.

<td style="padding: 10px 20px;text-direction:ltr;" data-style="background-color:inherit;" data-limit-to="padding,background-color" class="editable" data-name="Container">

Tag diminuiti

I seguenti tag sono obsoleti e vengono automaticamente convertiti in quelli più recenti.

<> wird 
<> wird 
<> wird 
<> wird 
<> wird <! --#loopsplit#-- >

Aiuto & Supporto

In caso di domande o di necessità di assistenza, si prega di contattare il nostro team di assistenza. Saranno lì per voi.

Newsletter Editor: introduzione alla creazione di modelli HTML

Esempio

Blocchi di contenuto HTML

Tag dei modelli

Contenuti

HTML

IMMAGINI

LOOP

PILA / INGRESSO PILA

Tag Aiutante

PULSANTE

SPAZIATORE

DIVIDENDO

DISISCRIVERSI

SU DI NOI

VERSIONE ONLINE

CSS e design

TEMI

Impostazioni dell'editor definite dall'utente

Editierbares CSS / Stile

.modificabile

Tag diminuiti

Aiuto & Supporto

<%= previousTitle %>

<%= nextTitle %>

I nostri webinar e seminari

<%= block.name %>

soggetti

<%= block.name %>

Altre domande?

soggetti

Ricerca

Esempio

Blocchi di contenuto HTML

Tag dei modelli

Contenuti

HTML

IMMAGINI

LOOP

PILA / INGRESSO PILA

Tag Aiutante

PULSANTE

SPAZIATORE

DIVIDENDO

DISISCRIVERSI

SU DI NOI

VERSIONE ONLINE

CSS e design

TEMI

Impostazioni dell'editor definite dall'utente

Editierbares CSS / Stile

.modificabile

Tag diminuiti

Aiuto & Supporto

<%= previousTitle %>

<%= nextTitle %>

I nostri webinar e seminari

<%= block.name %>

soggetti

<%= block.name %>

Altre domande?

soggetti

Categorie