Demo: EBT-blokken

28/09/2025, by Ivan

Met behulp van EBT-modules kun je eenvoudig landingspagina’s opzetten zonder enige kennis van HTML/CSS.

Eenvoudig te gebruiken met Layout Builder en Drupal-blokken

EBT-modules maken bloktypes aan die je kunt gebruiken in Layout Builder:

EBT Layout Builder

Zo kun je met een paar klikken een nieuw blok toevoegen op elke Layout Builder-pagina.

Hier vind je meer informatie over de Layout Builder-module:

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

Blokinhoud en instellingen

Op het blokbewerkingsformulier vind je twee tabbladen: Inhoud en Instellingen. Het tabblad Inhoud bevat velden zoals titels, teksten, afbeeldingen, enz. Het tabblad Instellingen bevat de gemeenschappelijke EBT-instellingen "Ontwerpopties", bijvoorbeeld DOM Box, en modulespecifieke instellingen: instellingen voor javascript-plugins, vooraf gedefinieerde stijlen:

Drupal EBT block settings

DOM Box: marges, randen, opvullingen

Elk EBT-blok heeft DOM Box-instellingen om de ruimte boven en onder het blok en de opvullingen binnenin het blok in te stellen:

EBT Design Options

Je kunt een rand instellen voor slechts één zijde, twee zijden of alle zijden. Vergeet niet de randdikte in te vullen in de DOM Box, anders verschijnt er geen rand.

Achtergrondkleur, afbeelding of video

Alle EBT-bloktypes hebben achtergrondinstellingen. Ze ondersteunen achtergrondkleuren, afbeeldingen en externe video’s op basis van de Media-module.

EBT background image

Experimenteer met de DOM Box om de blokken er beter uit te laten zien, probeer extra opvullingen, marges of randen toe te voegen. Hier is een voorbeeld van de EBT Accordion/FAQ-module:
https://www.drupal.org/project/ebt_accordion

Achtergrondvideo

EBT-blokken ondersteunen momenteel alleen YouTube-achtergrondvideo’s.

FAQ

Waar komen programmeurs samen?

In de lounge van Stack Overflow.

Kun je me een programmeermuzieknoot geven?

In het veld Achtergrondafbeeldingsstijl kun je het gedrag van de achtergrondafbeelding selecteren. Als je afbeelding te klein is, probeer dan "Cover" of "Parallax" te kiezen om de achtergrondafbeelding over het hele blok passend te maken:

Achtergrondafbeeldingsstijl

Edge to Edge-blokken

Heel vaak hebben we op landingspagina’s een volledige breedte-achtergrond nodig met gecentreerde inhoud. In de EBT-instellingen heb je de optie "Edge to Edge" om het blok de volledige breedte van de buitenste container te geven:
Edge to Edge-instelling

Resultaat:

FAQ

Wat is de betekenis van het leven?

Wat is het populairste programmeerprobleem?

Een puntkomma ontbreekt.

Welke twee woorden heeft elke programmeur als eerste leren coderen?

"Hallo, wereld."

Waar hebben programmeurs leren programmeren?

Aan de Stackoverflow-universiteit.

Wat is de gouden regel in programmeren?

Als het werkt, niet aankomen.

Container Max Width helpt om de breedte van de inhoud binnen je Edge to Edge-blok aan te passen. Omdat we het blok over de volle breedte laten lopen, moeten we de breedte voor tekst instellen; soms hebben we verschillende breedtes voor verschillende blokken. Je kunt de waarden voor Container Max Width-klassen aanpassen; standaard biedt EBT de volgende containerbreedtes:

Auto (100%) - Volledige breedte voor tekstcontainer
xxSmall - 280px
xSmall - 480px
Small - 780px
Default - 960px
Large - 1120px
xLarge - 1320
xxLarge - 1600

Vooraf gedefinieerde stijlen

Meestal hebben EBT-modules een reeks vooraf gedefinieerde stijlen. Dit helpt om tijd te besparen bij het stijlen van een nieuw component op je landingspagina. Je kunt ook je eigen stijl maken en deze toevoegen aan een EBT-module.

Predefined styles

Resultaat:

FAQ

Als programmeur, waar zie je jezelf over 10 jaar?

Zittend voor een computer, waarschijnlijk aan het programmeren.

Kun je het leven van programmeurs in vier woorden samenvatten?

Eten. Slapen. Coderen. Herhalen.

Hoe genieten programmeurs van het leven?

Wanneer ze zien dat hun code zonder fouten draait.

Wat is de grootste leugen in computerprogrammering?

HTML is een programmeertaal.

Vooraf gedefinieerde stijlen passen waarschijnlijk niet goed bij jouw site, dus je kunt ze overschrijven in een aangepast thema. Als je een bug hebt gevonden of een verbetering wilt voorstellen voor stijlen of de functionaliteit van EBT-modules, open dan gerust een ticket op drupal.org voor de specifieke EBT-module.