Newsletter Editor: Einführung in die HTML-Template Erstellung

Lesezeit: 6 min

Wir bei CleverReach bieten Ihnen eine große Anzahl an Vorlagen an, die Sie einfach verwenden und anpassen können. Falls Sie trotzdem eine eigene Vorlage zusammenstellen möchten, können Sie diese Anleitung dafür nutzen:

Beispiel

Beginnen wir mit diesem einfachen Beispiel. Stellen wir uns vor, dass dies unsere Vorlage ist und wir sie für den Benutzer so einfach wie möglich bearbeiten wollen:

<html>
<body bgcolor="#ffffff">
    <h1>Daily Newsletter</h1>
    <p>Your daily update for all that is happening with XXXXX</p>
    <table >
        <tr><td>
            <div>
                <h3>did this just happen?</h3>
                <img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" />
                <p>You wouldn't believe what just happened. If you want to know more, click the link down below!</p>
                <a href="http://www.example.com">Read more</a>
            </div>
            <div>
                <h3>Wait, this happened too??</h3>
                <img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" />
                <p>Maybe not as awesome as the previous news, but still very very interesting.</p>
                <a href="http://www.example.com">Read more</a>
            </div>
        </td></tr>
    </table>
</body>
</html>

In diesem Code sind es nur Texte, Bilder und Links, die bearbeitet werden können.

In der Regel behandeln wir Text und Links als einfaches HTML, so dass wir nur diese beiden Haupttypen einfügen können: HTML und IMAGE

Um den Text bearbeitbar zu machen, umhüllen wir diesen mit 
Um Bilder bearbeitbar zu machen, umhüllen wir diese mit

Das würde bei unserem Beispiel folgendermaßen aussehen:

<html>
<body bgcolor="#ffffff">
    <h1><!--#html#-->Daily Newsletter<!--#/html#--></h1>
    <p><!--#html#-->Your daily update for all that is happening with ACME<!--#/html#--></p>
    <table >
        <tr><td>
            <div>
                <h3><!--#html#-->did this just happen?<!--#/html#--></h3>
                <!--#image#-->
                    <img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" /><!--#/image#-->
                <p><!--#html#-->You wouldn't believe what just happened. If you want to know more, click the link down below!<!--#/html#--></p>
                <!--#html#--><a href="http://www.example.com">Read more</a><!--#/html#-->
            </div>
            <div>
                <h3><!--#html#--><!--#/html#-->Wait, this happened too??</h3>
                <!--#image#--><img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" /><!--#/image#-->
                <p><!--#html#-->Maybe not as awesome as the previous news, but still very very interesting.<!--#/html#--></p>
                <!--#html#--><a href="http://www.example.com">Read more</a><!--#/html#-->
            </div>
        </td></tr>
    </table>
</body>
</html>

Sie können diese Vorlage nun in den Editor laden und auf die Text- oder Bildbereiche klicken, um sie zu bearbeiten.

Tipp: Sie können den Quellcode-Editor während des Erstellungsprozesses verwenden und einfach zwischen den Editoren (oben rechts) hin- und herschalten, um Ihre Ergebnisse zu überprüfen.

HTML-Inhaltsblöcke

Die vorherige Methode eignet sich gut, wenn Sie nicht möchten, dass der Benutzer zu viel Einfluss hat, aber in der Regel ist es üblicher, bestimmte Bereiche zu haben, in denen der Benutzer einfach vorgefertigte HTML-Bits ablegen kann, die verschiedene Formen von Layouts enthalten.

Wir nennen diese Bereiche Schleifen. Jeder Inhaltsblock darin wird von  umschlossen, um diese Elemente auseinanderzuhalten.

Im oben genannten Beispiel können Sie sehen, dass es dort 2 DIVs gibt, die jeweils einen Inhaltsblock darstellen. Fügen wir unser Schleifen-Tag hinzu und lassen einen der Inhaltsblöcke weg, da sie ohnehin ziemlich ähnlich sind:

<html>
<body bgcolor="#ffffff">
    <h1><!--#html#-->Daily Newsletter<!--#/html#--></h1>
    <p><!--#html#-->Your daily update for all that is happening with ACME<!--#/html#--></p>
    <table >
        <tr><td>
        <!--#loop#-->
            <!--#loopitem#-->
                <div>
                    <h3><!--#html#-->did this just happen?<!--#/html#--></h3>
                    <!--#image#--><img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" /><!--#/image#-->
                    <p><!--#html#-->You wouldn't believe what just happened. If you want to know more, click the link down below!<!--#/html#--></p>
                    <!--#html#--><a href="http://www.example.com">Read more</a><!--#/html#-->
                </div>
            <!--#/loopitem#-->
        <!--#/loop#-->
        </td></tr>
    </table>
</body>
</html>

Tipp: Schleifen können nicht zwischen ähnlichen Strukturen platziert werden.

Vorlagen Tags (Template Tags)

Dies ist eine Liste aller verfügbaren Vorlagen Tags, die wir verwenden, um Vorlagen bearbeitbar zu machen. Wir haben sie in 3 Kategorien unterteilt:

Inhaltsbezogen (grundlegende Bearbeitung)
Hilfebezogen (Schaltflächen, Abstandshalter usw.)
Designbezogen (Hilfe bei der Gestaltung Ihrer Vorlage)

Inhaltsbezogen

Diese Tags bieten Ihnen grundlegende Bearbeitungsmöglichkeiten:

HTML

Der HTML-Tag kann eine Vielzahl von HTML-bezogenen Dingen verarbeiten. Von einfachem Text bis hin zu komplexen Inhalten verfügt es über mehrere Möglichkeiten, um jedes HTML-Tag einzeln zu steuern.

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

mode setzt verschiedene Optionen für die Inhaltskontrolle

default: grundlegende Textformatierung, Links und Platzhalter
full: wie default, aber mit Bildern
textonly: zeigt nur Platzhalter in der Symbolleiste an
link: zeigt nur Link-Einstellungen und Platzhalter
safelink: Keine Symbolleiste, kann Links nicht entfernen, hat aber stattdessen eine Seitenleiste

inline=“true” macht das Element zu einem Inline-Element und nicht zu einem Block (nur innerhalb des Editors). Dies behebt nur visuelle Fehler im Editor und wirkt sich nicht auf die tatsächliche Ausgabe aus

replace=“true” markiert den gesamten Text, wenn er zum ersten Mal ausgewählt wird, damit er leichter ersetzt werden kann.

BILDER

Dies wird verwendet, um Bilder bearbeitbar zu machen, aber auch, um sie "Browser-sicher" zu machen. Die Positionierung von Bildern in E-Mails ist nicht so einfach, wie Sie vielleicht denken. Daher versucht der Editor, das Bild in eine Tabelle einzubetten, um es korrekt auszurichten. Wenn Ihr Bild bereits in eine Tabelle eingebettet ist, platzieren Sie das Bild-Tag außerhalb der Tabelle und nicht um das Bild herum. Wenn Sie nicht möchten, dass Ihr Bild umbrochen wird, können Sie die Option "nowrap" verwenden.

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

align=“center|left|right” Damit wird die Standardausrichtung des Bildes festgelegt. Ist keine festgelegt, wird versucht, sie herauszufinden.

margin=“10px 20px” legt den äußeren Rand des Bildes fest (Standardwert "0px")

nowrap=“true” Das Bild wird nicht in die Tabelle eingeschlossen, so dass keine Ausrichtung möglich ist.

noresize=“true|fasle” Entfernt die Möglichkeit der Größenänderung

forcepx=“true” Prozentuale Bilder werden in px umgewandelt. Dies funktioniert im Allgemeinen am besten mit allen E-Mail-Clients

replace=“true” Öffnet den Dateibrowser, sobald das Bild angeklickt wird. Nur einmalig und zum Ersetzen von Platzhalterbildern verwendet.

inline=“true” Macht das Bild (im Editor) zu einem Inline-Bild und nicht zu einem Block. Dies behebt nur visuelle Fehler im Editor und hat keinen Einfluss auf die eigentliche Ausgabe

SCHLEIFE

Schleifen schaffen einen bestimmten Bereich, in dem der Benutzer neue Elemente aus der Seitenleiste einfügen kann. Schleifen können nicht zwischen Tabellenelementen platziert werden wie <table><tr> oder <ol><li>

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

loopitem name: wenn gesetzt, macht es zu einem absetzbaren Element in der Seitenleiste

loopitem sidebaronly: wird nur in die Seitenleiste, aber nicht in den eigentlichen Inhalt aufgenommen (default:false)

loopitem collapsible: macht die Schaltflächen zusammenklappbar (default:false)

STAPEL / STAPEL-EINGABE

Stapel funktionieren wie Schleifen, sind aber in ihrer Verwendung sehr eingeschränkt. Die Idee ist, dem Benutzer einen Ort zu geben, an dem er nur einfache Elemente (HTML, IMAGE, BUTTON, BUTTON, SPACER und DIVIDER) anordnen kann. Dies kann dazu verwendet werden, Spalten editierbar zu machen, ohne die eigentlichen Spalten zu durchbrechen.

<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>

Helfer-Tags

Diese Tags sind hauptsächlich vorgefertigte Elemente, die von einfachen Abstandshaltern bis hin zu komplexen Elementen reichen.

BUTTON

Damit wird eine client-sichere HTML-Schaltfläche erstellt. Keiner der Werte ist tatsächlich erforderlich.

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

text=“Click here!” Standard-Anzeigetext

href=“http://example.url”

bgcolor=“#e9703e” Legt die Hintergrundfarbe fest

color=“#ffffff” Definiert die Schriftfarbe

align=“center|left|right|block” ändert die Ausrichtung. Block entspricht der vollen Breite

margin=“10px 10xp 20px 20px” Außenrand

SPACER

Erzeugt einen bearbeitbaren Abstandshalter.

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

size=“20px” setzt die Standardhöhe auf 20px

DIVIDER

Erzeugt einen Trennzeilen-Abstandhalter (wie <hr>)

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

padding = “20px” setzt die Standardhöhe dieses Elements (nicht der Zeile selbst)
width = “20px” Die Breite der aktuellen Zeile
height = “20px” die Höhe der aktuellen Linie
bgcolor = “#ffffff”
color = “#ffffff”
align = “left|center|right|block”

UNSUBSCRIBE

Bietet dem Benutzer die Möglichkeit, aus vordefinierten Abmeldemeldungen auszuwählen.
Hinweis: Muss mit Text vorausgefüllt werden

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

ABOUT US

Dadurch wird ein Bereich hinzugefügt, in dem der Benutzer aus vordefinierten Aufdrucken auswählen kann.

Hinweis: Dieser Inhalt wird überschrieben, sobald Sie die Vorlage in den Editor laden. Wenn Sie das nicht möchten, verwenden Sie stattdessen HTML.

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

ONLINEVERSION

Ein weiterer Abschnitt für die Anzeige eines Textes und eines Links zur Online-Version (Browser).
Hinweis: Muss mit Text vorausgefüllt werden

<!--#onlineversion#-->If this message is not displayed properly, <a href="{ONLINE_VERSION}">click here</a> please.<!--#/onlineversion#-->

CSS and Design

Diese Einstellungen konzentrieren sich auf Design und CSS, um dem Benutzer mehr und vollständig benutzerdefinierte Styling-Optionen zu bieten.

THEMES

Dieser sucht nach <style data="cr/theme"></style> und bietet dann eine Theming-Registerkarte unter der seitlichen Registerkarte Design an. Alle hier definierten Klassen werden auch inline angehängt, um maximale Kompatibilität zu gewährleisten.

Es funktioniert im Wesentlichen wie SASS, ersetzt aber nur Variablen.

Hinweis: Alles unterhalb von "*/" wird ersetzt, da es sich um die gerenderte CSS-Ausgabe handeln wird.

<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>

Wir bieten eine Reihe von Voreinstellungen und Präfixen an, mit denen Sie die Art des Eingabefeldes steuern können.

$slider- uses a slider instead of an input

$quad- displays quad input field (f.e. for margins and paddings)

$color- will result in a color picker

$image- returns an image selector

$my_var results in an input field which is labled My var. The "_" is generaly replaced with " " (space)

Benutzerdefinierte Editor-Einstellungen

Dies steuert den Editor selbst und gibt Ihnen die Möglichkeit, einige Einstellungen ein- und auszublenden.
Hinweis: Dies sollte am besten in der ersten Zeile stehen, funktioniert aber auch überall sonst.

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

css = “false” Blendet die Registerkarte Design in der Hauptseitenleiste aus
settings = “false” Blendet die Registerkarte Einstellungen in der Seitenleiste aus
default-elements = "false" Blendet alle Elemente in der Seitenleiste aus
user-elements = “false” Blendet alle Benutzerelemente in der Seitenleiste aus
agency-elements = “false” Blendet alle Agenturelemente im Seitenbereich aus custom-elements = “false” Blendet alle Elemente außer der Vorlage in der Seitenleiste aus css-to-inline = “true|false” Erzwingt CSS/Styles im Inline-Modus version = “2.0” Deaktivierung alter Fallback-Funktionen für Vorlagen (z.B. automatische Bearbeitung der Klassen "body", ".a", ".text") hideplugins = “edithtml,conditional” versucht, bestimmte Plugins auszublenden. Dies wird nicht von allen Plugins unterstützt fix-top = “true” fügt zusätzlichen Platz am oberen Rand hinzu (nur im Editor), um die fehlende HTML-Symbolleiste zu beheben image-nowrap = “true” deaktiviert den Tabellenumbruch von Bildern image-nohref = “true” deaktiviert die Link-Einstellungen für alle Bilder loops-collapsible = "true” macht alle Schaltflächen in Loopitems klappbar

Editierbares CSS / Style

Damit können Sie editierbare CSS-Blöcke in der Design-Registerkarte haben, sodass Benutzer ihre Vorlage nach ihrem Geschmack ändern können.

Platzieren Sie /* @title Display Name */ über einer CSS-Klasse, um sie (und alle ihre Werte) unter der Registerkarte Design verfügbar zu machen.

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

Außerdem können Sie mehrere CSS-Definitionen zu einer Gruppe zusammenfassen, indem Sie @group mygroupname zum Kommentar hinzufügen.

<style>
    /*  @title margins and paddings
        @group My custom group 
    */
    .exampleclass1 {
    padding: 5px;
    margin: 10px 5px;
    }

    /*  @title mostly colors
        @group My custom group 
    */
    .exampleclass2 {
    background-color: #080708 !important;
    color: #ffeeff;
}

</style>

.editable

Wenn Sie einem Ihrer HTML-Elemente innerhalb einer , werden alle Stile zur Bearbeitung freigegeben.

Standardmäßig werden diese mit "Element #" benannt, wobei # eine Zahl ist, die von der Anzahl der editierbaren Elemente abhängt, die Sie haben. Sie können diesen Namen mit hinzufügen von data-name ändern.

Optional: Sie könnendata-limit-to verwenden, um nur die aufgelisteten CSS-Stile (durch Komma getrennt) bearbeitbar zu machen und den Rest unangetastet zu lassen.

Optional: Sie können data-style verwenden, um dem Benutzer zusätzliche Stile zur Verfügung zu stellen, ohne diese Werte tatsächlich in stylezu schreiben, solange sie nicht vom ursprünglichen Wert abweichen. Hier würde es nur geschrieben werden, wenn background-color etwas anderes als inherit wäre.

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

Dekrementierte Tags

Die folgenden Tags sind veraltet und werden automatisch in ihr neueres Gegenstück umgewandelt.

 wird 
 wird 
 wird 
 wird 
 wird

Hilfe & Support

Sollten Sie Fragen haben oder Hilfe benötigen, können Sie jederzeit gerne unser Service Team kontaktieren.

Newsletter Editor: Einführung in die HTML-Template Erstellung

Beispiel

HTML-Inhaltsblöcke

Vorlagen Tags (Template Tags)

Inhaltsbezogen

HTML

BILDER

SCHLEIFE

STAPEL / STAPEL-EINGABE

Helfer-Tags

BUTTON

SPACER

DIVIDER

UNSUBSCRIBE

ABOUT US

ONLINEVERSION

CSS and Design

THEMES

Benutzerdefinierte Editor-Einstellungen

Editierbares CSS / Style

.editable

Dekrementierte Tags

Hilfe & Support

<%= previousTitle %>

<%= nextTitle %>

Unsere Webinare und Seminare

<%= block.name %>

Themen

<%= block.name %>

Noch weitere Fragen?

Themen

Suche

Beispiel

HTML-Inhaltsblöcke

Vorlagen Tags (Template Tags)

Inhaltsbezogen

HTML

BILDER

SCHLEIFE

STAPEL / STAPEL-EINGABE

Helfer-Tags

BUTTON

SPACER

DIVIDER

UNSUBSCRIBE

ABOUT US

ONLINEVERSION

CSS and Design

THEMES

Benutzerdefinierte Editor-Einstellungen

Editierbares CSS / Style

.editable

Dekrementierte Tags

Hilfe & Support

<%= previousTitle %>

<%= nextTitle %>

Unsere Webinare und Seminare

<%= block.name %>

Themen

<%= block.name %>

Noch weitere Fragen?

Themen

Kategorien