Contact Us

What can we do for you?

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
7 + 12 = Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.

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 changing the ALT attribute of each image. Appending "2x2" makes the picture 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.

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.

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.

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.

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.

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

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.

Main Title

0
Lorem Imsum
0
Dolor Sit
0
Amet Consectetur
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.

0
Lorem Imsum

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.

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.

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.

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.

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.