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.

Text With Background Paragraph

Droopler Documentation

Full Example

This paragraph is almost the same as 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.

Abstract background
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

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.

Contact

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.

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

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.

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.

Sidebar Embed Paragraph

Droopler Documentation

Full Example

If you need to insert some external iframe to your website, use Side Embed Paragraph. It is perfect for maps and videos. Below you can a fully responsive Google Maps widget. It stretches when you resize the browser window.

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.

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.

Full-Width Example

There is a "Full width" layout available. It spans the embed 100% width and pulls the description to the left. If you select the "Invert colors" option, the text background becomes white.

Droopler

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.

YouTube Example

Side Embed can contain a video from YouTube, Dailymotion, and other providers. Just copy the iframe code to Droopler. The responsiveness of the video depends on its source, as you can see below, Youtube embeds do not stretch in the container. Instead, they get black borders.

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.

Tiles Paragraphs

Droopler Documentation

Full Gallery & Side Tiles Example

The Tiles Paragraphs utilize Masonry to deliver an excellent gallery experience. All images get arranged to fit the screen width. You can manipulate the display by paragraph settings field. You can choose number of pictures which should be two times larger than the others. The "/" character separates the title and subtitle. Below there are four paragraphs - two Tile Galleries and two Side Tiles.

Droopler

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.

Main Title

Lorem ipsum dolor sit amet.

Main Title

Curabitur consectetur nec ante ac ornare.

Droopler

Main Title

Lorem ipsum dolor sit amet.

Reference Content Paragraph

Droopler Documentation

Basic Example

This paragraph allows you to show a list of content. By default, you can see the latest blog post. If you want to show some other nodes, you can select them in the edit form.

Droopler

Example Blog Posts

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.

Reference content

Side By Side Paragraph

Droopler Documentation

Full Example

This paragraph allows you put two pieces of content next to each other. See below examples to explore its features.

Abstract background

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.

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.

Buildings

For investors

Loading...
 
Workers

Career