Page Builder

The page builder allows you to create pages using front-matter sections. Technically we are using an array of objects to achieve orderable, repeatable component based section in Hugo.

Using The Page Builder

The page builder can be used in any markdown file. To enable the page builder you can:

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

OR

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 content and 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
description: Design Websites In Minutes. Fast, secure and easy to maintain
headerTransparent: true
sections:
- template: hero
  options:
    paddingTop: false
    paddingBottom: false
    borderTop: false
    borderBottom: false
    theme: primary
    classes: "my-custom-class another-custom-class"
  alignHorizontal: left
  alignVertical: middle
  height: 700px
  headings:
    heading: Design Websites In Minutes
    subHeading: Fast, secure and easy to maintain.
    text: ''
  background:
    backgroundImage: "/images/pages/lance-anderson-GOK4iscFSkA-unsplash-2000.jpg"
    opacity: 1
    monotone: false
  image:
    image: ''
    shadow: false
    border: false
  buttons:
  - button: 
    url: /custom-page-2
    text: Learn More
    external: false
  - button: 
    url: "https://www.zerostatic.io/theme/hugo-paradigm/"
    text: External Link
    external: true
    theme: primary-text
- template: info
  options:
    paddingTop: true
    paddingBottom: false
    borderTop: false
    borderBottom: false
    theme: base
    classes: ""
  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:
    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
  buttons:
  - button: 
    text: Features
    external: false
    url: "/features"
  - button: 
    text: Blog
    external: false
    url: "/posts"
    theme: base-text
- template: info
  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: Flexible card layouts and grids
  text: Inject different content types and display them in a grid. Choose different card layouts, customise the number of columns on both desktop and mobile. Limit the number of items and sort order.
  contentType: features
  sortBy: weight
  align: left
  limit: 4
  columns: 6
  columnsMobile: 12
  card:
    partial: card
    shadow: false
    border: false
    padding: true
    showTitle: true
    showDescription: true
    showDate: false
    showThumbnail: true
    showThumbnailLink: true
- template: content
  align: left
  columns: 8
- template: cta
  options:
    theme: primary
  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
    theme: primary-offset
---

## Markdown Content

The markdown content can be placed between sections, not just at the end of the page. The markdown is still written like normal, it's not inside a front-matter field (which would be overly restrictive)

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.