Skip to content
Menu
Open World News Open World News
  • Privacy Policy
Open World News Open World News
Specbee: How to Create Dynamic Layouts with Layout Builder, CTools, and View Modes

Specbee: How to Create Dynamic Layouts with Layout Builder, CTools, and View Modes

Posted on March 28, 2023 by Michael G

Author:
Source

How to Create Dynamic Layouts with Layout Builder, CTools, and View Modes
Mustakim Farooqui
28 Mar, 2023





Having an attractive and engaging website is crucial to success in today’s digital age. One way to achieve this is by using dynamic layouts that allow for flexibility and creativity in designing your website. Fortunately, Drupal provides a powerful set of tools that can help you create dynamic layouts with ease.

In this article, we will explore how to use Layout Builder, CTools, and View Modes to build custom layouts for your Drupal website. Whether you’re a beginner or an experienced Drupal developer, this guide will provide you with the knowledge and skills to take your website design to the next level.

New to Layout builder? Explore more articles to gain a deeper understanding.

Specbee: How to Create Dynamic Layouts with Layout Builder, CTools, and View Modes

Leveraging Entity View Modes and CTools Module for Dynamic Design Strategies

When using the Drupal layout builder, we may develop a number of strategies to maximize its effectiveness. Contributed modules like paragraphs, views, CTools, and others can be used in conjunction with Layout builder to develop these strategies. We can also make use of the content types’ entity view mode. We have discovered that employing entity view modes is an excellent strategy for sites that require the most versatility.

In this lesson, we’ll discover a technique that makes use of the entity view modes and the CTools module’s features. To accomplish this, a set of components will be created. It is similar to component-based design methodologies.

We’ll make use of Drupal’s Basic Page content type, which is available right out of the box. To render various items, we will add new view modes for the Basic page content type. Using the CTools module’s capability, we will render an entity as a block in the layout builder. Using view modes, we will add a banner image to the homepage of our website.

Installing CTools module

In the Drupal framework, Chaos Tools, sometimes known as CTools, is a significant and well-liked module. It is essentially a collection of APIs and technologies that construct libraries for other modules to use and make code easily accessible to developers. Several Drupal modules rely on it in one way or another.

In order to create the view modes pattern for the Basic page content type, we will first need the Chaos tools suite (ctools) module.

Install the CTools modules by using the composer command shown below:

composer require 'drupal/ctools:^4.0'

To use the module, go to Extend and install the module.

The following command can also be used to install the module using the drush command line as an alternative:

 

drush pm:enable ctools

extend

View Modes Pattern

After installing the module, enable the layout builder under “Manage Display” for the Basic page content type.

Manage display

 

We need two things in the basic page content type in order to apply the view modes pattern.

  • Banner Field
  • Banner View mode

Banner Field:

Add an image banner field using the setup below to the basic page content type:

banner settings

Banner View mode:

To add a view mode, go to Structure > Display modes > View modes > Add view mode

display mode

 

Create a view mode called Banner Image for content entity type:

choose viewadd new content

This page will now display the newly created view mode: Structure > Display Modes > View modes

view mode

 

After defining the view mode, we must enable it for our Basic page content type. To do so, navigate to the content type’s “Manage Display” section and enable the view mode “Banner Image” under the “Custom display settings” section, as shown below.

Manage display

 

After enabling the view mode, you’ll note that our custom view mode is now accessible to use in the content type’s “Manage Display” area.

display image banner

Next, go to Banner Image view mode and disable all fields except the Banner field that we defined earlier.

view banner

Following this step, to add the Banner image to the homepage, overrides the default layout of the basic page content type by clicking on the Layout tab displayed in the homepage’s primary tabs.

home page

 

In the following steps, we’ll add the Banner Image view mode and show the picture using the ctools block. To achieve this, click “Add Block” and a panel with a list of the available blocks and fields to add to the layout will appear on the right side of the page.

•  Choose Entity View (content) to add the view mode.

entity view

 

•  Add the block after configuring it and choosing the “Banner Image” view mode.

configure block

 

Our home page’s final layout will appear as follows after adding the Banner Image view mode:

edit layout

Final Thoughts

This is how you can use Drupal layout builder and CTools module to apply the view modes pattern for various use cases in accordance with your needs.  While this is a powerful approach, it can be difficult to keep track of all the changes you make and the various view modes. To facilitate better control over your view modes, consider leveraging modules like CTools Exportables or Features that enable you to export and import your view modes with ease.

From dynamic layouts to advanced functionality, we have the Drupal skills and expertise to bring your vision to life. Contact us today to learn more about how we can help you build the website of your dreams.

Author: Mustakim Farooqui

Meet Mustakim Farooqui, Drupal Developer, and our own Chess master. He dreams of visiting Europe and enjoys reading novels and tech articles. When not working, you can find him with a game of chess, solving puzzles, or checking out new Linux distros. Give him a strong cup of coffee and he’ll set sail for anything!





Drupal
Drupal Module
Drupal Development
Drupal Planet

 

Recent Blogs

Image
Dynamic layouts with layout builder

How to Create Dynamic Layouts with Layout Builder, CTools, and View Modes

Image
Career story

A Journey of Persistence – Shreeganesh’s Career Story

Image
Integration and testing in drupal

What You Need To Know About Continuous Integration and Testing in Drupal

Want to extract the maximum out of Drupal?
TALK TO US

Featured Case Studies

Itsoc logo

IEEE Itsoc

Upgrading the web presence of IEEE Information Theory Society, the most trusted voice for advanced technology

Explore

Semi 252x91-01.png

Semi

A Drupal powered multi-site, multi-lingual platform to enable a unified user experience at SEMI

Explore

gsh logo

Great Southern Homes

Great Southern Homes, one of the fastest growing home builders in the US, sees greater results with Drupal

Explore

View all Case Studies

Read more

Related Posts:

  • Specbee: Mastering Drupal 9 Layout Builder: A Comprehensive Guide to Effortlessly Customize Your Website's Design
    Specbee: Mastering Drupal 9 Layout Builder: A…
  • Specbee: Getting Started with Layout Builder in Drupal 9 - A Complete Guide
    Specbee: Getting Started with Layout Builder in…
  • Specbee: Migrate to Drupal 9 (or 10) Without Losing Your Hard-Earned SEO Ranking
    Specbee: Migrate to Drupal 9 (or 10) Without Losing…
  • Specbee: What You Need To Know About Continuous Integration and Testing in Drupal
    Specbee: What You Need To Know About Continuous…
  • Specbee: How to Create a Custom Module and add CSS Libraries in Drupal 9
    Specbee: How to Create a Custom Module and add CSS…
  • Specbee: Revitalize Your Forms: Enhancing User Experience with Drupal's Form API
    Specbee: Revitalize Your Forms: Enhancing User…

Recent Posts

  • [TUT] LoRa & LoRaWAN – MikroTik wAP LR8 kit mit The Things Network verbinden [4K | DE]
  • Mercado aguarda Powell e olha Trump, dados e Haddad | MINUTO TOURO DE OURO – 11/02/25
  • Dan Levy Gets Candid About Learning How To Act Differently After Schitt’s Creek: ‘It’s Physically…
  • Building a Rock Shelter & Overnight Stay in Heavy Snow 🏕️⛰️
  • Les milliardaires Elon Musk et Xavier Niel s’insultent copieusement

Categories

  • Android
  • Linux
  • News
  • Open Source
©2025 Open World News | Powered by Superb Themes
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
Cookie SettingsAccept All
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT