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 
<div class="sf__scrolling-text text-base" data-outline-thickness="thin" data-s-dir="ltr" style="--speed: 15s;">
  <div class="sf__scrolling-text-inner">
     <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>
     <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>
     <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>
     <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>
     <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>
  </div>
</div>
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 9mo ago

Copy link

​