Note: To use this block you must have Header/Footer Scripts enabled in Appearance > Kadence (this is a pro feature).

IMPORTANT – Copy the code from the Custom HTML block below into Kadence Block Controls > Page Scripts >Custom CSS & JS > Footer on this page, then delete the Custom HTML block.

This template is made up of 2 sections within a parent row. The first section contains the HTML to create the bar container. The second section is for your content. You can add anything you like in this second section. A post (like the demo) or an optin form, or anything else. Just be sure to leave the top section as it is.

You can adjust the height of the bar animation for desktop, tablet, and mobile.
There are a number of variables at the top of the CSS in the Custom CSS toggle of the parent row:

–bb-soundbar-1-height-desktop: 350px;
–bb-soundbar-1-height-tablet: 350px;
–bb-soundbar-1-height-mobile: 500px;

Change the values for each device size. The animated bars must have an explicit height set and you can use any unit EXCEPT %. (px, em, rem, vh, vw are all fine.)

If you want to change the colour and/or opacity of the animated bars you can so this within the variables at the top of the CSS also.

–bb-soundbar-1-background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 66%, rgba(255, 255, 255, 0) 100%);
–bb-soundbar-1-opacity: 0.5;

The background variable defines the bars colour. I’m using a linear gradient which makes the bars fade at the top and bottom, giving them a softer effect. You can edit the gradient, replace with your own, or switch to a solid colour. Here is a handy gradient tool that will generate the required CSS for you: https://cssgradient.io

The opacity value can be adjusted to brighten or dim the animated bars.