Designanforderungen für den HubSpot-Marketplace für Vorlagen

Erfahren Sie mehr über die Anforderungen, die ein Design erfüllen müssen, wenn es beim HubSpot-Marketplace für Vorlagen eingereicht wird. 

Beachten Sie die folgenden Obergrenzen pro Design:

• Kostenlose CMS Hub-Accounts können keine Websitesuche oder CTA-Funktionen verwenden. Erfahren Sie in der Übersicht der Produkte und Dienstleistungen von HubSpot mehr darüber, was in CMS Hub-Abonnements enthalten ist.
• Designs dürfen nicht mehr enthalten als:
  • 50 Vorlagen
  • 50 Module
  • 50 Abschnitte

• Designs dürfen nicht enthalten:
  • E-Mail-Vorlagen
  • HubDB-Funktionen
  • Serverlose Funktionen
  • CRM-Objektfelder.
  • Mitgliedschaftsvorlagen
  • Flexible Spalten in Vorlagen

Bei Google Lighthouse muss ein Design Scores über den folgenden Schwellenwerten aufweisen:

• Desktop-Barrierefreiheit: 65
• Desktop-Best Practices: 80
• Desktop-Performance: 70
• Mobil-Performance: 40

Erfahren Sie, wie Sie mithilfe des CLI einen Google Lighthouse-Bericht für Ihr Design erstellen.

Darüber hinaus müssen die Designelemente die folgenden Anforderungen bezüglich Performance und Barrierefreiheit erfüllen:

• Designdateien sollten erfolgreich minimiert werden können.
• Alle Bilddateien sollten weniger als 1 MB groß sein.
• Alle Bild-Tags sollten ein alt-Attribut haben (ein Wert von "" ist zulässig).
• Alle Bild-Tags sollten über ein loading-Attribut verfügen (ein Wert von "" ist zulässig).

Designs im Marketplace müssen die folgenden Anforderungen erfüllen:

• Alle eingereichten Designs müssen unterscheidbar sein. Zum Beispiel zählt ein und dasselbe Design mit anderen Texten oder Platzhalterinhalten beispielsweise nicht als eigenständiges Design. 
• Ein Design muss mit HTML + HubL-Vorlagen und dnd_area-Tags erstellt werden.
• Sie müssen gegebenenfalls Abschnitte verwenden. Es müssen mindestens fünf Abschnitte in einem Design enthalten sein. 
• Sie müssen Drag-&-Drop-Header und -Footer verwenden.
• Designs müssen einem 12-Spalten-Rastersystem entsprechen.

Darüber hinaus müssen Designs die folgenden Mindestanforderungen für enthaltene Vorlagen, Designfeldoptionen, theme.json- und field.json-Konfigurationen sowie Modulfelder erfüllen.

Ein Design muss mindestens die folgenden Vorlagentypen enthalten:

• Eine Website-Seitenvorlage oder eine Landingpage-Vorlage.
  • Bei der Aufnahme von mehrseitigen Vorlagen muss jede Vorlage einen anderen Zweck haben. Zum Beispiel eine Startseite, eine „Über uns“-Seite, eine Landingpage in voller Breite und eine Landingpage mit einer rechten Seitenleiste.
  • Es wird empfohlen, mindestens acht Seitenvorlagen in ein Design aufzunehmen. 

• Separate Vorlagen für Blog-Listings und Blog-Beiträge.
  • Blog-Listing-Vorlage: Die Seite, auf der alle Blog-Beiträge in einem Listing-Format angezeigt werden (bekannt als Blogroll). Der Vorlagentitel muss widerspiegeln, dass er für die Listing-Seite bestimmt ist.
  • Blog-Beitragsvorlage: Die Blog-Beitragsdetailseite, die einzelne Blog-Beiträge anzeigt. Der Vorlagentitel muss widerspiegeln, dass er für den Blogbeitrag bestimmt ist.
  • Darüber hinaus müssen Felder für Blog-Kommentare und Blog-Autoren so formatiert werden, dass sie dem Design entsprechen.

• Systemseitenvorlagen:
  • 404-Fehler-Vorlage: Wird angezeigt, wenn Besucher eine Seite aufrufen, die nicht vorhanden ist.
  • 500-Fehler-Vorlage: Wird angezeigt, wenn auf der Website ein interner Fehler auftritt.
  • Vorlage mit Aufforderung zur Passworteingabe: Wird angezeigt, wenn eine Seite passwortgeschützt ist.
  • Abonnementvorlage: Eine Seite für die Abonnementeinstellungen, auf der E-Mail-Empfänger die Arten von E-Mails verwalten können, die sie abonniert haben.
  • Vorlage für Abo-Update: Eine Bestätigungsseite, die angezeigt wird, wenn ein E-Mail-Empfänger seine E-Mail-Abo-Einstellungen aktualisiert.
  • Vorlage für Back-up Abo-Kündigung: Die Seite, die für E-Mail-Empfänger angezeigt wird, die E-Mails abbestellen möchten, wenn HubSpot deren E-Mail-Adressen nicht bestimmen kann.
  • Suchergebnisvorlage: Zeigt Suchergebnisse an, die bei der Verwendung der Website-Suche zurückgegeben werden. Nur für kostenpflichtige CMS Hub-Accounts verfügbar.

Ein Design muss mindestens die folgenden Designfelder enthalten: 

• Typografiefelder:
  • Felder für Haupttext-Schriftart (p-Tags)
  • Schriftartfelder h1 bis h6
  • Hyperlinkfarbe (a-Tags), einschließlich Stile für das Darüberbewegen des Mauszeigers
• Formularfelder:
  • Titelhintergrund
  • Titeltext, einschließlich mindestens Schriftfarbstilen
  • Formular-Hintergrundfarbe
  • Formular-Rahmenfarbe
  • Farbe für Formularlabel
  • Formularfeld-Rahmenfarbe
  • Formularschaltfläche, einschließlich Einstellungen für Text, Hintergrundfarbe und Stile für das Darüberbewegen des Mauszeiger

Darüber hinaus müssen Designfelder die folgenden Voraussetzungen erfüllen:

• Felder innerhalb Ihres Designs müssen ggf. logisch gruppiert werden. Beispielsweise sollten mehrere mit Typografie verknüpfte Felder unter einer Gruppe „Typografie“ gruppiert werden.
• Designfelder müssen die folgenden global angewendeten Elemente aufweisen:
  • Farbfelder für Primär-, Sekundär- und Tertiärfarben
  • Schriftartfelder für Überschriften
  • Schriftartfelder für Haupttext
• Designfelder sollten separate Farb- und Schriftsteuerelemente für Schaltflächen und Formulare sowie separate Farb-, Logo- und Schriftartsteuerelemente für Header und Footer haben. 
• Ein Teil der Farb- und Logofelder des Designs muss von den Markeneinstellungen des Accounts erben:
  • Mindestens zwei Farbfelder müssen Farben aus den Markeneinstellungen des Accounts erben. Zusätzliche Farbfelder können standardmäßig auf andere Farben festgelegt werden, einschließlich Schwarz und Weiß.
  • Wenn Module in einem Design Logos verwenden, muss mindestens ein Logofeld von den Markeneinstellungen des Accounts erben. Wenn Sie ein Bildfeld zum Rendern eines Logos verwenden, muss das Bildfeld nicht von den Markeneinstellungen erben.

Die theme.json-Datei muss die folgenden Parameter enthalten:

Erfahren Sie in der theme.json-Dokumentation mehr über diese Parameter.

Die fields.json-Datei steuert die verfügbaren Felder und Feldgruppen im Design-Editor, einschließlich der Stilfelder. Welche Felder Sie berücksichtigen, hängt davon ab, wie viel Kontrolle die Content-Autoren über den Seiten-Editor haben sollen. Die fields.json-Datei muss mindestens drei Farbfelder enthalten.

Um eine kompatible Funktionalität zwischen Designs und unabhängigen Modulen zu gewährleisten, müssen Designs den folgenden Standardkriterien für die Benennung von Farb- und Schriftfeldern folgen: primary_color, secondary_color, heading_font und body_font.

Wenn Designfelder keine primary_color-, secondary_color-, heading_font- oder body_font-Felder haben, kann das alternate_names-Feld verwendet werden. Erfahren Sie hier mehr über diese Anforderung.

 Erfahren Sie in der fields.json-Dokumentation mehr über diese Parameter. Sehen Sie sich auch ein Beispiel einer fields.json-Datei in der HubSpot CMS Boilerplate an. 

Designeinstellungen müssen die folgenden Anforderungen erfüllen.

Designeinstellungen dürfen keine Konflikte mit Ihren Editor-Stilen oder über ein Modul festgelegten Stilen verursachen. Verwenden Sie zum Beispiel nicht !important in Ihrem CSS, da es Endbenutzern ein Überschreiben erschwert und einen Konflikt verursachen würde.

Designeinstellungen müssen aussagekräftige Label für jede Einstellung verwenden, damit Content-Autoren wissen, was sie aktualisieren.

Designeinstellungen müssen für alle Vorlagen in einem Designs gelten, es sei denn, es gibt einen bestimmten Anwendungsfall für zusätzliche Stile. Beispielsweise müssen Änderungen am Stil und der Größe von h1-Überschriften in Einstellungen für alle h1-Tags im Design gelten.

Designs müssen globale Teilvorlagen enthalten. Globale Teilvorlagen sind eine Art von Vorlage, die mit HTML und HubL erstellt wurde und auf Ihrer gesamten Website wiederverwendet werden kann. Die gebräuchlichste Art von globalen Teilvorlagen sind Website-Header, Seitenleisten und Website-Footer. 

Globale Teilvorlagen müssen einen nutzbaren Drag-&-Drop-Bereich enthalten. Bei Menüs, die global verwendet werden, müssen Benutzer außerdem auch ein HubSpot-Navigationsmenü auswählen können, das sie in ihren Account-Einstellungen erstellt haben.

Erfahren Sie, wie Sie globale Teilvorlagen erstellen:

Alle Designs sollten eine ordnungsgemäße Ordnerstruktur enthalten und unter einem „übergeordneten“ Ordner gruppiert werden, der Ihr Produkt-Listing beschreiben sollte. Wenn Sie beispielsweise ein Design mit dem Namen „Super-Toll“ für den Marketplace erstellen, sollte Ihre Struktur ähnlich dem Bild unten aussehen. Erfahren Sie mehr über die Struktur von Designdateien. 

Wenn Sie Vorschau-URLs erstellen, müssen Sie Ihren eigenen Domain-Namen verwenden. Sie können nicht die von HubSpot bereitgestellte Domain verwenden, die folgende URL-Struktur hat: [AccountID].hs-sites.com

Es muss eine Live-Website verwendet werden, das Image der Demo-Website kann nicht verwendet werden. 

Sollte Ihre Live-Demo zu irgendeinem Zeitpunkt unzugänglich werden, behält sich HubSpot das Recht vor, Ihr Design mit einer Benachrichtigung an den Anbieter zu löschen/zu entfernen, bis die Live-Demo wieder zugänglich wird.

Wenn Sie sich auf Designelemente beziehen, müssen Sie relative lokale Dateipfade verwenden. Der beste Weg, diese hinzuzufügen, ist die Verwendung der get_asset_url-Funktion, die die öffentliche URL eines Elements, einer Datei oder einer Vorlage zurückgibt. Sie können diese Funktion auch generieren, indem Sie entweder mit der rechten Maustaste auf eine Datei klicken und „Öffentliche URL kopieren“ auswählen oder indem Sie auf „Aktionen“ klicken und dann „Öffentliche URL kopieren“ auswählen.

Ein Stylesheet, auf das durch require_css verwiesen wird, muss beispielsweise wie folgt formatiert sein:

Wenn Ihr Design auf jQuery basiert, muss für den Fall, das es nicht standardmäßig im Account eines Kunden aktiviert ist, eine Version der jQuery aufgenommen werden. 

Wenn Sie beispielsweise ein Modul hinzufügen, das jQuery erfordert, der Rest der Website jedoch nicht, müssen Sie den folgenden Code verwenden, um jQuery zu laden:

Designs müssen in der Lage sein, mehrere Sprachversionen zu unterstützen, und sollten die Sprachen angeben, die sie unterstützen. Dies kann durch das Hinzufügen des Sprachumschaltmoduls in einem globalen Header erreicht werden, das es den Kunden ermöglicht, die Sprachoptionen leicht zu finden und die gewünschte Sprache auszuwählen.

• Sie dürfen nur jeweils eine Sprache gleichzeitig anzeigen. Vermeiden Sie beispielsweise, sowohl Englisch als auch Spanisch gleichzeitig in der Benutzeroberfläche zu haben.
• Vermeiden Sie die Verwendung von fest kodiertem Text. Anstatt zum Beispiel den Text einer Blog-Listing-Schaltfläche als „Mehr lesen“ fest zu kodieren, legen Sie den Text innerhalb eines Feldes so fest, dass der Endbenutzer den Text aktualisieren kann, ohne in den Code einsteigen zu müssen.