{"id":2291,"date":"2019-08-14T17:59:54","date_gmt":"2019-08-14T17:59:54","guid":{"rendered":"https:\/\/wptest.sdelling.w3.uvm.edu\/?page_id=2291"},"modified":"2020-09-18T11:54:09","modified_gmt":"2020-09-18T15:54:09","slug":"2291-2","status":"publish","type":"page","link":"https:\/\/blog.uvm.edu\/manual\/2291-2\/","title":{"rendered":"Hero header banner"},"content":{"rendered":"\n
\n
\n

A hero banner provides a strong introduction to your content and with a button can provide a call to action.<\/p>\n\n\n\n

The following two hero banners were made using an AB Block \u201chero header\u201d and adding a Gutenberg button element. The overlay text and call to action button can be displayed either flush left or centered.<\/p>\n<\/div>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\"UVM<\/div>
\n

A UVM education is deep, broad and interconnected.<\/h2>\n\n\n\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.<\/p>\n\n\n\n

Call to action<\/a><\/div>\n<\/div><\/div><\/div>\n\n\n\n
<\/div>\n\n\n\n
\"UVM<\/div>
\n

A UVM education is deep, broad and interconnected.<\/h2>\n\n\n\n

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <\/p>\n\n\n\n

Call to action<\/a><\/div>\n<\/div><\/div><\/div>\n\n\n\n
<\/div>\n\n\n\n

How to create a hero banner like the ones above<\/h3>\n\n\n\n
\"\"<\/figure>
\n

Navigate to “layouts”<\/h3>\n\n\n\n

While in edit mode, select “LAYOUTS” at the top of your page.<\/p>\n<\/div><\/div>\n\n\n\n

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

Select the Hero Header block<\/h3>\n\n\n\n

The “hero header” block has a large placeholder image with text and a blue button overlay.<\/p>\n<\/div><\/div>\n\n\n\n

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

Change the image setting for proper display<\/h3>\n\n\n\n

The “hero header” block by default is set to be wider than our theme’s page width and the text will get cut off on the right in your browser. To fix this, select “full width” in your image options just above the block.<\/p>\n<\/div><\/div>\n\n\n\n

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

Fix button display<\/h3>\n\n\n\n

The “hero header” block natively has a blue call to action button. Delete this button as the color is off-brand. Add a new “button” block below the text if you want a call to action (CTA). The native Gutenberg button style will be the UVM green when displayed in your browser<\/em>.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
<\/div>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

A hero banner provides a strong introduction to your content and with a button can provide a call to action. The following two hero banners were made using an AB Block \u201chero header\u201d and adding a Gutenberg button element. The overlay text and call to action button can be displayed either flush left or centered. … <\/p>\n

Continue reading “Hero header banner”<\/span><\/a><\/p>\n","protected":false},"author":5625,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2291","page","type-page","status-publish","hentry","entry"],"featured_image_src":null,"featured_image_src_square":null,"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"smasonla","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"A hero banner provides a strong introduction to your content and with a button can provide a call to action. The following two hero banners were made using an AB Block \u201chero header\u201d and adding a Gutenberg button element. The overlay text and call to action button can be displayed either flush left or centered.…","_links":{"self":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/pages\/2291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/users\/5625"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/comments?post=2291"}],"version-history":[{"count":31,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/pages\/2291\/revisions"}],"predecessor-version":[{"id":5314,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/pages\/2291\/revisions\/5314"}],"wp:attachment":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/media?parent=2291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}