Vorlagen-Marketplace | Modulanforderungen

​

Modulbeschränkungen

• HTML
• Module in voller Breite
• Formulare und Formulare mit mehreren Schritten
• Abstandshalter-Module oder Module, die eine Gliederung Ihrer Seite ohne UI erstellen
• Module, die die Standardmodulfunktionalität duplizieren
• Handelsspezifische Module
• E-Mail-spezifische Module

​

Modul-Content

​

Modul-Label und Hilfetext

• Die Module müssen aussagekräftige Label haben, die den Zweck des Moduls vermitteln. Das Label Hero-Banner mit Parallax Scrolling ist beschreibend, die Label Hero-Banner und Galerie dagegen nicht.
• Modul-Label dürfen keine Zahlen enthalten, z. B. Hero-Banner 01.
• Modul-Label dürfen keine Unterstriche enthalten.
• Modul-Label dürfen keine Abkürzungen enthalten, z. B. Sp anstelle von „Spalte“.
• Module müssen Inline-Hilfetext enthalten (sofern zutreffend), um die Verwendung des Moduls weiterzuleiten.
• Module dürfen nicht nach einem Standardmodul benannt werden.
• Bei unabhängigen Modulen sollte das Modul-Label mit dem Namen im Vorlagen-Listing übereinstimmen. Wenn Ihr Vorlagen-Listing beispielsweise SuperAwesome Banner with Scrolling ist, sollte Ihr Modul-Label identisch sein.

​

Standard-Content

• Das Standardfeld darf keinen Lorem ipsum-Text enthalten.
• Der Standardinhalt für ein Feld sollte Auskunft über dessen Zweck geben:
  • Beim Einfügen von Menüfeldern müssen Module als Standardinhaltsoption Menü auswählen verwenden.
  • Beim Einfügen von Formularfeldern müssen Module als Standardinhaltsoption Formular auswählen verwenden.
  • Beim Einfügen von Blog-Auswahlfeldern müssen Module als Standardinhaltsoption Blog auswählen verwenden.
• Wenn das Hinzufügen von Standard-Content zu einem Modul keinen Sinn ergibt, verwenden Sie stattdessen einen Modul-Platzhalter, um dem Content-Autor zu helfen, den Bereich zu visualisieren, den er mit Inhalten füllt.

​

Modulsymbole

​

Module, die Drittanbieterkonten erfordern

​

Modulfelder

• Module in einem Design:
  • Müssen Inline-Hilfetext und spezifische Standardinhalte für bestimmte Felder enthalten.
  • Mindestens ein Logofeld muss von den Markeneinstellungen des Accounts etwas übernehmen. Wenn Sie ein Bildfeld zum Rendern eines Logos verwenden, muss das Bildfeld nicht die Markeneinstellungen übernehmen.
• Module in einem Design und unabhängige Module:
  • Modulfeldnamen sollten den Zweck des Feldes beschreiben. Wenn beispielsweise ein Textfeld die Jobbezeichnung einer Person enthalten soll, wäre Jobbezeichnung eine passende Beschreibung, Bezeichnung jedoch nicht.
  • Alle Standardmodule von HubSpot müssen formatiert sein und in allen eingereichten Vorlagen korrekt angezeigt werden.

​

fields.json- und module.html-Konfiguration

​

Modulcodequalität

​

Module müssen eigenständig sein.

​

Designmodule

​

Unabhängige Module

document.addEventListener('DOMContentLoaded', function () {
  // Put Javascript here
});

​

Code-Einschränkungen für unabhängige Module

• Es wird empfohlen, nach Möglichkeit vanilla JS zu verwenden. Das Hinzufügen einer jQuery-Bibliothek zu einer Website, die nicht jQuery verwendet, kann möglicherweise zu Konflikten führen und die Website-Seite verlangsamen.
• Wenn Sie eine jQuery-Bibliothek verwenden, nehmen Sie die Bibliothek über die require_js()-Funktion auf, sofern jQuery mit dem Kontrollkästchen (Boolesch) in den Account-Einstellungen deaktiviert ist, um Konflikte aus mehreren jQuery-Bibliotheken zu vermeiden.

{% if not site_settings.include_jquery %}
{{ require_js("https://code.jquery.com/jquery-3.7.0.min.js", "footer") }}
{% endif %}

​

Kategorien

• Alle unabhängigen Module müssen mindestens eine Kategorie haben. Module, die als Teil eines Designs übermittelt werden, müssen keine Kategorien haben. Es wird jedoch empfohlen, mindestens eine aufzunehmen. Erfahren Sie mehr über das Hinzufügen von Kategorien zu Modulen.

​

Selektoren für Klassennamen

• Jedem Klassennamen-Selektor muss der Modulname vorangestellt werden, wobei Leerzeichen durch Bindestriche ersetzt werden. Im Folgenden finden Sie beispielsweise die Datei module.html für eine Schaltfläche namens example-button, wobei jeder Klassenname und der CSS-Selektor seinen Namen widerspiegeln.

<style>
{% scope_css %}
{# Button wrapper #}
 {% if module.styles.group_alignment.alignment %}
  .example-button-wrapper {
   text-align: {{ module.styles.group_alignment.alignment.horizontal_align }};
   }
 {% endif %}

{# Button #}

.example-button {
 {% if module.styles.group_background.color.color %}
  background-color: rgba({{ module.styles.group_background.color.color|convert_rgb }}, {{ module.styles.group_background.color.opacity / 100 }});
 {% endif %}
 }
 {% end_scope_css %}
</style>
{% end_require_css %}

{##### Module HTML #####}

<div class="example-button-wrapper">
 <a href="{{ href }}" class="example-button"
 {% if module.button_link.open_in_new_tab %}target="_blank"{% endif %}
 {% if rel %}rel="{{ rel|join(" ") }}"{% endif %}
 >
  {{ module.button_text }}
 </a>
</div>

​

Stile und JavaScript

• Stile:
  • Module dürfen keine leere Stilgruppe enthalten.
  • Das Hartcodieren von Inline-Stilen innerhalb von Modulen wird nicht empfohlen. Verwenden Sie stattdessen dynamische Inlineformatvorlagen, indem Sie Felder zur Steuerung von Stilen aktivieren.
• JavaScript:
  • JavaScript muss immer mehrere Instanzen eines Moduls darstellen können. JavaScript im JS-Fenster wird nur einmal pro Seite geladen, unabhängig davon, wie häufig ein Modul vorkommt.
  • JavaScript sollte DOM-Elemente anhand von modulspezifischen Klassennamen referenzieren, um sicherzustellen, dass Elemente außerhalb des Moduls nicht unbeabsichtigt betroffen sind.

​

Feldstruktur

​

Registerkarte „Content“

• Wenn es innerhalb einer Feldgruppe mindestens ein Steuerelement gibt, müssen alle Steuerelemente in nach ihrer Funktion gekennzeichneten Kategorien gruppiert werden.
• Modulfelder, die der Registerkarte Content hinzugefügt wurden, müssen es ermöglichen, den Content eines Moduls anzupassen. Zum Beispiel Steuerelemente für Bilder, Symbole, ALT-Text und Links.

​

Registerkarte „Stile“

• Voreinstellungen
• Text
• Hintergrund
• Rahmen
• Hover
• Ecke
• Abstand
• Ausrichtung
• Benutzerdefinierte Stilgruppen, die nicht zu den oben genannten passen
• Erweitert

• Ausrichtung
• Hintergrundbild
• Rahmen
• Farbe
• Schriftart
• Farbverlauf
• Abstand
• Textausrichtung

• Die Animationsoptionen sollten immer am unteren Rand der Feldgruppenliste positioniert werden.
• Optionen, die es Content-Autoren ermöglichen, Code-Snippets oder CSS hinzuzufügen, sollten am Ende der Feldgruppenliste unter einem Feld Erweitert gruppiert werden.
• Die Steuerelemente sollten über alle Module hinweg standardisiert werden. Zum Beispiel sollten alle Elemente, die ein Steuerelement für den Rahmenradius haben können, dieses Steuerelement anbieten. Es ist nicht ratsam, Steuerelemente für einige Module anzubieten und für andere nicht.
• Modulfelder, die der Registerkarte Stil hinzugefügt werden, müssen Möglichkeiten zum Bearbeiten des Modulstiels bieten. Zum Beispiel:
  • Stiloptionen wie Farbe, Textstil, Ausrichtung, Abstand, Rahmen und Eckenradius.
  • Animationen wie Hover- und Slide-In-Effekte.
  • Voreinstellungen wie dunkle und helle Designs, bei denen viele Stile gleichzeitig geändert werden.

​

Beispiele für Feldorganisation

​

Voreinstellungen

​

Multi-Level-Gruppierung

​

Gruppieren von einzelnen Feldern