Drupal Landing Page - part 1

landing

 

Landing pages are great for product presentation and customer engagement.

There are a must for today marketing campaigns, mobile advertising and sales development.

landing pages

 

There is no easy way to build a simple landing page in Drupal.

You can use custom themes or modules to manage layout like parade but it is not that simple. Layout options are limited. For instance. The module does the job; you can build a simple landing page without custom development, but requires a lot of dependencies for a simple page and you may still have to do some css editing.

In this article we will explain how our landing page has been constructed within Drupal 8 website using separate dedicated theme and a custom module with twig templates.

The original page which is a stand alone 1 page theme is now fully integrated in the website.

It may not be the best method, but it can be easily replicated and give more room for creativity and extra flexibility compared to a layout module or a full land page theming construction.

Part 1: the custom theme

To achieve that, we created a custom theme with only 1 region for content. When building a 1 page theme, you usually do not want side columns or extra headers and footers.

To create your theme, you only need 1 file to be saved under your custom theme folder in the Drupal 8 "themes" folder: myTheme.info.yml.


type: theme
base theme: false name: 'EK'
description: 'Built to use land page'
version: VERSION
core: '8.x' regions:
  content: Content
  footer: Footer

This is what is needed to create the basic theme that will be used in our landing page. We keep a region "footer" to insert hidden blocks or content.

This theme will be called on specific routes names and will replace the default theme of the site.

You can add a screenshot image also in the theme folder if you want to enhance your admin view.

theme admin

 

In the next step we will explain how our custom module switch theme for dedicated url and build the landing page with twig template. For that step you will need some knowledge on creating a simple module, insert libraries and make a twig template.

 

Add new comment

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.