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.
To add this block to your homepage, copy the below YAML configuration for this block into the existing
sections on your homepage at
Alternatively, to create a new page with this block, copy the full YAML front matter below into a new file such as
--- 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/wowchemy/wowchemy-hugo-themes" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star">Star Wowchemy Website 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 Wowchemy - 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 (