E-Mail Footer anpassen (jpgs integrieren)

MarkusHue · ‎abr 29, 2022

Hallo Community,

ich möchte gerne in einem bestehenden Footer in unserem E-Mail-Template verändern (Bilder integrieren). Leider komme ich hier mit dem Design-Manager (und der Doku) nicht ganz zurecht.

Im Moment hab ich mir einen gespeicherten Abschnitt angelegt, den ich immer manuell an den Footer dranstelle - das würde ich gerne umgehen.

Kann hier jemand Hilfestellungen anbieten?

Folgende Fragen tauchen auf:

Kann ich überhaupt Bilder (jpgs) in den Footer integrieren?

Wie heisst das aktuelle Modul für den Footer? Wo finde ich den Namen dafür?

Wie kann ich dieses Element im Design-Manager finden und ggf. klonen?

VG Markus

Anton · ‎mai 2, 2022

Hi @MarkusHue,

ist es reines Drag&Drop E-Mail Template, ein "Design-Manager" Template oder reiner Code? Je nachdem was es ist, kann/muss man unterschiedlich vorgehen.

Du kannst natürlich die gespeicherten Abschnitte mittels eines sogenannten custom Moduls umgehen und somit viel Zeit sparen. Wenn sich der Inhalt nicht ändern soll bzw. falls er sich ändern soll, dann global, macht ein globales custom Modul sehr viel Sinn.

Am besten du machst dir zuerst Gedanken was du alles in diesem Modul haben möchtest (ob global oder nicht spielt hierbei keine Rolle). Also bspw. (Rich-)Text, Bild-Funktion, Socials(???). Natürlich kannst du auch weitere Optionen wie bspw. Texteinstellungen, Farben usw. einplanen, allerdings kann der Code hierbei sehr schnell sehr umfangreich werden.

Ok, du hast deine gewünschten Optionen zusammengestellt, die nächste Frage ist - wie soll er aussehen? Also Layout. Da E-Mails noch immer überwiegend in Tabellen programmiert werden, ist das vorgehen immer "Zeile -> Spalte".

Beispiel: Du möchtest Bild(zentriert), Adresse(zentriert), Socials(3 Icons, zentriert) und den sogenannten CAN-SPAM(Text, zentriert) im Footer haben - dann wären das 4 Zeilen mit je einer Spalte und die dritte für die Socials hat nochmal eine Zeile und diese hat 5 Spalten(je eine pro icon und jeweils eine rechts/links).

Es gibt eine Menge Tools da draußen, die dir die erstellung von Tabellen erleichtern. Bspw:

HTML Table generator (hierbei die CSS option ausschalten)
DivTable
Rapidtables

natürlich gibt es auch fortschrittliche Tools wie MJML - allerdings rate ich davon ab, da es nur bedingt für einzelne Module geeignet ist. Das hat mit der E-Mail Darstellung der einzelnen E-Mail Clients(Outlook, G-Mail etc) zu tun. Ich rate davon ab, die Büchse der Pandora zu öffnen 😀

Du hast deine Funktionen und Layout definiert - Wie gehts weiter?

Wenn du Zugang zum Design-Manager hast erstelle - optimalerweise in deinem Theme - ein neues Modul und wähle "E-Mail" als Verwendungszweck aus.

Du solltest so etwas in der Art sehen:

Der linke Bereich ist hierbei für den Code/Layout gedacht. In der rechten Sidebar erstellst du die HubSpot Funktionen(Text, Bilder etc)

Kopiere/Schreibe dein Layout in den linken Bereich.

Hier ein Beispiel Code für das Layout von oben

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tbody>
  
  <tr>
    <td style="padding:30px"><table width="100%" border="1" cellspacing="0" cellpadding="0">
        <tbody>
        
        {# start Zeile #}
        <tr>
          <td style="text-align:center" align="center">Ich bin ein Text</td>
        </tr>
        {# Ende Zeile #}
        {# start Zeile #}
        <tr>
          <td style="text-align:center" align="center">Ich bini ein weiterer Text</td>
        </tr>
        {# Ende Zeile #}
        {# start Zeile #}
        <tr>
          <td style="text-align:center" align="center"><table width="100%" border="1" cellspacing="0" cellpadding="0">
              <tbody>
              
              {# start Socials #}
              <tr>
                <td style="text-align:center" align="center"><table width="300" border="1" cellspacing="0" cellpadding="0"  style="text-align:center" align="center">
                    <tbody>
                      <tr>
                        <td>Icon 1</td>
                        <td>Icon 2</td>
                        <td>Icon 3</td>
                      </tr>
                    </tbody>
                  </table></td>
              </tr>
              {# Ende Socials#}
              </tbody>
              
            </table></td>
        </tr>
        {# Ende Zeile #}
        {# start Zeile #}
        <tr>
          <td style="text-align:center" align="center">Text Zeile 4</td>
        </tr>
        {# Ende Zeile #}
        </tbody>
        
      </table></td>
  </tr>
  </tbody>
  
</table>

Nächste Schritte:

HubSpot Funktionen einbauen.

Klingt kompliziert, ist es aber nicht 🙂

Am einfachsten ist es, die gewünschten Felder/Funktinen mittels Auswahl

hinzuzufügen und dann mittels "copy/paste" an die entsprechende Position einzufügen.

Beispiel:

Die Funktion als Code

Wenn du also den Rich-Text(Name kannst du individuell vergeben) in die erste Zeile des Layouts einfügst, sollte es so aussehen

...
{# start Zeile #}
        <tr>
          <td style="text-align:center" align="center">{{module.richtext_field}}</td>
        </tr>
        {# Ende Zeile #}
...

Bei Bildern ist es ähnlich. Hier würde ich allerdings empfehlen nicht das value, sondern das Snippet zu kopieren - spart dir einige Zeilen Code.

Hoffe, das hilft.

Wenn du Fragen haben solltest, jederzeit

VG

Anton

Exibir solução no post original

Anton · ‎mai 3, 2022

Hi @MarkusHue,

du findest diese Elemente im default Modul "email_can_spam" (siehe Screenshot)

Da es ein Default Modul ist, kann man es nur editieren, wenn man es dupliziert.

Mein Tipp:

Dupliziere es, kopiere den kompletten Inhalt aus der Rich-Text Quellcode Ansicht heraus und füge es in dein custom Modul an die entsprechende/gewünschte Stelle ein.

VG

Anton

Exibir solução no post original

Anton · ‎mai 2, 2022

Hi @MarkusHue,

ist es reines Drag&Drop E-Mail Template, ein "Design-Manager" Template oder reiner Code? Je nachdem was es ist, kann/muss man unterschiedlich vorgehen.

Du kannst natürlich die gespeicherten Abschnitte mittels eines sogenannten custom Moduls umgehen und somit viel Zeit sparen. Wenn sich der Inhalt nicht ändern soll bzw. falls er sich ändern soll, dann global, macht ein globales custom Modul sehr viel Sinn.

Am besten du machst dir zuerst Gedanken was du alles in diesem Modul haben möchtest (ob global oder nicht spielt hierbei keine Rolle). Also bspw. (Rich-)Text, Bild-Funktion, Socials(???). Natürlich kannst du auch weitere Optionen wie bspw. Texteinstellungen, Farben usw. einplanen, allerdings kann der Code hierbei sehr schnell sehr umfangreich werden.

Ok, du hast deine gewünschten Optionen zusammengestellt, die nächste Frage ist - wie soll er aussehen? Also Layout. Da E-Mails noch immer überwiegend in Tabellen programmiert werden, ist das vorgehen immer "Zeile -> Spalte".

Beispiel: Du möchtest Bild(zentriert), Adresse(zentriert), Socials(3 Icons, zentriert) und den sogenannten CAN-SPAM(Text, zentriert) im Footer haben - dann wären das 4 Zeilen mit je einer Spalte und die dritte für die Socials hat nochmal eine Zeile und diese hat 5 Spalten(je eine pro icon und jeweils eine rechts/links).

Es gibt eine Menge Tools da draußen, die dir die erstellung von Tabellen erleichtern. Bspw:

HTML Table generator (hierbei die CSS option ausschalten)
DivTable
Rapidtables

natürlich gibt es auch fortschrittliche Tools wie MJML - allerdings rate ich davon ab, da es nur bedingt für einzelne Module geeignet ist. Das hat mit der E-Mail Darstellung der einzelnen E-Mail Clients(Outlook, G-Mail etc) zu tun. Ich rate davon ab, die Büchse der Pandora zu öffnen 😀

Du hast deine Funktionen und Layout definiert - Wie gehts weiter?

Wenn du Zugang zum Design-Manager hast erstelle - optimalerweise in deinem Theme - ein neues Modul und wähle "E-Mail" als Verwendungszweck aus.

Du solltest so etwas in der Art sehen:

Der linke Bereich ist hierbei für den Code/Layout gedacht. In der rechten Sidebar erstellst du die HubSpot Funktionen(Text, Bilder etc)

Kopiere/Schreibe dein Layout in den linken Bereich.

Hier ein Beispiel Code für das Layout von oben

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tbody>
  
  <tr>
    <td style="padding:30px"><table width="100%" border="1" cellspacing="0" cellpadding="0">
        <tbody>
        
        {# start Zeile #}
        <tr>
          <td style="text-align:center" align="center">Ich bin ein Text</td>
        </tr>
        {# Ende Zeile #}
        {# start Zeile #}
        <tr>
          <td style="text-align:center" align="center">Ich bini ein weiterer Text</td>
        </tr>
        {# Ende Zeile #}
        {# start Zeile #}
        <tr>
          <td style="text-align:center" align="center"><table width="100%" border="1" cellspacing="0" cellpadding="0">
              <tbody>
              
              {# start Socials #}
              <tr>
                <td style="text-align:center" align="center"><table width="300" border="1" cellspacing="0" cellpadding="0"  style="text-align:center" align="center">
                    <tbody>
                      <tr>
                        <td>Icon 1</td>
                        <td>Icon 2</td>
                        <td>Icon 3</td>
                      </tr>
                    </tbody>
                  </table></td>
              </tr>
              {# Ende Socials#}
              </tbody>
              
            </table></td>
        </tr>
        {# Ende Zeile #}
        {# start Zeile #}
        <tr>
          <td style="text-align:center" align="center">Text Zeile 4</td>
        </tr>
        {# Ende Zeile #}
        </tbody>
        
      </table></td>
  </tr>
  </tbody>
  
</table>

Nächste Schritte:

HubSpot Funktionen einbauen.

Klingt kompliziert, ist es aber nicht 🙂

Am einfachsten ist es, die gewünschten Felder/Funktinen mittels Auswahl

hinzuzufügen und dann mittels "copy/paste" an die entsprechende Position einzufügen.

Beispiel:

Die Funktion als Code

Wenn du also den Rich-Text(Name kannst du individuell vergeben) in die erste Zeile des Layouts einfügst, sollte es so aussehen

...
{# start Zeile #}
        <tr>
          <td style="text-align:center" align="center">{{module.richtext_field}}</td>
        </tr>
        {# Ende Zeile #}
...

Bei Bildern ist es ähnlich. Hier würde ich allerdings empfehlen nicht das value, sondern das Snippet zu kopieren - spart dir einige Zeilen Code.

Hoffe, das hilft.

Wenn du Fragen haben solltest, jederzeit

VG

Anton

MarkusHue · ‎mai 2, 2022

Hallo @Anton ,

vielen Dank für deine Infos samt Anleitung. Das werde ich mir in Ruhe und genau ansehen und testen. Eine Frage hab ich gleich: Wie bzw. wo finde ich die Module oder Elemente für "Abmelden" und/oder "Einstellungen verwalten" (das sind die definierten Abo-Einstellungen im Account)? Kannst du mir hier auch weiterhelfen?

VG Markus

Anton · ‎mai 3, 2022

Hi @MarkusHue,

du findest diese Elemente im default Modul "email_can_spam" (siehe Screenshot)

Da es ein Default Modul ist, kann man es nur editieren, wenn man es dupliziert.

Mein Tipp:

Dupliziere es, kopiere den kompletten Inhalt aus der Rich-Text Quellcode Ansicht heraus und füge es in dein custom Modul an die entsprechende/gewünschte Stelle ein.

VG

Anton

MarkusHue · ‎mai 3, 2022

Hi @Anton ,

danke. Leider finde ich genau die Vorlage, die wir aktuell in unseren E-Mailings verwenden nicht im Design-Manager! Email_can_spam zeigt in der Vorschau im Design Manager etwas anderes, als ich zur Zeit im E-Mail-Editor verwende. Und ich habe es noch nicht geschafft, die Modulbezeichnung im E-Mail-Editor zu finden (auch im Quelltext finde ich nichts dazu).

Das ist etwas komisch!

VG Markus

MiaSrebrnjak · ‎abr 30, 2022

HI @MarkusHue,

danke, dass du dich an die Community gewendet hast!

Ich werde ein paar HubSpot Experten markieren, um zu sehen, ob diese diesbezüglich Erfahrungen gemacht haben:

hi @mariomaier, @Anton, @A_Wessolly, habt ihr vielleicht Tipps für @MarkusHue? Danke!

Viele Grüße,

Mia, Community Team

Wusstest du, dass es auch eine DACH-Community gibt?
Nimm an regionalen Unterhaltungen teil, indem du deine Spracheinstellungen änderst

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings

Marketing Hub | Fragen, Tipps & bewährte Methoden