Canvas Palette: Eine fertige Komponentenbibliothek für Drupal Canvas

Canvas Palette ist ein Drupal-Modul, das Drupal Canvas um eine Sammlung fertiger visueller Komponenten erweitert. Damit lassen sich moderne Webseiten erstellen, ohne eigenen Code schreiben zu müssen.

Das Modul richtet sich vor allem an Site Builder, Redakteure und Entwickler, die eine komfortable visuelle Möglichkeit benötigen, Seiten aus vorgefertigten Elementen zusammenzustellen: Sektionen, Spalten, Buttons, Bilder, Videos, Galerien, Tabs, Akkordeons, Slider und vieles mehr.

Canvas Palette auf Drupal.org:

https://www.drupal.org/project/canvas_palette

Live-Demo:

https://drupalbook.org/canvas/editor/canvas_page/4

Canvas Palette Demo:

https://drupalbook.org/canvas-palette/demo

Was ist Canvas Palette?

Drupal Canvas bietet einen visuellen Ansatz für die Erstellung von Webseiten. Ein visueller Editor benötigt jedoch eine gute Sammlung von Komponenten, aus denen sich reale Webseiten erstellen lassen.

Canvas Palette löst dieses Problem mit einer Sammlung von Single Directory Components (SDC), die mit Canvas kompatibel sind.

Jede Komponente ist eine reguläre SDC-Komponente. Interaktive Elemente verwenden leichtgewichtiges JavaScript und können direkt in der Seitenvorschau bearbeitet werden.

Die Idee hinter dem Modul ist einfach:

Nicht jedes Seitenelement von Grund auf neu erstellen, sondern Seiten direkt im visuellen Editor aus fertigen Komponenten zusammenstellen.

Das ist besonders praktisch für Landingpages, Marketing-Websites, Unternehmenswebsites, Dokumentationen und redaktionelle Projekte, bei denen Inhalte modern aussehen und gleichzeitig einem einheitlichen Designsystem folgen sollen.

Warum Canvas Palette verwenden?

Mit Drupal können Entwickler nahezu jede gewünschte Inhaltsstruktur erstellen. Die visuelle Gestaltung einer Seite erfordert jedoch häufig zusätzliche Arbeit: Komponenten, CSS, JavaScript, Paragraph Types oder eigene Templates müssen erstellt werden.

Canvas Palette verlagert einen großen Teil dieser Arbeit in den visuellen Editor.

Redakteure können:

• eine Sektion hinzufügen
• die Anzahl der Spalten auswählen
• Text hinzufügen
• ein Bild oder Video platzieren
• einen CTA-Block erstellen
• Buttons hinzufügen
• eine Bildergalerie erstellen
• Tabs oder ein Accordion hinzufügen
• einen Carousel oder Slider erstellen
• eine bestehende View anzeigen
• ein Webform einfügen

Dabei ist es nicht notwendig, für jedes dieser Elemente einen eigenen Paragraph Type zu erstellen.

In diesem Sinne ist Canvas Palette eine Bibliothek von Bausteinen für Drupal Canvas.

Welche Komponenten sind enthalten?

Canvas Palette umfasst derzeit Komponenten aus mehreren wichtigen Kategorien.

Design & Layout

Grundlegende Komponenten für den Aufbau einer Seite:

• Section — eine universelle Sektion bzw. ein Container
• Columns — ein responsives Mehrspalten-Layout
• Text — Überschriften und formatierter Text

Buttons & Calls to Action

Komponenten für Buttons und Call-to-Action-Elemente:

• Basic Button — ein konfigurierbarer Button
• CTA — ein Block mit einem Bild und bis zu zwei Buttons
• Hero — ein großer Banner mit Überschrift, Bild und Buttons
• Modal Dialog — ein Button, der ein modales Fenster öffnet
• Webform Popup — ein Button, der ein bestehendes Webform in einem Popup öffnet

Mit Basic Button lassen sich beispielsweise Link, Farben, Hover-Farbe, Form, Größe und Ausrichtung des Buttons konfigurieren.

Medien

Komponenten für Bilder und Videos:

• Image
• Images
• Image Gallery
• Video
• Video Gallery

Image Gallery kann Bilder in GLightbox öffnen. Video Gallery unterstützt sowohl lokale Videos als auch externe Quellen wie YouTube, Vimeo und MP4.

Interaktive Komponenten & Slider

Für interaktive Inhalte stehen unter anderem folgende Komponenten zur Verfügung:

• Accordion
• Tabs
• Carousel
• Slider
• Sticky Menu

Tabs verwenden eine eigene Implementierung ohne jQuery. Der Slider basiert auf Splide, während Carousel tiny-slider verwendet.

Damit lassen sich interaktive Elemente erstellen, ohne umfangreiche JavaScript-Frameworks einzuführen.

Content & Data

Komponenten zur Darstellung von Inhalten und Daten:

• Quote
• Stats
• Counter
• Countdown
• Tiles
• Timeline

Mit Counter lassen sich beispielsweise animierte Zähler erstellen, während Timeline eine vertikale Zeitleiste für Ereignisse bereitstellt.

Drupal-Integration

Canvas Palette kann auch mit bereits vorhandenen Drupal-Inhalten arbeiten:

• Webform — ein bestehendes Formular auswählen und einfügen
• Views — eine bestehende View anzeigen und Argumente übergeben