Zum Hauptinhalt springen

Newsletter Editor

Der Newsletter-Editor ist auf ein Baukastenprinzip aufgebaut. Es wurden von unseren Programmierern Bausteine bereit gestellt mit denen eine Newslettervorlage schnell und einfach zusammengestellt werden kann.

Editor Übersicht

Im linken Bereich des Editors wird die Vorschau der Vorlage dargestellt. (In diesem Beispiel wurde die Vorlage "Chess" verwendet)

Editor Vorschau der Vorlage

Rechts davon ist der Einstellungs-Bereich. Hier können Einstellungen angepasst und neue Bausteine hinzugefügt werden.

Speichern

Oben links ist der "Speichern" Button. Erst mit einem Klick auf diesen Button werden Änderungen in der Vorlage gespeichert. Speichern Button

Vorschau

Mit dem Button Vorschau öffnet sich die Vorlage in einem neuen Fenster. Hier sehen Sie ie fertig generierte E-Mail, so wie sie später versendet wird. Vorschau Button

tip

Ziehen Sie das Fenster kleiner um die Vorschau für unterschiedliche Displaygrößen zu sehen.

WARNING

Bitte beachten Sie dass E-Mails nicht von jedem E-Mail Client gleich dargestellt werden. Unsere Bausteine sind aber so konfiguriert dass sie möglichst überall gut aussehen.

Test Senden

Vor dem Versenden des Newsletters sollte immer ein Test versendet werden. Dazu kann mit dem Button "Test Senden" die Vorlage an die eigene E-Mail gesendet werden. Test Senden Button

Es öffnet sich ein kleines Fenster. Hier muss nur noch der Betreff eingegeben werden Die E-Mail-Adresse wird aus den Betriebsdaten vorgeschlagen. Kann aber nach belieben noch angepasst werden

Empfänger und Betreff eingeben

Vorlageninhalt bearbeiten

Bausteine hinzufügen

Bausteine können schnell und einfach mit Drag & Drop zu einer Vorlage hinzugefügt werden. Anschließend können sie im "Eigenschaften" Menü rechts angepasst werden (Texte eingeben, Bilder einfügen usw.)

Baustein einfügen

Vorhandenen Baustein bearbeiten

Ein vorhandener Baustein kann mit einem Doppelklick oder über die Toolbar bearbeitet werden. Es öffnen sich die Eigenschaften des Bausteins rechts. Hier können die Texte eingegeben, Bilder eingefügt, Farben eingestellt und sonstige Einstellungen angepasst werden

Baustein bearbeiten

Was alles bei Bausteinen angepasst werden kann, wird im Punkt Alle Bausteine und ihre Einstellungen genauer beschrieben.

Baustein verschieben

Ein vorhandener Baustann kann mittels Drag & Drop innerhalb der Vorlage verschoben werden.

Baustein verschieben

Baustein löschen

Wenn mit der Maus über einen Baustein in der Vorlage gefahren wird, erscheint ein kleines Kontextmenü. Mit dem Müllkübel kann der ausgewählte Baustein entfernt werden.

Baustein löschen

Allgemeine Eigenschaften

Wenn kein Baustein ausgewählt ist, kann rechts oben auf "Eigenschaften" gewechselt werden. Hier können die allgemeinen Einstellungen der Newsletter-Vorlage angepasst werden.

Allgemeine Eigenschaften der Vorlage

Mit einem Klick auf die einzelnen Punkte, öffnen sich die Einstellungsmöglichkeiten

Eigenschaften -> Einstellungen

In dem Punkt "Einstellungen" kann der Name der Vorlage und die Breite der E-Mail Vorlage angepasst werden.

Eigenschaften -> Einstellungen

tip

Empfohlen für Newsletter ist 600 px damit die Vorlage auf allen Geräten optimal angezeigt wird

Eigenschaften -> Fonts

In dem Menüpunkt "Fonts" kann die Schriftart für die ganze Vorlage angepasst werden.

Eigenschaften -> Fonts

Hier können Sie den Namen einer Schriftart eingeben und erhalten automatisch Vorschläge der verfügbaren Schriftarten.

Um sich besser für eine Schriftart entscheiden zu können klicken Sie auf das Button i. Dadurch öffnet sich die Google Fonts Website, auf der Sie eine gute Übersicht der Schriftarten bekommen. In unserem Editor geben Sie dann einfach den Namen der gewünschten Schriftart (z.B. Roboto) ein.

Google Fonts auswählen

Eigenschaften -> Css

WARNING

Den Punkt "Css" sollten Sie nur verwenden wenn Sie sich mit CSS auskennen. Sie benötigen diese Einstellung im Normalfall nicht. Webdesigner könnten der Newslettervorlage hiermit den letzten Schliff geben.

Css

Mit einem Klick auf "Css bearbeiten" öffnet sich ein Fenster in dem ihr Code eingegeben werden kann.

tip

Wenn ein Baustein in der Vorlage doppelt angeklickt wird, kann rechts die ID des Blocks kopiert werden. Damit können Sie CSS-Regeln nur für einen bestimmten Block schreiben. Block ID

Basiseinstellungen

Die Basiseinstellungen können für die ganze Vorlage aber auch für jeden Block einzeln angepasst werden. Wenn Sie die Basiseinstellungen der Vorlage anpassen werden automatisch alle Bausteine mit angepasst, die noch die selbe Basiseinstellung haben.

Wenn die Basiseinstellung eines einzelnen Bausteins bereits überschrieben wurde wird sie nicht mehr automatisch mit angepasst.

Basiseinstellungen -> Hintergrund- und Schriftfarbe

Es gibt 3 Möglichkeiten die Farben der Vorlage anzupassen

  • Hintergrund außen -> Hintergrundfarbe Links und Rechts von dem Inhalt
  • Hintergrund innen -> Hintergrundfarbe innerhalb der Vorlage
  • Schriftfarbe -> Farbe der Schrift

Hier eine kleine Vorschau wie sich diese Felder auf die Vorlage auswirken:

Farben anpassen Animation

Basiseinstellungen -> Abstände

Es gibt 4 Möglichkeiten die Abstände zwischen den Bausteinen der Vorlage anzupassen

  • Abstand Innen - Oben -> Der Abstand oberhalb der Bausteine
  • Abstand Innen - Rechts -> Der Abstand rechts zwischen den Bausteinen
  • Abstand Innen - Links -> Der Abstand links zwischen den Bausteinen
  • Abstand Innen - Unten -> Der Abstand unterhalb der Bausteine

Abstände anpassen Animation

Alle Bausteine und ihre Einstellungen

Hier werden die Verwendungs- und Einstellungsmöglichkeiten jedes Bausteins beschrieben.

Überschrift & Absatz!

Überschrift & Absatz

Verwendung Überschrift & Absatz

Die Bausteine "Überschrift" und "Absatz" sind einfache Bausteine die dazu verwendet werden, Text auf der Vorlage hinzuzufügen.

Verwendung Überschrift & Absatz

Erste Zeile = Baustein Überschrift\ Zeilen darunter = Baustein Absatz

Einstellungen Überschrift & Absatz

Der Text-Editor bietet mehrere Formatierungsmöglichkeiten an.

Text-Editor

  • Text-Editor Fett Der markierte Text wird "fett" formatiert

  • Text-Editor Kursiv Der markierte Text wird "kursiv" formatiert

  • Text-Editor Unterstrichen Der markierte Text wird "unterstrichen" formatiert

  • Text-Editor Durchstrichen Der markierte Text wird "durchstrichen" formatiert

  • Text-Editor Link Auf dem markierten Text kann ein Link hinterlegt werden

  • Text-Editor Ausrichtung Die Ausrichtung des gesamten Text-Bausteins wird angepasst (Links, Mittig oder Rechts)

  • Text-Editor Platzhalter Mit diesem Menü können Platzhalter eingefügt werden. Hier werden dann die Daten des jeweiligen Empfängers automatisch eingetragen (Anrede/Vorname/Nachname/E-Mail Adresse/Briefanrede)

  • Text-Editor Fenster vergrößern Mit diesem Button kann das Eingabefenster für den Text vergrößert werden.

tip

Wenn der Text in der Vergrößerten Ansicht eingegeben wird, sieht man direkt die Vorschau wie es in der Vorlage aussehen wird (gleiche Breite wie die Vorlage)

Bei dem Block "Überschrift" gibt es noch zusätzlich die Format-Einstellungen.\ Einstellbar ist H1 bis H4.

Text-Editor Übrschrift

Wie bei jedem Baustein, können hier auch die Basiseinstellungen der ausgewählten Bausteins separat überschrieben werden. Mehr dazu siehe hier:\ Beschreibung Basiseinstellungen

Text-Spalten

Text-Spalten

Verwendung Text-Spalten

Mit dem Baustein "Text-Spalten" kann ein Text in bis zu 4 Spalten eingegeben werden.\ Jede Spalte hat eine Überschrift und einen Text.\ Natürlich kann jede Spalte/Überschrift/Text ausgeblendet werden.\ Die gesamte Breite des restlichen Spalten, passt sich immer automatisch auf die Gesamtbreite an

Text-Spalten

Einstellungen Text-Spalten

Mit der Einstellung "Abstand zwischen Spalten" kann der Abstand zwischen den Spalten angepasst werden\ Text-Spalten Abstand

Darunter sind die Einstellungen für die Spalten 1-4.\ Jede Spalte kann separat angepasst werden. (Optionen werden mit einem Klick auf z.B. Spalte 1 geöffnet)

Text-Spalten - Spalten

Pro Spalte kann eingestellt werden:

  • Spalte anzeigen
  • Überschrift anzeigen
  • Überschrift Text eingeben
  • Text anzeigen
  • Text eingeben

Wenn eine Spalte ausgeblendet wird, passen sich die Breiten der restlichen Spalten automatisch an.

Text-Spalten Spalten ausblenden

Texte können gleich formatiert werden, wie bei dem Bausteinen "Überschrift" und "Absatz"

Wie bei jedem Baustein, können hier auch die Basiseinstellungen der ausgewählten Bausteins separat überschrieben werden. Mehr dazu siehe hier:\ Beschreibung Basiseinstellungen

Bilder

Bilder

Verwendung Bilder

Mit dem Baustein "Bilder" können bis zu 4 Bilder nebeneinander eingefügt werden.\ Wie auch bei dem Baustein "Text-Spalten" können Spalten/Bilder ausgeblendet werden.\ In diesem Beispiel wurde der Bilder Baustein 2 mal eingefügt. Einmal mit einer Spalte und einmal mit 3 Spalten.

Bilder Verwendung

Einstellungen Bilder

Mit der Einstellung "Abstand zwischen Spalten" kann der Abstand zwischen den Spalten angepasst werden\ Buttons-Spalten Abstand

Darunter sind die Einstellungen für die Spalten 1-4.\ Jede Spalte kann separat angepasst werden. (Optionen werden mit einem Klick auf z.B. Spalte 1 geöffnet)

Bilder - Spalten

Pro Spalte kann eingestellt werden:

  • Spalte anzeigen: Wenn eine Spalte ausgeblendet wird, passen sich die Breiten der restlichen Spalten automatisch an.
  • Pfad des Bilds: Um ein Bild zu verwenden, muss ein Link eingefügt werden, zu einem beliebigen Webspeicher, oder es kann ein Bild auf den Casablanca Webspeicher hochgeladen werden und verlinkt werden.
  • Alternativtext: Es wird empfohlen eine kurze Beschreibung des Bildes zu hinterlegen (z.B. Hotelbild)
  • Ausrichtung: Hier wird die Ausrichtung des Bilds eingestellt (Links/Mitte/Rechts)
  • Maximalbreite: Die Maximalbreite des Bilds. Wenn dies leer gelassen wird, wird die Größe automatisch auf die Spalte angepasst.
  • Automatische Breite am Handy: Bilder werden in der Handyansicht automatisch auf die Gesamtbreite angepasst. Um dies zu verhindern (z.B. bei kleinen Icons) muss eine Maximalbreite hinterlegt werden und "Automatische Breite am Handy" deaktiviert werden.
  • Link: Verlinkung auf eine Website

Wie bei jedem Baustein, können hier auch die Basiseinstellungen der ausgewählten Bausteins separat überschrieben werden. Mehr dazu siehe hier:\ Beschreibung Basiseinstellungen

Buttons

Buttons

Verwendung Buttons

Mit dem Baustein "Buttons" können bis zu 4 Buttons nebeneinander eingefügt werden. Wie auch bei dem Baustein "Text-Spalten" können Spalten/Buttons ausgeblendet werden.\ In diesem Beispiel wurden 3 Bausteine kombiniert. "Überschrift", "Buttons" und "Bilder" (grünes Dreieck)

Buttons Verwendung

Einstellung Buttons

Mit der Einstellung "Abstand zwischen Spalten" kann der Abstand zwischen den Spalten angepasst werden\ Buttons-Spalten Abstand

Darunter sind die Einstellungen für die Spalten 1-4.\ Jede Spalte kann separat angepasst werden. (Optionen werden mit einem Klick auf z.B. Spalte 1 geöffnet)

Buttons - Spalten

Pro Spalte kann eingestellt werden:

  • Spalte anzeigen: Wenn eine Spalte ausgeblendet wird, passen sich die Breiten der restlichen Spalten automatisch an.
  • Url: Link für den Button hinterlegt
  • Text: Text der in dem Button steht
  • Ziel: Wie der Link geöffnet wird (in einem neuem Fenster/Im selben Fenster)
  • Hintergrundfarbe: Hintergrundfarbe des Buttons
  • Schriftfarbe Schriftfarbe des Texts des Buttons

Wie bei jedem Baustein, können hier auch die Basiseinstellungen der ausgewählten Bausteins separat überschrieben werden. Mehr dazu siehe hier:\ Beschreibung Basiseinstellungen

summary

Abstand

Verwendung Abstand

Mit dem Baustein "Abstand" kann zwischen anderen Baustein ein Abstand eingefügt werden. In diesem Beispiel wurde über der Überschrift und unter dem Absatz ein Absatz eingefügt.

Abstand Verwendung

Einstellungen Abstand

Bei dem Baustein Abstand kann die Höhe des Abstand eingestellt werden

Abstand

Wie bei jedem Baustein, können hier auch die Basiseinstellungen der ausgewählten Bausteins separat überschrieben werden. Mehr dazu siehe hier:\ Beschreibung Basiseinstellungen

Teaser-Spalten

Teaser-Spalten

Verwendung Teaser-Spalten

Mit dem Baustein "Teaser-Spalten" können bis zu 4 Teaser nebeneinander hinzugefügt werden. Ein Teaser besteht aus 4 Bestandteilen

  • Bild
  • Überschrift
  • Text
  • Button

Ein Teaser mit 4 Spalten könnte so zusammengestellt werden.

Teaser-Spalten Verwendung

Einstellungen Teaser-Spalten

Die Einstellungen des Bausteins "Teaser-Spalten" besteht aus den Einstellungen der Bausteine:\ Bild, Überschrift, Absatz und Buttons\ Der Baustein Teaser-Spalten hat dazu noch eine Einstellung:\ Hintergrundfarbe: Hiermit kann die Hintergrundfarbe der Teaserspalte angepasst werden

Hintergrundfarbe Teaser

Teaser

Teaser

Verwendung Teaser

Der Baustein "Teaser" besteht aus zwei Spalten.\ Eine Spalte mit einem Bild und eine Spalte mit einer Überschrift, einem Text und einem Button.

Ein Teaser könnte so zusammengestellt werden.

Teaser Verwendung

Einstellungen Teaser

Die Einstellungen des Bausteins "Teaser" besteht aus den Einstellungen der Bausteine:\ Bild, Überschrift, Absatz und Buttons.

Der Baustein Teaser hat dazu noch diese Einstellungen:\ Bild - Position: Die Positions des Bildes im Teaser (Links oder Rechts)

Teaser Position

Wie bei jedem Baustein, können hier auch die Basiseinstellungen der ausgewählten Bausteins separat überschrieben werden. Mehr dazu siehe hier:\ Beschreibung Basiseinstellungen

Navigation

Verwendung Navigation

Mit dem Baustein "Navigation" kann ein Menü auf die Vorlage hinzugefügt werden.\ In diesem Menü kann auf Webseiten verlinkt werden.\ Es können bis zu 4 Menüpunkte nebeneinander aufgelistet werden.\ Dies könnte zum Beispiel so aussehen.

Navigation Verwendung

Einstellungen Navigation

Jede Spalte (Menüpunkt) kann separat angepasst werden. (Optionen werden mit einem Klick auf z.B. Spalte 1 geöffnet)

Buttons - Spalten

Pro Spalte kann eingestellt werden:

  • Spalte anzeigen: Wenn eine Spalte ausgeblendet wird, passen sich die Breiten der restlichen Spalten automatisch an.
  • Text: Anzeige-Text des Menüpunkts
  • Link: Link auf die gewünschte Website

Wie bei jedem Baustein, können hier auch die Basiseinstellungen der ausgewählten Bausteins separat überschrieben werden. Mehr dazu siehe hier:\ Beschreibung Basiseinstellungen

Social

Social

Verwendung Social

Mit dem Baustein "Social" können Icons mit einem Link auf alle möglichen Social-Media Seiten hinzugefügt werden.\ Dies könnte zum Beispiel so aussehen.

Social Verwendung

Einstellungen Social

Beim Einfügen vom Baustein "Social" wird nur das Icon für "Facebook" dargestellt\ Um weitere Icons anzuzeigen, müssen diese rechts aktiviert werden.

Pro Social-Media kann eingestellt werden:

  • Spalte anzeigen: Ein/Ausblenden des jeweiligen Icons
  • Url: Link auf die jeweilige Social-Media
  • Icon: Falls erwünscht kann noch ein anderes beliebiges Icon verwendet werden. Dieses kann wie ein Bild eingebunden werden.

Wie bei jedem Baustein, können hier auch die Basiseinstellungen der ausgewählten Bausteins separat überschrieben werden. Mehr dazu siehe hier:\ Beschreibung Basiseinstellungen

Fußzeile

Fußzeile

Verwendung Fußzeile

Der Baustein "Fußzeile" generiert aus den hinterlegten Betriebsdaten eine Fußzeile.\ Die Fußzeile besteht aus zwei Spalten.

  • Name und Adresse des Hotels
  • Kontaktdaten (Telefon/E-Mail/Homepage)
caution

Diese Einstellungen werden nur beim Einfügen des Bausteins aktualisiert. Wenn sich die Betriebsdaten ändern müssen diese im Baustein händisch angepasst werden.

Es wird auch automatisch eine dunklere Farbe innen hinterlegt. Diese kann aber natürlich in den Basiseinstellungen angepasst werden.

Dies könnte zum Beispiel so aussehen.

Fußzeile Verwendung

Einstellungen Fußzeile

Mit der Einstellung "Abstand zwischen Spalten" kann der Abstand zwischen den Spalten angepasst werden\ Darunter werden die Textfeldelder für Spalte 1 und Spalte 2 dargestellt.\ Dieser könnte noch nach Wunsch angepasst werden.

Wie bei jedem Baustein, können hier auch die Basiseinstellungen der ausgewählten Bausteins separat überschrieben werden. Mehr dazu siehe hier:\ Beschreibung Basiseinstellungen