Erste Schritte mit Modulen

Last updated:

In diesem Tutorial lernen Sie anhand des CMS Hub-Boilerplate-Designs, wie Sie ein Modul erstellen und wie Sie es in Vorlagen und Seiten als Teil eines Designs verwenden können. Am Ende des Tutorials haben Sie ein Testimonial-Modul erstellt, das ein Bild-, ein Text- und ein Rich-Text-Feld enthält. 

Wenn Sie zum ersten Mal mit CMS Hub entwickeln, empfehlen wir:

Quick start to CMS Hub development

Sie können sich auch schon eine Vorschau der fertigen Projektdateien anschauen. Da sich der Code des CMS-Boilerplate-Designs im Laufe der Zeit ändern kann, sind nur die wichtigsten Dateien enthalten, die Entwickler während des Tutorials erstellen oder bearbeiten müssen. Diese Dateien umfassen:

  1. Testimonial.module: der Ordner mit den Dateien, aus denen das benutzerdefinierte Modul besteht, das Sie im Rahmen des Tutorials erstellen.
  2. homepage.html: die Vorlage, die Sie bearbeiten, um unser benutzerdefiniertes Modul einzubinden.
  3. images: der Ordner mit den Profilbildern, die Sie im Testimonial-Modul verwenden. 
Bitte beachten: Wenn Sie ein Modul für die Verwendung in einem Design entwickeln möchten, das Sie in HubSpots Marketplace für Vorlagen listen möchten, sehen Sie sich die Modulanforderungen für den HubSpot-Marketplace für Vorlagen an.

Bevor Sie loslegen

Bevor Sie mit diesem Tutorial loslegen:

  • Richten Sie eine CMS Hub-Entwickler-Sandbox ein. Sie können stattdessen Ihren bestehenden Account verwenden, aber in der Sandbox können Sie entwickeln, ohne dass sich dies auf die Elemente in Ihrem Haupt-Account auswirkt.
  • Installieren Sie Node.js, das die Tools zur lokalen Entwicklung von HubSpot aktiviert. Unterstützt wird Version 10 oder höher.

1. Lokale Entwicklungsumgebung einrichten

In diesem Tutorial entwickeln Sie das Modul lokal. Um mit HubSpot über die Befehlszeilenschnittstelle zu interagieren, müssen Sie das CLI von HubSpot installieren und es für den Zugriff auf Ihren Account konfigurieren.

  • Führen Sie im Terminal npm install -g @hubspot/cli aus, um das CLI global zu installieren. Um das CLI stattdessen nur in Ihrem aktuellen Verzeichnis zu installieren, führen Sie npm install @hubspot/cli aus.
  • Führen Sie in dem Verzeichnis, in dem Sie dann Ihre Designdateien speichern, hs init aus.
  • Drücken Sie die Eingabetaste, um die Seite mit dem persönlichen Zugriffsschlüssel in Ihrem Browser zu öffnen.
  • Wählen Sie den Account aus, in dem Sie bereitstellen möchten, und klicken Sie dann auf „Mit diesem Account fortfahren“. Sie werden dann zur Seite mit dem persönlichen Zugriffsschlüssel des Accounts weitergeleitet.
  • Klicken Sie neben „Persönlicher Zugriffsschlüssel“ auf „Anzeigen“, um Ihren Schlüssel zu sehen. Klicken Sie dann auf „Kopieren“, um ihn in Ihre Zwischenablage zu kopieren.
  • Fügen Sie den kopierten Schlüssel im Terminal ein und drücken Sie dann die Eingabetaste.
  • Geben Sie einen eindeutigen Namen für den Account ein. Dieser Name wird nur von Ihnen gesehen und verwendet, wenn Sie Befehle ausführen. Drücken Sie dann die Eingabetaste, um die Tools zur lokalen Entwicklung mit Ihrem Account zu verknüpfen:

Sie sehen dann eine Erfolgsmeldung, die bestätigt, dass die hubspot.config.yml-Datei erstellt wurde.

2. Die CMS-Boilerplate zu Ihrem Account hinzufügen

  • Führen Sie im Terminal hs create website-theme my-theme aus. Daraufhin wird ein Designordner in Ihrem Arbeitsverzeichnis erstellt, der die Boilerplate-Elemente enthält.
  • Laden Sie die Dateien auf Ihren Account hoch, indem Sie hs upload <src> <destination> ausführen. 
    • <src> ist der Pfad zur lokalen Datei, relativ zu Ihrem aktuellen Arbeitsverzeichnis.
    • <destination> ist der Zielpfad in Ihrem HubSpot-Account. Das Ziel kann ein neuer Ordner sein.
    • Zum Beispiel lädt hs upload my-theme my-new-theme den Ordner my-theme von Ihrem Rechner in den Ordner my-new-theme in HubSpot hoch.

Standardmäßig lädt HubSpot in den Standard-Account in Ihrer hubspot.config,yml-Datei hoch. Sie können jedoch auch einen Account angeben, indem Sie ein --portal=<portalNameOrId>-Flag im Befehl einschließen. Zum Beispiel: hs upload --portal=mainProd.

Weitere Informationen finden Sie in der CLI-Befehlsreferenz.

  • Sie können gespeicherte Änderungen jederzeit manuell zu HubSpot hochladen, indem Sie hs upload ausführen. Sie können aber auch hs watch <src> <destination> ausführen, um automatisch lokale Änderungen beim Speichern hochzuladen. Um die Anzeige zu beenden, können Sie Strg-C drücken.

3. Ein Modul erstellen

  • Melden Sie sich bei Ihrem HubSpot-Account an und gehen Sie dann zum Design-Manager, indem Sie zu „Marketing“ > „Dateien und Vorlagen“ > „Design-Tools“ navigieren.
  • Öffnen Sie in der linken Seitenleiste des Design-Managers den soeben hochgeladenen Designordner
  • Öffnen Sie im Designordner den Ordner für Module.
  • Klicken Sie oben links auf „Datei“ > „Neue Datei“, um ein neues Modul in diesem Ordner zu erstellen.
  • Klicken Sie im Dialogfeld auf das Dropdown-Menü, wählen Sie „Modul“ aus und klicken Sie dann auf „Weiter“.
    new-module-dropdown-menu0
  • Aktivieren Sie das Kontrollkästchen „Seiten“, um das Modul für Website-Seiten und Landing-Pages verfügbar zu machen.
  • Geben Sie einen Dateinamen für das Modul ein und klicken Sie dann auf „Erstellen“.

4. Felder zum Modul hinzufügen

Fügen Sie als Nächstes dem Modul drei Felder hinzu:

  • Ein Textfeld zum Speichern des Namens des Kunden, der das Testimonial abgibt.
  • Ein Bildfeld, in dem das Profilbild des Kunden gespeichert wird.
  • Ein Rich-Text-Feld, in dem das Testimonial des Kunden gespeichert wird.

So fügen Sie diese Felder hinzu:

  • Klicken Sie in der rechten Seitenleiste auf das Dropdown-Menü „Feld hinzufügen“ und wählen Sie dann „Text“ aus.
    new-module-add-field0
  • Geben Sie neben dem Bleistift-Symbol oben rechts im Textfeld Kundenname ein. Der Name der HubL-Variable ändert sich dann in customer_name.
  • Legen Sie den Standardtext auf Sally fest.
Beispiel Textfeld
  • Klicken Sie in der rechten Seitenleiste auf das Breadcrumb-Symbol, um zum Hauptmenü des Moduls zurückzukehren.modul-breadcrumb-icon0
  • Fügen Sie auf die gleiche Weise ein weiteres Feld hinzu, wobei Sie diesmal den Feldtyp „Bild“ auswählen.
  • Geben Sie dem Bildfeld das Label „Profilbild“ und legen Sie dann den Namen der HubL-Variablen auf profile_pic fest.
  • Wählen Sie unter „Standardbild“ das Profilbild aus, das für Sally im Ordner Bilder der fertigen Projektdateien bereitgestellt wurde.
  • Legen Sie den ALT-Text auf Kundenprofilbild fest.
Beispiel Bildfeld
  • Fügen Sie auf die gleiche Weise ein weiteres Feld hinzu, wobei Sie dieses Mal den Feldtyp „Rich-Text“ auswählen.
  • Versehen Sie das Rich-Text-Feld mit dem Label Testimonial.
  • Klicken Sie auf das Feld „Standard-Rich-Text“ und geben Sie „Ich habe mit diesem Unternehmen nur gute Erfahrungen gemacht“ ein.
Beispiel Rich-Text-Feld

Bislang haben Sie Daten in mehrere Modulfelder eingegeben. Obwohl diese Felder Daten enthalten, zeigt das Modul selbst die Daten noch nicht an, da Sie die Felder nicht zum HTML-Code des Moduls hinzugefügt haben. Dies spiegelt sich darin wider, dass das Feld module.html zu diesem Zeitpunkt leer ist. 
modul-html-empty0

5. Felddaten anzeigen

Um HubL zum Modul hinzuzufügen, kopieren Sie den folgenden Code und fügen ihn in die module.html-Datei ein:

//module.html {{module.customer_name}} <img src={{module.profile_pic.src}} alt={{module.profile_pic.alt}}> {{module.testimonial}}

Im obigen Code wird die Punktnotation für den Zugriff auf verschiedene Felddaten verwendet:

  • Die module-Variable steht für das Modul selbst, während das customer_name-Feld den Variablennamen darstellt, den Sie im vorherigen Schritt dem Textfeld zugewiesen haben. Zusammengenommen sucht module.customer_name nach dem Text des Kundennamens innerhalb des Moduls.
  • Der Wert module.profile_pic.src greift auf das profile_pic-Feld des Moduls zu und sucht nach dem Wert src, der die URL des Bildes ist. Aber auch wenn die HubL-Variable die Bild-URL enthält, müssen Sie sie innerhalb eines Bild-HTML-Tags platzieren, um sie auf der Seite darzustellen.

Wenn der HubL zu Ihrem Modul hinzugefügt wurde, können Sie oben rechts auf „Vorschau“ klicken, um zu sehen, wie das Modul bisher aussieht.

Klicken Sie schließlich oben rechts im Design-Manager auf „Änderungen veröffentlichen“.

6. Das Modul in Ihre lokale Umgebung holen

Nachdem Sie Ihr Modul nun erstellt haben, können Sie es in Ihre lokale Umgebung holen und in Ihren Designordner kopieren. Es ist wichtig zu erwähnen, dass Sie Module auch lokal von Grund auf neu erstellen können, aber für die Zwecke dieses Tutorials ist es hilfreich, den HubSpot-Prozess zusammen mit dem lokalen Prozess zu sehen. 

So holen Sie Ihr Modul in Ihre lokale Umgebung:

  • Führen Sie im Terminal den folgenden Befehl aus: hs fetch <hs_src> <destination>
    • <hs_src> steht für den Dateipfad des Moduls in HubSpot. Um den Dateipfad abzurufen, klicken Sie mit der rechten Maustaste auf das Modul in der linken Seitenleiste des Design-Managers und wählen Sie dann „Pfad kopieren“ aus. 
      design-manager-copy-path0
    • <destination> steht für den Pfad zu dem lokalen Verzeichnis, in dem sich Ihr Design befindet. Wird dies nicht angegeben, verwendet der Befehl das aktuelle Arbeitsverzeichnis.

Für die Zwecke dieses Tutorials sollten Sie das Modul in den „src/modules“-Ordner im „my-theme“-Verzeichnis holen, das Sie in Schritt 1 erstellt haben. Erfahren Sie mehr über den fetch-Befehl.

7. Den Modulordner in Ihrer lokalen Umgebung öffnen

Gehen Sie in Ihrem bevorzugten Code-Editor zu dem Modulordner, den Sie gerade von Ihrem HubSpot-Account geholt haben. In Ihrem Modulordner finden Sie fünf verschiedene Dateien:

Use this table to describe parameters / fields
ParameterDescription
fields.json

Ein JSON-Objekt, das die Felder Ihres Moduls enthält.

meta.json

Ein JSON-Objekt, das Meta-Informationen zu Ihrem Modul enthält.

module.css

Die CSS-Datei, die Ihr Modul formatiert.

module.html

Den HTML- und HubL-Code für Ihr Modul.

module.js

Das JavaScript für Ihr Modul.

Ausführlichere Informationen finden Sie in unserer Dokumentation zur Dateistruktur des Moduls, insbesondere zu den Dateien fields.json und meta.json. In diesem Tutorial konzentrieren wir uns auf die Dateien fields.json, module.css und module.html und wie sie vom Modul-Editor im Design-Manager generiert, heruntergeladen und hochgeladen werden.

8. Die fields.jso-Datei Ihres Moduls öffnen

Öffnen Sie die fields.json-Datei des Moduls. Abgesehen von einigen der id-Nummern, dem src-Attribut des Bildfeldes und möglicherweise der Reihenfolge der Felder sollte die Datei ein JSON-Objekt ähnlich dem folgenden enthalten:

//fields.json [ { "label": "Customer Name", "name": "customer_name", "id": "2a025cd5-7357-007f-ae2f-25ace762588e", "type": "text", "required": true, "locked": false, "validation_regex": "", "allow_new_line": false, "show_emoji_picker": false, "default": "Sally" }, { "label": "Profile Picture", "name": "profile_pic", "id": "7877fb84-eb8a-d2c7-d939-77e6e9557d8f", "type": "image", "required": false, "locked": false, "responsive": true, "resizable": true, "default": { "src": "https://cdn2.hubspotqa.net/hubfs/101140939/profile-pic-sally.svg", "alt": "Sally Profile Picture", "width": 100, "height": 100, "max_width": 100, "max_height": 100 } }, { "label": "Testimonial", "name": "testimonial", "id": "c5524ece-1ab5-f92d-a5de-e2bf53199dfa", "type": "richtext", "required": false, "locked": false, "default": "<p>I’ve had nothing but wonderful experiences with this company.</p>" } ]

Die Werte für die folgenden Felder entsprechen den Werten, die Sie in Schritt 3 hinzugefügt haben:

  • name: der Name der Feldes.
  • label: das Label des Feldes.
  • default: der Standardwert des Feldes.  

So veranschaulichen Sie die Beziehung zwischen diesen Feldern und ihren Daten:

  • Ändern Sie in Ihrer lokalen Umgebung den Standardwert des Rich-Text-Feldes Testimonial in den folgenden Wert: „Ich würde es zu 100 % meinen Kollegen und Freunden empfehlen.“
  • Speichern Sie Ihre Datei. Wir werden in Schritt 10 darauf zurückkommen.

9. Öffnen Sie die module.html-Datei Ihres Moduls

Die module.html-Datei sollte den HubL- und HTML-Code enthalten, den Sie in Schritt 4 im HubL + HTML-Modul-Editor geschrieben haben.

Um diesen Code interessanter zu gestalten, kopieren Sie den folgenden Code und fügen ihn in die Datei ein:

//module.html <div class="testimonial"> <h1 class="testimonial__header"> {{ module.customer_name }} </h1> <img class="testimonial__picture" src={{ module.profile_pic.src }} alt={{ module.profile_pic.alt }}> {{ module.testimonial }} </div>

Wenn Sie Ihren HTML wie oben beschrieben schreiben, verwenden Sie die BEM-Klassenstruktur in Übereinstimmung mit dem Styleguide des CMS Hub-Boilerplate-Designs.

10. Die module.css-Datei Ihres Moduls öffnen

Die module.css-Datei sollte zu diesem Zeitpunkt leer sein. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein, um Stile hinzuzufügen:

//module.css .testimonial { text-align: center; } .testimonial__header { font-weight: bold; } .testimonial__picture { display: block; margin: auto; }

Nachdem Sie den Code hinzugefügt haben, speichern Sie die Datei.

11. Ihre lokale Änderungen für Ihren HubSpot-Account übernehmen

Nachdem Sie Ihre Änderungen an dem Modul lokal vorgenommen haben, übertragen Sie sie zurück in Ihren HubSpot-Account.

  • Gehen Sie zu Ihrem Terminal und stellen Sie sicher, dass Sie sich im richtigen Verzeichnis befinden.
  • Führen Sie den watch-Befehl aus, um Änderungen beim Speichern an HubSpot zu übertragen: hs watch <src> <destination>
    • <src> ist der Pfad zur lokalen Datei, relativ zu Ihrem aktuellen Arbeitsverzeichnis.
    • <destination> ist der Zielpfad in Ihrem HubSpot-Account. Das Ziel kann ein neuer Ordner sein.
    • Zum Beispiel lädt hs upload my-theme my-new-theme den Ordner my-theme von Ihrem Rechner in den Ordner my-new-theme in HubSpot hoch.

12. Vorschau Ihrer lokalen Änderungen in HubSpot anzeigen

  • Gehen Sie in Ihrem HubSpot-Account zu „Marketing“ > „Dateien und Vorlagen“ > „Design-Tools“.
  • Gehen Sie in der linken Seitenleiste zu dem von Ihnen erstellten Design, öffnen Sie dann den Modulordner und wählen Sie das Testimonial-Modul aus.
  • Wenn das Modul geöffnet ist, sollten Sie Ihre Änderungen in den Bereichen module.html und module.css sehen.
  • Klicken Sie oben rechts auf „Vorschau“. Daraufhin öffnet sich eine neue Registerkarte, auf der die Modulvorschau angezeigt wird. 
Beispiel Modulvorschau

Fassen wir den bisherigen Verlauf des Tutorials zusammen. Sie haben:

  • Ein Modul in HubSpot erstellt.
  • Dieses Modul in Ihre lokale Umgebung geholt.
  • Mithilfe Ihrer Tools zur lokalen Entwicklung Änderungen am HubL + HTML und CSS vorgenommen.
  • Ihre Änderungen mithilfe des CLI-watch-Befehls in Ihren HubSpot-Account hochgeladen (Schritt 10).

Dies ist jedoch nur eine von vielen Methoden, die zur Erstellung eines Moduls zur Verfügung stehen. Sie könnten beispielsweise auch Folgendes tun:

  1. Erstellen Sie ein Modul im Design-Manager.
  2. Holen Sie sich dieses Modul von unserem HubSpot-Account.
  3. Bevor Sie irgendwelche Änderungen vornehmen, führen Sie den watch-Befehl aus. Wenn der watch-Befehl ausgeführt wird, können Sie Ihr Modul lokal bearbeiten. Sie sehen dann, dass die Änderungen sofort in Ihrem HubSpot-Account angezeigt werden.

Experimentieren Sie bei der Entwicklung mit HubSpot mit Ihrem Workflow, um herauszufinden, was für Sie am besten funktioniert.

Im nächsten Teil des Tutorials erfahren Sie, wie Sie das Modul in einer Vorlage verwenden.

Teil 2: Verwendung des Moduls in einer Vorlage

13. Öffnen Sie das „my-theme“-Verzeichnis.

Gehen Sie in Ihrem Code-Editor zum my-theme-Verzeichnis, das Sie in Schritt 1 beim ersten Herunterladen des CMS Hub-Boilerplate-Designs erstellt haben.

In diesem Teil des Tutorials arbeiten Sie hauptsächlich mit den Ordnern modules und templates
theme-folder-structure-getting-started-with-modules0

14. Das Testimonial-Modul in eine Vorlage einfügen

Gemäß ihrer einfachsten Definition sind Module bearbeitbare Bereiche von HubSpot-Vorlagen und -Seiten. In HubSpot können Sie über den Design-Manager Module in Vorlagen einfügen, aber hier verwenden wir dann HubL, um Module zu einer Vorlage in unserer lokalen Umgebung hinzuzufügen.   

  • Öffnen Sie in Ihrem Code-Editor den templates-Ordner und dann die home.html-Datei. 
  • Gehen Sie in der home.html-Datei zum letzten dnd_section, der etwa in Zeile 28 beginnen sollte. Diesem Abschnitt fügen Sie Ihr neues Modul hinzu.
    home-html-add-testimonial-module-to-section0
  • Kopieren Sie innerhalb dieses dnd_section über den anderen dnd_modules das folgende HubL-Modul-Tag und fügen Sie es ein:
{% dnd_module path= “../modules/Testimonial.module” %} {% end_dnd_module %}

Dieses Tag referenziert Ihr neues Modul anhand seines relativen Dateipfades. Im nächsten Schritt fügen Sie dem Tag weitere optionale Parameter hinzu.

Beim Hinzufügen eines Moduls zu einem Drag-&-Drop-Bereich ist für das Modul-Tag kein eindeutiger Name erforderlich. Wenn Sie jedoch ein Modul zu einer HTML-Datei außerhalb von Drag-&-Drop-Bereichen hinzufügen, müssen Sie dem Modul einen eindeutigen Namen zuweisen. Sie würden auch eine etwas andere Syntax verwenden, etwa so:

{% module "testimonial_one" path="../modules/Testimonial.module" %}

Erfahren Sie mehr über die Verwendung von Modulen in Vorlagen.

15. Vorschau Ihrer Änderungen in HubSpot anzeigen

  • Wenn Sie den watch-Befehl nicht ausgeführt haben lassen, um Ihre Arbeit automatisch nachzuverfolgen, führen Sie hs watch <src> <dest> erneut in Ihrem Terminal aus, um Ihre Änderungen hochzuladen. Achten Sie darauf, dass dieser Befehl weiter ausgeführt wird, während Sie die nächsten Schritte abschließen. 
  • Gehen Sie in Ihrem HubSpot-Account zum Design-Manager („Marketing“ > „Dateien und Vorlagen“ > „Design-Tools“).
  • Wählen Sie in der linken Seitenleiste des Design-Managers die homepage.html-Datei aus.
  • Klicken Sie oben rechts auf „Vorschau“ und wählen Sie dann „Live-Vorschau mit Anzeigeoptionen“ aus, um die Vorschau der Vorlage in einem neuen Fenster zu öffnen.
Beispiel Live-Vorschau
  • Öffnen Sie in der neuen Registerkarte Ihre Vorschau, die Ihr neu hinzugefügtes Testimonial-Modul enthalten sollte.
Beispiel Standardmodul in Vorlage

16. Das Testimonial-Modul in der Vorlage anpassen

So können Sie die Startseitenvorlage interessanter gestalten:

  • Gehen Sie zurück zu Ihrem Code-Editor und öffnen Sie die homepage.html-Datei.
  • Fügen Sie dem Tag des Testimonial-Moduls die folgenden Parameter hinzu:
{% dnd_module path='../modules/Testimonial.module', customer_name = "Mary", profile_pic = { src: "{{ get_asset_url('../images/profile-pic-mary.svg') }}", alt: "Mary Profile Picture" }, testimonial = "Wow, what a product! I can't wait to recommend this to all my family and friends!" %} {% end_dnd_module %}

Die obigen Parameter setzen die Standardwerte außer Kraft, die Sie den drei Feldern ursprünglich zugewiesen haben. Jeder Parameter verwendet den HubL-Variablennamen, den Sie den einzelnen Feldern in Schritt 3 zugewiesen haben:

  • customer_name: dieser Parameter übergibt den Namen Mary an das Feld für den Kundennamen.
  • profile_pic: dieser Parameter ist ein Objekt, das zwei Eigenschaften enthält. Die src-Eigenschaft verwendet die HubL-Funktion get_asset_url, um die URL für das Profilbild von Mary abzurufen. Beachten Sie, dass der Dateipfad des Bildes relativ zu Ihrem Arbeitsverzeichnis ist. Die alt-Eigenschaft weist den ALT-Text des Bildes zu.
  • testimonial: dieser Parameter übergibt neuen Text in das Feld für das Testimonial.

Alternativ können Sie für das Rich-Text-Feld auch die HubL-Block-Syntax verwenden, um einen großen HTML- oder Textblock zu schreiben:

{% dnd_module path='../modules/Testimonial.module', customer_name = "Mary", profile_pic = { src: "{{ get_asset_url('../images/profile-pic-mary.svg') }}", alt: "Mary Profile Picture" } %} {% module_attribute "testimonial" %} Wow, what a product! I can't wait to recommend this to all my family and friends! {% end_module_attribute %} {% end_dnd_module %}

Erfahren Sie mehr über die Block-Syntax von Modulen.

Wenn Sie den watch-Befehl in Ihrem Terminal ausgeführt haben lassen, speichern Sie Ihre Änderungen, um sie an HubSpot zu senden. Sie können dann zum Design-Manager zurückkehren, um eine Vorschau der Vorlage anzuzeigen.

Mary-Modul in Vorlage

17. Hinzufügen von Modulen zur Vorlage abschließen

in diesem Schritt fügen Sie der Vorlage zwei weitere Testimonial-Module hinzu, indem Sie die gleichen Schritte wie zuvor ausführen:

  • Gehen Sie zu Ihrem Code-Editor und öffnen Sie die home.html-Datei.
  • Fügen Sie unter dem zuvor hinzugefügten Testimonial-Modul eine weitere Instanz des Moduls hinzu, indem Sie den Code des Moduls kopieren und einfügen. Geben Sie im neuen Testimonial-Modul die folgenden Details an, indem Sie die gleichen Schritte wie oben ausführen:
    • Der Name des Kunden ist Ollie.
    • Ollies Testimonial lautet wie folgt: „Ich kann kaum glauben, dass ich jemals ohne dieses Produkt Geschäfte gemacht habe!“
    • Für das Bild von Ollie fügen Sie den relativen Dateipfad für die Datei im images-Ordner hinzu. Geben Sie dann Ollies Bild das alt-Attribut „Ollie Profilbild“
  • Fügen Sie unter dem zweiten Testimonial-Modul ein drittes mit den folgenden Angaben hinzu:
    • Der Name der Kundin ist Erin.
    • Erins Testimonial lautet: „Mein Umsatz hat sich fast verdreifacht, seit ich dieses Produkt nutze! Zögern Sie nicht, beginnen Sie jetzt!“
    • Für das Bild von Erin fügen Sie den relativen Dateipfad für die Datei im images-Ordner hinzu. Dann geben Sie Erins Bild das alt-Attribut „Erin Profilbild“.
  • Speichern Sie Ihre Änderungen.

Wenn Sie den watch-Befehl in Ihrem Terminal ausgeführt haben lassen, können Sie zum Design-Manager zurückkehren, um eine Vorschau Ihrer Änderungen an der Vorlage anzuzeigen. Die Vorschau der Vorlage sollte nun alle drei Testimonial-Module enthalten.

Beispiel Letzte Module in der Vorlage

Im nächsten Teil des Tutorials erstellen Sie eine HubSpot-Seite mit dieser Vorlage.

Teil 3: Verwendung der benutzerdefinierten Vorlage in einer HubSpot-Seite

18. Das „my-theme“-Verzeichnis als ein Design ausweisen

Bevor Sie eine Seite mit der soeben geänderten Startseitenvorlage erstellen können, müssen Sie eine letzte Änderung in Ihrer lokalen Umgebung vornehmen, indem Sie die theme.json-Datei modifizieren. In dieser Datei weisen Sie dieses Verzeichnis als ein Design aus, auf das verschiedene HubSpot-Produkte zugreifen können.  

Öffnen Sie in Ihrem Code-Editor die theme.json-Datei und fügen Sie das folgende JSON-Objekt in die Datei ein (ohne den Kommentar //theme.json):

//theme.json { "name": "my_custom_theme", "label": "My Custom Theme" }

Nachdem Sie diesen Code hinzugefügt haben, speichern Sie Ihre Änderungen, damit der watch-Befehl Ihre Änderungen an HubSpot sendet.

19. Eine Seite von der Startseitenvorlage erstellen

So erstellen Sie eine Seite:

  • Gehen Sie in HubSpot zu „Marketing“ > „Website“ > „Website-Seiten“.
  • Klicken Sie oben rechts auf „Erstellen“ und wählen Sie dann „Website-Seite“ aus. Weisen Sie Ihrer Seite einen Namen zu und klicken Sie auf „Seite erstellen“.
  • Wählen Sie im Bildschirm „Vorlage auswählen“ Ihr benutzerdefiniertes Design über das Dropdown-Menü für die Desigauswahl aus. 
    theme-selector-closer0
    • Wenn Sie derzeit nicht das richtige Design sehen, wählen Sie im Dropdown-Menü für die Designauswahl die Option „Design ändern“ aus.
  • Klicken Sie in Ihrem Design auf die Vorlage Startseite. Klicken Sie oben rechts auf „Vorlage auswählen“.

20. Die Seite bearbeiten und veröffentlichen

Im Seiten-Editor sollten Sie alle Änderungen sehen, die Sie im Laufe dieses Tutorials vorgenommen haben.

Beispiel Seiten-Editor

So passen Sie die Seite an:

  • In der linken Seitenleiste können Sie auf der Registerkarte „Hinzufügen“ zwischen Standard- und benutzerdefinierten Modulen wählen. Um der Seite ein Modul hinzuzufügen, klicken Sie auf das Modul und ziehen Sie es in den Seitentext im mittleren Fensterbereich des Editors.
  • Verwenden Sie in der linken Seitenleiste die Registerkarte „Inhalt“, um die aktuellen Module der Seite zu überprüfen.
  • Verwenden Sie in der linken Seitenleiste die Registerkarte „Design“, um die für die Seite verfügbaren Designstile zu überprüfen. 
  • Im mittleren Bereich, in dem der Inhalt Ihrer Seite angezeigt wird, können Sie auf „Module“ klicken, um deren Inhalt zu bearbeiten.
  • Sie können Ihre Änderungen jederzeit in der Vorschau ansehen, indem Sie oben rechts auf „Vorschau“ klicken. Erfahren Sie mehr über das Erstellen und Bearbeiten von Seiten.

Der letzte Schritt vor der Veröffentlichung besteht darin, die Einstellungen der Seite zu bearbeiten:

  • Klicken Sie oben im Editor auf die Registerkarte „Einstellungen“, um die Einstellungen der Seite aufzurufen.
  • Klicken Sie auf das Feld „Seitentitel“, um der Seite einen Titel hinzuzufügen. Dieser Titel wird in der Browser-Registerkarte angezeigt, wenn ein Besucher die Seite aufruft.
  • Klicken Sie unter „Seiten-URL“ auf das Feld „Content-Slug“, um die URL der Seite festzulegen. Sie können auch auf das Dropdown-Menü „Domains“ klicken, um eine beliebige Ihrer verknüpften Domains auszuwählen.
Beispiel Seiteneinstellungen
  • Um Ihre Seite zu veröffentlichen, klicken Sie oben rechts auf „Veröffentlichen“. Nach der Veröffentlichung wird die Seite unter der angegebenen URL live geschaltet.

Andere Tutorials, die von Interesse sein könnten


War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.