Skip to content

How to Create a Custom Layout with Panelizer in Drupal 7

Editable-drupal2

While working with Drupal, sometimes we need to customize an entire entity type of the site, like a page or blog post, or even modify some specific nodes of the entity. If you are in the situation of needing a custom content or to make a drastic change, then you should meet Panelizer. This module will help if you are working with Drupal 7. For Drupal 8, much of the Panelizer functionality is available with the Layout Builder system.

“The Panelizer module allows you to attach Panels to any node in the system. It is similar to the panels_node module that ships with Panels, which provides a single node type that is a panel. Panelizer, however, allows this to work for many entity types. It works by using the Page Manager template to take over the page rendering of the node”

To get started, activate the following modules:

/admin/modules

Ensure node_view is enabled, Panelizer won’t work without this enabled!:

/structure/pages

Then go to Panelizer Settings:

/structure/panelizer

In this section, we are going to choose the content type Blog, in which we want to create our custom layout. After that, we click on the Link List.

In this section we may notice that there is already a layout called Default, if we customize this option, then every blog post will have this new change, but instead of that, we will create a new one.

We decided to create a new one because we only want some blogs to have these new changes, we want to demonstrate that one of the main Panelizer functionalities is to apply a custom design to a particular Node.

When Clicking on the Link Add, write the name:

Then select the content tab, and start to customize the layout:

This Design is one-column and this is how the default layout looks like:

This is an example of the default one-column blog:

For this new layout, we are going to create a two-column layout. Now, click Show Layout designer and add another row called right column:

After save, it shows the new layout like that:

Then move some fields to the right column and save it:

After we save it, you should also notice the layout in the blog layout list:

At this moment, the layout is not applied to any blog, so let’s do it:

Now our Blog with a custom Layout looks like this:

Panelizer should be able to work with any theme. Furthermore,  there are modules that can be integrated with Panelizer which have some predefined layouts. I can’t assure they work perfectly, but you can take a look. Some of them are: Panels Bootstrap Layouts or Radix Layouts.

With Panelizer, making huge changes to the layout is simple, you can add any columns and rows to the design, and you don’t have to override the default layout if you don’t want to. Despite the advantages, there is a main weakness on this module and it’s the fact that it is not responsive by default, so you may need to add some customs styles to make it look nice in smaller versions.