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.

The Hero block can be used to encourage visitors to perform an action (CTA).
The Hero block can be used to encourage visitors to perform an action (CTA).


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.

  - block: hero
      title: Your Hero Title
        # Reference an image in your `assets/media/` folder
        filename: hero-academic.png
      # Add your Call-To-Action (CTA) button and optional icon
        label: Get Started
        url: https://wowchemy.com/templates/
        #icon_pack: fas
        #icon: download
      # Optionally, add an alternative CTA link
        label: Ask a question
        url: https://discord.gg/z8wNYzb
      # Optionally, add a note under the Call-To-Action button
        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>        
      # Choose an optional background color, gradient, image, or video
        gradient_end: '#1976d2'
        gradient_start: '#004ba0'
        text_color_light: true

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