How to Create a Landing Page for Drupal 8 Using Display Suite

Introduction: Building Solutions with Drupal 8

This Tutorial will show how to install & use the Display Suite module with Drupal 8 for web page construction with a step-by-step guide to site building.

  • Problem: New users & inexperienced web developers need a simple & easy to use way to create Landing Pages in Drupal 8 for websites with dynamic content.
  • Solution: Install the Display Suite module for site builder options and create a custom Drupal 8 website for social networks & e-commerce requirements.

Display Suite needs to be tested across multiple browsers and devices. Allow for variance depending on the installed theme. We adopt “mobile first” strategies with Drupal 8 themes.

Let’s get started.

Step One:
Install the Display Suite Module

Start: Navigate to the drupal.org project page & download the Display Suite module:

Next: Install the module from the .zip file or using the URL in the /admin/modules panel.

How to Create a Landing Page for Drupal 8 Using Display Suite

Finish: Navigate to /admin/structure/ds to access the Display Suite administration section.

Step Two:
Set Up a Template System for Landing Pages

Start: In the Display Suite admin panel, you can create custom templates for every Content-Type, as well as for Taxonomy terms, Groups, Orders, Users, Profiles, & Comments.

How to Create a Landing Page for Drupal 8 Using Display Suite

Next: Click on the “Manage Display” link for each entity in order to set up custom templates for each Content Type or other node, block, etc. on your Drupal 8 website.

How to Create a Landing Page for Drupal 8 Using Display Suite

Hint: The Display Suite module gives web publishers the ability to create custom templates for their Drupal 8 content including custom fields with images, text, or embedded file support.

Finish: Use the Display Suite tools to create custom templates for each Content Type. Create a multi-column design for system pages, then add Views Blocks & custom code to the panels.

Step Three:
Create Views Blocks for Dynamic Content

Start: The Display Suite module functions like Panels & Blocks in Drupal 8, allowing site builders the option to embed Views displays in page elements with dynamic content lists.

Next: in order to accomplish this, you will need to create some Views Blocks to embed in the Display Suite template pages. Navigate to /structure/views & review the available Blocks.

How to Create a Landing Page for Drupal 8 Using Display Suite

Hint: Use the Custom Block Library & other installed tools to build dynamic content lists for Display Suite or create new Views according to the requirements of your website.

Finish: Save the Views Blocks and then return to the Display Suite template pages to add them as elements to various specific areas of your theme for Landing Pages.

Step Four:
Arrange Block Elements in Display Suite

Start: Review the different Display Suite templates with I-IV column widths and different stack configurations, then select one for each Content Type template & arrange the CCK fields.

How to Create a Landing Page for Drupal 8 Using Display Suite

Hint: Choose one of these templates for the Page content type, then use the framework as a skeleton to embed Views Blocks, custom code in Blocks or Blocks from system modules.

Finish: Use these Display Suite templates to build Landing Pages for websites around keyword URLs that bring vertical search traffic into your website organically.

Step Five:
Cache Landing Pages or Use a CDN Service

Optional: Your Drupal 8 Landing Pages with Display Suite will load quicker & faster for anonymous users if you turn on web page caching & connect to a CDN service.

Next: Use the free Cloudflare CDN account with cPanel hosting to connect to a Drupal 8 website and cache Display Suite landing pages by keyword URL in data centers globally.

How to Create a Landing Page for Drupal 8 Using Display Suite

Next: After activating your free Cloudflare CDN account, add the domain with the custom landing pages to the service in cPanel & use the provided admin panel to manage the domain.

How to Create a Landing Page for Drupal 8 Using Display Suite

Finish: Depending on the web hosting service, you may have to change your DNS server settings to Cloudflare CDN manually, or the cPanel app will toggle this for you automatically.

Conclusion: Use Keyword URLs & Social Media Images

Display Suite gives Drupal 8 web publishers a number of powerful templates that can be customized with blocks to build landing pages. Use Cloudflare CDN to load these even faster.

Check out these top 3 Drupal hosting services:

  • Want to get top recommendations about best hosting? Just click this link!

Was this article helpful?