Drag-&-Drop-Bereiche
Diese Seite illustriert und erklärt die dnd_area-Erfahrung und Konzepte. Da dies eine ziemlich umfassende Erfahrung ist, empfiehlt es sich, sich mit ihr vertraut zu machen, bevor man in den Code eintaucht.
Wenn Sie bereit zum Entwickeln sind, finden Sie unter Erste Schritte mit Drag-&-Drop-Bereichen und in der Referenz für Drag-&-Drop-Bereichen weitere Informationen.
Mithilfe von Drag-&-Drop-Bereichen können Entwickler Seitenbereiche und globale Teilvorlagen erstellen, die das Erstellen von Inhalten erleichtern. Drag-&-Drop-Bereiche ermöglichen Content-Autoren das Platzieren von Modulen, das Ändern von Layout und Formatieren mit einigen Stilen innerhalb der Content-Editoren. Auf diese Weise sind weniger Vorlagen notwendig, mit denen Content-Autoren eine Vielzahl von Seiten mit unterschiedlichen Zwecken und Layouts selbst erstellen können. Content-Autoren können dies tun, ohne jemals mit Code herumfummeln zu müssen oder neue Vorlagen für kleine Layoutänderungen zu benötigen. Da sie so flexibel und nützlich sind, ist es eine gute Idee, mindestens eine Vorlage in Ihrem Design mit Drag-&-Drop-Bereichen zu versehen.
Bitte beachten: Drag-&-Drop-Bereiche können derzeit nicht in Blog-Beitragsvorlagen und E-Mail-Vorlagen verwendet werden.
Wenn ein Content-Autor eine Seite mit einer Vorlage erstellt, die über Drag-&-Drop-Bereiche verfügt, sieht er zunächst die Seite mit vordefinierten Modulen, die vom Entwickler in einem Layout platziert wurden. Dies hilft dem Content-Autor zu verstehen, wie die meisten Seiten, die diese Vorlage verwenden, optisch aussehen sollten oder wahrscheinlich aussehen. Dies ist ein Ausgangspunkt, jedoch kein feststehendes Erscheinungsbild. Der Content-Autor kann Module, Abschnitte, Zeilen und Spalten durch Ziehen und Ablegen neu anordnen. Er kann ihre Größe ändern, ihren Inhalt bearbeiten und verschiedene visuelle Styling-Einstellungen anpassen, mit denen er Inhalte vertikal und horizontal ausrichten und Hintergründe hinzufügen kann.
Für Content-Autoren bedeutet dies eine Menge Kontrollmöglichkeiten. Dies gibt ihm genügend Flexibilität, um einfache Änderungen an der Seite vorzunehmen, ohne dass er einen Entwickler für kleine Anpassungen bemühen muss.
Bitte beachten Sie: Ein Content-Autor kann die Vorlage einer Seite gegen eine andere Vorlage desselben Typs austauschen, je nachdem, ob sie dnd_area-Tags enthält.
- Mit dem visuellen Drag-&-Drop-Layout-Editor erstellte Vorlagen können gegen andere Drag-&-Drop-Vorlagen oder Code-Vorlagen mit oder ohne
dnd_area-Tags ausgetauscht werden. - Code-Vorlagen mit dnd_area-Tags können nur gegen andere Code-Vorlagen mit
dnd_area-Tags ausgetauscht werden. - Code-Vorlagen ohne
dnd_area--Tags können nur gegen andere Code-Vorlagen ohnednd_area-Tags ausgetauscht werden.
Für Entwickler ist die Arbeit mit Drag-&-Drop-Bereichen ein wenig ähnlich wie die Arbeit mit gängigen CSS-Frameworks und deren Rastern. Die Entwickler gestalten die Seite mit Containern, die Abschnitte genannt werden und Zeilen enthalten. Innerhalb dieser Zeilen befinden sich Module und Spalten. Nahezu alles, was Content-Autoren im Seiten-Editor mit Drag-&-Drop-Bereich-Tags tun können, können Entwickler im Code in den Vorlagen selbst tun. Was die Entwickler erstellen, ist der Standardinhalt für Seiten, die diese Vorlage verwenden.
Der Vorteil der Verwendung von Drag-&-Drop-Bereichen gegenüber der festen Programmierung von Modul-Tags in die Vorlage besteht darin, dass Content-Autoren den Inhalt und das Layout innerhalb dieser Bereiche ändern können. Aufgrund dieser Flexibilität kann eine einzige Vorlage mit Drag-&-Drop-Bereichen für eine Vielzahl von Seitendesigns verwendet werden.
Sehen Sie sich die CMS-Theme-Boilerplate-Vorlagen an, um Anwendungsbeispiele für dnd_area-Tags anzuzeigen.
Drag-&-Drop-Bereiche bestehen aus einer Handvoll Grundbausteine, die das Layout definieren und die Flexibilität bei der Gestaltung der Ausrichtung unterstützen. Das dnd_area-Tag erstellt einen Bereich in der Seite, der vom Seiten-Editor erkannt wird und das Hinzufügen, Entfernen und Neuanordnen von Drag-&-Drop-Elementen ermöglicht. Sie definieren diese mit HubL innerhalb von HTML+HubL-Vorlagen. Alle Drag-&-Drop-Elemente befinden sich in einem Drag-&-Drop-Bereich. Sie können keine Drag-&-Drop-Bereiche verschachteln, und Drag-&-Drop-Elemente können selbst keine Drag-&-Drop-Bereiche enthalten.
Für Entwickler ist es wichtig zu verstehen, dass der Inhalt des Drag-&-Drop-Bereichs, den Sie in der Vorlage definieren, ein Ausgangspunkt für Seiten ist, die diese Vorlage verwenden. Content-Autoren können den Inhalt innerhalb eines Drag-&-Drop-Bereichs vollständig ändern. Ihre Aufgabe ist es, ihnen einen vernünftigen Ausgangspunkt zu bieten, von dem aus sie Änderungen vornehmen können.
Dieses Diagramm zeigt, wie die verschiedenen Drag-&-Drop-Elemente verschachtelt werden können. Ein wichtiges Konzept ist, dass sowohl Abschnitte als auch Zeilen Spalten und Module enthalten können.
Abschnitte sind ein besonderer Typ von Zeile. Abschnitte werden in Vorlagen mit dem dnd_section-Tag erstellt. Sie sind das einzige Drag-&-Drop-Element, das ein direkter Abkömmling eines Drag-&-Drop-Bereichs sein kann. Sie können sich die Abschnitte wie ein Container mit äußerer Umhüllung vorstellen. Sie können den Inhalt in voller Breite oder mit einer begrenzten maximalen Breite in der Mitte anzeigen. Da die Abschnitte Spalten und Module umschließen, ist es einfach, große Teile des Inhalts neu anzuordnen und zu implementieren. Das dnd_section-Tag rendert kein HTML-<section>-Element.
Das Erscheinungsbild eines Abschnitts im Seiten-Editor.
Entwickler können Abschnittsvorlagen bereitstellen, die wiederverwendbare Abschnitte im Seiten-Editor erstellen. Dabei handelt es sich um vorkonfigurierte, vom Entwickler definierte Abschnitte, die Content-Autoren als Ausgangspunkt verwenden können. Wiederverwendbare Abschnitte haben einige einzigartige Fähigkeiten, einschließlich der Möglichkeit, sie ähnlich wie eine Standard-HubL-Teilvorlage zu nutzen.
Spalten sind Wrapper für Zeilen und Module. Sie platzieren Spalten innerhalb einer Zeile oder eines Abschnitts, der eine spezielle Zeile ist. Spalten werden in Vorlagen mithilfe des dnd_spalte-Tags erstellt.
Verwenden Sie mehrere Spalten innerhalb einer Zeile, um Zeilen und die darin enthaltenen Module horizontal zu platzieren.
Spalten sind vertikale Bereiche, die Zeilen enthalten können. Sie können Spalten in verschiedenen Größen erstellen, indem Sie ihre Breite ändern. Die Größe einer Zeile ist 12 „Spalten“ breit, dies bezieht sich auf das CSS Grid. Die Spalten innerhalb einer Zeile können beliebig kleiner als 12 sein, dürfen aber in der Summe nicht mehr als 12 ergeben.
Wenn mehrere Zeilen innerhalb einer Spalte platziert werden, erscheinen die Module innerhalb dieser Zeilen vertikal gestapelt. Da Module selbst Spalten sind, kann ein Modul kein direkter Abkömmling einer Spalte sein, sondern muss sich innerhalb einer Zeile befinden.
Das Erscheinungsbild einer Spalte im Seiten-Editor.
Zeilen sind Wrapper für Spalten. Zeilen werden in Vorlagen mithilfe des dnd_row-Tags erstellt. Da es sich bei den Modulen um Spalten handelt, können Sie sie direkt innerhalb einer Zeile platzieren. Dadurch werden die Module horizontal nebeneinander angezeigt.
Module können vertikal organisiert werden, indem sie innerhalb von Zeilen platziert werden. Wenn Sie ein Modul über einem anderen platzieren möchten, müssen Sie dieses Modul in einer Zeile platzieren. Sie würden dann ein weiteres Modul in einer Zeile über oder unter dieser ersten Zeile hinzufügen.
Das Erscheinungsbild einer Zeile im Seiten-Editor.
Module sind ein grundlegender Bestandteil von CMS Hub und dienen als wiederverwendbare Grundbausteine, mit denen Sie eine Website zusammenstellen und Inhalte anzeigen können. Bei der Erstellung einer Vorlage platzieren Sie Module innerhalb von Drag-&-Drop-Zeilen und -Abschnitten mithilfe des dnd_module-Tags. Module sind auch Spalten. Das heißt, wenn Sie zwei Modul-Tags oder ein Modul und eine Spalte direkt nebeneinander platzieren, werden sie horizontal nebeneinander angezeigt.
Innerhalb eines Moduls können keine Drag-&-Drop-Elemente platziert werden. Module können nicht direkte untergeordnete Elemente eines dnd_area sein.
Drag-&-Drop-Bereiche und ihre Elemente haben, wenn sie gerendert werden, Klassennamen für ein 12-Spalten-Raster auf der Grundlage von Bootstrap 2. Um den Einstieg zu erleichtern, können Sie die _layout.css-Datei aus der CMS Theme Boilerplate verwenden. Dies bietet Standardstile für diese Klassennamen.
Sie sind nicht verpflichtet, dieses Stylesheet zu verwenden und können stattdessen Ihre eigenen Styles bereitstellen. Wenn Sie Ihre Website auf der Grundlage der CMS Theme Boilerplate erstellen und Ihr eigenes CSS nutzen möchten, müssen Sie layout.css vom Aufruf in base.html entfernen. Für Ihr eigenes CSS Grid müssen Sie dieselben Rasterklassennamen verwenden, aber das Styling ist Ihnen überlassen.
Drag-&-Drop-Bereiche erstellen, wenn sie gerendert werden, Divs mit Klassen, die vom Seiten-Editor verwendet werden. Beispiele wären widget-span und widget-type-cell. Sie sollten diese Klassen nicht direkt anvisieren, da sie vom Seiten-Editor verwendet werden und sich in Zukunft ändern könnten.
Fügen Sie stattdessen in Ihrem dnd_area-HubL einen class-Parameter mit einem Klassennamen hinzu, den Sie verwenden möchten
Mit Drag-&-Drop-Bereichen können Content-Autoren das Styling der Seite beeinflussen. Sie können zum Beispiel einen Abschnitt mit einem Hintergrund versehen. Entwickler können Standardwerte für diese Einstellungen über Attribute übergeben.
Wenn die Seite tatsächlich gerendert wird, werden die Stile, die auf der Grundlage dieser Einstellungen generiert werden, zu den standard_header_includes hinzugefügt.
Beim Start von dnd_area wurden diese Stile von standard_footer_includes geladen. Das wurde vor kurzem geändert zu standard_header_includes und wird für alle HubSpot-Accounts mit CMS Hub eingeführt.
Wenn Sie Vorlagen, die mit flexiblen Spalten erstellt wurden, auf die Verwendung von Drag-&-Drop-Bereichen umstellen, sollten Sie einige Dinge beachten. Flexible Spalten sind nicht dasselbe wie Drag-&-Drop-Bereiche. Sie können nicht von einer Vorlage, die nur eine flexible Spalte hat, zu einer Vorlage wechseln, die nur einen Drag-&-Drop-Bereich hat. Aus Sicherheitsgründen erlauben wir dies nicht. Der Inhalt könnte in einem solchen Fall nicht von der flexiblen Spalte auf den Drag-&-Drop-Bereich übertragen werden. Zur Veranschaulichung, warum das so ist, nehmen wir an, Sie haben Ihre neue Vorlage so aufgebaut, dass Sie eine Seitenleiste und einen Hauptinhaltsbereich haben. Ihre Seitenleiste ist eine flexible Spalte, Ihr Hauptinhalt ist ein Drag-&-Drop-Bereich. Das Tool zum Austauschen würde die flexible Spalte auf die flexible Spalte übertragen.
Vielen Dank, dass Sie Ihr Feedback mit uns geteilt haben.