Working with sliders in WebPlus X6

Sliding Banner in WordPressSliders are an exciting new addition to WebPlus X6, enabling you to showcase images, text, and interactive objects like streaming media and forms in a scrolling banner. Here, we’re going to show you how easy it is to add and customise one in your website.

Browsing and adding a slider

Firstly, add a slider to your page by bringing up the Assets tab (below); either go to View>Studio Tabs>Asset Tab or expand the Assets tab by clicking the arrow next to the Web Properties toolbar. In the Assets tab, select Assets and click Sliders/Panels, then drag a slider onto your page.

Opening the Assets tab

Editing the slider

Now you can begin to edit the slider. In the Objects tab, click the slider and select Edit Slider on the Context toolbar. Under the Options tab (below), you can set the animation style, whether the slider will scroll automatically or not, how quickly it scrolls etc. When you’re done, click OK.

With the slider selected, select the panel you want to edit from the drop-down menu on the Context toolbar. To replace an existing image with another, simply highlight the image, click the Replace Picture icon, and select your new image.

To add an image or other object to an empty panel, go to Insert and select the relevant option. Drag the object onto your page and drop it within the confines of the panel. You can also add links to your panels; to link an image, for example, simply select it, right click, and click Hyperlink.

Editing your slider

Adding a button

We’re going to also edit a button that’ll enable visitors to scroll through the slider. With your button selected, right click, select Actions, and click Add>Slider. In the Slider Control Action window (below), select your slider from the drop-down menu, then choose a suitable action (‘next’, for example, will move to the next panel upon clicking the button).

Setting your slider actions
And that’s it! Preview your slider and button in action by hitting Alt+P.

The finished article: your slider in action

Watch the Tutorial Video!

If you want to see the process in action, this tutorial video is a short watch at just 5 minutes and will make sure adding your own images and text to sliders is quick and easy!

You can access more support, resources, and forums on the Serif website, as well as right here on the Serif Blog.

  1. July 30, 2012
    • July 30, 2012