Demo: EBT Blöcke

25/05/2025, by Ivan

Mit EBT-Modulen können Sie ganz einfach Landing Pages einrichten, ohne Kenntnisse in HTML/CSS zu benötigen.

Einfache Nutzung mit Layout Builder und Drupal-Blöcken

EBT-Module erstellen Blocktypen, die Sie im Layout Builder verwenden können:

EBT Layout Builder

So können Sie mit wenigen Klicks neue Blöcke auf jeder Layout-Builder-Seite hinzufügen.

Hier finden Sie weitere Informationen zum Layout-Builder-Modul:

https://www.drupal.org/docs/8/core/modules/layout-builder

Block-Inhalt und Einstellungen

Im Block-Bearbeitungsformular finden Sie zwei Tabs: Inhalt und Einstellungen. Der Tab „Inhalt“ enthält Felder wie Titel, Texte, Bilder usw. Der Tab „Einstellungen“ enthält die allgemeinen EBT-Einstellungen „Designoptionen“, zum Beispiel DOM Box, sowie modulspezifische Einstellungen: JavaScript-Plugin-Einstellungen, vordefinierte Stile:

Drupal EBT Block Einstellungen

DOM Box: Abstände, Rahmen, Innenabstände

Jeder EBT-Block verfügt über DOM-Box-Einstellungen, um Abstände oberhalb und unterhalb des Blocks sowie Innenabstände innerhalb des Blocks festzulegen:

EBT Design Optionen

Sie können einen Rahmen nur für eine Seite, zwei Seiten oder alle Seiten festlegen. Vergessen Sie nicht, die Rahmengröße in der DOM Box einzugeben, andernfalls erscheint der Rahmen nicht.

Hintergrundfarbe, Bild oder Video

Alle EBT-Blocktypen verfügen über Hintergrund-Einstellungen. Unterstützt werden Hintergrundfarbe, Bilder und externe Videos basierend auf dem Media-Modul.

EBT Hintergrundbild

Experimentieren Sie mit der DOM Box, um die Blöcke ansprechender aussehen zu lassen, und versuchen Sie, zusätzliche Innenabstände, Abstände oder Rahmen hinzuzufügen. Hier ein Beispiel des EBT Accordion/FAQ-Moduls:
https://www.drupal.org/project/ebt_accordion

Hintergrundvideo

EBT-Blöcke unterstützen derzeit nur YouTube-Hintergrundvideos.

FAQ

Wo treffen sich Programmierer?

Im Stack-Overflow-Lounge.

Kannst du mir eine Programmier-Musiknote geben?

Im Feld Hintergrundbild-Stil können Sie das Verhalten für das Hintergrundbild auswählen. Wenn Ihr Bild zu klein ist, versuchen Sie, „Cover“ oder „Parallax“ auszuwählen, um das Hintergrundbild an den gesamten Block anzupassen:

Hintergrundbild-Stil

Edge-to-Edge-Blöcke

Sehr oft benötigen wir auf Landing Pages einen vollflächigen Hintergrund und zentrierten Inhalt. In den EBT-Einstellungen gibt es ein Kontrollkästchen „Edge to Edge“, um den Block auf volle Breite des äußeren Containers zu setzen:
Edge-to-Edge-Einstellung

Ergebnis:

FAQ

Was ist der Sinn des Lebens?

Was ist das beliebteste Programmierproblem?

Fehlendes Semikolon.

Welche zwei Wörter hat jeder Programmierer als Erstes gelernt zu programmieren?

„Hallo, Welt.“

Wo haben Programmierer gelernt zu programmieren?

An der Stackoverflow-Universität.

Was ist die goldene Regel in der Programmierung?

Wenn es funktioniert, rühr es nicht an.

Container Max Width hilft, die Breite des Inhalts innerhalb Ihres Edge-to-Edge-Blocks anzupassen. Da wir den Block auf volle Breite setzen, müssen wir die Breite für den Text festlegen, manchmal haben verschiedene Blöcke unterschiedliche Breiten. Sie können die Werte für die Klassen der Container Max Width ändern. Standardmäßig bietet EBT folgende Container-Breiten:

Auto (100%) - volle Breite für den Text-Container
xxSmall - 280px
xSmall - 480px
Small - 780px
Default - 960px
Large - 1120px
xLarge - 1320
xxLarge - 1600

Vordefinierte Stile

In der Regel verfügen EBT-Module über eine Reihe von vordefinierten Stilen. Dies hilft, Zeit beim Stylen neuer Komponenten auf Ihrer Landing Page zu sparen. Sie können auch eigene Stile erstellen und diese dem EBT-Modul hinzufügen.

Vordefinierte Stile

Ergebnis:

FAQ

Als Programmierer, wo sehen Sie sich in 10 Jahren?

Vor einem Computer sitzend, wahrscheinlich beim Programmieren.

Kannst du das Leben von Programmierern in vier Worten zusammenfassen?

Essen. Schlafen. Coden. Wiederholen.

Wie genießen Programmierer das Leben?

Wenn sie sehen, dass ihr Code fehlerfrei läuft.

Was ist die größte Lüge in der Computerprogrammierung?

HTML ist eine Programmiersprache.

Vordefinierte Stile passen wahrscheinlich nicht zu Ihrer Website, daher können Sie sie in Ihrem benutzerdefinierten Theme überschreiben. Wenn Sie einen Fehler gefunden haben oder eine Verbesserung für Stile oder die Funktionalität von EBT-Modulen vorschlagen möchten, können Sie gerne ein Ticket auf drupal.org für das jeweilige EBT-Modul eröffnen.