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 Kundentestimonial-Modul erstellt, das ein Textfeld, ein Bildfeld und ein Rich-Text-Feld enthält. 

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

Quick start to CMS Hub development

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.

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 das benutzerdefinierte Modul einzuschließen.
  3. images: der Ordner mit den Profilbildern, die Sie im Modul verwenden. 

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 den folgenden Befehl 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.
npm install -g @hubspot/cli
  • Authentifizieren Sie im Verzeichnis, in dem Sie Ihre Designdateien speichern, Ihren HubSpot-Account, damit Sie über das CLI damit interagieren können.
hs init
  • 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.

Die CMS-Boilerplate zu Ihrem Account hinzufügen

  • Führen Sie den folgenden Befehl aus, um ein neues Theme mit dem Namen my-theme zu erstellen. Daraufhin wird ein Designordner mit dem Namen my-theme in Ihrem Arbeitsverzeichnis erstellt, der die Boilerplate-Elemente enthält.
hs create website-theme my-theme
  • Laden Sie die Dateien in Ihren Account hoch. 
hs upload <src> <destination>
Use this table to describe parameters / fields
ParameterDescription
<src>

Der Pfad zu lokalen Dateien, relativ zu Ihrem aktuellen Arbeitsverzeichnis.

<destination>

Der Zielpfad in Ihrem HubSpot-Account. Dies 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 --account=<accountNameOrId>-Flag im Befehl einschließen. Zum Beispiel: hs upload --portal=mainProd.

Weitere Informationen finden Sie in der CLI-Befehlsreferenz.

Ein Modul in HubSpot erstellen

Mit der CMS-Boilerplate in Ihrer lokalen Umgebung erstellen Sie jetzt ein neues Modul für das Design.

Für die Zwecke dieses Tutorials erstellen Sie das Modul in HubSpot und übernehmen es dann mithilfe des CLI in das Design. Sie können jedoch auch Module lokal mit dem hs create module-Befehl von Grund auf neu 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 dem Modul den Namen Testimonial und klicken Sie dann auf „Erstellen“.

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.

Das Textfeld für den Kundennamen hinzufügen

  • Klicken Sie in der rechten Seitenleiste des Modul-Editors auf das Dropdown-Menü „Feld hinzufügen“ und wählen Sie dann „Text“ aus.
    testimonial-module-add-field
  • Klicken Sie in der rechten Seitenleiste oben rechts auf das Bleistift-Symbol, um das Feld zu benennen. Geben Sie für dieses Tutorial den Kundennamen 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

Das Bildfeld für das Kundenprofilbild hinzufügen

  • 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 Sallys Profilbild fest.
get-started-with-modules-profile-pic

Das Rich-Text-Feld für Sallys Testimonial hinzufügen

  • 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. Zu diesem Zeitpunkt enthält das Modul jedoch keinerlei HTML, um diese Daten zu rendern. Im Modul-Editor wird dies durch den leeren Zustand des Abschnitts module.html widergespiegelt. 
modul-html-empty0

Fügen Sie als Nächstes HubL zu module.html hinzu, um die Felddaten anzuzeigen.

HubL hinzufügen, um Felddaten anzuzeigen

Um Daten aus den zuvor erstellten Feldern anzuzeigen, fügen Sie folgenden HubL zum Bereich module.html hinzu:

<!-- module.html --> {{module.customer_name}} <img src={{module.profile_pic.src}} alt="{{module.profile_pic.alt}}"> {{module.testimonial}}

Die obigen HubL-Token verwenden Punktnotation, um Daten aus jedem Feld aufzurufen. Da wir Daten aus Modulfeldern abrufen möchten, beginnt jedes Token in diesem Fall mit module, gefolgt vom HubL-Variablennamen des Feldes. Sie können Punktnotation verwenden, um auf bestimmte Eigenschaften eines Feldes zuzugreifen, die Sie in den profile_pic-Token in Zeile 3 oben sehen können.

  • Wenn der HubL zu Ihrem Modul hinzugefügt wurde, klicken Sie oben rechts auf „Vorschau“, um zu sehen, wie das Modul bisher aussieht.
design-manager-previewer
  • Klicken Sie dann oben rechts auf „Änderungen veröffentlichen“.

Nachdem Sie das Modul in HubSpot erstellt und veröffentlicht haben, verwenden Sie nun das CLI, um das Modul in Ihre lokale Umgebung zu holen, damit Sie seinen Content anzeigen und weitere Änderungen vornehmen können.

Das Modul lokal anzeigen und ändern

Um das Modul lokal anzuzeigen, müssen Sie es zunächst in Ihr lokales Design holen:

  • 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 im Design-Manager 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.

Wenn Sie sich beispielsweise bereits im Arbeitsverzeichnis befinden, kann Ihr FETCH-Befehl wie folgt aussehen:

hs fetch my-theme/modules/testimonial.module

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.

Die fields.json-Datei des Moduls anzeigen

Ö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.  

Die module.html-Datei des Moduls anzeigen

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

Um diesen Code interessanter zu gestalten und bereit für CSS-Styling zu machen, kopieren Sie den folgenden Code und fügen ihn in die Datei ein:

<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.

Die module.css-Datei des Moduls anzeigen

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:

.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.

Lokale Änderungen für Ihren HubSpot-Account übernehmen

Übernehmen Sie Ihre lokalen Änderungen nach dem Speichern wieder 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>. 
hs watch my-theme my-theme

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.

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

Das Modul zu einer Vorlage hinzufügen

In diesem Teil des Tutorials arbeiten Sie hauptsächlich in den Ordnern modules und templates innerhalb Ihrer lokalen Designdateien. 
theme-folder-structure-getting-started-with-modules0

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 das Modul zur Vorlage in Ihrer 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 beginnt. Diesem Abschnitt fügen Sie Ihr neues Modul hinzu.
    home-html-add-testimonial-module-to-section0
  • Kopieren Sie innerhalb dieses dnd_section und über den anderen dnd_modules das folgende HubL-Modul-Tag und fügen Sie es ein:
{% dnd_module path= “../modules/Testimonial.module”, offset=0, width=4 %} {% end_dnd_module %}

Dieses HubL-Tag referenziert Ihr neues Modul anhand seines relativen Dateipfades. Damit das Modul gleichmäßig zu den anderen beiden Modulen im dnd_section passt, weist es auch einen width- und offset-Wert für das Modul zu:

  • Das CMS von HubSpot verwendet ein 12-Spalten-Rastersystem. Um dieses Modul gleichmäßig mit den anderen beiden zu platzieren, müssen Sie daher jedes Modul im dnd_section aktualisieren, damit es eine Breite von 4 hat.
  • Dann hat das erste dnd_module in der Gruppe (testimonial) einen Versatz von 0, um es zuerst zu positionieren.
  • Das zweite dnd_module (linked_image) hat einen Versatz von 4, um es als zweites zu positionieren.
  • Das dritte dnd_module (rich_text) hat einen Versatz von 8, um es als drittes zu positionieren.

Nachdem Sie den offset- und width-Wert von jedem dnd_module festgelegt haben, sieht Ihr Code wie folgt aus:

{% dnd_section background_color="#f8fafc", vertical_alignment="MIDDLE" %} {% dnd_module path= “../modules/Testimonial.module”, offset=0, width=4 %} {% end_dnd_module %} {% dnd_module path="@hubspot/linked_image", img={ "alt": "Stock placeholder image with grayscale geometrical mountain landscape", "loading": "lazy", "max_height": 451, "max_width": 605, "size_type": "auto_custom_max", "src": get_asset_url("../images/grayscale-mountain.png") }, offset=4, width=4 %} {% end_dnd_module %} {% dnd_module path="@hubspot/rich_text", html="<h2>Provide more details here.</h2><p>Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p>" offset=8, width=4 %} {% end_dnd_module %} {% end_dnd_section %}

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, zum Beispiel:

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

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

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> aus. Stellen Sie sicher, dass dieser Befehl weiter ausgeführt wird, während Sie die nächsten Schritte abschließen. 
  • Öffnen Sie in Ihrem HubSpot-Account den Design-Manager („Marketing“ > „Dateien und Vorlagen“ > „Design-Tools“).
  • Wählen Sie in der linken Seitenleiste des Design-Managers die home.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 die Vorlagenvorschau, die Ihr neu hinzugefügtes Testimonial-Modul enthalten sollte.
testimonial-module-added-to-theme

Das Modul lokal in der Vorlage anpassen

So können Sie die Startseitenvorlage interessanter gestalten:

  • Gehen Sie zurück zu Ihrem Code-Editor und öffnen Sie die home.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!", offset=0, width=4 %} {% 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 zuvor den einzelnen Feldern zugewiesen haben:

  • customer_name: dieser Parameter übergibt den Namen Mary an das Feld für den Kundennamen. Dabei wird der Originalwert Sally überschrieben.
  • 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 neue Profilbild abzurufen. Beachten Sie, dass der Dateipfad des Bildes relativ zu Ihrem Arbeitsverzeichnis ist. Sie müssen dieses Bild zunächst dem images-Ordner in Ihren lokalen Designdateien hinzufügen. Sie finden das Bild im images-Ordner der abgeschlossenen Projektdateien.
    • 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" }, offset=0, width=4 %} {% 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, werden Ihre Änderungen, durch Speichern an HubSpot gesendet. Sie können dann zum Design-Manager zurückkehren, um eine Vorschau der Vorlage anzuzeigen.

Mary-Modul in Vorlage

Zwei weitere Testimonial-Module zur Vorlage hinzufügen

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. Sie können das Bild selbst aus den fertigen Projektdateien abrufen. Geben Sie dann Ollies Bild das alt-Attribut Ollie Profilbild.
    • Um den Abstand beizubehalten, legen Sie offset auf 4 und width auf 4 fest.
  • 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.
    • Um den Abstand beizubehalten, legen Sie offset auf 8 und width auf 4 fest.
  • 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.

testimonial-modules-added-to-theme

Bereiten Sie als letzten Schritt das Design für die Verwendung auf einer Live-Seite vor, indem Sie die theme.json-Datei bearbeiten.

Den Designnamen ändern

Wenn Sie den Standardnamen des Designs ändern möchten, können Sie dies tun, indem Sie die Felder name und label in der theme.json-Datei konfigurieren.

// example theme.json { "name": "my_first_theme", "label": "My first theme" }

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

Nächste Schritte

Nachdem Sie nun ein benutzerdefiniertes Modul erstellt, es der home.html-Vorlage hinzugefügt und optional den Designnamen angepasst haben, können Sie eine Live-Seite aus dem Design erstellen. 

Wenn Sie einem ähnlichen Tutorial folgen möchten, das sich auf Designs konzentriert, sehen Sie sich das Tutorial „Erste Schritte mit Designs“ an. Andernfalls erfahren Sie in der Wissensdatenbank von HubSpot mehr über das Erstellen und Anpassen von Seiten.

Wenn Sie mehr über Module erfahren möchten, sehen Sie sich die folgenden Modulanleitungen an:

Sonstige Tutorials

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.