To display the related articles block created with Views on any page, use Block Layout to specify the target page and configure the placement.
Views — one of Drupal's standout features — extracts content such as articles by specified conditions and displays it freely anywhere on the site. Block Layout is the feature that configures where the pages and blocks created by Views are placed.
Block Layout is another distinctly Drupal feature — highly configurable, and makes it easy to switch navigation menus and side menus per content type.
The navigation and side menus switching by language on this site is also configured through Block Layout.
Block Layout overview
- Build the site layout freely.
- The basic structure consists of header, body, left and right side menus, and footer sections.
- The available sections in Block Layout depend on the selected theme.
- Choose and place entities in each Block Layout section.
- Select which content to display the chosen entity on.
Block Layout is the feature that assembles navigation menus, side menus, footers, and other elements onto the articles and pages configured through Content, Structure, Taxonomy, and Views — all covered in previous articles.
Introduction.
Block Layout is the feature used to build the overall site structure.
Most websites are structured around sections: header, body, left and right side menus, and footer. How each section is used varies by site purpose, but this general structure is widely adopted. In practice, sites may split the header into multiple sections or use a three-row footer — but since this site also serves as a learning exercise, I've kept it simple with four sections: header, body, right side menu, and footer.
The sections available in Block Layout depend on the selected theme. I'm using the Bootstrap5 theme — specifically a subtheme in actual operation — so the site is built using the block layout template provided by the Bootstrap5 subtheme.
Block Layout
Bootstlap5 Subtheme Block Layout
|-- Header
| |-- Navigation branding region // Site description at the top of the page, etc.
| |-- Main navigation region // Site name, logo, etc.
| |-- Additional navigation region (eg search form, social icons, etc)
| // Navigation menus, etc.
|
|-- Breadcrumb
|
|-- Main content // Entities added to content such as articles
|
|-- Sidebar 1 // Left side menu
|
|-- Sidebar 2 // Right side menu
|
|-- FooterThe site structure is built by assigning blocks to each section of this Block Layout template and specifying which content to display them on.
Block Layout Settings
Let's look at a Block Layout configuration example using the setup from the previous article, #C21 Views-2 Block.
Home > Administration > Structure > Block Layout
Block Layout Setting
|-- Header
| |-- Main menu // Navigation menu for Japanese pages
|
| |-- Navigation branding region
| // Not in use
| |-- Main navigation region
| // Not in use
| |-- Additional navigation region (eg search form, social icons, etc)
| // Not in use
|
|-- Breadcrumb
| // Not in use
|
|-- Main content
| |-- Messages // Default setting | For admin menu
| |-- Page title // Default setting | Displayed on /Creation
| |-- Tabs // Default setting | For admin menu
| |-- Help // Default setting | For admin menu
| |-- Primary admin actions // Default setting | For admin menu
| |-- Main page content // Default setting | Displayed on /Creation
| |-- Breadcrumb // Configured | Displayed on /Creation
| |-- Creation-Bottom_block // Custom content block | Displayed on /Creation
| // Related articles content block created with Views
|
|-- Sidebar 1
| // Not in use
|
|-- Sidebar 2
| |-- Side Bar 01 // Custom content block | Displayed on /Creation
|
|-- Footer
| |-- Footer01 // Custom content block | Footer for Japanese contentThis is the layout structure in use. In practice, menus for other content types and more are configured, making the settings more extensive than shown here — but for the purpose of understanding Block Layout, I've extracted only the layout relevant to #C21 Views-2 Block.
Block Layout also has sections set for the admin menu display — so let me organize the layout structure for #C21 Views-2 Block.
Header
- Navigation menu for Japanese content // Menu created in Content > Block
Main content
- Page title // Article
- Main page content // Article
- Breadcrumb // Block generated by the Easy_Breadcrumb module
- Related articles block // Related articles block created with Views
Sidebar 2
- Right side menu // Menu created in Content > Block
Footer
- Footer for Japanese content // Menu created in Content > Block
That's the overall structure.
1. Basic Usage
The basic usage of Block Layout involves:
- Block — the block to place, etc.
- Category — the entity type, such as content type or system
- Region — the section where it will be placed
- Operations — configuring display conditions, etc.
These four items are configured. Select the region where the entity — such as a block — will be placed, set the display conditions, and build the page layout for content.
Select the section and place the block.
1-1. Setting Navigation in the Header
Header > Place a block > Select from the block list > Place block
The settings screen appears.
Block Main menu Setting
Block description
Main menu
Title: Enter a label name.
Machine name: b5subtheme_main_menu / Edit
This field supports tokens. Browse available tokens.
Display title: Show / Hide setting
Visibility
Response Code: (active tab)
Language: No restrictions
Response status: No restrictions
Pages: No restrictions
Roles: No restrictions
Content types: No restrictionsThe block specified in the settings screen above is placed in the designated region in Block Layout.
Block settings involve choosing which region to place the block in and specifying which pages to display it on.
Visibility conditions
Visibility
- Response Code
- Language
- Response status
- Pages
- Roles
- Content types
Choose from these six visibility conditions. (Multiple conditions can be combined.)
For example, for a menu intended only for Japanese pages, selecting Japanese under 2. Language restricts the menu to Japanese pages only.
2. Real-World Example
Let's look at the configuration for #C21 Views-2 Block.
- Header. / Main menu for Japanese
- Body. / Page title, main page content, breadcrumb, related articles
- Side Menu 2. / Side menu for Japanese
- Footer. / Footer menu for Japanese
The respective menus for Japanese pages are placed in these four regions.
2-1. Header
Header > Navigation menu for Japanese content
A navigation menu block called Main menu is placed here.
- Region: Header
- Block to place: Main menu
- Display condition: All Japanese pages
Header Setting
Block description
Menu Main
Title
[ Main menu ] Machine name: b5subtheme_menumain
This field supports tokens. Browse available tokens.
Display title // Select via checkbox --- Not selected since this is a menu
Visibility
Response Code: (active tab)
[Enter specified values -- 4xx]
-- Specify response codes. Enter one per line. This only works for 4xx response codes.
-- Negate the condition
// Select using Apache status codes
Language: Japanese
#Select language
-- English
-- Japanese // Select Japanese
// Select the language to enforce. If nothing is selected, all languages are available.
Response status: No restrictions
-- Success (200)
-- Access denied (403)
-- Page not found (404)
// Shows the block on pages matching the response status. If nothing is checked, the block appears on all pages. Other response statuses are not used.
Pages: Restrict to specific pages
#Pages
Show for listed pages
Hide for listed pages
// Specify conditions for which URLs to show or hide.
Roles: No restrictions
#If the user has the following role
-- Anonymous user
-- Authenticated user
-- Content editor
-- Administrator
// Specify display by role.
Content types: No restrictions
-- Article
-- Contact form
-- Creation article
-- En Creation
-- En Life Style
-- Life Style article
-- Basic page
-- Photo gallery
// Specify display by content type.
Vocabulary
-- Article
-- Shop info
-- Shops
-- Tag
-- Tags
-- Article content
#Negate the condition
// Specify display by term. // Can toggle show/hide
Region
> Header
Select the region to display this block in.
Save block / Delete blockThe navigation menu in the header is shared across the site, but since it's a Japanese menu, it's configured to appear on all Japanese pages. The English menu is similarly set to appear on all English pages.
The configuration here is: Region: Header > Japanese menu: Main menu block > Language: Japanese.
2-2. Article Body
Body. / Configure blocks to display in the article body.
Main content >
- Page title // System / Provided by default.
- Main page content // System / Provided by default.
- Breadcrumb // Block from the easy_breadcrumb add-on module
- Related articles block // Related articles block created with Views
These blocks are placed here. Since the settings for each block are the same as the Main menu block settings described above, detailed explanations of each condition are omitted.
1. Title
The title block is provided by the system by default. Its main use is toggling the title display on or off. This site uses the default title display with no changes here. When I eventually create full-screen pages where hiding the title is needed, I'll configure it then.
Body. Title Setting
Block description
Page title
Title
[ Page title ] Machine name: b5subtheme_menumain
Display title --- Not selected since this is a menu
Visibility
Response Code -- No setting
Language: No restrictions
Response status: No restrictions
Pages: No restrictions
Roles: No restrictions
Content types: No restrictions
Vocabulary -- No setting
Region
> Main content
Select the region to display this block in.
Save block / Delete block2. Main Page Content
The main page content block is provided by the system by default. Its main use is toggling the display of articles and pages on or off. This site uses the default with no changes here. Since it governs the display of content across the site, the default is the right starting point — I see it as the setting to use when you need to hide specific content types for particular purposes.
Body. Main Page Content Setting
Block description
Main page content
Title
[ Main page content ] Machine name: b5subtheme_content
Display title --- Not selected since this is a menu
Visibility
Response Code -- No setting
Language: No restrictions
Response status: No restrictions
Pages: No restrictions
Roles: No restrictions
Content types: No restrictions
Vocabulary -- No setting
Region
> Main content
Select the region to display this block in.
Save block / Delete block3. Breadcrumb.
Breadcrumbs are provided by default in the Bootstrap5 theme, but their placement between header and body puts them at the top of the page. I want breadcrumbs at the bottom, so instead of the theme's default breadcrumb block, I use the Easy_Breadcrumb module and place its generated block at the bottom of Main content via Block Layout.
Easy_Breadcrumb is a simple but excellent module — I'd like to write up its configuration and usage in a separate article when the opportunity comes.
Since it's placed on essentially all pages, no page restriction is specified.
Body. Breadcrumb Setting
Block description
Breadcrumb
Title
[ Breadcrumb ] Machine name: b5subtheme_breadcrumbs
Display title --- Not selected since this is a menu
Visibility
Response Code -- No setting
Language: No restrictions
Response status: No restrictions
Pages: No restrictions
Roles: No restrictions
Content types: No restrictions
Vocabulary -- No setting
Region
> Main content
Select the region to display this block in.
Save block / Delete block4. Related Articles
This is the related articles block created with Views in the previous article. The Main content region is selected in Block Layout and the block is placed to appear at the bottom of the page.
- Display condition: Language set to Japanese, since this block is for Japanese articles
- Since this is a related articles block for Creation content, the content type is specified as: Creation article
- Follows the item count configured in Views, displaying 3 articles.
These are the configured settings.
Unlike other blocks, this one was created in Views so it has no title — it's identified by its machine name instead. The name b5subtheme_views_block__creation_bottom_block_1 breaks down as: b5subtheme_views_block for the theme's Views block, followed by the name of the created related articles block.
Configuring this block makes related articles appear within Drupal and AWS articles at /creation.
Body. Related articles Setting
Block description
Creation-Bottom_block
Items per block
> 3 (default setting)
// Since this is a Views block, Views-based settings are displayed.
Display title --- Not selected since this is a menu
Visibility
Response Code -- No setting
Language: Japanese // Block shows only on Japanese articles since it's a Japanese related articles block
Response status: No restrictions
Pages: No restrictions
Roles: No restrictions
Content type: Creation article // Specified here since this is the related articles block for Creation articles
Vocabulary -- No setting
Machine name
> b5subtheme_views_block__creation_bottom_block_1
A unique name for this block instance. Only lowercase letters, numbers, and underscores are allowed.
Region
> Main content
Select the region to display this block in.
Save block / Delete block3. Right Side Menu
Right side menu. / Configure the side menu block displayed on the right.
This site uses four different side menus depending on the context.
- Japanese / Basic page / Creation / Sidebar with yellow photo background
- Japanese / Life Style / Sidebar with blue photo background
- English / Basic page / Creation / Sidebar with yellow photo background
- English / Life Style / Sidebar with blue photo background
Since this configuration is for /creation pages:
- Japanese / Basic page / Creation / Sidebar with yellow photo background
This is the setting used. ※ The other side menus are configured in the same way.
Right side menu Setting
Block description
Side Bar 01
Title
Side Bar 01: Machine name: b5subtheme_sidebar01
Display title --- Not selected since this is a menu
Visibility
Response Code -- No setting
Language: Japanese // Block shows only on Japanese articles since it's a Japanese related articles block
Response status: No restrictions
Pages: Restrict to specific pages
-- /lifestyle/*
-- /en-creation/*
# Hide on the listed pages
Roles: No restrictions
Content types: No restrictions
Vocabulary -- No setting
Region
> Sidebar 2
Select the region to display this block in.
Save block / Delete blockThere are four side menus, and each can potentially appear on multiple pages. The selection conditions are language and whether the page is Life Style — so for this configuration, the menu shows on Japanese basic pages and Creation articles, and is hidden on Life Style and English articles.
- Language: Japanese // Block shows only on Japanese articles since it's a Japanese-language block
- Pages: Select Restrict to specific pages.
-- /lifestyle/*
-- /en-creation/*
# Pages at the listed URLs are hidden.
Adding the wildcard /* after a URL hides all pages under /lifestyle and below.
4. Footer Menu
Footer menu. / Configure the footer block displayed at the bottom of the page.
Since this site has both Japanese and English content, two footer menus are used.
- Japanese / Footer block with links to Japanese content
- English / Footer block with links to English content
This configures the footer block for Japanese content.
Footer menu Setting
Block description
Footer01
Title
Footer01: Machine name: b5subtheme_footer01
Display title --- Not selected since this is a menu
Visibility
Response Code -- No setting
Language: Japanese // Block shows only on Japanese content since it's a Japanese footer
Response status: No restrictions
Pages: No restrictions
Roles: No restrictions
Content types: No restrictions
Vocabulary -- No setting
Region
> Footer
Select the region to display this block in.
Save block / Delete block5. Placing Each Section
A summary of configuring Block Layout to place blocks in the header, body, left side menu, and footer.
Configuring Block Layout creates the page structure for article #C21 Views-2 Block.
Header
- Main navigation // Japanese page navigation
Body
- Title // Article title #C21 Views-2 Block
- Article // Body of #C21 Views-2 Block
- Breadcrumb // Displayed on all pages
- Related articles // Block related to Japanese /creation pages
Right side menu
- Right side navigation // Japanese page side menu
Footer
- Footer // Japanese page footer
Block Layout works by specifying a block for each region provided by the theme, then setting which pages to display it on via conditions such as language, content type, and URL.
This is one of Drupal's strengths and one of its pleasures — the sheer configurability. Thinking through the conditions is a bit like solving a puzzle: you can sometimes achieve the same result with different conditions, but when other factors come into play, the conditions tend to constrain themselves naturally. Block Layout also determines the final display of a site, making it an important starting point for thinking through site structure.
Understanding Block Layout lets you think about the overall blueprint of the site — how to structure content types, articles, Views, taxonomy, and other components. This enables you to build not just individual pages but to visualize a more complete picture: how features are distributed across the site, how users navigate through it, and what the finished site should look like.
Conclude.
One of the difficulties of writing about Drupal is that site building often requires settings that span multiple features simultaneously. Installing the core program gives you a default website, but I can't imagine anyone running a site as-is.
Building the website you envision with Drupal — adjusting layouts and designs to suit your purpose — requires at least some understanding of Drupal's concepts and rules. That's why I keep writing these explanatory articles. I've been working through what I consider the minimum essentials, but my own limitations have produced articles that are disorganized and hard to follow. I'm thinking of consolidating what I've written so far and pushing toward something more concise and practical.
A Summary of Drupal Site-Building Features
I've written about content types, taxonomy, Views, and other features needed to build a Drupal site — but the articles have grown scattered and hard to follow, so I'm going to consolidate them.