The Hero section is used to display bold, fullwidth background image sections. This section can contain headlines, text, buttons and an additional thumbnail image. The hero section is normally placed at the top, but actually you can place it anywhere on the page for a sweet fullwidth breakout section.
Hero section with background image, using blend mode into primary color background.
Hero section without background image, using base color background. Using buttons and thumbnail image.
sections:
- template: hero # http://localhost:1313/docs/hugo-paradigm/page-builder/sections/hero/
options:
paddingTop: false # true/false
paddingBottom: false # true/false
borderTop: false # true/false
borderBottom: false # true/false
theme: primary # "base", "base-offset", "primary", "primary-offset" - Uses color variables from `data/themes.json` to theme the section
classes: "custom-hero-section super-hero" # "my-class my-class-2" - Add custom classes to the section div for custom CSS styling
alignHorizontal: left # "left", "right" - Aligns the text and image
alignVertical: "" # "top", "middle", "bottom" - Aligns the text and image
height: 600px # 800px, "auto" - Specify a height for the hero section, otherwise it will fit the content
headings:
heading: Design Websites In Minutes
subHeading: Fast, secure and easy to maintain
text: ""
background: # set a background image
backgroundImage: "/images/bantersnaps-5U_28ojjgms-unsplash-2000.jpg" # "/images/my-background-image.jpg" - Path to image
opacity: 1 # 0 to 1 - Set a lower opacity to blend the background image into the background color, useful if the headings are difficult to read over the top of the image
monotone: true # true/false - Blends the background image into the background color using preset blend mode filters, looks cool in some cases
image: # set a foreground (thumbnail) image
image: "" # "/images/my-image.jpg" - Path to image
shadow: false # true/false - Add a shadow to the image
border: false # true/false - Add a border to the image
buttons: # add buttons
- button:
text: Page Builder Documentation # "Read More" - Text on the button
external: true # true/false - Use when linking to other websites, the button will open in a new window
url: https://hugo-paradigm.netlify.app/docs/hugo-paradigm/page-builder/using-the-page-builder/
theme: base # "base", "primary", "base-text", "primary-text"
Designed and built by Rob Austin @ausrobdev in Brisbane, Australia. We stand on the shoulders of giants: Hugo | Jekyll