Create a landing page

So you would like to create a landing page, such as the homepage, by choosing from the diverse collection of customizable, pre-designed blocks?

The block system enables you to easily choose different blocks (designs) for the header (such as navigation bar), page sections, and the footer (such as copyright and links).

Easily create customized landing pages with Wowchemy's highly flexible page building system
Easily create customized landing pages with Wowchemy’s highly flexible page building system

The site Header and Footer blocks are special cases which can be customised within your config/_default/params.yaml.

Version 2 Blocks

To design your page with the latest version of the blocks, you can create pages with type: landing.

For details, refer to the Page Building guide.

You can also find a mini tutorial on editing the homepage (the site’s main landing page) in the Getting Started guide.

Version 1 Blocks (legacy)

To design your page with the older version of the blocks, you can create pages with type: widget_page.

Homepage

The homepage must be created at content/home/index.md and contain the following front matter in order to use v1 blocks:

---
# Page type is a Widget Page
type: "widget_page"
# Homepage is headless, other widget pages are not.
headless: true
---

Other Landing Pages

Create a new folder in your content folder, naming it with your new page name. In this example, we will create a landing page by creating a content/landing/ folder to contain our new page sections (blocks).

Within your new content/landing/ folder, create a file named index.md containing the following YAML parameters:

---
title: "Landing Page"  # Add a page title.
summary: "Hello!"  # Add a page description.
date: "2019-01-01"  # Add today's date.
type: "widget_page"  # Page type is a Widget Page
---

Editing v1 landing pages

Now, we can add v1 content blocks into your homepage at content/home/ or another landing page such as content/landing/ folder.

We can also create a menu link to our new landing page. Given a landing page folder named landing, open config/_default/menu.toml in your editor and add:

[[main]]
  name = "My Widget Page"  # Title of the link.
  url = "landing/"  # Widget Page folder name (or just `/` for homepage).
  weight = 2  # Position of the link in the navigation bar.
Previous
Next