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

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:

Kamatera
$4.00 /mo
Starting price
Visit Kamatera
Rating based on expert review
  • User Friendly
    3.5
  • Support
    3.0
  • Features
    3.9
  • Reliability
    4.0
  • Pricing
    4.3
Hostinger
$2.99 /mo
Starting price
Visit Hostinger
Rating based on expert review
  • User Friendly
    4.7
  • Support
    4.7
  • Features
    4.8
  • Reliability
    4.8
  • Pricing
    4.7
Ultahost
$2.90 /mo
Starting price
Visit Ultahost
Rating based on expert review
  • User Friendly
    4.3
  • Support
    4.8
  • Features
    4.5
  • Reliability
    4.0
  • Pricing
    4.8
  • Want to get top recommendations about best hosting? Just click this link!

How to Create a Landing Page for Drupal Using Panels?

In this tutorial, we will build a Panels landing page for Drupal 8 with Views Bl
5 min read
Eliran Ouzan
Eliran Ouzan
Web Designer & Hosting Expert

How to Create a Landing Page for Drupal 8 Using Theme Regions

This Tutorial will show how to use Drupal 8 Theme Regions with Menus, Blocks, &
3 min read
Jeffrey Scott
Jeffrey Scott
Hosting Expert

How to Create an Animated Slideshow in Drupal 8

This Tutorial will discuss how to create an animated JavaScript slideshow of ima
3 min read
Jeffrey Scott
Jeffrey Scott
Hosting Expert

How to Set Up a User Forum in Drupal 8?

How to Build a User Forum in Drupal 8 using core module functionality & Taxonomy
3 min read
Eliran Ouzan
Eliran Ouzan
Web Designer & Hosting Expert
HostAdvice.com provides professional web hosting reviews fully independent of any other entity. Our reviews are unbiased, honest, and apply the same evaluation standards to all those reviewed. While monetary compensation is received from a few of the companies listed on this site, compensation of services and products have no influence on the direction or conclusions of our reviews. Nor does the compensation influence our rankings for certain host companies. This compensation covers account purchasing costs, testing costs and royalties paid to reviewers.
Click to go to the top of the page
Go To Top