Demo: EBT Blocks

Using EBT modules you can easily set up landing pages without any HTML/CSS knowledge.

Easy to use with Layout Builder and Drupal blocks

EBT modules create block types which you can use in Layout Builder:

So you can add new block in few click on any layout builder page.

Here is more information about Layout Builder module:

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

Block Content and Settings

On block edit form you will find two tabs Content and Settings. Content tab contains fields: Titles, texts, images, etc. Settings tab contains EBT common settings "Design Options", for example DOM Box, and module specific settings: javascript plugin settings, predefined styles:

DOM Box: margins, borders, paddings

Each EBT block has DOM Box settings to set up gaps below and above the block and paddings inside the block:

You can set border only for one side, two sides or all sides. Don't forget to type border size in DOM Box, without it border will not appear.

Background color, image or video

All EBT block types have background settings. It supports background color, images and remote videos based on Media module. 

Play around with DOM Box to get blocks looking better, try to add additional paddings, margins or border. Here is an example of EBT Accordion/FAQ module:
https://www.drupal.org/project/ebt_accordion

In the Background Image Style field, you can choose how the background image behaves. If your image is too small, try selecting "Cover" or "Parallax" so the background image fills the entire block:

Edge to Edge blocks

Very often on landing pages, it's necessary to use a full-width background while centering the content. In the EBT settings, there is a checkbox called "Edge to Edge" that makes the outer container of the block span the full width:

Container Max Width helps configure the width of the content within a block that uses the Edge to Edge option. Since the block stretches to full width, it's necessary to define the width for the text — sometimes this varies between blocks. You can modify the values of the Container Max Width classes; by default, EBT offers the following container width options:

• Auto (100%) — Full width for the text container
• xxSmall — 280px
• xSmall — 480px
• Small — 780px
• Default — 960px
• Large — 1120px
• xLarge — 1320
• xxLarge — 1600

Predefined styles

EBT modules usually include a set of predefined styles. This helps save time when styling a new component on your landing page. You can also create your own style and add it to the EBT module.

Customizable JavaScript plugins

Some EBT modules, such as EBT Slideshow, use JavaScript plugins:
https://www.drupal.org/project/ebt_slideshow

You can customize this JavaScript plugin to suit your needs:

Multiple slides — carousel mode:

Result:

Slideshow - carousel mode

Thank you for using EBT module! I will be glad for any ideas for EBT modules:

Create an issue on Drupal.org

Contact EBT modules developer

Or message me on LinkedIn