Auto-scroll announcement bar
How to create an 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.

Copy link