How to create notification bar like on health template

Hi there,

go to Appearance > Elements and create a New > Block Element.

In the editor you will create your notice bar using the GenerateBlocks plugin. First begin with a Container Block, this can have the background color padding, inner width etc.

Within use a combination of Grid, Headline and Buttons Blocks to build your bar.

If you want a headstart then go to the 3 dot menu and switch to Code Editor, paste this code into the editor:

<!-- wp:generateblocks/container {"uniqueId":"78a4e547","containerWidth":920,"paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","backgroundColor":"var(\u002d\u002daccent-4)","textColor":"var(\u002d\u002dbase-3)","linkColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/grid {"uniqueId":"52814477","columns":2,"horizontalGap":30,"verticalAlignment":"center","verticalGapTablet":20,"horizontalAlignment":"center","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"21a2c196","isGrid":true,"gridId":"52814477","width":78,"widthTablet":100,"widthMobile":100,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"4e14a98d","element":"p","alignment":"center","textColor":"","fontSize":20,"marginBottom":"0","hasIcon":true,"iconColor":"","iconLocationMobile":"above","iconPaddingRight":"1","iconPaddingRightMobile":"0","iconPaddingBottomMobile":"0.5","iconSize":1.6} -->
<p class="gb-headline gb-headline-4e14a98d"><span class="gb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.9 20.1"><path d="M3 20.1c-.5 0-1-.1-1.5-.4C.1 18.9-.4 17 .4 15.6L8.9 1.5c.2-.4.6-.8 1-1 .7-.4 1.5-.5 2.3-.3.8.2 1.4.7 1.9 1.4l8.5 14.1c.3.5.4 1 .4 1.5 0 .8-.3 1.6-.9 2.1-.6.6-1.3.9-2.1.9H3zm7.6-17.6L2.1 16.6c-.2.5-.1 1.1.4 1.4.1.1.3.1.5.1h16.9c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7 0-.2 0-.3-.1-.5L12.3 2.5c-.3-.5-.9-.6-1.4-.4-.1.1-.2.2-.3.4z"></path><path d="M11.4 12.1c-.6 0-1-.4-1-1v-4c0-.6.4-1 1-1s1 .4 1 1v4c0 .6-.4 1-1 1zM11.5 16.1c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.5 1-1 1z"></path></svg></span><span class="gb-headline-text">All patients are required to follow our COVID-19 prevention guidelines</span></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"bed212af","isGrid":true,"gridId":"52814477","width":22,"widthTablet":100,"widthMobile":100,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","removeVerticalGapTablet":true,"removeVerticalGapMobile":true,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button-container {"uniqueId":"5a56916f","alignment":"center","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button {"uniqueId":"f90c97a4","hasUrl":true,"backgroundColor":"#0366d6","backgroundColorOpacity":0,"textColor":"","backgroundColorHover":"var(\u002d\u002dbase-3)","textColorHover":"#00b899","borderColor":"","borderColorHover":"var(\u002d\u002dbase-3)","fontWeight":"bold","paddingTop":"4","paddingRight":"16","paddingBottom":"4","paddingLeft":"16","borderSizeTop":"3","borderSizeRight":"3","borderSizeBottom":"3","borderSizeLeft":"3"} -->
<a class="gb-button gb-button-f90c97a4 gb-button-text" href="#">Read More</a>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/button-container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->

Now switch back to Visual Editor - and you'll have the Health notice bar.

Then in the sidebar Elements tab set it to Hook > Before Header:

https://www.screencast.com/t/yvjqEacDhmXN

And then set the Display Rules Location to where you want it displayed eg. Entire Site or for just the home page use Front Page

Great David, as usual you're very helpful.

Have a good day

You're welcome