Customizing the Hero

Heads up! Make sure Grimlock Hero is installed first!

Please make sure you have Grimlock Hero installed and activated before customizing the front page hero. If you haven’t already done so, you still can install this plugin before proceeding to the following steps.

The front page hero of your website can be modified through the Customizer. To display all available customization options, please navigate to Appearance > Customize.

Customizing the Hero General Options

To customize the elements of the front page hero, go to Appearance > Customize > Hero > General.

  • Featured Image – The image featured in the front page hero.
  • Title – The title for the front page hero.
  • Subtitle – The subtitle for the front page hero.
  • Text – The text for the front page hero. Enable the Automatically add paragraphs checkbox to add paragraphs around each line of text.
  • Button Text – The text of the button for the front page hero.
  • Button Link – The link of the button for the front page hero.
  • Button Display – Enable the Display button checkbox to display the button on the front page hero.

Customizing the Hero Layout

To customize the layout for the front page hero, go to Appearance > Customize > Hero > Layout.

  • Layout – The layout for the front page hero.
  • Spread – The spread for the elements contained in the front page hero.
  • Mobile Display – Enable the Display in mobile pages checkbox to display the front page hero when web page is displayed on a mobile device.

Customizing the Hero Style

To customize the style for the pre header, go to Appearance > Customize > Hero > Style.

  • Background Image – The background image for the front page hero.
  • Vertical Padding – The vertical padding for the front page hero, conditioning its size. Enable the Activate full screen mode checkbox to display the front page hero in full screen.
  • Background Color – The background color for the front page hero. Enable the Add gradient to background color checkbox to add a gradient to the background and activate the related controls.
  • Background Gradient First Color – The first color used to generate the background gradient for the front page hero. This control is shown only if the Add gradient to background color checkbox is enabled.
  • Background Gradient Second Color – The second color used to generate the background gradient for the front page hero. This control is shown only if the Add gradient to background color checkbox is enabled.
  • Background Gradient Direction – The orientation on the direction axis used to generate the background gradient for the front page hero. This control is shown only if the Add gradient to background color checkbox is enabled.
  • Background Gradient Position – The position on the direction axis used to generate the background gradient for the front page hero. This control is shown only if the Add gradient to background color checkbox is enabled.
  • Border Top Width – The top border width for the front page hero.
  • Border Top Color – The top border color for the front page hero.
  • Border Bottom Width – The bottom border width for the front page hero.
  • Border Bottom Color – The bottom border color for the front page hero.
  • Title Typography – The typography customization options for the front page hero title, which include font family, font size, line height, letter spacing and text transformation options.
  • Title Color – The color of the title for the front page hero.
  • Subtitle Typography – The typography customization options for the front page hero subtitle, which include font family, font size, line height, letter spacing and text transformation options.
  • Subtitle Color – The color of the subtitle for the front page hero.
  • Text Typography – The typography customization options for the front page hero text blocks, which include font family, font size, line height, letter spacing and text transformation options.
  • Text Color – The color of the text blocks for the front page hero.
  • Button Background Color – The background color for the front page hero action button.
  • Button Color – The color for the front page hero action button.
  • Button Border Color – The color of the borders for the front page hero action button.
  • Button Background Color on Hover – The background color during the mouse hover action for the front page hero action button.
  • Button Color on Hover – The color during the mouse hover action for the front page hero action button.
  • Button Border Color on Hover – The color of the borders during the mouse hover action for the front page hero action button.