Post

Drupals Block based page builder

When it comes to building sites in Drupal some people will tell you that Wordpress is the reigning heavyweight champion and that Drupal has a bad backend user experience. This is probably true if you’re just using native Drupal. But just like Wordpress Drupal has some powerful modules you can install to revolutionise your content editor experience. Of course I’m talking about creating your own block based page builder with Drupal using the power of the Paragraphs module.

It was awesome to discover that you could work with the same “block based page builder” in Drupal” using the wonderful Paragraphs module in way same way as the Wordpress ACF block based page builder.

I’ve created this little process for all the stamps in Drupal you need to do to get started building out your pages with the paragraphs module.

Prerequisites

  • an operational Drupal site
  • The paragraphs module installed

Create paragraph types

  • go to structure
  • go to paragraph types

Add a paragraph type

you can create a paragraph type for:

  • grid
  • cards
  • gallery
  • text with image
  • whatever

Add fields to your paragraph type

  • text
  • image

Remove labels

go to /admin/structure/paragraphs_type

  • go to manage display

managedisplay option in dropdown list

  • set labels to hidden

hide labels

Attach paragraphs to the content type

  • go to structure
  • content types
  • locate the basic page content type or another content type of your preference
  • manage fields (hit the main btn label on basic page)
  • add field
  • select paragraph under reference revisions
  • give it a name like “blocks” or “paragraphs”

Create basic page

  • the blocks you added should be there

Config paragraph display settings

  • go to structure
  • go to content types
  • go to basic page - manage form display
  • scroll down to paragraphs / blocks
  • hit the cog wheel to open the settings

admin of paragraphs module display settings

creating custom paragraph blocks

This post is licensed under CC BY 4.0 by the author.

Comments powered by Disqus.