Text Ticker (Fade) for Top Bar in Flatsome Theme

Learn to add a text slider effect to your Flatsome theme! This guide shows you how to set up eye-catching, space-efficient text banners perfect for promoting key benefits like free shipping or quick returns.

Step-by-Step Tutorial

Step 1: Adding the JavaScript Code

• Copy the JavaScript Code: Click “Copy” next to the JavaScript code snippet provided.

 <script>
(function($){
    $.fn.extend({ 
        rotaterator: function(options) {
 
            var defaults = {
                fadeSpeed: 500,
                pauseSpeed: 3000,
				child:null
            };
             
            var options = $.extend(defaults, options);
         
            return this.each(function() {
                  var o =options;
                  var obj = $(this);                
                  var items = $(obj.children(), obj);
				  items.each(function() {$(this).hide();})
				  if(!o.child){var next = $(obj).children(':first');
				  }else{var next = o.child;
				  }
				  $(next).fadeIn(o.fadeSpeed, function() {
						$(next).delay(o.pauseSpeed).fadeOut(o.fadeSpeed, function() {
							var next = $(this).next();
							if (next.length == 0){
									next = $(obj).children(':first');
							}
							$(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed});
						})
					});
            });
        }
    });
})(jQuery);

 jQuery(document).ready(function() {
        jQuery('.rotate-top-bar').rotaterator({fadeSpeed:500, pauseSpeed:3000});
 });
 </script>

• Go to WordPress Backend: Log in to your WordPress dashboard.
• Navigate to Flatsome Settings:
  • Go to Flatsome > Advanced settings.
  • Select Global Settings and scroll down to Footer Scripts.
• Paste the JavaScript Code:
  • Paste the code into the Footer Scripts section.
  • Adjust the transition speed by modifying the numbers in the code if needed.
• Save Changes: Scroll down and click Save All Changes.

Step 2: Adding the CSS Code

• Copy the CSS Code: It’s just a single line.

 .rotate-top-bar p{
		display:none;
}

• Go to Custom CSS Settings:
  • Go to Flatsome > Advanced.
  • Click on Custom CSS.
• Paste the CSS Code: Add the CSS line at the top of your existing code.
  • Ensure it applies to all screens so it’s visible on desktop, tablet, and mobile.
• Save Changes: Scroll down and hit Save All Changes.

Step 3: Placing the HTML Code

• Copy the HTML Code: Click “Copy” next to the HTML snippet.

<div class="rotate-top-bar"> 
<p>Ordered before 23:00 is shipped tomorrow </p> 
<p>Free shipping worldwide from $75</p> 
<p>Hassle free returns up to 3 weeks</p> 
</div>

• Open Header Builder:
  • Go to Flatsome > Theme Options.
  • Hover over Header and select Header Builder.
• Add HTML to Toolbar:
  • In the Header Builder, locate the HTML 1 block.
  • Drag it into the toolbar if it’s not already there.
• Enable Toolbar:
  • Make sure the toolbar is enabled by clicking the settings gear icon.
  • Go to HTML 1 settings and paste the HTML code.
• Publish Changes: Click Publish and exit the Header Builder.

Step 4: Testing and Adding More Text Lines

• View Your Site: Go to the front end of your site to see the slider in action.
• Adding More Text Lines:
  • Return to HTML 1 settings in the Header Builder.
  • To add more lines, duplicate the <p></p> tags and add more text inside.
• Publish and Test: Save and refresh your front end to see the updates.

 

And that’s it! You’ve successfully added a stylish text slider to your Flatsome theme. This simple effect helps showcase key promotions in a visually engaging way, especially on mobile. Experiment with text lines and transition speeds to make it truly yours. Thanks for following along, and enjoy creating dynamic, eye-catching banners for your site!