WebPlus X6: [How To] Resize a Slider

[BrianE]

Introduction

Thanks everyone for your support on WebPlus X6: A Comprehensive Review. It was quite encouraging to read all of your comments and hopefully you will see a lot more from me soon.

Something that came up on Page 3 of that thread was that it was difficult to resize the sliders, especially sliders which contained overlays. Here are some simple step-by-step instructions on how to resize the sliders with overlays to perfectly match your website.

Please don't be overwhelmed by the length of the tutorial - it is truly step-by-step and has all the information for even the newest WebPlus user to follow.

How To

1. Open the 'Assets' tab. If you're not familiar with this, it's found next to the 'How To' tab in the default WebPlus workspace.
2. Click 'Browse'. Scroll down to 'Globose', which contains an overlay slider. The last slider is an overlay slider.
   
   
   
   
3. Once you've simply clicked upon the slider in the Asset Browser, it will appear in your Asset Manager. So, click 'Close'.
4. Drag the slider onto your page.
5. At this point, the slider is on your page, but you want it much taller. Click the 'Objects' tab, and expand 'Slider'.
   
   
   
   
6. As you can see, there are a total of two panels. One of the panels has an image (1 object total), while the other has the grey shape, the text, and the arrow (4 objects total).
7. Select the top slider panel (4 objects). Drag all of the items off of the slider bounding box onto the page to temporarily remove it from the slider.
8. Select the bottom slider panel (1 object). Drag the image off of the slider bounding box onto the page to temporarily remove it from the slider.
9. At this point, you now have the slider entirely disassembled. Feel free to add your image at this point and remove the original image (I've added my own image in the screenshot).
   
   
   
   
10. Now go ahead and resize the slider bounding box. I find when the bounding box is a bit taller than the image, everything will work better in the end.
11. Resize the grey overlay and the text box to your desired size. At this point, you should have everything sized how you want it. Don't worry if something isn't perfect - it can be easily changed in the next step.
    
    
    
    
12. Go back to your Objects tab. Click the lowest panel, which will load that panel into view on the slider.
    
    
    
    
13. Drag the image onto the slider. Make sure it's at the very bottom of the slider bounding box area (this will ensure the overlay displays correctly).
    
    
    
14. With the lowest panel still selected, add the overlay. Resize it so that it fits perfectly over the image. As long as it is within the slider bounding box area, it will work, but you want to align it at this point so that it fits perfectly in the next step.
    
    
    
    
15. Now you should have everything perfectly aligned. Essentially, if you preview the slider in a browser, you will see what was displayed WebPlus (that is, no animation yet).
16. So now you just need to get the shape overlay and the text as well as anything else you want animated when the mouse cursor hovers of the image (just like the original slider). Select all of the objects besides the background image and the slider bounding box area. Use your CTRL key and click on the objects (text, overlay image, small design triangle). When you have selected everything which should appear on mouseover, press CTRL+X to cut to your clipboard.
    
    
    
    
    
    
    
17. Select the top panel in the Objects tab, which is right above the the background image on the lowest panel. It should be blank.
    
    
    
18. Go to Edit > Paste in Paste. You will now see your objects that were previously cut placed onto the blank panel area. Preview in a browser to see your working slider.
    
    
    
    
    
    
    
    
    
    
    
    Tips: If everything isn't perfectly aligned to your liking, I find it easy just to undo and re-align the 'slide' elements, then Cut and Paste in Place again. Also, to adjust the level at which the shape protrudes from the bottom, go to 'Edit Slider' in the Context Toolbar, and adjust the Overlay Margin. You can also use the Transform tab to make changes to width/height.
    

Conclusion

That's it. You've just resized the overlay slider. You can apply to this same technique to any slider. Try it a few times. It's really not complex once you get the hang of it. The key to this is to move everything off of the slider, re-size the objects, then re-add them back onto one panel, then Cut and Paste in Place to the other panel(s). Have fun with these sliders!

Was this tutorial helpful? Could it be improved? Please feel free to comment and voice your opinion.

Thanks

• Many thanks yet again to my 'sidekick' Lon in California for the original idea of a tutorial. He spent a lot of time playing around with these sliders and sending me his findings via email. Without him, I wouldn't have bothered to write this tutorial.

PLEASE DO NOT QUOTE THIS ENTIRE POST - IT WILL MAKE THE THREAD VERY LONG AND HARD TO READ.

[mjh]

Nice job, Brian

[Lon in California]

Excellent, Brian. Thanks for the kudos, too. Love the sliders, and with your very clear explanation of how to resize them, I expect to see even more splendid uses as the X6 sites begin to roll out.

I'm also building a .wpp file that contains only the sliders from all 30 of the X6 templates, all animated just as they came from the templates. This will allow someone to open a single file and see how all of the sliders operate, without having to open 30 individual templates.

I'm also including some that have been resized as part of the experimentation for the tut.

But, now....sleep calls.



Lon in California

[BrianE]

Originally Posted by mjh Nice job, Brian

Thanks, Marilyn.

Originally Posted by Lon in California I'm also building a .wpp file that contains only the sliders from all 30 of the X6 templates, all animated just as they came from the templates. This will allow someone to open a single file and see how all of the sliders operate, without having to open 30 individual templates. I'm also including some that have been resized as part of the experimentation for the tut.

Thanks, Lon, I expect that to be very helpful to many users, myself included.

[Lon in California]

Originally Posted by BrianE Thanks, Marilyn. Thanks, Lon, I expect that to be very helpful to many users, myself included.

Just dawned on me that I could simply upload that .wpp file to mediafire, as it's just over 3mb, and too big to attach here.




Lon "now abed" in California

[mjh]

Originally Posted by Lon in California Just dawned on me that I could simply upload that .wpp file to mediafire, as it's just over 3mb, and too big to attach here. Here's the link: http://www.mediafire.com/?fpmtf5elqyqjel4 Lon "now abed" in California

Thanks, Lon, it's downloading now.

Sleep well.

[AlfredP]

Originally Posted by Lon in California Just dawned on me that I could simply upload that .wpp file to mediafire, as it's just over 3mb, and too big to attach here. Here's the link: http://www.mediafire.com/?fpmtf5elqyqjel4 Lon "now abed" in California

Hi Lon,

I guess that means it didn't dawn on you that you could almost as simply have uploaded it to the bit of web space where "Lon's Leaves" reside!

Sleep well.

Alfred

Lon's Leaves ⌘ Extra Brushes for CraftArtist

[Ali]

Brian - are you going to collate all this good stuff online for us? Seems a shame to leave it 'buried' here.

[BrianE]

Originally Posted by Ali Brian - are you going to collate all this good stuff online for us? Seems a shame to leave it 'buried' here.

Yes. That's in the plan, eventually.

[AlfredP]

Originally Posted by Ali Brian - are you going to collate all this good stuff online for us? Seems a shame to leave it 'buried' here.

Er ... in case you hadn't noticed, Ali, all this good stuff is already online right here! And I've just "stuck" the thread so that it won't get buried.

Alfred

[Ali]

Originally Posted by AlfredP Er ... in case you hadn't noticed, Ali, all this good stuff is already online right here! And I've just "stuck" the thread so that it won't get buried. Alfred

You know what I mean, and it is early ...

[Ali]

Originally Posted by BrianE Yes. That's in the plan, eventually.

[BrianE]

Originally Posted by AlfredP And I've just "stuck" the thread so that it won't get buried. Alfred

Thank you so much Alfred. I hope this is found to be helpful.

[AlfredP]

Originally Posted by AlfredP I guess that means it didn't dawn on you that you could almost as simply have uploaded it to the bit of web space where "Lon's Leaves" reside!

Now available here: http://serif.punster.info/pilotlon/WPX6/Slider_Catalog-2.wpp

File name: Slider_Catalog-2.wpp
File size: 3.35 MB (3,521,533 bytes)
MD5 hash: 2139DA452D1C94F5FCD90B59479A8FF7

Alfred

[mjh]

Originally Posted by AlfredP Now available here: http://serif.punster.info/pilotlon/WPX6/Slider_Catalog-2.wpp (3.35 MB) Alfred

[BrianE]

Originally Posted by mjh

But wait...there's more.

Tomorrow.

[Lon in California]

Originally Posted by AlfredP Hi Lon, I guess that means it didn't dawn on you that you could almost as simply have uploaded it to the bit of web space where "Lon's Leaves" reside! Sleep well. Alfred Lon's Leaves ⌘ Extra Brushes for CraftArtist

The mind boggles!


...actually, with my freshly diagnosed sleep apnea and resultant oxygen deprivation, my mind is boggled most of the time these days!

Thanks muchly for doing that, Alfred. Hope this is all useful stuff.



Lon "good air in...bad air out" in California

[woonona_butch]

Great tute - makes the upgrade from 5 to 6 worthwhile. Just one question; what do the "swatches" icons on some of the 'Slider' thumbnails in the "Asset Browser mean?

Looking forward to some more greaty tutorials

Chris

[mjh]

Originally Posted by woonona_butch Great tute - makes the upgrade from 5 to 6 worthwhile. Just one question; what do the "swatches" icons on some of the 'Slider' thumbnails in the "Asset Browser mean? Looking forward to some more greaty tutorials Chris

Hiya Chris

They are a secret code but I bet Brian E and/or Lon have figured them out.

[BrianE]

Originally Posted by mjh Hiya Chris They are a secret code but I bet Brian E and/or Lon have figured them out.

The swatches mean the color(s) will change based on the Color Scheme.