Mautic Themes: Komplette Anleitung auf Deutsch

Einführung in das Thema Mautic Themes

Mautic ist eine Open-Source-Marketing-Automatisierungsplattform, die es Unternehmen ermöglicht, ihre Marketing-Kampagnen zu planen, zu verwalten und zu automatisieren. Da es im Bereich des Marketings zur Anwendung kommt, ist es entscheidend, dass alle Komponenten wie E-Mail, Landing Pages und Formulare für die Benutzer den Designkriterien, also dem Corporate Design, des Unternehmens entspricht. Dies kann bei Mautic durch Themes erreicht werden. Was es dabei zu beachten gilt, wie Sie ein Theme ändern oder ein eigens erstellen, erfahren Sie in diesem Artikel.

Was sind Mautic Themes und warum sind sie wichtig?

Mautic Themes sind vorgefertigte Designs, die das Aussehen und die Funktionen einer Mautic-Installation beeinflussen. Sie können verwendet werden, um die Benutzeroberfläche zu individualisieren und kundenspezifische Funktionen wie etwa das Hinzufügen von eigenem CSS und Javascript. Themes ermöglichen es Mautic-Benutzern, das Aussehen ihrer Website oder Anwendungen an ihre Marke oder ihren Markenstil anzupassen.

Ein Mautic Theme besteht aus einer Reihe von Dateien, die das Aussehen und das Verhalten Ihrer Marketing-Automatisierungsplattform bestimmen. Einige wichtige Dateien sind:

Zusammen bilden diese Dateien das Mautic Theme, das die Marketing-Automatisierungsplattform definiert. Wenn Sie ein Theme ändern möchten, können Sie diese Dateien bearbeiten oder ersetzen, um das Aussehen und das Verhalten Ihrer Plattform anzupassen.

Die Rolle von Themes in der Marketing-Automatisierung

Themes sind ein wichtiger Bestandteil der Marketing Automatisierung. Sie können verwendet werden, um die Benutzeroberfläche einer Mautic-Installation anzupassen und einzigartige Layouts und Designs für E-Mails, Landing Pages und Formulare zu erstellen. Darüber wird Benutzern ermöglicht Benutzeroberflächen zu erstellen, die ihre eigene Marke und ihren eigenen Stil – die Corporate Identity – widerspiegeln. Das wiederum kann sich in den Öffnungsraten und Klickraten der E-Mail-Kampagnen niederschlagen, da die Empfänger mit dem vertrauten Markenauftritt interagieren.

Übersicht über verfügbare Mautic Themes

Mautic unterstützt eine Reihe von Themes, die direkt auf der Mautic-Website heruntergeladen werden können. Diese Themes können kostenlos oder kostenpflichtig sein und enthalten verschiedene Funktionen wie z.B. das Hinzufügen von eigenem CSS und Javascript.

Community-basierte und offiziell unterstützte Mautic Themes

Community-basierte Mautic Themes sind Themes, die von Mitgliedern der Mautic-Community erstellt wurden. Diese Themes sind in der Regel kostenlos verfügbar und können über den Mautic-Marketplace heruntergeladen werden.

Offiziell unterstützte Themes werden von Mautic selbst entwickelt und unterstützt. Diese Themes sind in der Regel kostenpflichtig und bieten eine höhere Qualität und Funktionalität als Community-basierte Themes. Sie werden auch regelmäßig aktualisiert, um sicherzustellen, dass sie mit den neuesten Funktionen und Sicherheitsupdates kompatibel sind.

Bei der Auswahl eines Themes gilt es auf zwei Punkte besonders zu achten:

1. entspricht das Theme deinen Anforderungen und
2. wird es regelmäßig aktualisiert, damit sichergestellt werden kann, dass es mit den jeweils neuesten Funktionen von Mautic kompatibel ist.

Kostenlose und kostenpflichtige Themes

Es gibt eine Reihe kostenfreier Themes, die über die Mautic-Website verfügbar sind. Diese Themes sind einfach zu installieren und anzupassen, bieten jedoch möglicherweise nicht so viele Funktionen und Anpassungsmöglichkeiten wie gewünscht oder benötigt. Deshalb gibt es auch eine Reihe kostenpflichtiger, von Drittanbietern entwickelter Mautic Themes, die oft mehr Funktionen und Anpassungsmöglichkeiten bieten.

Im Folgenden eine kleine Auflistung kostenloser und kostenpflichtiger Mautic-Themes. Bitte beachten Sie, dass es sich hierbei um Beispiele handelt und es unzählige andere Themes gibt. Wie bereits erwähnt, ist es unerlässlich, die Funktionalität, die Design-Optionen und die Kompatibilität mit den eigenen Anforderungen abzugleichen, bevor Sie sich für ein Theme entscheiden.

5 kostenlose Mautic Themes

• Mautic Community Theme
• Mautic Foundation Theme
• Mautic Bizo Theme
• Mautic Bluesky Theme
• Mautic Horizon Theme

5 kostenpflichtige Mautic Themes

• Mautic Pro Theme
• Mautic Biz Theme
• Mautic Agency Theme
• Mautic Ultimate Theme
• Mautic Startup Theme

Wie man ein Mautic Theme auswählt und installiert

Überlegungen bei der Auswahl eines Themes

Folgende Punkte sollten bei der Auswahl eines bereits fertigen Mautic Themes beachtet und hinterfragt werden.

Design

Wählen Sie ein Theme, das gut zu Ihrem Markenbild und Ihrer Zielgruppe passt und überprüfen Sie das Layout, die Farben und die Schriftarten, um sicherzustellen, dass es für Ihre Zwecke geeignet ist.

Funktionen

Überprüfen Sie, ob das Theme die Funktionen bietet, die Sie benötigen, wie etwa Landingpages, E-Mail-Vorlagen und Formulare. Stellen Sie zudem sicher, dass das Theme auch ermöglicht, E-Mails zu testen und zu optimieren.

Anpassbarkeit

Die Anpassbarkeit des Themes an Ihre Bedürfnisse ist natürlich ebenso zu checken. Dabei sollten Sie sicherstellen, dass Sie CSS und Javascript bearbeiten können, um das Aussehen und Verhalten dem Ihrer Seiten anzupassen.

Technischer Support

Gibt es einen technischen Support für das Theme? Idealerweise sollten Sie einfachen Zugang zu Updates und Sicherheitspatches haben.

Benutzerbewertungen

Last but not least lohnt ein Blick auf die Bewertungen anderer Benutzer, um ein besseres Verständnis dafür zu erhalten, wie gut das Theme funktioniert und ob es für Ihre Bedürfnisse geeignet ist.

Schritt-für-Schritt Anleitung zur Installation eines Mautic Themes

1. Laden Sie das gewünschte Theme von der Webseite herunter, auf der Sie es gefunden haben.
2. Öffnen Sie Ihre Mautic-Installation und gehen Sie zum Menüpunkt „Einstellungen“ und dann zu „Themes“.
3. Klicken Sie auf den Button „Upload Theme“ und wählen Sie die heruntergeladene Theme-Datei aus.
4. Warten Sie, bis das Theme hochgeladen wurde und klicken Sie dann auf den „Aktivieren“-Button.
5. Überprüfen Sie das Theme, um sicherzustellen, dass es richtig funktioniert und wie gewünscht aussieht.
6. Änderungen am Theme können in einem Code-Editor vorgenommen werden. Wenn fertig, laden Sie das Theme erneut hoch. Im nächsten Kapitel erklären wir genauer, wie das funktioniert.

Anpassen von Mautic Themes

Grundsätzliche Schritte zur Bearbeitung / Anpassung eines Mautic Themes

Änderungen an einem Theme müssen in einem Code-Editor vorgenommen und anschließend wieder hochgeladen werden. Hier ist eine Schritt-für-Schritt-Anleitung:

1. Stellen Sie sicher, dass Sie Zugang zu einem Code-Editor haben und dass Sie die benötigten Entwicklungstools wie Git und Composer installiert haben.
2. Laden Sie das gewünschte Theme herunter und entpacken Sie es in einem Verzeichnis auf Ihrem Computer.
3. Öffnen Sie nun den Code-Editor und navigieren Sie zu dem Verzeichnis, in dem Sie das Theme entpackt haben.
4. Bearbeiten Sie das Theme wie gewünscht.
5. Überprüfen Sie Ihre Änderungen auf mögliche Fehler und optimieren Sie den Code.
6. Verwenden Sie Git, um die Änderungen im Theme zu verwalten und bereiten Sie sie für das Hochladen vor. Dieser Schritt ist optional!
7. Loggen Sie sich in Mautic ein und gehen Sie zu „Settings“ > „Themes“.
8. Klicken Sie auf den Button „Install Theme“ und wählen Sie die ZIP-Datei mit dem bearbeiteten Theme aus.
9. Laden Sie das bearbeitete Theme hoch und aktivieren Sie es.
10. Überprüfen Sie, ob Ihre Änderungen korrekt angewendet wurden.

Bitte beachten Sie, dass die Anleitung je nach verwendetem Theme und Ihrer eigenen Umgebung abweichen kann.

Anpassung von Farben, Schriftarten und Layout

Um Farben, Schriftarten und das Layout in Ihrem Mautic Theme anzupassen, müssen Sie bestimmte CSS- und/oder HTML-Dateien bearbeiten. Hier ist eine Schritt-für-Schritt-Anleitung, wie Sie Ihr Mautic Theme anpassen können:

1. Stellen Sie sicher, dass Sie Zugriff auf die Quelldateien Ihres Themes haben. Diese können Sie entweder von der Webseite herunterladen, auf der Sie das Theme gekauft haben, oder Sie können sie direkt von Ihrem Mautic-Server herunterladen.

2. Verwenden Sie einen Code-Editor, um die CSS- und HTML-Dateien zu bearbeiten. CSS-Dateien enthalten die Stile für Farben, Schriftarten etc., während HTML-Dateien das Layout Ihrer Seite beschreiben.

3. Ändern Sie die entsprechenden Werte in den CSS-Dateien, um Farben und Schriftarten anzupassen. Hierbei empfiehlt es sich, bestehende CSS-Regeln zu überschreiben, anstatt neue Regeln hinzuzufügen.

4. Um das Layout Ihrer Seite anzupassen, müssen Sie eventuell HTML-Dateien bearbeiten. Hierbei können Sie unter anderem die Größe und den Aufbau von Abschnitten und Containern ändern.

5. Speichern Sie Ihre Änderungen und laden Sie die geänderten Dateien zurück auf Ihren Mautic-Server hoch.

6. Überprüfen Sie Ihre Änderungen im Browser, indem Sie Ihre Mautic-Seite neu laden.

Bitte beachten Sie, dass Sie für die Bearbeitung von CSS und HTML grundlegende Kenntnisse benötigen. Wenn Sie keine Erfahrung mit diesen Technologien haben, kann es schwierig sein, das Theme anzupassen. Es empfiehlt sich daher, einen Entwickler zu beauftragen oder sich online umfassend über CSS und HTML zu informieren, bevor Sie mit der Anpassung Ihres Themes beginnen.

Hinzufügen von eigenem CSS und Javascript

Sie können eigenen JavaScript-Code und eigene CSS-Styles in ein Mautic Theme einbauen. Hier ist eine Schritt-für-Schritt-Anleitung dafür:

1. Öffnen Sie Ihr Theme-Verzeichnis und erstellen Sie eine neue Datei namens „custom.js“ im Verzeichnis „js“ und eine neue Datei namens „custom.css“ im Verzeichnis „css“.
2. Fügen Sie Ihren JavaScript-Code in die „custom.js“ Datei ein.
3. Fügen Sie Ihre CSS-Styles in die „custom.css“ Datei ein.
4. Laden Sie die Theme-Dateien auf Ihren Mautic-Server hoch.
5. Aktualisieren Sie Ihre Theme-Einstellungen in Mautic, um sicherzustellen, dass die neuen Dateien geladen werden.
6. Überprüfen Sie Ihre Änderungen im Browser, indem Sie Ihre Mautic-Website aufrufen.

Bitte beachten Sie, dass Sie möglicherweise Ihren eigenen Code überprüfen und debuggen müssen, um sicherzustellen, dass er wie erwartet funktioniert.

Verwendung von Template-Variablen

Template-Variablen in Mautic sind Platzhalter, die automatisch durch Werte aus der Mautic-Datenbank ersetzt werden, wenn eine Seite geladen wird. Diese Variablen werden verwendet, um dynamische Inhalte in einer statischen Vorlage (z.B. einem Theme) anzeigen zu können. Eine Liste der verfügbaren Template-Variablen kann in der Mautic-Dokumentation gefunden werden.

Um Template Variablen in einem Mautic Theme zu verwenden, müssen sie in den Templates des Themes (z.B. in HTML-Dateien) eingesetzt werden. Dabei werden sie in doppelte geschweifte Klammern eingeschlossen, z.B. {{ contact.firstName }}. Wenn das Theme geladen wird, wird Mautic die entsprechenden Werte aus der Datenbank auslesen und an der Stelle der Template-Variablen einfügen.

Hier ein Beispiel: Angenommen, Sie möchten den Vor- und Nachnamen eines Kontakts auf einer Landingpage anzeigen. Sie können einfach die Template-Variablen {{ contact.firstName }} und {{ contact.lastName }} in Ihrem HTML-Template verwenden und Mautic wird diese automatisch durch die tatsächlichen Werte ersetzen, wenn die Seite geladen wird.

Erstellen eines eigenen Mautic Themes

Sie können Ihr eigenes Mautic Theme erstellen, indem Sie die dafür nötigen Dateien wie Templates, CSS-Styles und JavaScript-Code erstellen und diese entsprechend konfigurieren. Hierbei sollten Sie sich an den Best Practices und den von Mautic bereitgestellten Dokumentationen und Ressourcen orientieren, um ein funktionierendes und kompatibles Theme zu erstellen.

Voraussetzungen zum Erstellen eines Themes

Um ein eigenes Mautic Theme zu erstellen, sollte man über solide Kenntnisse im Webentwicklungsbereich, insbesondere im Bereich HTML, CSS und JavaScript verfügen. Außerdem ist es hilfreich, eine Vorstellung davon zu haben, wie das Theme aussehen soll und welche Funktionen es haben soll, um es entsprechend designen und entwickeln zu können. Zudem wäre eine gute Kenntnis von Mautic und seiner API von Vorteil.

Aufbau eines Mautic Themes

Sie müssen unbedingt die vorgeschriebene Ordnerstruktur einhalten, wenn Sie ein eigenes Mautic Theme erstellen. Dies ist notwendig, damit Mautic das Theme erkennen und richtig verarbeiten kann.

Die übliche Ordnerstruktur für Mautic Themes sieht wie folgt aus:

- themes
  - [Name des Themes]
    - assets/
      - css/
      - images/
      - js/
    - emails/
    - forms/
    - pages/
      custom.html.php (optional)
      theme.json

Schritte zur Erstellung eines eigenen Themes

1. Konzeption: Überlegen Sie zunächst, welche Bereiche eines Mautic Themes Sie benötigen. Dazu gehören E-Mails, Seiten und Formulare. Überlegen Sie auch, wie Ihr Theme aussehen soll (Farben, Schriftarten, Layouts etc.)

2. Screendesigns erstellen: Erstellen Sie Screendesigns für jeden Bereich des Themes, den Sie benötigen. Überlegen Sie auch, welche Inhalte Sie auf jeder Seite haben möchten und wie Sie diese präsentieren möchten.

3. Theme-Ordner erstellen: Legen Sie einen neuen Ordner für Ihr Theme an. Dieser sollte den Namen Ihres Themes tragen.

4. Ordnerstruktur anlegen: Erstellen Sie innerhalb des Theme-Ordners die Ordnerstruktur (siehe am Ende des vorigen Abschnitts), die für ein Mautic Theme notwendig ist.

5. Template-Dateien erstellen: Erstellen Sie die notwendigen Template-Dateien für jeden Bereich des Themes. Diese Dateien müssen im entsprechenden Ordner innerhalb des „templates“-Ordners abgelegt werden (z.B. „templates/emails“).

6. Theme-Informationen hinzufügen: Erstellen Sie eine „config.php“-Datei im „config“-Ordner. In dieser Datei können Sie Informationen über Ihr Theme hinterlegen, wie den Namen des Themes, den Autor usw.

7. CSS-Styles hinzufügen: Fügen Sie im „assets/css“-Ordner die CSS-Styles hinzu, die für Ihr Theme notwendig sind.

8. Bilder hinzufügen: Die für Ihr Theme benötigten Bilden fügen Sie in den Ordner „assets/images“ hinzu.

9. JavaScript hinzufügen: Im Ordner „assets/js“-Ordner legen Sie die JavaScript-Dateien ab, die Ihr Theme benötigt.

10. Theme hochladen: Laden Sie Ihr Theme auf Ihre Mautic-Installation hoch.

11. Theme aktivieren: Aktivieren Sie Ihr neues Theme in den Einstellungen Ihrer Mautic-Installation.

12. Tests durchführen: Jetzt kommt der Knochenjob: Testen, testen, testen. Sie stellen damit sicher, dass Ihr Theme in Mautic genau so funktioniert, wie Sie es wünschen.

Veröffentlichung eines eigenen Mautic Themes

Ein Mautic Theme, das Sie selbst erstellt haben, können Sie (1) entweder exklusiv alleine nutzen oder aber (2) der Mautic Community zur Verfügung stellen. Dieses Zurverfügungstellen macht durchaus Sinn, weil Sie damit nicht nur anderen Benutzern helfen, sondern auch Ihre eigenen Fähigkeiten und Kenntnisse in der Entwicklung von Mautic-Themes präsentieren können. Außerdem werden Sie von den Community-Mitgliedern wertvolles Feedback bekommen.

Um ein Theme der Community zur Verfügung zu stellen, müssen Sie folgende Schritte durchführen:

1. Stellen Sie sicher, dass Ihr Theme vollständig funktioniert und alle notwendigen Dateien enthält.


2. Veröffentlichen Sie Ihr Theme als Open-Source-Projekt auf einer öffentlichen Plattform, wie etwa GitHub oder GitLab.

3. Stellen Sie eine Dokumentation zur Verfügung, wie das Theme installiert und verwendet werden kann.

4. Zeigen Sie einen Weg auf, wie andere Benutzer Feedback und Problemberichte senden können.

5. Wenn Sie Feedback bekommen, reagieren Sie rasch darauf, sofern es notwendig erscheint; dies gilt insbesondere dann, wenn Fehlermeldungen oder Sicherheitsbedenken gemeldet werden.

Wenn Sie diese Schritte befolgen, können Sie anderen Benutzern helfen und Ihre eigenen Fähigkeiten und Kenntnisse zeigen. Zusätzlich haben Sie damit die Möglichkeit, Teil der Mautic-Community zu werden und sich mit anderen Entwicklern auszutauschen.

Fazit

In diesem Artikel haben wir Ihnen exakte Schritt-für-Schritt-Erklärungen gegeben, wie Sie Mautic installieren, wie Sie Themes installieren und auch, welche Kriterien dabei zu beachten sind. Ebenso haben wir dargelegt, was Sie machen müssen, wenn Sie ein eigenes Theme erstellen wollen oder müssen. Mit ausreichendem technischen Verständnis und Coding-Kenntnissen in HTML und CSS werden Sie das gesteckte Ziel dank unseres Wegweisers erreichen. Nicht zu vernachlässigen ist der Aspekt, selbst ein Teil der Community zu werden, indem Sie ihr Ihr eigenes Theme kostenfrei zur Verfügung stellen.