Brian Holden
Published: 3 Dec 2015

How to improve responsive page design in Drupal with 'Paragraphs'

Do you ever get sick of only having the designated fields and styles which were defined by your web designer when adding content? Drupal paragraphs is the answer.

So what is Drupal 'Paragraphs'?

Paragraphs is completely new method of adding content to a page in various styles. For example, you may have a blog post which is very text heavy and requires a two column layout or you may have only minimal text but need a full page image mixed in with your article... this is where paragraphs comes in.

Rather than just adding your text to the 'body' field and the big image to the 'image' field and then letting the layout of the page be decided by the designers templates, now you can choose from a range of totally customisable 'paragraphs'.

The best way to really show how this works is to actually use paragraphs for this blog post.

So the text you have just read was added to this blog post via a 'paragraph' I set up called SINGLE COLUMN... and hey presto the text is laid out in a single coloum.

Yet this text is now being added to another 'paragraph' which allows me to maybe add an important quote or statement.

But maybe you are thinking 'sure, that is nice... but I want to have my quote paragraph in a different colour'. Well by simply combining 'paragraphs' with another module called 'Field Formatter Class' you can not only choose to add a paragraph which allows the text to appear as a quote but you can choose the colour of the box and text via a dropdown.

An example of this is below:

So this is another quote 'paragraph' but this time by choosing my colour from the dropdown list I set up in 'Field Formatter Class' I can now have a box with a yellow background and black text.

What if I want to add a full width image to my blog post?

Again by just adding this type of paragraph we can do this... maybe you can even combine it with the 'Backstretch' module for a nice clean responsive look.

I will add an example below:

The options for this module are endless because the module itself doesnt come with any predefined paragraphs already set up. You (and your web designer) set them up how YOU want them. An example of how we use paragraphs is seen on our blog post 'The 5 Best UK Charity Websites, what makes them great + how to easily improve your site'. 

Another example!

With this 'paragraph' I wanted to have a panelled box with an image on one side and text on the other. This would be a great way to break up a page... again with the added field formater I can choose the style of this content and where on the page it goes.

This kind of styling while it may seem pretty basic from the web designers end is revolutionary at the Site Builders/Clients end. Paragraphs allows them to put the quotes, images, boxes etc where they want them to go... not where the designer said they can put them.

To show just how simple it is to create content with paragraphs take a look at the video below:

So how to I get started?

Simply ask your web designer/agency to take a look at Drupal Paragraphs or if you don't have a drupal website which gives you the power and control of paragraphs then fill in the form below and let us tell you we can help.