Hugo Paradigm - Premium Hugo Theme

Our most flexible theme yet. Create dynamic pages using a library of repeatable front-matter sections which can be placed in any order.

• Live Demo
• Product Info

• View the changelog
• View the documentation

Theme features

Built from the ground up, Hugo Paradigm provides a completely new way of building pages using front-matter sections.

Section Builder

Below is a code excerpt (trimmed down) of the _index.md front-matter. Notice each of the - template sections. The sections are designed to be reusable sections and can be placed in any order. Each section comes with configuration dozens of options.

---
title: Home
date: 2020-03-22
headerTransparent: false
sections:
- template: hero
  options:
    theme: base
  headings:
    heading: "Hugo Paradigm"
    subHeading: "A premium Hugo theme with a flexible layout system."
  alignHorizontal: left
  image:
    image: "/images/nastuh-abootalebi-yWwob8kwOCk-unsplash-800.jpg"
    borderRadius: true
    shadow: true
- template: grid
  contentType: partners
  sortBy: weight
  align: center
  columns: 2
  card:
    partial: card-image-only
- template: info
  options:
    theme: base-offset
  heading: "Repeat, reorder and insert sections anywhere"
  description: "Use info sections to place configurable image, text and button blocks.
    Alternate image alignment or hide the image altogether, it still looks great."
  align: right
  image: "images/freddy-do-hgbyl2H0zRU-unsplash-800.jpg"

Key Theme Features

• Page builder like functionality using front-matter sections
• Fully responsive design
• Dark mode
• Fully themeable, edit the themes.json to add new themes
• 100 Speed / 100 SEO / 100 Best Practices / 100 Accessibility scores in Google Lighthouse
• SEO Optimised
• Configure dozens of settings in the config.toml and data/layout.yaml

Content Types

• Custom Page (Markdown + Front-matter Sections)
• Homepage (uses Custom Page)
• Blog (Markdown)

Section Types

Insert these sections anywhere in a Custom Page

• Hero (Front-matter section)
• Info (Front-matter section)
• Grid (Front-matter section)
• CTA (Front-matter section)
• Content (Front-matter section)

CSS

• SCSS (Hugo Pipelines)
• Includes all SCSS files which are well structured and cleanly written
• Responsive design
• Bootstrap 4.3+ grid and media queries are used. The rest of the Bootstrap library is not imported. You can easily uncomment the @imports in the style.scss if you want to use more of the Bootstrap library.

Speed

• 100/100 Google Lighthouse Performance score
• Under 90KB without images ⚡
• Minified JS under 29KB
• Minified CSS under 27KB
• No JQuery
• No Boostrap JS

SEO

• Configure SEO settings in seo.yaml
• Google Analytics included
• Set the Google Analytics ID using Netlify environment variables
• 100/100 Google Lighthouse SEO score
• 100/100 Google Lighthouse “Best Practices” score
• Configure custom meta tags for the homepage and individual pages
• Auto generates meta title for each page, but can be overridden on a per page basis
• Semantic HTML document structure, h1, h2, p etc

Header

• Header animation on scroll
• Transparent header over hero images and backgrounds, turns white on scroll

Menu

• Main Menu managed in config.toml
• Nested dropdown menu compatible with Hugo menus
• Responsive menu using simple vanilla JS code
• Animated hamburger and mobile overlay
• 3 Footer menus which are configured in config.toml

Content

• Robust example content included out of the box

Blog

• Full blog. Contains categories, tags and author profiles

Fonts

• Uses Google fonts, edit the font in the theme.yaml and the theme automatically imports the Font from Google fonts!

Netlify

• Theme is ready to deploy to Netlify and contains a netlify.toml

Forestry CMS

• This theme ships with an extensive .forestry configuration which strictly defines its content schema. All front-matter fields are specified using the correct field types, default options etc. Uses Forestry blocks and front-matter templates to replicate page builder functionality correctly in Forestry