Adding text banners to your site

1. Navigate to Website > Templates > click Content Tab and Insert %module:fragment:TEXT_SLIDER% after the <header> tag.
   
   

2. Once added, navigate to Website > Fragments. Create a new Fragment called “Text Slider”

3. Insert this content into the Fragment’s content. 

<style>

 .text-slider {

   background-color: #000000; /*Update this*/

   color: #ffffff; /*Update this*/

   padding: 5px;

   text-align: center;

 }

 .text-slider p {

   margin: 0;

 }

</style>

<div class="text-slider">

 <div class="text-item">

   <p>Update me</p> 

 </div>

 <div class="text-item">

   <p>You can delete me or add a new text slider</p> <!--Update this-->

 </div>

</div>

<script>

 $(function () {

   var $textSlider = $(".text-slider");

   $textSlider

     .slick({

       arrows: false,

       autoplaySpeed: 5000,

       autoplay: true,

       dots: false,

       infinite: true,

     })

     .on("setPosition", function () {

       if (!($(this).find('.slick-slide').length > 1)) {

         $(this).find(".slick-arrow").hide();

       }

     });

 })

</script>

4. Update the background and color in the <style></style> section to match your website’s theme. The text to be displayed should also be updated and if you want to add more.  Insert this element: 

 <div class="text-item">

   <p>Update me</p> 

 </div>

5. Click Save.