Demo: EPT Paragraphs

17/09/2023, by Ivan

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

Easy to use with Paragraphs

EBT modules create paragraph types which you can use in Paragraph fields:

Create EPT Paragraphs

So you can add new paragraph in few click on the page.

Here is more information about Paragraph module:

https://www.drupal.org/docs/contributed-modules/paragraphs

Paragraph Content and Settings

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

EPT Design Options

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:

Drupal EPT DOM Box

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 EPT paragraph 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 EPT Accordion/FAQ module:
https://www.drupal.org/project/ebt_accordion

Background Video

EPT modules support only YouTube background videos for now.

Где собираются программисты?

В лаунже Stack Overflow.

Можешь дать мне музыкальную ноту для программирования?

В поле Background Image Style вы можете выбрать поведение фонового изображения. Если ваше изображение слишком маленькое, попробуйте выбрать "Cover" или "Parallax", чтобы фоновое изображение занимало весь параграф:

Параграфы во всю ширину (Edge to Edge)

Очень часто на лендингах нужно использовать фон на всю ширину и при этом центрировать содержимое. В настройках EBT есть флажок "Edge to Edge", который делает внешний контейнер параграфа на всю ширину:

Каков смысл жизни?

Какая самая популярная задача по программированию?

Пропущена точка с запятой.

Какие два слова каждый программист учится кодировать первым?

Привет, Мир!

Где программисты учились программировать?

В Университете Stackoverflow.

Какое золотое правило в программировании?

Если работает — не трогай.

Container Max Width помогает настроить ширину содержимого внутри блока с опцией Edge to Edge. Так как блок растягивается на всю ширину, необходимо задать ширину для текста — иногда она разная для разных блоков. Вы можете изменить значения классов Container Max Width, по умолчанию EBT предлагает следующие варианты ширины контейнеров:

Auto (100%) — Полная ширина для текстового контейнера
xxSmall — 280px
xSmall — 480px
Small — 780px
Default — 960px
Large — 1120px
xLarge — 1320
xxLarge — 1600

Предустановленные стили

Обычно модули EBT содержат набор предустановленных стилей. Это помогает сэкономить время на стилизацию нового компонента на вашей лендинговой странице. Вы также можете создать собственный стиль и добавить его в модуль EBT.