{"id":2683,"date":"2024-07-29T17:12:52","date_gmt":"2024-07-29T21:12:52","guid":{"rendered":"https:\/\/sites.georgetown.edu\/1789-documentation\/?page_id=2683"},"modified":"2024-08-19T19:59:58","modified_gmt":"2024-08-19T23:59:58","slug":"how-to-program-homepage-hero","status":"publish","type":"page","link":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/introduction\/program-hero\/how-to-program-homepage-hero\/","title":{"rendered":"How To: Program Homepage Hero"},"content":{"rendered":"\n

Adding the Block<\/h2>\n\n\n\n

To add the Program Homepage Hero block, click the \u201c+\u201d symbol and search for \u201cProgram Homepage Hero\u201d. Then, select the Program Homepage Hero block icon.<\/p>\n\n\n

\n
\"The<\/figure>\n<\/div>\n\n\n

Editing a Program Homepage Hero block<\/h2>\n\n\n\n

The block editor for the Program Homepage Hero block has fields for an image, title, description, link, and social media links.<\/p>\n\n\n\n

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.<\/p>\n\n\n

\n
\"The<\/figure>\n<\/div>\n\n\n

Next, add a title and description by clicking into the text fields and typing. Remember to follow the recommended character counts!<\/p>\n\n\n

\n
\"The<\/figure>\n<\/div>\n\n\n

Then, add an overall link by typing your link text in the Link text field and using the toolbar to add the URL.<\/p>\n\n\n

\n
\"The<\/figure>\n<\/div>\n\n\n

Lastly, add any optional social media links by selecting the platform and adding the social media handle.<\/p>\n\n\n

\n
\"The<\/figure>\n<\/div>\n\n\n

Additional Block Settings<\/h2>\n\n\n\n

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.<\/p>\n\n\n

\n
\"The<\/figure>\n<\/div>\n\n