[Resolved] How to create notification bar like on health template

[Morgan]

Hi,

I would like to create a notification bar like you did on health template but on crypto theme.
I think it’s with the element part but what i have to do please ?

Thanks

Morgan

[David]

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:

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

[Morgan]

Great David, as usual you’re very helpful.

Have a good day

[David]

You’re welcome

[Author]

Posts