Drag-&-Drop-Vorlagen
Drag-&-Drop-Vorlagen werden für neue Vorlagen nicht empfohlen: Diese Vorlagen können nicht Teil eines Designs sein und unterstützen daher keine Designfunktionen wie Designfelder und Designmodule. Drag-&-Drop-Vorlagen werden in CMS Hub Starter NICHT unterstützt, verwenden Sie stattdessen dnd_area. Drag-&-Drop-Vorlagen unterstützen nicht einige der neueren Funktionen des CMS (Mitgliedschaften, Drag-&-Drop-Bereiche, wiederverwendbare Abschnitte, GraphQL und viele andere Funktionen). Sie sind nicht erweiterbar und bieten Content-Autoren und Entwicklern keine so gute Umgebung wie Code-Vorlagen. Stattdessen empfehlen wir codierte HTML + HubL-Vorlagen mit Drag-&-Drop-Bereichen, die Entwicklern und Marketern ein besseres Erlebnis bieten. Für einen schnellen Einstieg in das CMS empfehlen wir Ihnen, sich die HubSpot Theme Boilerplate anzusehen, die mit codierten Vorlagen erstellt wurde.
Marketing Hub
- Professional or Enterprise
Content Hub
- Professional or Enterprise
Drag-&-Drop-Vorlagen wurden für weniger technisch bewandte Benutzer entwickelt, um auf einfache Weise eine Website im HubSpot-CMS erstellen zu können. Drag-&-Drop-Vorlagen nutzen einen visuellen Vorlagendesigner, der HTML + HubL unter der Haube generiert.
Damit der visuelle Designer funktioniert, wird die HTML-Ausgabe von HubSpot gesteuert und Sie haben keine direkte Kontrolle über die strukturellen Teile davon. Zusätzlich wird eine layout.css-Datei auf die Seite geladen, die ein einfaches 12-Spalten-Gitter auf Basis von Bootstrap 2 ermöglicht. Dies macht alle Websites, die mit Drag-&-Drop-Vorlagen erstellt wurden, standardmäßig responsiv, sodass Inhaltszeilen vertikal gestapelt werden. Für eine anspruchsvollere und individuelle Optimierung für Mobilgeräte sollten Sie Ihre eigenen responsiven Stile hinzufügen.
Drag-&-Drop-Vorlagen werden im Design-Manager erstellt und bei der Interaktion mit ihnen über die API oder die Tools für lokale Entwicklung als JSON dargestellt. Aufgrund der Beschaffenheit von Drag-&-Drop-Vorlagen ist die einzige empfohlene Methode, sie zu bearbeiten, über die Design-Manager-Schnittstelle. Wenn Sie lieber programmieren, Versionskontrolle verwenden oder einfach in der Lage sein möchten, Ihre bevorzugten Tools lokal zu bearbeiten, bieten HTML + HubL-codierte Vorlagen die beste Umgebung für Entwickler. Die dnd_area-Funktionalität für HTML + HubL-Vorlagen ermöglicht auch Content-Autoren ein besseres Erlebnis als die Drag-&-Drop-Oberfläche des Design-Managers, da sie im visuellen Content-Editor verbleibt.
Um eine Drag-&-Drop-Vorlage zu erstellen, öffnen Sie den Design-Manager und erstellen Sie im Finder eine neue Datei, wählen Sie eine Vorlage sowie den Typ der Vorlage aus, die Sie erstellen.
Drag-&-Drop-Vorlagen bestehen aus Bausteinen. Diese Bausteine, oder Blöcke, sind Module, Gruppen, globale Gruppen und flexible Spalten.
Erfahren Sie, wie Sie den Drag-&-Drop-Vorlagendesigner verwenden.
Module sind wiederverwendbare Komponenten, die bearbeitbare Teile einer Seite sind. Module bestehen aus einem HTML + HubL-Vorlagenfragment, CSS, JS und Feldern. Module können von Content-Autoren in flexiblen Spalten und dnd_areas platziert werden und sind ihr wichtigste Mittel, um die Inhalte ihrer Website zu verwalten. Sie können Module für eine beliebige Anzahl von Funktionen erstellen: Suche, Bildergalerien, Menüs, komplexe Marketinganimationen, Taschenrechner, Produktvergleiche – die Möglichkeiten sind Ihrer Vorstellungskraft überlassen und dem, was Sie für ein gutes Nutzererlebnis für Content-Autoren halten. Über die Felder steuert der Content-Editor die Ausgabe. Module sind nicht nur für Drag-&-Drop-Vorlagen ein wichtiges Element, sie sind ein sehr wichtiger Kernbaustein von CMS Hub. In Drag-&-Drop-Vorlagen können die Standardwerte für Modulfelder im Inspektor konfiguriert werden. Erfahren Sie mehr über Module.
Gruppen sind Wrapper für andere Gruppen und Module. Sie könnenüber CSS-Klassen und HTML-Wrapper verfügen. Gruppen manifestieren sich als umhüllender HTML mit Layout-Klassen, um die Platzierung und Dimensionierung der Gruppen zu erleichtern. Die Gruppen können auch einen internen Namen haben. Damit können Sie im Design-Manager Module gruppieren, wodurch es einfacher wird, Teile einer Seite visuell zu identifizieren. Ein Beispiel hierfür könnten Seitenleisten oder Banner sein.
Da HTML + HubL-Dateien der empfohlene Pfad für neue Websites, Spalten, Abschnitte und Zeilen von Drag-&-Drop-Bereichen sind, ersetzen Drag-&-Drop-Bereiche weitgehend die Zwecke von Gruppen.
Zusätzlich kann ein Entwickler Teilvorlagen und globale Teilvorlagen erstellen, die zusätzlich zu Drag-&-Drop-Bereichen Freeform-Code enthalten können.
Drag-&-Drop-Bereiche, Teilvorlagen und globale Teilvorlagen werden in Drag-&-Drop-Vorlagen nicht unterstützt.
Globale Gruppen sind Gruppen, deren Bearbeitung sich auf die gesamte Website und nicht nur auf die Seite, auf der sie sich befinden, auswirkt. Globale Gruppen können in mehreren Vorlagen vorhanden sein und werden am häufigsten für Website-Header und Footer verwendet. Globale Gruppen ähneln Teilvorlagen, sind aber auf die Struktur beschränkt, die durch Drag-&-Drop-Vorlagen erzwungen wird. Sie können bei Bedarf in HTML + HubL-Dateien eingebettet werden, in den meisten Fällen ist es allerdings sinnvoller, stattdessen eine globale Teilvorlage zu verwenden.
Flexible Spalten sind ein spezieller Typ von Gruppe. Sie können einen Standardsatz von Modulen enthalten, aber Content Editoren können Module darin hinzufügen, entfernen und verschieben. Flexible Spalten ermöglichen eine eindimensionale Neuanordnung von Modulen, vertikal nach oben und unten. Im Gegensatz zu dnd_area-Tags unterstützen flexible Spalten weder Abschnitte noch die Styling-Möglichkeiten von Modulen innerhalb dieser Abschnitte. Flexible Spalten sind nicht nur für Drag-&-Drop-Vorlagen ein wichtiges Element, es gibt auch ein HubL-Tag, das in HTML + HubL-Vorlagen verwendet werden kann. Erfahren Sie, wie Sie eine flexible Spalte zu einer Drag-&-Drop-Vorlage hinzufügen.
Es wird allgemein empfohlen, Drag-&-Drop-Bereiche zu verwenden, da sie meistens nützlicher sind und alle Funktionen bieten, die auch flexible Spalten bieten.
Es kann in einigen Fällen dennoch nützlich sein, eine flexible Spalte zu verwenden, z. B. für eine Seitenleiste. Für Hauptinhaltsbereiche sind Drag-&-Drop-Bereiche jedoch viel flexibler.
Warum sollten Sie flexible Spalten verwenden? Websites sind in der Regel nicht starr. Sie werden über lange Zeiträume hinweg erstellt und gepflegt. Eine Homepage zum Beispiel für ein Unternehmen kann vorgestellte Produkte präsentieren und sich häufig ändern, wenn sich die Marketinganforderungen des Unternehmens im Laufe der Zeit ändern. Dass Inhalte innerhalb einer flexiblen Spalte hinzugefügt/entfernt und von Content-Editoren geändert werden können, erleichtert Marketern die Arbeit und ermöglicht es Entwicklern, sich auf das zu konzentrieren, was ihnen Spaß macht, nämlich coole Sachen zu entwickeln, anstatt kleine Seitenanpassungen vorzunehmen.
Ebenso können Seiten auf einer Website unterschiedliche strukturelle Anforderungen haben. Flexible Spalten geben Marketern die Kontrolle, diese Seiten mit benutzerdefinierten Modulen zu erstellen.
Sie können Ihren Drag-&-Drop-Vorlagen auf mehrere Arten benutzerdefinierten Code hinzuzufügen. Bei der primären Methode erfolgt dies über benutzerdefinierte Module. Manchmal müssen Sie jedoch möglicherweise Code hinzufügen, der um Module oder Gruppen gehüllt wird. Klicken Sie dazu auf das Modul oder die Gruppe, um sie im Inspektor anzuzeigen und das umhüllende HTML-Feld zu finden. Fügen Sie dort Ihren HTML hinzu.
Manchmal müssen Sie Code zum Header Ihres HTML oder Code direkt über dem </body> hinzufügen. Stellen Sie bei geöffneter Vorlage sicher, dass Sie nichts ausgewählt haben. Der Inspektor zeigt die Felder für die Vorlage selbst an. Hier können Sie Stylesheets und JavaScript-Dateien verlinken und gleichzeitig zusätzlichen HTML im Header oder kurz vor dem </body> -Tag hinzufügen.
Verwenden Sie dafür den Inspektor. Der Inspektor verfügt über Felder auf Vorlagenebene für Stylesheets, JavaScript, <head>-Markup usw.
Vielen Dank, dass Sie Ihr Feedback mit uns geteilt haben.