Tutorial – Mautic Templates selbst erstellen

Kerstin Belca

Kerstin Belca

mautic-eye

Sie können diese Anleitung nutzen, um auf diesem Weg Ihr eigenes Mautic Template zu erstellen.

Wenn Sie Ihr eigenes Mautic Theme erstellen wollen, ist es am einfachsten, ein bereits vorhandenes Theme herunterzuladen und es dann zu bearbeiten. 

Es gibt Mautic Templates für:

  • Emails
  • Landingpages 
  • Formulare
Diese Beschreibung eignet sich für Mautic Email Themes, die Erstellung von Formularen und Landingpages funktioniert ähnlich.

Schritt 1: Ein vorhandenes Mautic Theme herunterladen

Laden Sie sich als erstes eines der vorhandenen Themes aus Ihrer Mautic-Installation herunter.

  • Gehen Sie dafür auf die Themes-Übersichtsseite. Diese finden Sie über das Admin-Menü: Zahnrad in der oberen rechten Ecke der Mautic Benutzeroberfläche anklicken – dann direkt darunter auf Vorlagen klicken.
  • Neben dem jeweiligen Theme wird – unter „Features“ – angezeigt, für welchen Zweck das jeweilige Theme geeignet ist (E-Mail, Seite, Formular). Suchen Sie sich ein Theme aus, das für Ihre Zwecke passt (hier: E-Mail).
  • Klappen Sie das Drop-Down Menü links aus und klicken auf „Download“.

Schritt 2: Konfigurationsdatei config.json bearbeiten

Nachdem Sie das Theme heruntergeladen haben, können Sie es als Datei im Explorer öffnen.

Theme Datei im Explorer

Template Datei im Explorer

Schauen Sie sich die Dateistruktur des heruntergeladenen Themes an, suchen Sie nach der Datei config.json und öffnen Sie die Datei.

Die config.json Datei müsste einen Inhalt in dieser Art haben:

{
"name": "Skyline",
"author": "Mautic team based on a theme by Sendwithus",
"authorUrl": "https://www.sendwithus.com/resources/templates/skyline",
"features": [
"page",
"email",
"form"
]
}

Passen Sie in der config.json Datei die Angaben zu Namen, Autor, und Website an.

Tragen Sie dann ein, für welche Funktion Ihr Template eingesetzt werden soll („page“ = Landingpage, „email“ = Email oder „form“ = Formular)

Erstellen Sie danach – direkt in Ihrem Theme-Ordner – einen Ordner für Bilder an und speichern dort alle benötigten Bilder. 

Falls Sie Java-Script, bestimmte Fonts usw. verwenden möchten, macht es Sinn, dass Sie dafür auch jeweils einen neuen Ordner im Theme-Ordner erstellen (es funktioniert aber auch ohne).

Erstellen Sie außerdem eine Thumbnail-Datei und löschen Sie die vorhandene Thumbnail-Datei. Die neue Thumbnail-Datei muss im PNG Format vorliegen und die Größe 250px x 250px haben.

Wie erstelle ich ein Mautic Email Theme?

Feature Email hinzufügen

Fügen Sie zunächst in der Konfigurationsdatei „email“ zu den gewünschen Features hinzu, falls es noch nicht vorhanden ist.

„features“: [
„email“
]

Datei email.html.twig suchen und öffnen

Im Theme Ordner müsste sich ein html-Ordner befinden. Suchen Sie darin die Datei email.html.twig.

Mautic Thme erstellen Email.twig

Öffnen Sie die Datei email.html.twig .

HTML-Header bearbeiten

Bearbeiten Sie dann den Bereich zwischen den head Tags, und fügen Sie hier die notwendigen Informationen für den HTML-Header ein, z.B. Title und die Meta-Tags.

Falls Sie Links zu CSS-Dateien einbauen, müssen diese das HTTPS Protokoll nutzen (nicht HTTP).

HTML-Body bearbeiten

Sie können folgende HTML-Tags mit Attributen für Mautic versehen:

  • div
  • table
  • td

Diese Attribute gibt es:

  • data-slot
  • data-slot-container
  • data-section
  • data-section-wrapper

Data Slot / Data Slot Container

Als erstes müssen Sie diejenigen Bereiche festlegen, die sich bei jeder neuen Verwendung Ihres Themes als neue Email ändern sollen.

Diese Bereiche müssen jetzt in folgende Tags eingeschlossen werden:

< div data-slot=“_“ >…..

Diese Tags widerum müssen von folgenden Tags umschlossen werden:

< div data-slot-container=“1″>……..< /div>

Alle Inhalte, die zwischen diesen Tags angelegt werden, werden im Mautic Email-Editor als Standardinhalt angezeigt.

Data Section / Data Section Wrapper

Alle Abschnitte (Sections) der Email, die Sie eventuell im Mautic Email Builder neu anordnen oder löschen möchten, müssen innerhalb folgender Tags liegen:

Diese Tags widerum müssen von folgenden Tags umschlossen werden:

Beispiel

Jetzt müsste Ihr Mautic Email Template funktionieren!

Tipp: Wenn sie eine lokale Vorschau Ihrer Email brauchen, können Sie diese anzeigen lassen, indem Sie email.html.twig im Browser öffnen.

Wie erstelle ich ein Mautic Landingpage Theme?

Wir empfehlen, vor allem bei komplexeren Landingpages, diese mit einem anderen Tool zu erstellen. Wir bei Content Optimizer nutzen für diesen Zweck Elementor (Lesetipp: Warum wir Mautic Landingpages mit Elementor bauen).

Zu viele Details? Sparen Sie Zeit mit unserem Template-Service

Vereinbaren Sie jetzt Ihren Termin für ein unverbindliches Telefonat mit einem Experten.

Weitere Beiträge

Mautic Newsletter

Einmal im Monat, mit nützlichen Tipps und Neuigkeiten zum Thema Mautic, Marketingautomatisierung und Kundengewinnung.

Sie können sich jederzeit wieder abmelden - mit nur einem Klick! Wir schützen Ihre personenbezogenen Daten leidenschaftlich. Datenschutzerklärung anzeigen.

© 2005 - 2019 Content Optimizer GmbH

Cookies und Datenschutz

Bitte stimmen Sie der Nutzung von Cookies und dem Tracking zu.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Bitte wählen Sie:

Laden...

Widersprechen?

Wenn Sie widersprechen, speichern wir dies in einem Cookie und befolgen Ihren Wunsch.

Unsere Datenschutzerklärung finden Sie hier (LINK EINFÜGEN).

DSGVO konform - Datenschutz
Cookies und Datenschutz

Bitte stimmen Sie der Nutzung von Cookies und dem Tracking zu, damit wir Ihnen den bestmöglichen Service bieten können.

Um Ihre persönlichen Daten zu schützen, blockieren wir Cookies und Tracking-Skripte, bis Sie uns die Nutzung gestatten.
 
Wir benutzen Cookies und Tracking-Skripte, damit wir Ihnen zusätzliche Funktionen und Services bieten können.
 
Zum Beispiel:
  • kostenlose Downloads
  • Handbücher und Tutorials
  • Schulungsunterlagen
  • Onlinekurse
  • Inhalte abgestimmt auf Ihre Interessen

Auswirkungen Ihrer Entscheidung
Für die Nutzung der Basisfunktionen der Website ist Ihre Zustimmung nicht erforderlich. Ohne Ihre Zustimmung verzichten Sie auf den Zugang zu kostenfreien personalisierten Inhalten.

Widerspruch ist jederzeit möglich
Sie können eine einmal gegebene Zustimmung zu jeder Zeit wieder ändern.

Personalisierung bedeutet für Sie:

  • Sie sehen eher Artikel, Links und Hinweise, die zu Ihren Interessen passen
  • Ihnen werden weiterführende Informationen angezeigt
  • Sie erhalten personalisierte Sonderangebote

So setzen wir personalisierte Inhalte um:

Wir nutzen die Software Mautic für die Umsetzung der Personalisierung. Mautic verwendet Cookies, um Ihre Nutzung unserer Website zu erfassen. Zusätzlich speichert Mautic z.B.,

  • welche Formulare Sie abgeschickt haben,
  • welche Emails Sie empfangen , gelesen und welche Links Sie geklickt haben,
  • welche PDF-Dateien Sie herunter geladen haben,
  • welche Seiten Sie besucht haben.

Anhand der aufgezeichneten Aktionen versuchen wir Ihre Absicht, Situation und Informationsbedarf zu verstehen.

Dann wählt Mautic mit von uns bestimmten Regeln vermutlich passende Inhalte für Sie aus.

Zwecke der Personalisierung:

  • Erfassung von Kontaktdaten
  • Anbahnung von Geschäften
  • Kommunikation per Email
  • Automatisierte technische Unterstützung für Sie
  • Newsletterversand

Was passiert bei der Webanalyse?

Damit wir besser verstehen können, welche Inhalte (z.B. Seiten, PDF-Downloads, Videos) für Sie interessant sind, nutzen wir Webanalyse-Software.

Sie erhalten einen persönlichen Cookie, damit wir Ihre Nutzung unserer Website über mehrere Besuche hinweg zuordnen können.

Beispiele:

Navigation auf der Website: Dabei zeichnen wir auf, wie die Besucher der Website von einer Seite zur nächsten surfen.

Werbung optimieren: Wenn Sie eine Werbeanzeige angeklickt haben, werten wir aus, welche Anzeigen besonders gut funktionieren.

Zwecke:

  • Messen der Website-Leistung
  • Optimierung auf häufige Geräte und Browser
  • Verbesserung der Navigation
  • Optimierung und Erfolgsmessung bei Werbung
  • Messung der Effektivität von Verlinkung

Bitte wählen Sie:

Laden...

Widersprechen?

Wenn Sie widersprechen, speichern wir dies in einem Cookie und befolgen Ihren Wunsch.

Sie verlieren dadurch den Zugang zu personalisierten Angeboten und zu Inhalten wie Schulungen, Artikeln, kostenlosen Tools, Newsletter usw.

In unserer Datenschutzerklärung finden Sie die vollständige Angaben zu den Datenverarbeitungen und zu Ihren Rechten. Sie können zum Beispiel Ihre Einwilligung jederzeit widerufen, Auskunft, Korrektur, Herausgabe oder Löschung Ihrer Daten verlangen.