Upcoming Theme Called "Up" Is Coming This Year! Read more... ×
Docs

Documentation

Get started by browsing the docs below to pinpoint what you're looking for.

[Title Slider] Modifying the slider

In this tutorial, we're gonna show you how to configure the title slider.

You'll need:

  1. Band

Step 1: Logging into the ACP & finding the title slider template

Go to Customization -> Appearance -> Themes. Then, click the first icon (</>), and then scroll down until you see the template called "titleSlider".

Step 2: Adding more title slides & pagination

1. Adding title slides

Scroll through the code and find "<!-- START HERE & PASTE IN ANOTHER SLIDE -->". This is where you'll start adding slides to the slideshow.

Here's the example code:

<div class='titleSlides ipsAnim ipsAnim_verySlow ipsAnim_wobble'>
  <div class='titleCaption_inner'>
    <h1 class='titleCaption'>Title Here</h1>
    <div class='titleCaption_text ipsType_richText' data-ipsTruncate data-ipsTruncate-size='3 lines'>Description here</div>
  </div>
</div>

You'll only need to change two things: 'Title Here', and 'Description here'.

Let's move on to step 2 (adding pagination).

2. Adding pagination

Scroll all the way down and find "<!-- START HERE & DUPLICATE THE SPAN, BUT RENAME THE NUMBER TO 4 -->". This is where you'll start adding dots to the slides. Plus, there will be a enclosed code for a example code, so if you don't remember this tutorial, that example will help you.

Here's the example code:

<span class='dot' onclick="currentSlide(NUMBER HERE)"></span>

You'll only need to change 'NUMBER HERE' for the amount of slides you have.

After you're done, click the "Save" button and refresh your site. The new changes that you've made will load the new slides and pagination.

If you need help on this modification, please don't hesitate to contact us at admin@themetree.net.

Sincerely,

ThemeTree

Edited by Brian A.

×