Note: Copy the JavaScript from the Custom HTML block below (including script tags) and paste into the footer section of Page Scripts > Custom CSS & JS in the Kadence Blocks Controls (or a code snippet plugin) for the page you want to use this on, then delete the block from the page.

The CSS is contained in the Advanced Tab of the parent section. There are two variables at the top of the CSS you can change to adjust the size of the text and the rotation speed.

/*Variables*/
:root {
–bb-circle-size: 250px; /* Diameter of the circle – adjust as needed */
–bb-circle-speed: 30s; /* Rotation speed – adjust as needed */
}

Also adjust the Content Max Width value in the section settings. This does not have to be exactly the same as the variable value above, but setting a max width will help with positioning the circle where you want it on the page. You can also set a min height in the structure settings in the advanced tab if you wish.

When editing the text, make sure you end your text with a full stop/period – It won’t show on the front end, but is required to create a space between the last and first characters.

You can drag the text circle container section into other sections or rows and adjust its position using the padding and margin settings in the section.