How To: Program Homepage Hero

Adding the Block

To add the Program Homepage Hero block, click the “+” symbol and search for “Program Homepage Hero”. Then, select the Program Homepage Hero block icon.

The Program Homepage Hero block in the WordPress block inserter.

Editing a Program Homepage Hero block

The block editor for the Program Homepage Hero block has fields for an image, title, description, link, and social media links.

First, add an image to the block by uploading or selecting one from the media library. For best results, choose an image with a central focal point and darker colors towards the top.

The Program Homepage Hero block in the WordPress editor with the image upload and media library options highlighted in a red box.

Next, add a title and description by clicking into the text fields and typing. Remember to follow the recommended character counts!

The Program Homepage Hero block in the WordPress editor with the title and description fields highlighted in a red box.

Then, add an overall link by typing your link text in the Link text field and using the toolbar to add the URL.

The Program Homepage Hero block in the WordPress editor with the link icon and URL field highlighted in a red box.

Lastly, add any optional social media links by selecting the platform and adding the social media handle.

The Program Homepage Hero block in the WordPress editor with the social media fields highlighted in a red box.

Additional Block Settings

You can change the style of the Homepage Hero’s background in the block tab of the inspector. There are two options: Default and GU Seal.

The block tab of the inspector panel for the Program Homepage Hero block with the Styles section highlighted in a red box.