Slider template – photo with large, offset caption


This slider was originally created for the Saratoga website, and was meant to fill in an area about 2/3 width of the page in desktop view.

  • It is set up to have captions and links entered manually but could also be easily converted to a post slider.
  • The arrows are added custom within a slide layer.
  • CSS is needed to add focus styles for the arrows.
  • Because the images are brought in as image objects (as opposed to the background of the slide), there’s also some additional CSS added to force the image to crop to the desired aspect ratio (3:2).
  • To apply the CSS, add a custom style to the group or column block that holds the slider. In this example, the class is wrap-slider-b. A CSS file has been saved along with the exported template files.
Slide 1 Example
size images to 1650x1100 px
Seniors had the opportunity to visit an elementary school today wearing caps and gowns!
Read more about the visit.
Slide 2 example
Elementary students drawing with colored chalk on sidewalk
Division Street Elementary Students held a PBIS celebration!
Check out all the fun activities it included.
Slide 3 example
desk with colored pencils, books, apple and chalkboard
Division Street Elementary Students held a PBIS celebration!
Check out all the fun activities it included.