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

​

Designlimits

• Kostenlose CMS Hub-Accounts können keine Websitesuche, CTA-Funktionen oder native HubSpot-Videos 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 (Mindestanzahl an Seiten)
  • 50 Module (mindestens 5)
  • 50 Abschnitte (mindestens 5)
• Designs dürfen Folgendes nicht enthalten:
  • E-Mail-Vorlagen
  • HubDB-Funktionen
  • Serverlose Funktionen
  • CRM-Objektfelder
  • Flexible Spalten in Vorlagen

​

Allgemeine Anforderungen an Designs

• Alle eingereichten Designs müssen unterscheidbar und original sein. Zum Beispiel zählt ein und dasselbe Design mit anderen Texten oder Platzhalterinhalten beispielsweise nicht als eigenständiges Design. Erfahren Sie mehr über die Compliance-Anforderungen des HubSpot-Marketplace für Vorlagen.
• Ein Design muss mit HTML- und HubL-Vorlagen und dnd_area-Tags erstellt werden.
• Designs müssen einem 12-Spalten-Rastersystem entsprechen.

​

Struktur der Designdatei

​

Relative lokale Dateipfade für Vorlagen

{{require_css(get_asset_url('../../css/main.css')) }}

​

Design-Performance

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

• Designdateien sollten 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).

​

Vorschau-URLs für Designs

​

Verwenden von jQuery

{# this checks if the "Include jQuery" option in Settings > CMS > Pages is checked #}
{% if not site_settings.include_jquery %}
  {{ require_js("../jquery-3.4.1.js", "footer") }}
{% endif %}

​

Designkonfiguration (theme.json)

// theme.json
{
  "label": "Cool Theme",
  "preview_path": "./templates/home-page.html",
  "screenshot_path": "./images/templates/homepage.jpg",
  "enable_domain_stylesheets": false,
  "version": "1.0",
  "author": {
    "name": "Jon McLaren",
    "email": "noreply@hubspot.com",
    "url": "https://theme-provider.com/"
  },
  "documentation_url": "https://theme-provider.com/cool-theme/documentation",
  "license": "./license.txt",
  "example_url": "https://theme-provider.com/cool-theme/demo",
  "is_available_for_new_content": true
}

• Der Name des Labels stimmt mit dem Namen in deinem Design-Listing überein.
• Wenn Sie die kostenlose CMS-Theme Boilerplate von HubSpot verwenden, dürfen keine Boilerplate-Werte vorhanden sein. Dazu gehören Autoreninformationen, URL der Dokumentation, Beispiel-URL usw.
• Die URL der Dokumentation wird aufgelöst und enthält eine Dokumentation zur Verwendung Ihres Designs.
• Der Vorschaupfad ist eine gültige Datei in Ihrem Design.
• Der Screenshot-Pfad ist eine gültige Datei und hängt mit deinem Design zusammen.
• Die Beispiel-URL wird aufgelöst und führt zu einer Demo Ihres Designs. Verwenden Sie für die Beispiel-URL nicht die Subdomains preview.hs-sites.com oder [AccountID].hs-sites.com.

​

Designeinstellungen (fields.json)

• Die fields.json-Datei muss mindestens drei Farbfelder enthalten.
• Um Kompatibilität zwischen Designs und unabhängigen Modulen zu gewährleisten, müssen Designs den folgenden Standardkriterien für die Benennung von Farb- und Schriftartfeldern folgen: primary_color, secondary_color, heading_fontund body_font. Erfahren Sie mehr über die Kompatibilität von Modul und Design.

• Sie dürfen keine Konflikte mit Ihren Editor-Stilen oder über ein Modul festgelegten Stilen verursachen. Verwenden Sie zum Beispiel nicht !important in Ihrem CSS-Stylesheet, da es Endbenutzern ein Überschreiben erschwert und einen Konflikt verursachen würde.
• Es müssen aussagekräftige Label für jede Einstellung verwendet werden, damit Content-Autoren wissen, was sie aktualisieren.
• Sie müssen für alle Vorlagen in einem Design 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 Designeinstellungen für alle h1-Tags im Design gelten.

• Felder für Haupttext-Schriftart (p-Tags)
• Schriftartfelder h1 bis h6
• Hyperlinkfarbe (a-Tags), einschließlich Stile für das Darüberbewegen des Mauszeigers

• Hintergrundfarbe für Formular
• Formularrahmenfarbe
• Farbe für Formularlabel
• Rahmenfarbe für Formularfeld
• Formular-Button – Dazu gehören Einstellungen für Button-Text, Hintergrundfarbe und Stile für das Darüberbewegen des Mauszeigers.

• Felder innerhalb Ihres Designs müssen ggf. logisch gruppiert werden. Beispielsweise sollten mehrere mit Typografie verknüpfte Felder unter einer Gruppe Typography gruppiert werden.
• Designfelder sollten separate Farb- und Schriftartsteuerelemente für Schaltflächen und Formulare sowie separate Farb-, Logo- und Schriftartsteuerelemente für Header und Footer haben.
• Wenn Module in einem Design Logos verwenden, muss mindestens ein Logofeld von den Markeneinstellungen des Accounts etwas übernehmen. Wenn Sie ein Bildfeld zum Rendern eines Logos verwenden, muss das Bildfeld nicht die Markeneinstellungen übernehmen.

​

Vorlagen (CSS, Abschnitte, Seitenvorlagen usw.)

​

Abschnitte

• Sie müssen gegebenenfalls Abschnitte verwenden. Es müssen mindestens fünf Abschnitte in einem Design enthalten sein.
• Abschnitte müssen eindeutige und funktionierende Screenshots enthalten.
• Abschnitte und Module sollten nicht redundant sein.

​

Seitenvorlagen

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

​

Benennung der Seitenvorlage

• Wenn Sie Vorlagen mit ähnlichen Namen haben, fügen Sie beschreibende Wörter hinzu, die den Unterschied zwischen ihnen angeben.
• Achten Sie auf eine konsistente Groß- und Kleinschreibung, entfernen Sie Bindestriche und vermeiden Sie die Verwendung von Kurzschrift (z. B. buchstabieren Sie den Hintergrund, anstatt bg zu verwenden).
• Ihr Unternehmensname oder Designname muss nicht im Vorlagennamen enthalten sein.

​

Module

​

Globaler Content

​

Globale Teilvorlagen

• Designs müssen globale Teilvorlagen enthalten.
• Globale Teilvorlagen müssen nutzbare Drag-&-Drop-Bereiche enthalten. Zum Beispiel können Sie den Drag-&-Drop-Bereich nicht mit einer “hide”-Klasse ausblenden.
• Sie müssen verwendbare Drag-&-Drop-Bereiche in Kopf- und Fußzeilen integrieren.
• Bei Menüs, die global auf einer Website verwendet werden, müssen Benutzer außerdem auch ein HubSpot-Navigationsmenü auswählen können, das sie in ihren Account-Einstellungen erstellt haben.

​

Mehrsprachige Unterstützung

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

​

Mobile und responsive Elemente

• Hauptnavigation
• Schieberegler und Registerkarten
• Große Bilder
• Vermeiden von horizontalem Scrollen (es sei denn, dies ist beabsichtigt)