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:
- Download:https://www.drupal.org/project/ds
Next: Install the module from the .zip file or using the URL in the /admin/modules panel.
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.
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.
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.
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.
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.
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.
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!