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. 

Image

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.

Where do programmers hangout?

At Stack Overflow lounge.

Can you give me a programming music note?

C#

 In Background Image Style field you can select behaviour for image background, if your image too small, try to select "Cover" or "Parallax" to fit bg image in entire paragraph:

Image
Parallax background image

Edge to Edge paragraphs

Very often in Landing pages we need to have full width background and centered content. In EBT settings you have "Edge to Edge" check box to make paragraph full width outer container:

Image
Edge to edge paragraph

What is the meaning of life?

42

Missing a Semicolon.

“Hello, world.”

At Stackoverflow University.

If it works, don't touch it.

Container Max Width helps to adjust width for content inside you Edge to Edge block. As we fit block full width we need to set width for text, sometimes we have different width for different blocks. You can change values for Container Max Width classes, by default EBT provides next container widths:

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

Predefined styles

Usually EBT modules have bunch of predefined styles. It helps to save time for styling new component in your landing page. You also can create own style and add it to EBT module.

Image
Styles

Result:

As a programmer, where do you see yourself 10 years from now?

Sitting in front of a computer, probably programming.

Can you summarize the life of programmers in four words?

Eat. Sleep. Code. Repeat.

How do programmers enjoy life?

When they see their codes run without error.

What is the biggest lie in computer programming?

HTML is a programming language.

Custumizable javascript plugins

Some EPT modules like EPT Slideshow use javascript plugins:
https://www.drupal.org/project/ept_slideshow

You can adjust this javascript plugin for your needs:

Image

 

One slide mode:

Jane Doe

Jane Doe

Girl 3

Jane Doe

John Doe

John Doe

Multiple slides - carousel mode:

Image
EPT Slideshow settings
Image
Carousel settings
Jane Doe

Jane Doe

Girl 3

Jane Doe

John Doe

John Doe

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

Create an issue on Drupal.org

Ask question

Send message on LinkedIn