`.
```shell theme={null}
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.
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. 
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.
* Kopieren Sie innerhalb dieses `dnd_section` und über den anderen `dnd_modules` das folgende HubL-Modul-Tag und fügen Sie es ein:
```hubl theme={null}
{% 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.](https://developers.hubspot.com/docs#columns) 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:
```hubl theme={null}
{% 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="Provide more details here.
Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.
"
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](/cms/reference/modules/using-modules-in-templates).
## 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 ` 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
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:
```hubl theme={null}
{% 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](https://github.com/HubSpot/cms-modules-getting-started/tree/3b9159334f8c6204c7d2d34d8945d71b6ba402ea/images).
* Die `alt`-Eigenschaft weist den ALT-Text des Bildes zu.
* `testimonial`**:** dieser Parameter übergibt neuen Text in das Testimonial-Feld.
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:
```hubl theme={null}
{% 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](/cms/reference/modules/using-modules-in-templates).
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.
## 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: `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](https://github.com/HubSpot/cms-modules-getting-started/tree/3b9159334f8c6204c7d2d34d8945d71b6ba402ea) 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.
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.
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 `name` Felder und `label` in der `theme.json` Datei konfigurieren.
```json theme={null}
// 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“](/cms/start-building/building-blocks/themes/getting-started) an. Andernfalls erfahren Sie in der Wissensdatenbank von HubSpot mehr über das [Erstellen und Anpassen von Seiten](https://knowledge.hubspot.com/de/website-and-landing-pages/create-and-customize-pages).
Wenn Sie mehr über Module erfahren möchten, sehen Sie sich die folgenden Modulanleitungen an:
* [Konfigurieren eines Moduls](/cms/reference/modules/configuration)
* [Verwenden von Modulen in Vorlagen](/cms/reference/modules/using-modules-in-templates)
* [Standardmodule](/cms/reference/modules/default-modules)
## Sonstige Tutorials
* [Erste Schritte mit Designs](/cms/start-building/building-blocks/themes/getting-started)
* [Erste Schritte mit serverlosen Funktionen](https://developers.hubspot.com/docs)
* [Erstellen eines effizienten Entwickler-Workflows](/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow)
* [Barrierefreiheit](/cms/best-practices/improve-existing-sites/accessibility)
* [Verwenden von JavaScript-Frameworks in CMS Hub](/cms/start-building/introduction/developer-environment/js-frameworks)
* [Verwenden von Webkomponenten in benutzerdefinierten Modulen](https://developers.hubspot.com/blog/use-web-components-in-hubspot-cms-development)
* [Erstellen einer Code-Block-Webkomponente](https://developers.hubspot.com/blog/how-to-build-a-code-block-web-component)