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.
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)
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.
There are 5 section types available.
Designed and built by Rob Austin @ausrobdev in Brisbane, Australia. We stand on the shoulders of giants: Hugo | Jekyll