Hero

The Hero block can be used to encourage visitors to perform an action (CTA). It’s the first thing that visitors see when they visit your website, and it influences the way your visitors feel and behave on your site.

Typically, the Hero block is configured to include a hero image, a tagline and a call to action (CTA) button - the action that you would like your visitors to perform. There are other possibilities as well though, such as including a secondary action, note, and background.

Usage

To add this block to your homepage, copy the below YAML configuration for this block into the existing sections on your homepage at content/_index.md.

Alternatively, to create a new page with this block, copy the full YAML front matter below into a new file such as content/hello.md.

---
sections:
  - block: hero
    content:
      title: Your Hero Title
      image:
        # Reference an image in your `assets/media/` folder
        filename: hero-academic.png
      # Add your Call-To-Action (CTA) button and optional icon
      cta:
        label: Get Started
        url: https://wowchemy.com/templates/
        #icon_pack: fas
        #icon: download
      # Optionally, add an alternative CTA link
      cta_alt:
        label: Ask a question
        url: https://discord.gg/z8wNYzb
      # Optionally, add a note under the Call-To-Action button
      cta_note:
        label: >-
          <div style="text-shadow: none;"><a class="github-button" href="https://github.com/HugoBlox/hugo-blox-builder" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star">Star Hugo Blox Builder</a></div><div style="text-shadow: none;"><a class="github-button" href="https://github.com/wowchemy/starter-hugo-academic" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star">Star the Academic template</a></div>          
      # Add your Hero text here
      text: |-
        **Generated by Hugo Blox Builder - the FREE, Hugo-based open source website builder trusted by 500,000+ sites.**

        **Easily build anything with blocks - no-code required!**

        From landing pages, second brains, and courses to academic resumés, conferences, and tech blogs.

        <!--Custom spacing-->
        <div class="mb-3"></div>
        <!--GitHub Button JS-->
        <script async defer src="https://buttons.github.io/buttons.js"></script>        
    design:
      # Choose an optional background color, gradient, image, or video
      background:
        gradient_end: '#1976d2'
        gradient_start: '#004ba0'
        text_color_light: true
---

You can optionally add an icon to the CTA button (cta option).

Usage

Feedback