A top header scrolling notice is useful when you need to catch the user’s attention. Using the Kadence theme, this feature can be built with HTML + CSS animation.

Here is a preview of the result:

How to build an Infinite NewsTicker (Marquee) using Kadence Blocks

Screenshot of an Infinite News Ticker (Marquee)

Step 1: setting an HTML element

Go to Appearance – Kadence – Elements, and create a new HTML element. It can be set on the whole website, but for Demo purposes, I used it just for a single page

Step 2 – Adding the HTML code

Add the HTML code to the HTML Element: there is a container div with 2 or more child elements.

/*HTML*/
<div class="marquee">
  <div class="marquee__item">
    Lorem Ipsum Dolor Sit Amet
    <span class="marquee__seperator">*</span>
    Lorem Ipsum Dolor Sit Amet
    <span class="marquee__seperator">*</span>
    Lorem Ipsum Dolor Sit Amet
    <span class="marquee__seperator">*</span>
    Lorem Ipsum Dolor Sit Amet
    <span class="marquee__seperator">*</span>
    Lorem Ipsum Dolor Sit Amet
    <span class="marquee__seperator">*</span>
    Lorem Ipsum Dolor Sit Amet
    <span class="marquee__seperator">*</span>
    Lorem Ipsum Dolor Sit Amet
    <span class="marquee__seperator">*</span>
  </div>
  <div class="marquee__item">
    Lorem Ipsum Dolor Sit Amet
    <span class="marquee__seperator">*</span>
    Lorem Ipsum Dolor Sit Amet
    <span class="marquee__seperator">*</span>
    Lorem Ipsum Dolor Sit Amet
    <span class="marquee__seperator">*</span>
    Lorem Ipsum Dolor Sit Amet
    <span class="marquee__seperator">*</span>
    Lorem Ipsum Dolor Sit Amet
    <span class="marquee__seperator">*</span>
    Lorem Ipsum Dolor Sit Amet
    <span class="marquee__seperator">*</span>
    Lorem Ipsum Dolor Sit Amet
    <span class="marquee__seperator">*</span>
  </div>
</div>

Step 3 – Adding the CSS

Add the CSS to Customizer – Custom CSS, or Child Theme – style.css.

/* CSS for Scrolling NewsTicker */
.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  animation-play-state: running;
  color: #ffffff;
  padding: 10px;
	margin: 0 auto;
}
.marquee:hover .marquee__item, 
.marquee__item:hover {animation-play-state: paused!important}

.marquee__item {
    display: inline-block;
	will-change: transform;
    animation: marquee 40s linear infinite;
	animation-play-state: running;
}

.page-id-1182 .site-header-row-container-inner .site-container {padding: 0!important;}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

Step 4: Adding the shortcode

Using the KAdence Theme’s header editor, add the shortcode for desktop & mobile versions.

Screenshot showing a shortcode used for the News Ticker section

The HTML+CSS I used, is based on this CodePen:

You can find the preview of the result on my Kadence Demo LiveScrolling Newsticker Marquee.

Similar Posts