Select Page

Make sure you add the CSS code under the “Dynamic” Section so you can reuse the scrollable elements on all pages. Check the video scene from 6:02 8:32 to for reference.

php


ul.scroller {

  list-style-type:none!important;

  font-size:12px;

  line-height: 15px;

}

ul.scroller li {

  background:#5a5858;

  margin:10px 5% 10px 0px;

  padding:5px;

  color:#fff;

  border-radius:5px;

}

.scroller {

  margin-top:1em;

  display:block;

  background: #F1F1F1;

    width: 100%;

    height: 150px;

    overflow-y: scroll;

    border: 1px solid #ccc;

} 

Add the HTML code inside the widget to reflect the scrollable design (scene 4:25 – 6:03)

php


<ul class="scroller">
<li>Title 1</li>
<li>Title 2</li>
</ul>

I also created other tutorials specifically for Learnworlds, see the relevant blogs below.

  • How To Add Carousel Slider In Any CMS Platforms Like WP, Learnworlds
  •