Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
Wenn Sie neu in der E-Mail-Entwicklung sind, kann die Arbeit, eine Vorlage anzupassen, überwältigend erscheinen. Aber keine Sorge. Wir haben diesen Blog geschrieben, um Ihnen zu erklären, wie Sie kosmetische und textliche Änderungen an einer Vorlage vornehmen.
Diese Techniken können mit allen kostenlosen Vorlagen verwendet werden, die wir in unserem Ressourcencenter anbieten. Für die Zwecke dieses Blogs werden wir die Vorlage „Coffee Shop“ anpassen. Wir werden die Vorlage von einem Café-Thema zu einem Thema ändern, das für ein Sushi-Restaurant wirbt. Klicken Sie auf die Bilder unten, um zu sehen, wie die gesamte E-Mail vorher und nachher aussieht.
Schritt 1: Öffnen Sie die HTML-Datei
Zum Arbeiten benötigen Sie einen Texteditor. Verwenden Sie hierfür nicht Word! Zu diesem Zweck können Sie Notepad (oder TextEdit auf dem Mac) verwenden. Ich mag Notepad++ wirklich, es ist kostenlos und bietet tolle Funktionen.
Sie können dieses gesamte Tutorial auch mit unserem brandneuen E-Mail-Editor durchführen. Wählen Sie einfach „Vorlage auswählen“ und wählen Sie die Coffee Shop-Vorlage aus der Liste aus. Der Editor zeigt Ihnen eine Live-Vorschau Ihres Codes und ermöglicht auch sofortiges Testen.
Schritt 2: Schneiden Sie unerwünschte Abschnitte ab
Als Erstes sollten Sie alle unerwünschten Abschnitte identifizieren, die in der von Ihnen verwendeten Vorlage enthalten sind. In dieser Vorlage ist jeder Abschnitt in eine einzelne Tabelle integriert. Daher möchten wir die gesamte Tabelle entfernen, um den Abschnitt loszuwerden.
Jede Vorlage ist anders codiert, sodass Sie von Fall zu Fall genau beurteilen müssen, was entfernt werden soll. Möglicherweise müssen Sie eine Zeile, eine Tabellenzelle oder eine ganze Tabelle entfernen, um unerwünschte Abschnitte zu entfernen. Verwenden Sie Kommentare als Orientierungshilfe, wenn Sie versuchen, den Anfang und das Ende eines unerwünschten Abschnitts zu finden. In diesem Fall ist die Coffee-Shop-Vorlage gut kommentiert, sodass Anfang und Ende jedes Inhaltsblocks leicht zu erkennen sind.
HTML-Kommentare sehen so aus:
In diesem Beispiel schneiden wir den dreispaltigen Inhaltsblock (der direkt über der Fußzeile angezeigt wird) sowie die Trennlinie davor aus.
…mehr Code hier…
Machen Sie weiter und schneiden Sie diese beiden Abschnitte ab. Achten Sie darauf, auch die Kommentare zu kürzen, da diese nicht benötigt werden.
Schritt 3: Bilder ändern
Jetzt ersetzen wir die Bilder durch Bilder für unser Sushi-Restaurant. Beginnen wir mit dem Logo. Sie können das Logobild im Code finden, indem Sie Strg+F verwenden und nach „Logo“ suchen.
Das Bild-Tag sollte so aussehen:
https://www.emailonacid.com/images/emails/coffeeshop/coffee-shop-logo.png” alt=””/>
Das Attribut „src“ steuert das angezeigte Bild. Nachdem Sie Ihr Bild gehostet haben, möchten Sie den absoluten Pfad oder die URL verwenden, um das Bild in Ihrer E-Mail anzuzeigen.
Solange Ihr neues Logo die gleichen Abmessungen hat, sollten Sie lediglich das src-Attribut des Bildes ändern müssen. Sie können ein Logo mit unterschiedlichen Abmessungen verwenden. Achten Sie jedoch darauf, den Stil der Inline-Breite zu ändern. Unser neues Logo wird so aussehen:
https://www.emailonacid.com/images/blog_images/Emailology/2016/cust_template/sushi-logo.jpg” alt=””/>
Sie möchten die src-Attribute für die restlichen Bilder in der Vorlage ändern. Stellen Sie einfach sicher, dass jedes Bild in den gleichen Abmessungen wie das Original gespeichert wird.
Sie können auch Bilder verwenden, die in den gleichen Proportionen gespeichert sind (ein 400×200-Bild an einer 200×100-Fläche), solange Sie mithilfe von HTML-Attributen die Höhe und Breite festlegen, in der es angezeigt werden soll. Dadurch können Sie Retina-Bilder für iOS-Geräte verwenden. Das folgende Beispiel zeigt den Code, den Sie benötigen würden, um ein Bild so einzustellen, dass es mit einer Breite von 200 Pixel angezeigt wird, obwohl es mit einer Breite von 400 Pixel gespeichert wurde.
https://www.emailonacid.com/images/an-image.png” alt=””/>
Schritt 4: Farben anpassen
Nachdem die Bilder ausgetauscht wurden, ist es an der Zeit, die Farben zu korrigieren. Die für unsere Coffeeshop-E-Mail verwendeten Erdtöne sehen bei all diesen hellen Sushi-Bildern nicht besonders gut aus.
Wir beginnen damit, die Hintergrundfarbe der E-Mail zu ändern. Hintergrundfarben in E-Mails werden hauptsächlich mithilfe des Hintergrundfarbenstils und des bgcolor-Attributs festgelegt. Um diese Änderung vorzunehmen, suchen Sie das Body-Tag der E-Mail. Der Body-Tag folgt dem schließenden Head-Tag. Sie können sehen, dass die Hintergrundfarbe auf #4d3e39 eingestellt ist. Manchmal wird eine Hintergrundfarbe an mehr als einer Stelle festgelegt, normalerweise um eine einheitliche Anzeige in allen E-Mail-Clients zu gewährleisten. In diesem Fall wird die Farbe an drei Stellen (am Ende jeder Zeile) eingestellt.
4d3e39;”>4d3e39;”>4d3e39;”>Lassen Sie uns alle drei in ein schönes, reichhaltiges #9e3212 ändern.
9e3212;”>9e3212;”>9e3212;”>Jetzt bearbeiten wir die Hintergrundfarbe der Hauptinhaltsspalte der E-Mail. Suchen Sie im Code nach dem Kommentar „Hauptteil starten“. Dies ist die Tabelle, die den größten Teil des E-Mail-Inhalts enthält und ihn auf eine zentrale Spalte beschränkt. Wie Sie sehen können, ist diese Farbe auf #ded6bf eingestellt.
|
Schritt 5: Schriftart(en) ändern
Der Schriftartenstapel (oder Schriftartenfamilienstil) bestimmt, in welcher Schriftart der Text vorliegen soll, sowie einige akzeptable Ersatzschriftarten für Kunden, die nicht über Ihre bevorzugte Schriftart verfügen. Der einfachste Weg, den Schriftartenstapel zu bearbeiten, besteht darin, in der E-Mail ein Beispiel dafür zu finden und dann mit Strg+H jede Instanz davon zu ersetzen. In der Vorlage „Coffee Shop“ sieht der Schriftartenstapel für Überschriften folgendermaßen aus:
Schriftfamilie: Georgia, serifenlos;
Suchen Sie mit Strg+H nach dieser Zeichenfolge in der E-Mail und ersetzen Sie sie dann durch:
Schriftfamilie: Arial, Helvetica, Sans-Serif;
Wir werden die Absatzschriftart für dieses Tutorial nicht ändern, da diese Schriftart bereits gut mit der Vorlage funktioniert.
Schritt 6: Text bearbeiten
Dies ist ein ziemlich einfacher Schritt. Sie müssen die Textblöcke im E-Mail-Code identifizieren und den Text durch den gewünschten Inhalt ersetzen. Der gesamte verbleibende Text sollte in Absatz- oder Anker-Tags (Link-Tags) vorliegen. Wir möchten jeden Textblock in der Vorlage bearbeiten, aber ich verwende nur den ersten als Beispiel.
In Artikel 1 finden Sie die Überschrift „Entdecken Sie unsere unverwechselbaren Mischungen“. Im Code sieht es so aus.
Entdecken Sie unsere unverwechselbaren Mischungen
Ändern wir das in: „Probieren Sie unsere neue Mega-Sushi-Rolle!“
Probieren Sie unsere neue Mega-Sushi-Rolle!
Möglicherweise möchten Sie auch Preheader-Text hinzufügen. Suchen Sie nach dem Kommentar „PREHEADER TEXT HIER“. Der Code sollte so aussehen.
Ändern wir das in „$2 Rolls – Sushi Happy Hour täglich 16–18 Uhr“. Vergessen Sie nicht, die Kommentar-Tags zu löschen! Wenn der Text auskommentiert ist, wird er nicht als Preheader angezeigt.
Schritt 7: Linkziele ändern
Schauen wir uns zum Schluss die Änderung des href eines Ankerlinks an. Der href steuert, auf welche Seiten-URL der Link verweist. Als Beispiel verwenden wir eine Schaltfläche.
Der verknüpfte Teil dieser Schaltfläche ist das „a“-Tag oder Anker-Tag.
Wir bearbeiten die href, um sie auf eine neue Seite zu verweisen.
Jetzt verweist der Link auf das Restaurant und trägt so dazu bei, den Verkehr dorthin zu steigern.
Abschluss
Wir haben jetzt eine Vorlage, die den Markenfarben und Schriftarten eines anderen Unternehmens entspricht. Indem Änderungen an der Struktur der Vorlage so weit wie möglich vermieden werden, sollte die Vorlage dennoch zuverlässig gerendert werden.
Wenn Sie jedoch Änderungen an einer Vorlage vornehmen, ist es immer am besten, sie zu testen. Sie haben keine schnelle und zuverlässige Möglichkeit, dies zu tun? Testen Sie unsere 7-tägige kostenlose Testversion! Über unsere Plattform können Sie Ihre Vorlage in Sekundenschnelle in einer Vielzahl von E-Mail-Clients und Mobilgeräten testen.
Autor: Das E-Mail-on-Acid-Team
Das Content-Team von Email on Acid besteht aus digitalen Vermarktern, Content-Erstellern und echten E-Mail-Freaks. Vernetzen Sie sich mit uns auf LinkedIn, folgen Sie uns auf Facebook und twittern Sie unter @EmailonAcid auf Twitter, um noch mehr tolle Neuigkeiten und tolle Konvos zum Thema E-Mail-Marketing zu erhalten.
Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
