The page builder can be used in any markdown file.
To enable the page builder:
content/pages- any markdown files in this folder will automatically use the page builder layout from
layout: customto the front-matter of any markdown file in the
contentfolder. This will use the
layouts/default/custom.htmllayout (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
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
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.
There are 5 section types available.