Marketing & Content Hub | Fragen, Tipps & bewährte Methoden

MarkusHue
Contributor

E-Mail Footer anpassen (jpgs integrieren)

SOLVE

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

 

0 Upvotes
2 Accepted solutions
Anton
Solution
Thought Leader

E-Mail Footer anpassen (jpgs integrieren)

SOLVE

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:

 

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. 

 

Anton_0-1651475522684.png

 

Anton_1-1651475560264.png

 

Anton_2-1651475605603.png

 

Du solltest so etwas in der Art sehen:

Anton_3-1651475714163.png

 

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

Anton_4-1651477020114.png

 

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

Beispiel: 

Anton_5-1651477102687.png

 

Anton_6-1651477133711.png

 

Die Funktion als Code

Anton_0-1651477367435.png

 

 

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

Anton Bujanowski Signature

View solution in original post

Anton
Solution
Thought Leader

E-Mail Footer anpassen (jpgs integrieren)

SOLVE

Hi @MarkusHue

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

Anton_0-1651570065188.png

 

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

Anton Bujanowski Signature

View solution in original post

5 Replies 5
Anton
Solution
Thought Leader

E-Mail Footer anpassen (jpgs integrieren)

SOLVE

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:

 

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. 

 

Anton_0-1651475522684.png

 

Anton_1-1651475560264.png

 

Anton_2-1651475605603.png

 

Du solltest so etwas in der Art sehen:

Anton_3-1651475714163.png

 

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

Anton_4-1651477020114.png

 

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

Beispiel: 

Anton_5-1651477102687.png

 

Anton_6-1651477133711.png

 

Die Funktion als Code

Anton_0-1651477367435.png

 

 

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

Anton Bujanowski Signature
MarkusHue
Contributor

E-Mail Footer anpassen (jpgs integrieren)

SOLVE

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

0 Upvotes
Anton
Solution
Thought Leader

E-Mail Footer anpassen (jpgs integrieren)

SOLVE

Hi @MarkusHue

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

Anton_0-1651570065188.png

 

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

Anton Bujanowski Signature
MarkusHue
Contributor

E-Mail Footer anpassen (jpgs integrieren)

SOLVE

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

0 Upvotes
MiaSrebrnjak
Community Manager
Community Manager

E-Mail Footer anpassen (jpgs integrieren)

SOLVE

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