Regions and blocks

Templates

The pages on a site tend to have similar layouts. Take the page you’re reading now. The Course Content menu is over on the right. Below that is the Tool menu. There’s a header at the top of the page, and a footer at the bottom. Just about every page on the site looks like that.

Here’s a template for the pages on this site:

Template

(More or less. It might be a little different.)

This is the template if you aren’t logged in. If you are:

Template, logged in

The login is gone, and a user menu has appeared.

Each of the blue areas is a block, a rectangular chunk o’ stuff. Could be a menu, a form (like login and search), or something else.

Drupal lets you put blocks into regions. A region is just a place in a template that can have zero or more blocks in it. There are four regions in the template:

Regions

The header, footer, and main content regions have one block each. The right sidebar region has four blocks.

Rearranging blocks

Go to Structure | Block layout. Click the link Demonstrate block regions. Drupal will show you all the regions in your template. (We’ll talk about changing templates later.) The regions have names like Header, Primary menu, Breadcrumb, Sidebar first, Content, and Sidebar second. Now exit the block region demonstation.

The block layout screen lists the same regions, and the blocks assigned to each one.

Block layout

You can move blocks around, or remove them from all regions. If you remove a block from a region, you aren’t deleting the block, just not showing it. The block is still available if you want to show it in the future.

Making blocks

It’s easy to make your own blocks. On the Blocks layout page, click any Place blocks button. Then click Add custom block.

I did this:

Making a block

When I clicked Save, the Configure block page appeared. Here are the settings I changed:

Configure block

The block doesn’t show its title. The block is on the right of every page; that’s where the Sidebar second region is.

Conditional blocks

Suppose I want the new block only on some pages. Let’s tell Drupal to show the block only on the front page of the site. On the Block layout page, I click the Configure button for the new block. In the Visibility section, I click the Pages tab, and fill in the fields:

Page visibility

The help text below the Pages field tells you to type <front> to put the block on the front page.

Now the cute puppy is on the front page, but not the other pages.

Let’s say that I want the cute puppy to show on the front page for people who are not logged in. For users who log in, the puppy should not show on the front page.

Choose the Roles tab:

Role visibility

If no roles are checked, the block will appear for all users. I checked Anonymous user, so the block only appears for people who are not logged in.

Blocks, regions, and themes

Later, you’ll learn about themes. They define the look of your site. Different themes use different regions. If you switch themes, some blocks might disappear, if the first theme has regions that the second theme does not.

If you want a block to appear in the same place in every theme, you need to define its position in each theme. You can read more about it.

Exercise

Exercise: Make a block
Make a block that shows only on the home page, and only for administrators. The block can have any content you want.

Submit the URL of your site, and login credentials for user 1.

(If you switch themes to Bootstrap after doing this exercise you will need to replace and reconfigure the block.)

(If you were logged in as a student, you could submit an exercise solution, and get some feedback.)

Summary

Drupal lets you put blocks into regions. A region is just a place in a template that can have zero or more blocks in it.

You can make the block show only on some pages, and to users with some roles.