Using The Page Builder

The page builder can be used in any markdown file.

To enable the page builder:

  1. Place a markdown file inside of content/pages - any markdown files in this folder will automatically use the page builder layout from layouts/pages/single.html.
  2. Add layout: custom to the front-matter of any markdown file in the content folder. This will use the layouts/default/custom.html layout (same code as the above layout)

A Quick Example

Take a look at the Custom Page 1 example in the live demo https://hugo-paradigm.netlify.app/custom-page-1/ - The corrasponding markdown file for this page is located at content/pages/custom-page-1.md.

This page is actually made up of 6 sections. It starts with a hero section, followed by 3 info sections, then a grid section and finally a cta section.

Here is the markdown showing the sections.

# content/pages/custom-page-1.md

---
title: Custom Page Example 1
url: "/custom-page-1"
date: 2020-03-22
headerTransparent: true
sections:
- template: hero
  options:
    paddingTop: false
    paddingBottom: false
    theme: primary
  alignHorizontal: left
  alignVertical: middle
  height: 600px
  background:
    opacity: 1
    backgroundImage: "/images/bantersnaps-5U_28ojjgms-unsplash-2000.jpg"
    monotone: true
  headings:
    heading: Design Websites In Minutes
    subHeading: Fast, secure and easy to maintain
- template: info
  options:
    paddingTop: true
    paddingBottom: true
  align: left
  heading: Better Performance
  description: Why wait for pages to build on the fly when you can generate them at
    deploy time? When it comes to minimizing the time to first byte, nothing beats
    pre-built files served over a CDN.
  image: https://source.unsplash.com/qtYhAQnIwSE/800x600y
- template: info
  options:
    paddingTop: true
    paddingBottom: true
    theme: base-offset
  align: right
  heading: Higher Security
  description: With server-side processes abstracted into microservice APIs, surface
    areas for attacks are reduced. You can also leverage the domain expertise of specialist
    third-party services.
  image: https://source.unsplash.com/OfwiURcZwYw/800x600
- template: info
  options:
    paddingTop: true
    paddingBottom: true
  align: left
  heading: Cheaper, Easier Scaling
  description: When your deployment amounts to a stack of files that can be served
    anywhere, scaling is a matter of serving those files in more places. CDNs are
    perfect for this, and often include scaling in all of their plans.
  image: https://source.unsplash.com/VvAcrVa56fc/800x600
- template: grid
  options:
    theme: base-offset
  heading: Build Fast, Ship Fast
  contentType: features
  sortBy: weight
  align: left
  columns: 6
  card:
    partial: card
  partial: card
- template: cta
  options:
    theme: base
  heading: Kickstart your Hugo project
  description: Save days and weeks with our best practice templates.
  buttons:
  - button: 
    url: https://www.zerostatic.io/theme/hugo-paradigm/
    text: Buy Theme
    external: true
    buttonColor: primary-offset
---

Each section is nested under sections and is defined as an object using template, the name of the template determines which section is used, and what configuration options are available.

Sections

There are 5 section types available.