Auto-scroll announcement bar

Go to Theme Settings -> Announcement bar & tick in the box Show Announcement 
Could not load image
Copy this HTML code into the Message 
1
<div class="sf__scrolling-text text-base" data-outline-thickness="thin" data-s-dir="ltr" style="--speed: 15s;">
2
  <div class="sf__scrolling-text-inner">
3
     <p><em><b>ANNOUCEMENT 1</b><span class="custom" data-scale="large"></span><b>ANNOUCEMENT 2</b> <span class="custom" data-scale="large"></span><b>ANNOUCEMENT 3</b><span class="custom" data-scale="large"></span></em></p>
4
     <p><em><b>ANNOUCEMENT 1</b><span class="custom" data-scale="large"></span><b>ANNOUCEMENT 2</b> <span class="custom" data-scale="large"></span><b>ANNOUCEMENT 3</b><span class="custom" data-scale="large"></span></em></p>
5
     <p><em><b>ANNOUCEMENT 1</b><span class="custom" data-scale="large"></span><b>ANNOUCEMENT 2</b> <span class="custom" data-scale="large"></span><b>ANNOUCEMENT 3</b><span class="custom" data-scale="large"></span></em></p>
6
     <p><em><b>ANNOUCEMENT 1</b><span class="custom" data-scale="large"></span><b>ANNOUCEMENT 2</b> <span class="custom" data-scale="large"></span><b>ANNOUCEMENT 3</b><span class="custom" data-scale="large"></span></em></p>
7
     <p><em><b>ANNOUCEMENT 1</b><span class="custom" data-scale="large"></span><b>ANNOUCEMENT 2</b> <span class="custom" data-scale="large"></span><b>ANNOUCEMENT 3</b><span class="custom" data-scale="large"></span></em></p>
8
  </div>
9
</div>
Copied!
Then, freely change the content inside the code (text Announcement)
To change the speed of auto-scrolling section, you can edit the first code line, you can see the code style="--speed: 15s;" - then you can edit "15s" to any other amount of time you want. 
​
​

FAQS - Previous

Add/Remove Social icons in footer

Next - FAQS

Auto-scroll text section

Last modified 5mo ago

Copy link

Contents

​