Dieser Leitfaden führt Sie durch den gesamten Prozess der Gestaltung Ihrer Blogvorlagen in Figma, der Konvertierung mit transjt.ai und der korrekten Einrichtung in Ihrem HubSpot-Portal.
Bevor Sie beginnen:
-
Sie sollten über funktionierende Konten für Figma, transjt.ai und HubSpot (mit Blog-Berechtigungen) verfügen.
-
In dieser Anleitung wird davon ausgegangen, dass Sie die Kopfzeile (Navigation) und die Fußzeile Ihrer Hauptseite bereits erstellt und exportiert haben. Wir werden die Blogvorlagen ohne diese Elemente erstellen.
- Die Ersteinrichtung nimmt etwas Zeit in Anspruch, aber danach wird es einfach sein, neue Blogposts zu erstellen!
Wir haben auch eine Videoanleitung für Sie vorbereitet:
Schritt 1: Gestalten Sie Ihre Blogvorlagen in Figma
Beginnen Sie mit dem Entwurf von zwei wichtigen Zeichenflächen in Figma. Denken Sie daran, diese ohne die Hauptkopf- oder Fußzeile Ihrer Website zu entwerfen, da diese in HubSpot separat behandelt werden.
Blog Listing Page
Blog Post Page
Verwenden Sie das automatische Layout in Figma, um sicherzustellen, dass Ihre Designs responsive sind und in den nächsten Schritten gut übersetzt werden.
Schritt 2: Importieren Sie Ihre Designs in transjt.ai
Als Nächstes verwenden wir das Plugin transjt.ai in Figma, um Ihre Entwürfe zu verarbeiten.
1. Öffnen Sie das transjt-Plugin für Figma in Ihrer Figma-Datei.
2. Blog Listing Page importieren
-
Wählen Sie in Figma Ihre „Blog Listing“-Zeichenfläche aus.
-
Wählen Sie im Plugin den Vorlagentyp „Blog“ aus.
-
Klicken Sie auf „Importieren“.
3. Blog Post Seite importieren:
-
Wählen Sie in Figma Ihre „Blog Post“-Zeichenfläche aus.
-
Wählen Sie im Plugin den Vorlagentyp „Blog Detail“ aus.
-
Klicken Sie auf „Importieren“.
4. Zusätzliche Komponenten importieren
5. Überprüfen und wiederholen:
-
-
-
Nach ein paar Minuten erscheinen die Seiten in Ihrem transjt.ai Dashboard.
-
Öffnen Sie sie, um zu prüfen, ob das Layout korrekt ist.
-
Falls nicht: Das häufigste Problem ist das automatische Layout. Kehren Sie zu Figma zurück, passen Sie Ihre Auto-Layout-Konfigurationen an und importieren Sie erneut.
Denken Sie daran, jedes Mal den richtigen Vorlagentyp - "Blog" oder "Blog Detail" - auszuwählen.
-
-
Schritt 3: Vorlagen von transjt.ai nach HubSpot exportieren
Wenn Sie mit den Vorschauen in transjt.ai zufrieden sind, können Sie sie an HubSpot senden.
-
Exportieren Sie von Ihrem transjt.ai-Dashboard aus die beiden Vorlagen "Blog" und "Blog Detail".
-
Wählen Sie Ihr verbundenes HubSpot-Konto als Ziel aus.
-
Warten Sie, bis der Exportvorgang abgeschlossen ist.
Schritt 4: Weisen Sie Ihre neuen Vorlagen in HubSpot zu
Ihre Vorlagen befinden sich nun in HubSpot, aber Sie müssen HubSpot mitteilen, dass sie für Ihren Blog verwendet werden sollen.
-
Navigieren Sie in HubSpot zu Einstellungen (das Zahnradsymbol ⚙️ in der oberen Navigation).
-
Gehen Sie in der linken Seitenleiste zu Content > Blog.
-
Wählen Sie die Registerkarte Templates.
-
Weisen Sie eine Blogpost-Vorlage zu:
-
Klicken Sie im Abschnitt "Blog Post Template" auf Actions > Change Template.
-
Wählen Sie die soeben exportierte Vorlage "Blog Detail" aus.
-
-
Weisen Sie die Vorlage für die Blog-Listing-Seite zu:
-
Klicken Sie im Abschnitt "Blog Listing Page" auf Aktionen > Vorlage ändern.
-
Wählen Sie die soeben exportierte Vorlage "Blog" (Übersicht) aus.
-
✨ Profi-Tipp: Verwenden Sie beschreibende Namen für Ihre Zeichenflächen in Figma (z. B. "Unternehmensblog - Beitragsvorlage v1"). Diese Namen werden in transjt.ai und HubSpot übernommen, so dass sie leichter zu finden und zu verwalten sind.
Schritt 5: Konfigurieren und veröffentlichen Sie Ihre Blog-Listing-Seite
Der letzte Schritt bei der Einrichtung der Vorlage ist die Konfiguration der Live-Listing-Seite.
-
Navigieren Sie in HubSpot zu Content > Blog. (Linkes/Standardnavigationsfeld)
-
Suchen Sie Ihr Blog, bewegen Sie den Mauszeiger darüber und wählen Sie Bearbeiten. Dadurch wird der Seiteneditor für Ihre Blog-Hauptseite geöffnet.
-
Bereinigen Sie die Seite: Entfernen Sie alle standardmäßigen oder leeren Module/Abschnitte aus der Vorlage.
-
Fügen Sie Ihren Abschnitt hinzu:
-
Klicken Sie auf das Symbol Hinzufügen (+) in der linken Seitenleiste, um das Bedienfeld "Hinzufügen" zu öffnen.
-
Suchen Sie den Abschnitt "Blogübersicht" (oder "Blog"), den Sie aus transjt.ai exportiert haben.
-
Ziehen Sie ihn in den Hauptinhaltsbereich der Seite.
-
-
Konfigurieren Sie ihn: Klicken Sie auf das neu hinzugefügte Modul, um bei Bedarf Einstellungen vorzunehmen (z. B. die Anzahl der anzuzeigenden Beiträge usw.).
-
Klicken Sie auf Veröffentlichen oder Aktualisieren in der oberen rechten Ecke.
Schritt 6: Erstellen Sie Ihren ersten Blogbeitrag
Nun, da Ihre Vorlagen zugewiesen sind, können Sie die Blogpost-Vorlage testen.
-
Navigieren Sie zurück zu Ihrem Haupt-Dashboard Inhalt > Blog.
-
Klicken Sie in der rechten oberen Ecke auf Erstellen > Blogbeitrag.
-
Ihr neues "Blog Post"-Design sollte sofort im Editor sichtbar sein.
-
Sie können nun Ihren Inhalt (Titel, Bild und Text) direkt in die von der Vorlage bereitgestellten Felder einfügen.
Schritt 7: Hinzufügen benutzerdefinierter Komponenten zu Ihrem Beitrag (optional)
Was, wenn Sie einen speziellen Call-to-Action (CTA), eine Bildergalerie oder ein Blockquote innerhalb des Hauptteils Ihres Beitrags benötigen? Sie können diese als wiederverwendbare Komponenten erstellen.
-
Entwerfen: Erstellen Sie die neue Komponente in Figma (z. B. einen "Newsletter-Anmeldeblock").
-
Importieren Sie in transjt.ai: Wählen Sie die Zeichenfläche in Figma aus, öffnen Sie das Plugin, und wählen Sie diesmal den Typ "Komponente". Klicken Sie auf Importieren.
-
Exportieren: Exportieren Sie diese neue Komponente aus transjt.ai in HubSpot.
-
In HubSpot verwenden:
-
Öffnen Sie einen beliebigen Blogbeitrag (wie den, den Sie in Schritt 6 erstellt haben).
-
Klicken Sie im Blog-Editor auf das Symbol Hinzufügen (+) in der linken Seitenleiste.
-
Suchen Sie Ihre neu importierte Komponente (z. B. "Newsletter-Anmeldung").
-
Ziehen Sie sie direkt in den Hauptinhaltsbereich Ihres Blogeintrags.
-