Erste Schritte mit Modulen

​

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

• 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 account auth

• 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:

​

Die CMS-Boilerplate zu Ihrem Account hinzufügen

• Führen Sie den folgenden Befehl aus, um ein neues Design 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>

​

Ein Modul in HubSpot erstellen

• Melden Sie sich bei Ihrem HubSpot-Account an und gehen Sie dann zum Design-Manager, indem Sie zu Marketing > Dateien und Vorlagen > Design-Manager 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.
• Aktivieren Sie das Kontrollkästchen Seiten, um das Modul für Website-Seiten und Landingpages verfügbar zu machen.
• Geben Sie dem Modul den Namen Testimonial und klicken Sie dann auf Erstellen.

​

Felder zum Modul hinzufügen

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

• Klicken Sie in der rechten Seitenleiste auf das Breadcrumb-Symbol, um zum Hauptmenü des Moduls zurückzukehren.

​

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.

​

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.

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.

​

HubL hinzufügen, um Felddaten anzuzeigen

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

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

• Klicken Sie dann oben rechts auf Änderungen veröffentlichen.

​

Das Modul lokal anzeigen und ändern

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

hs fetch my-theme/modules/testimonial.module

​

Den Modulordner in Ihrer lokalen Umgebung öffnen

​

Die fields.json-Datei des Moduls anzeigen

//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>"
  }
]

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

​

Die module.html-Datei des Moduls anzeigen

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

​

Die module.css-Datei des Moduls anzeigen

.testimonial {
  text-align: center;
}

.testimonial__header {
  font-weight: bold;
}

.testimonial__picture {
  display: block;
  margin: auto;
}

​

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

• 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

​

Ihre lokalen Änderungen in HubSpot in einer Vorschau anzeigen

• Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
• 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.

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

​

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.

• Ö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.
• 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 %}

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

{% 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 %}

​

Ihre Änderungen in HubSpot in einer Vorschau 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-Manager).
• 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.

• Öffnen Sie in der neuen Registerkarte die Vorlagenvorschau, die Ihr neu hinzugefügtes Testimonial-Modul enthalten sollte.

​

Das Modul lokal in der Vorlage anpassen

• 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 %}

• 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 Testimonial-Feld.

{% 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 %}

​

Zwei weitere Testimonial-Module zur Vorlage hinzufügen

• 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: I can't believe that I ever conducted business without the use of this product!
  • 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 Profile Picture.
  • 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 des Kunden ist Erin.
  • Erins Testimonial lautet: My business has nearly tripled since I began to use this product! Don't wait, start now!
  • Für das Bild von Erin fügen Sie den relativen Dateipfad für die Datei im images-Ordner hinzu. Geben Sie dann Erins Bild das alt-Attribut Erin Profile Picture.
  • Um den Abstand beizubehalten, legen Sie offset auf 8 und width auf 4 fest.
• Speichern Sie Ihre Änderungen.

​

Den Designnamen ändern

// example theme.json

{
  "name": "my_first_theme",
  "label": "My first theme"
}

​

Nächste Schritte

• Konfigurieren eines Moduls
• Verwenden von Modulen in Vorlagen
• Standardmodule

​

Sonstige Tutorials

• Erste Schritte mit Designs
• Erste Schritte mit serverlosen Funktionen
• Erstellen eines effizienten Entwickler-Workflows
• Barrierefreiheit
• Verwenden von JavaScript-Frameworks in CMS Hub
• Verwenden von Webkomponenten in benutzerdefinierten Modulen
• Erstellen einer Code-Block-Webkomponente