Skip to main content

Carousel Paragraph

Carousel Paragraph

Droopler Documentation

Full Example

Carousel Paragraph is another type of list. The items are sliding from right to left, one by one. You decide how many items are visible. Below you can see a full version of the carousel. With icon, description and fully equipped boxes.

Logos Example

The Carousel is perfect for presenting a sliding list of logotypes. If you organize an event with the help of sponsors or cooperate with a lot of partners, you usually want to honor them on your website. Of course, you can wrap each item with a hyperlink.

Opinions Example

Does only one item in the Carousel make sense at all? Of course! With one piece of content visible at the time, you can build a list of testimonials. The image field serves as a person's photo, and the description field holds the opinion.

Columns Example

What if you want four columns in the row in a carousel with precisely four items? There would be nothing to slide! Droopler is prepared for such edge cases. It automatically decreases column count to show a list as a slider. Look at the example below. There are four items in four columns, automatically fitted into three columns.

Full Width With Divider Example

Choose the "With dividers" option to add a vertical border to all items. The background becomes dark, the text is white now. Choose the "Full width" option to span the paragraph 100% width.

Gallery Paragraph

Gallery Paragraph

Droopler Documentation

Full Example

The Gallery Paragraph is a significant part of Droopler. It allows you to arrange your images as thumbnails and show their full version on click. It is possible to add an icon and some description. The perfect number of items is 12. Why? On a desktop, there are four images in the row, on a tablet - three, on horizontal mobile - two and one for the smaller screens.

Basic Example

Let's simplify the gallery. It looks cool also without the icon and the description. Please notice that a smaller amount of items does not look nice on lower resolutions.

Counters Paragraph

Counters Paragraph

Droopler Documentation

Full Example

This type of paragraph is popular on the company's websites. It contains some significant numbers on the background of your choice. The mask is put on an image to improve readability. You may use the icon above the title to enhance the visual effect.

Buildings

Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.

Bag icon
0
Lorem Imsum
Boat icon
0
Dolor Sit
Car icon
0
Amet Consectetur
Settings icon
0
Adipiscing Elit

Basic Example

The title and the icon are not necessary at all. What's more, you don't need a lot of counters. Even one will work fine. Just see the most basic version below.

Abstract Background
0
Lorem Imsum

Text Paragraph

Text Paragraph

Droopler Documentation

Full Example

The full version of the Text Paragraph looks complex. It has many possibilities. You can extend the content by adding a header, subheader, and icon (including SVG support). You are also able to format the text in any way allowed by CKEditor.

Droopler

Main Title

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.

Basic Example

Sometimes you don't need all the power available for Paragraphs. If you want to create a section with bare text - omit the headers and icon. Adding some formatting is a great idea to make everything more comfortable to read.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.

Aenean et purus eget sapien laoreet consectetur eu eget leo. Mauris enim felis, pharetra et odio quis, ultricies maximus nunc. Ut ac justo bibendum, commodo elit in, imperdiet lectus. Quisque justo felis, placerat a lacinia sit amet, posuere quis metus. Fusce egestas tincidunt nulla ut faucibus. Sed vehicula libero lectus, et volutpat quam dignissim at. Aliquam erat volutpat. Duis nunc massa, finibus a sapien sit amet, sagittis aliquet est. Etiam eget sapien massa.

Full Example With Background

This paragraph is the same Text Paragraph. There is one, noticeable difference - the background. When you upload an image, Droopler puts a white mask on it to make text easier to read. All font colors are dark to increase the contrast. Look at this full-featured example.

Architecture
Droopler

Main Title

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.

Basic Example With Background

A bare text looks excellent when we display it on an image background. If you choose a right photo with noticeable contrast, the result is very professional. The white mask has high opacity and ensures readability.

Architecture

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.

Aenean et purus eget sapien laoreet consectetur eu eget leo. Mauris enim felis, pharetra et odio quis, ultricies maximus nunc. Ut ac justo bibendum, commodo elit in, imperdiet lectus. Quisque justo felis, placerat a lacinia sit amet, posuere quis metus. Fusce egestas tincidunt nulla ut faucibus. Sed vehicula libero lectus, et volutpat quam dignissim at. Aliquam erat volutpat. Duis nunc massa, finibus a sapien sit amet, sagittis aliquet est. Etiam eget sapien massa.

Aliquam pharetra diam sed nulla tempus interdum. Cras eu elit blandit, ultricies ante at, tincidunt augue. Maecenas vitae condimentum enim, eu venenatis lectus. Aliquam erat volutpat. Nullam consectetur, eros in tristique commodo, massa dolor egestas purus, nec mollis lectus nisl id nisl. Nam et purus hendrerit, molestie odio quis, facilisis nibh. Donec luctus, enim sed posuere ullamcorper, arcu ante gravida turpis, nec maximus tellus ante eu quam. Fusce scelerisque libero sapien, nec suscipit augue elementum ac.

Subscribe for File Paragraph

Subscribe File Paragraph

Droopler Documentation

Full Example

The Subscribe File Paragraph can come in handy when you need to share some file in exchange for user's email. It contains three separate elements - the Paragraph itself (visible below), the email (sent to the user after submitting the form) and the download page. See how the full-featured version looks like.

Engine overhaul

Main Title

Body text like: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.

Additional info like: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.

Basic Example

There are lots of ways of configuring Subscribe File Paragraph. See how it looks in the simplest version, with just some form controls.

Buildings

Sidebar Image Paragraph

Sidebar Image Paragraph

Droopler Documentation

Full Example

This paragraph is one of the most interesting visual features of Droopler. It allows you to put an image to a side, and fill the rest with text. There's a possibility to use a header, icon and CTA link.

Event 3

Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.

Basic Example

Side Image Paragraph does not need all those complicated fields around the text. Use it with only a header and see that it is an excellent way to create feature lists.

Engine

Main Title

Let's put it together!

So now... Let's put the paragraphs together, with image side changing from right to left. This layout is the most used method of displaying this Side Image element of Droopler.

You can enable the "Invert theme" options to alter the look of this paragraph. You can change the background to a light one and the font color will turn dark. See the last example.

Engine Car

Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.

Engine boat

Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.

For aircrafts

Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.

For spacecrafts

Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.

Wide Example

There is a higher version available, with a wider image. If you select the "Right (wide)" or "Left (wide)" side of the image, the paragraph looks like this:

Engine overhaul

Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.

Boat

Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum mi elit, id commodo ligula viverra vitae. Aliquam lorem diam, lobortis at ante et, gravida blandit enim. Ut bibendum egestas sem. Nulla porttitor lorem in erat maximus, id vulputate est auctor. Curabitur consectetur nec ante ac ornare. Nam aliquam elit ex. Nam feugiat nulla pulvinar nunc commodo, eget faucibus mauris egestas.

Text Blocks Paragraph

Text Blocks Paragraph

Droopler Documentation

Full Example

This paragraph is a typical component of every company website. You can use it to list some features or present a list of guest/sponsors at your event. Each item gets its title, icon, description and CTA button. So many possibilities!

Droopler

Main Title

Car icon

Box Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.

Boat icon

Box Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.

Aircraft icon

Box Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.

Car icon

Box Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.

Boat icon

Box Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.

Aircraft icon

Box Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.

Basic Example

Here you can see a simpler version of Text Blocks Paragraph. There are no icons or CTAs. It looks clean. Have you noticed an increased number of columns? With Droopler you can choose how many columns you want to have in one row (1-12).

Main Title

Box Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.

Box Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.

Box Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.

Box Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.

Theme Invert and Full Width Example

Choose the "Invert theme" option to invert all paragraph colors. The background becomes dark, the text is white now. Choose the "Full width" option to span the paragraph 100% width.

Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.

Box Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.

Box Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.

Box Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.

Box Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.

Nodes in Grid Example

This paragraph accepts not only text blocks. You can put a node inside it. Check the "Enable grid" option to put everything into a grid.

Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida.

Tiles Example

You can convert all paragraph items to clickable tiles with an image background. In this example, we enabled the "Paragraph header in two columns" option.

Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida. Duis tristique sem non interdum ultricies.

Form Paragraph

Form Paragraph

Droopler Documentation

Full Example

With Droopler you can put almost every form into a Paragraph. Such form has a modern, Bootstrap 4 layout and an image background. You can also add some title and an optional icon. See the example below.

Investors

Main Title

Alternative Layout Example:

You can choose an alternative layout for the form. Try changing the layout from "Bottom" to "Right". The title and description will go to the left column and the form itself will go to the right..

Architecture

Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida. Duis tristique sem non interdum ultricies.

Block Paragraph

Block Paragraph

Droopler Documentation

Example #1

Plugin Block

There are times, creating pages using paragraphs, we need to embed a block with views result, or some custom block. In that kind of situation with help comes Block Paragraph. You can use it to embed any block that can be placed in the Block Layout, so it gives us quite a lot of possibilities.

Below we have an example of embedding a block with Social Icons - the same block is also placed in our footer, just the title of the block is overwritten here.

Social Media Block

Example #2

Content Block with Paragraphs

Quite often you probably noticed, that there is a common content shared between multiple subpages. Let's think for example of "Our Partners" section or "Contact us" banner. Instead of adding identical paragraphs over again, you could create Content Block with that paragraph and embed it in all pages using Block Paragraph like we did bellow.

Banner Paragraph

Banner Paragraph

Droopler Documentation

Full Example

This version of the Banner Paragraph includes everything literally. There is the main title with a smaller subtitle, an SVG icon above, some longer body text and a big CTA button. The image below adapts to the screen thanks to Backstretch JS library. This paragraph looks excellent when used as a first one, directly below site navigation.

Car Engine Centurion

Main Title

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida. Duis tristique sem non interdum ultricies. Nunc vitae viverra lacus. Vivamus vel mollis nisi. Sed ut fermentum lorem. Vestibulum non accumsan eros, sit amet tempus ex.

Basic Example

Do you prefer minimalism over complexity? Remember that only header and image fields are mandatory. You can drop all those icons, subtitles, long texts and CTAs. Sticking to a straightforward version is ok. It still looks nice.

Contact

Main Title

Half-transparent Example:

You can alter the banner entirely by applying a "half-transparent" option. It adds an overlay over the image and pulls the text into the left side. An additional "theme invert" option makes the text black.

Architecture

Main Title

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus tristique dui dignissim gravida. Duis tristique sem non interdum ultricies. Nunc vitae viverra lacus. Vivamus vel mollis nisi. Sed ut fermentum lorem. Vestibulum non accumsan eros, sit amet tempus ex.