Overview

This tutorial will cover the building and editing of Sliders using the Visual Builder.

Watch the video

Working with a slider

Understanding the Slider element we are working with in this tutorial.

The slider we are working with here has three slides. Each slide has text overlaying the slider image. The slider is configured with a "fade" transition between the three slides. Each slide can be hyperlinked to a page or product.

Engaging the Visual Builder

We will begin by navigating to the Storefront host we are working with and then clicking the "Edit" button while viewing the storefront:

Selecting a Slide

Now that we are in the visual builder, we can select a slide. You'll select the slide by hovering over it then when you see the slider element showing a blue outline, click the left mouse button:

The Visual Builder will show which slide is selected in the upper, lefthand corner (in this "Slide1") and the Visual Builder actions menu in the upper righhand corner.

We'll begin by selecting the "Hierarchy" option (either click the three stacked pages icon or use the "h" hotkey) to open the Hierarchy panel:

You'll see the Visual Builder panel open to the far right:

In this view hovering over the slides you'll see the slide appear in the visual view to the left.

Let's first hover over the "Slider" and then left click the "gear" icon to open the slider settings.

We will then see the slider settings tab appear:

As you can see there are many settings related to the slider.

Frequently Asked Questions

Question: "Do slide images in slider "lazy" load?

Answer:  Slider images do not lazy load, but what the system does is actually create size optimized versions of the slider image when not in cover mode so that device appropriate images are served to small screen devices. The system also creates separate size optimized versions of the images, for devices that support that, to enhance speed.