Mautic Templates (Theme) für Emails und Landingpages entwickeln

Schritt für Schritt: Mautic Templates für Email und Landingpages entwickeln. So geht es ganz leicht!

Dominik Belca

3min Lesedauer

Double-Optin-Verfahren und Mautic

Themes sind in Mautic HTML-Vorlagen für die Erstellung neuer E-Mails und Landingpages. Jedes Theme bringt ein eigenes Design mit, dadurch können Sie Ihre Inhalte einheitlich stylen und sparen viel Arbeit bei der Erstellung.

In diesem Artikel erfahren Sie, was ein Theme (auch Template genannt) ist, was Sie damit machen können und wie die Schritte zu einem eigenen Theme aussehen.

  • Was ist ein Theme?
  • Wo finde ich neue Themes?
  • Wie installiere ich ein Theme auf meinem Server?
  • Was ist nötig um ein eigenes Theme zu programmieren?
  • Technische Checkliste für fertige Themes

Was ist ein Theme?

Mautic Theme Preview

Ein Theme ist im Prinzip ein kleines Design-Paket. Es besteht aus HTML-Dateien, CSS-Stylesheets, manchmal auch noch mit Bildern und Icons. Die HTML-Dateien werden als Grundlage verwendet wenn Sie neue E-Mails oder Landingpages innerhalb anlegen.

Wo finde ich neue Templates?

Wie installiere ich ein Template auf meinem Server?

Was ist nötig um ein eigenes Theme zu programmieren?

Technische Checkliste für fertige Themes

Theme-Package

Mautic-Themes werden als ZIP-Datei ausgeliefert. Darin sind alle Theme-Dateien sowie zusätzliche Hilfsdateien enthalten.

Prüfpunkt OK?

  • ZIP liegt vor?
  • ZIP-Dateinamen gültig / geeignet?

Konfigurations-Datei

Die Konfigurations-Datei definiert den Namen des Themes und gibt an, welche Features unterstützt werden.

Prüfpunkt OK?

  • Konfigurations-Datei existiert? (config.json)
  • Konfigurations-Datei valide?
  • Mindestens ein Feature enthalten?
  • Thumbnail enthalten?
  • Thumbnail im Format PNG, 575 x 600 Pixel?
  • E-Mail Thumbnail enthalten?
  • Formular Thumbnail enthalten?
  • Seiten Thumbnail enthalten?
  • Thumbnail für alle Features vorhanden?

HTML-Dateien

Die enthaltenen HTML-Dateien dienen der Funktion unterschiedlicher Features. Nicht alle müssen vorhanden sein. Wird ein Feature in der Konfigurations-Datei aktiviert, muss auch die passende HTML-Datei vorhanden sein.

Prüfpunkt OK?

  • html-Ordner vorhanden?
  • Pattern Basis-Theme → Theme wird verwendet?
  • Datei base.html.twig vorhanden?
  • Enthält CSS?
  • Enthält Bilder?
  • Enthält Styles für das Form-Bundle? (html/MauticFormBundle/Builder/style.html.twig)
  • Alle Ressourcen über getAssetUrl()-Referenziert?
  • Alle Ressourcen (CSS / Bilder) im Theme vorhanden?

HTML-Base-Template

Prüfpunkt OK?

  • html-Ordner vorhanden?
  • Best Practice “Basis-Theme→ Include” wird verwendet?
  • html/base.html.twig vorhanden?
  • html/base.html.twig gültig?
  • Alle Ressourcen über getAssetUrl()-Referenziert?
  • Alle Ressourcen (CSS / Bilder) im Theme vorhanden?

HTML-E-Mail-Template

Dieses Template dient der Darstellung von E-Mails. Deswegen ist das HTML hier starkt eingeschränkt nutzbar, da viele Clients keine ausreichende Fähigkeiten besitzen.

Prüfpunkt OK?

  • Vollständige HTML-Seite?
  • Basis-Theme wird nicht inkludiert?
  • Tabellenbasiert?
  • CSS komplett Inline?
  • Keine externen Referenzen zu Bildern etc.?

Slots

<div data-slot=”text”>
  • Sind Slots definiert?
  • Slot-Syntax korrekt?
  • Nur zulässige Slot-Elemente? (image|button|text|separator) -

Slot-Container

<div data-slot-container="1">
  • Slots sind in Slot-Container gepackt?

Sections

<div data-section="1">
  • Inhalt zentriert?

Section-Container

<div data-section-wrapper="1">
  • 100% Breite definiert?

  • {subject} im Title verwendet?

HTML-Formular-Template

Dieses Template wird zur Anzeige von Formularen über öffentliche URLs genutzt.

Prüfpunkt OK?

  • Basis-Theme wird inkludiert?

Slots

<div data-slot=”text”>
  • Sind Slots definiert?
  • Slot-Syntax korrekt?
  • Nur zulässige Slot-Elemente? (image|button|text|separator)

Slot-Container

<div data-slot-container="1">
  • Slots sind in Slot-Container gepackt?

###Sections

<div data-section="1">
  • Inhalt zentriert?

Section-Container

<div data-section-wrapper="1">
  • 100% Breite definiert?

Notwendige Variablen inkludiert?

{{ message|raw }}

{{ content|raw }}

{{header}}

HTML-Message-Template

Dieses Template wird benutzt, wenn Mautic eigene Seiten zeigen muss, zum Beispiel bei einem Opt-Out.

Prüfpunkt OK?

  • Basis-Theme wird inkludiert?

Slots

<div data-slot=”text”>
  • Sind Slots definiert?
  • Slot-Syntax korrekt?
  • Nur zulässige Slot-Elemente? (image|button|text|separator)

Slot-Container

<div data-slot-container="1">
  • Slots sind in Slot-Container gepackt?

Sections

<div data-section="1">
  • Inhalt zentriert?

Section-Container

<div data-section-wrapper="1">
  • 100% Breite definiert?

Notwendige Variablen inkludiert?

{{ message|raw }}

{{content}}

HTML-Page

Dieses Template zeigt die HTML-Version der E-Mail auf dem Server an. Es wird auch für Landingpages verwendet.

Prüfpunkt OK?

  • Basis-Theme wird inkludiert?

Slots

<div data-slot=”text”>
  • Sind Slots definiert?
  • Slot-Syntax korrekt?
  • Nur zulässige Slot-Elemente? (image|button|text|separator)

Slot-Container

<div data-slot-container="1">
  • Slots sind in Slot-Container gepackt?

Sections

<div data-section="1">
  • Inhalt zentriert?

Section-Container

<div data-section-wrapper="1">
  • 100% Breite definiert?

Notwendige Variablen inkludiert?

{{ message|raw }}

{{content}}

{pagetitle}

{pagemetadescription}

{{ outputScripts('bodyOpen') }}

{{ outputScripts('bodyClose') }}

comments powered by Disqus