Erste Schritte mit dem CMS-Angebotsdesign 

Last updated:

Mit einem CMS-Angebotsdesign können Sie ein individuelles Angebotsdesign für Vertriebsmitarbeiter erstellen, das während des Kaufprozesses verwendet wird. In diesem Leitfaden erfahren Sie, wie Sie das standardmäßige CMS-Angebotsdesign lokal mithilfe des CLI klonen, den Klon in Ihren Account hochladen und bei Bedarf Anpassungen vornehmen.  Sie erstellen dann ein Angebot mithilfe der Vorlage, um Ihre Arbeit anzuzeigen.

Voraussetzungen

Bitte beachten: Bei diesem Tutorial wird die HubSpot CLI verwendet, Sie können dies jedoch alles in HubSpot auch mit dem Design-Manager erledigen, wenn Sie dies bevorzugen. Um diesen Vorgang in HubSpot abzuschließen, müssen Sie nur das cms-quotes-theme im @hubspot-Ordner klonen, anstatt den fetch-Befehl auszuführen. wie in Schritt 1 gezeigt.

1. Abrufen des Designs in Ihr lokales Verzeichnis

Öffnen Sie Ihr Terminal und navigieren Sie zu dem Verzeichnis, in das Sie die Dateien herunterladen möchten. Dies ist Ihr Hauptarbeitsverzeichnis für den Rest dieses Tutorials. 

Um das Standardangebotsdesign herunterzuladen, führen Sie folgenden Befehl in Ihrem Terminal aus:

hs fetch @hubspot/cms-quotes-theme "my-quotes-theme"

Ein Ordner mit dem Namen my-quotes-theme sollte nun in Ihrem lokalen Dateisystem vorhanden sein. Dieser Ordner enthält alle Ressourcen, die für das Angebotsdesign benötigt werden, einschließlich Mock-Daten und Modulstandardeinstellungen im imports-Ordner.

2. Änderungen hochladen und überwachen

Wenn der Ordner heruntergeladen wurde, laden Sie ihn nach HubSpot hoch. Während Sie den hs upload-Befehl verwenden können, um einen einzelnen Upload durchzuführen, können Sie stattdessen mit dem watch-Befehl automatische Uploads bei jedem Speichern der Datei auslösen:

hs watch "my-quotes-theme" "my-quotes-theme" --initial-upload

Nach dem Hochladen können Sie nun den my-quotes-theme-Ordner im Design-Manager anzeigen. Um den Design-Manager vom Terminal aus zu öffnen, öffnen Sie eine neue Terminal-Registerkarte oder ein neues Fenster und führen Sie den hs open dm-Befehl aus.

Eine neue Terminal-Registerkarte oder ein neues Fenster wird benötigt, da Sie keine Befehle ausführen können, während der hs watch-Prozess läuft. Sie können auch q drücken, um die Überwachung zu beenden, einen anderen Befehl ausführen und dann hs watch erneut ausführen.

3. Öffnen Sie eine Vorlagenvorschau

So zeigen Sie eine Vorschau der Angebotsvorlage an:

  • Gehen Sie im Design-Manager zu my-quotes-theme > templates > bold.html.
  • Klicken Sie oben rechts im Code-Editor auf „Vorschau“ und wählen Sie dann „Live-Vorschau mit Anzeigeoptionen“ aus.

Nehmen Sie dann bei geöffneter Vorlagenvorschau lokal eine Änderung vor, die, da hs watch ausgeführt wird, beim Speichern automatisch hochgeladen wird.

4. Lokal eine Änderung vornehmen

  • Öffnen Sie in Ihrem lokalen Code-Editor my-quotes-theme > css > bold.css.
  • Fügen Sie den folgenden Code zu bold.css hinzu und speichern Sie anschließend Ihre Änderungen:
.line-items__table tbody tr:nth-child(odd){ background-color: #d6d6d6; }
  • Aktualisieren Sie die Vorlagenvorschau in Ihrem Browser, um Ihre CSS-Änderungen anzuzeigen. Jede ungerade Zeile im Tabellentext sollte nun einen grauen Hintergrund haben. 

Wenn Sie Ihr benutzerdefiniertes Angebotsdesign erstellen, können Sie diesen Workflow wiederholen, um die lokal vorgenommenen Änderungen schnell zu bestätigen.

Bitte beachten: Aufgrund der Komplexität des Signatursystems werden Signaturen nicht in Vorschauen angezeigt.

5. Das Vorlagenlabel ändern

Wenn Sie ein benutzerdefiniertes Angebotsdesign für dien praktischen Gebrauch vorbereiten, sollten Sie das Vorlagenlabel bewusst wählen, damit Vertriebsmitarbeiter es leicht unter den Standardangebotsoptionen von HubSpot finden können.

So ändern Sie das Label einer Angebotsvorlage:

  • Öffnen Sie in Ihrem Code-Editor my-quotes-theme > templates > bold.html.
  • Öffnen Sie oben in der Datei die Anmerkungen zur Vorlage:
<!-- templateType: quote isAvailableForNewContent: true label: Bold -->
  • Aktualisieren Sie den label-Parameter von Fett auf einen Namen Ihrer Wahl, z. B. Meine benutzerdefinierte Angebotsvorlage.
  • Speichern Sie die Datei, um sie nach HubSpot hochzuladen.

6. Die Angebotsvorlage in HubSpot anpassen

Bevor ein Vertriebsmitarbeiter Ihre Angebotsvorlage verwenden kann, muss sie in HubSpot angepasst werden. Dies wird in der Regel von einem Vertriebsleiter durchgeführt, damit er Angebotsvorlagen für sein Vertriebsteam erstellen kann. In diesem Lernprogramm werden Sie diesen Prozess jedoch selbst durchlaufen, damit Sie verstehen, wie die Erstellung von Inhalten abläuft.

So passen Sie die Angebotsvorlage an und stellen sie Vertriebsmitarbeitern zur Verfügung:

  • Klicken Sie in Ihrem HubSpot-Account auf das settings Zahnradsymbol in der Hauptnavigationsleiste.
  • Gehen Sie im Menü der linken Seitenleiste zu „Objekte“ > „Angebote“.
  • Klicken Sie auf die Registerkarte „Angebotsvorlagen“.
  • Klicken Sie oben rechts auf „Angebotsvorlage anpassen“.
  • Bewegen Sie den Mauszeiger über Ihre neue Vorlage und wählen Sie dann „Auswählen“ aus.
  • Im linken Bereich können Sie die in der Vorlage enthaltenen Module bearbeiten. Sie können beispielsweise auf ein Modul klicken, um seine Eigenschaften zu bearbeiten oder die Sichtbarkeit zu ändern.
quote-template-toggle-visibility
  • Klicken Sie oben rechts auf „Speichern“, wenn Sie mit den Änderungen fertig sind.

7. Mithilfe Ihrer neuen Vorlage ein Angebot erstellen

Da Ihre Änderungen gespeichert sind, können Sie jetzt ein Angebot mit der Vorlage erstellen, das das Erlebnis des Vertriebsmitarbeiters simuliert.

  • Gehen Sie in Ihrem HubSpot-Account zu „Sales“ > „Angebote“.
  • Klicken Sie oben rechts auf „Angebot erstellen“. Sie werden dann zu einem Assistenten zur Erstellung von Angeboten weitergeleitet. 
  • Klicken Sie im ersten Bildschirm auf das Dropdown-Menü „Einem Deal zuordnen“ und wählen Sie dann entweder einen vorhandenen Deal aus oder „Einen neuen Deal erstellen“, wenn Sie stattdessen einen Test-Deal verwenden möchten.
  • Klicken Sie unten rechts auf „Weiter“.
  • Klicken Sie im nächsten Bildschirm auf das Dropdown-Menü „Angebot“ und wählen Sie dann Ihre benutzerdefinierte Angebotsvorlage aus.
  • Durchlaufen Sie den Rest des Angebots-Assistenten, um Ihr Angebot zu erstellen.
  • Nach der Veröffentlichung des Angebots wird ein Dialogfeld mit einem Link zum Anzeigen des Angebots angezeigt. Klicken Sie auf „Kopieren“, um die URL zu kopieren, und fügen Sie sie dann in Ihren Browser ein, um das ausgefüllte Angebot anzuzeigen.
copy-quote-url

Nächste Schritte

Mit Ihrer erstellten, hochgeladenen und angepassten Angebotsvorlage sollten Sie nun ein besseres Verständnis für den Ablauf der Bearbeitung der Angebotsvorlage und das Erlebnis des Content-Autors haben.

Wenn Sie Angebotsvorlagen erstellen, die Ihren Geschäftsanforderungen entsprechen, sollten Sie versuchen, dem Angebot Ihre eigenen benutzerdefinierten Module zusammen mit den Standardmodulen von HubSpot hinzuzufügen. 

Bitte beachten: Es wird empfohlen, das JavaScript der Zahlungs-, Signatur- und Download-Module nicht zu bearbeiten, da dies die Module beschädigen kann. In diesem Fall kann der Endbenutzer es möglicherweise nicht signieren, herunterladen oder sogar eine Zahlung leisten.

Weiterführende Ressourcen

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.