In this article you will learn how to create a mobile version of your homepage slideshow. A mobile version of your homepage slideshow allows you to present images differently for a smaller screen, which might otherwise be illegible or hard to comprehend due to the decreased scale.


To get started login to your site's Admin.


First you will need to create smaller/simplified versions of your current slideshow images. We recommend either square (450x450px) or landscape rectangles (600x400px). Do not upload images that have not been properly cropped, are different sizes, and have not been compressed for the web. After cropping all your images to the exact same size, run each one through this online compressor.


To Create a Mobile Version of your Homepage Slideshow


There are two parts to this process.


PART 1:

  1. Navigate to Content > Slide Shows
  2. Click the "Add Slideshow" button
  3. Give the Slide Show a name - we recommend something obvious like "Home - Mobile"
  4. Upload your properly-sized image via the 'Image' field
  5. Link the image to go somewhere when clicked, via the 'Url' field
  6. Scroll down to add multiple images (referred to as Slides in this area of the Admin)
  7. Save the Slide Show


PART 2:

  1. Navigate to Content > Pages
  2. Click on the 'Home' page
  3. Navigate to the Dock where your 'Home' Slideshow lives (via a Slideshow widget) - typically (but not all the time) the Dock is called 'Banner Page' or 'Banner Bundle'
  4. Click on the Slideshow widget that already exists within that dock
  5. In the 'Label Name' field add "Slideshow-Desktop"
  6. To the 'CSS Class' field add "hidden-sm-down"
  7. Save the widget!
  8. From the Widget Library click + drag the Slideshow Widget and drop it underneath the Slideshow widget that already existed within the Banner Bundle (or whatever it is called) dock
  9. Click on that widget after you drop it into the dock
  10. In the 'Label Name' field add "Slideshow-Mobile" 
  11. From the 'Slideshow' drop-down select the Slide Show you just created, likely called 'Home - Mobile'
  12. To the 'CSS Class' field add "hidden-md-up" (similar to the screenshot above)
  13. Save the widget!

Follow these instructions in video format: https://files.thinkspacehq.com/index.php/s/SmT2YR8QWfNZZkz

* Note there is no sound.