EverWebResponsive WebsiteSoftwareTips and TricksTutorialsWeb DesignWidgets

Make Slide Shows Easily and Quickly with EverWeb 3.6’s New Fill Feature!

The latest EverWeb release, version 3.6, introduces a brand new way of easily adding slide show features to your site without having to use a widget to do so. The new Fill Slide Show feature can be applied to the default and rectangle shapes, a TextBox, image and the Responsive Row widget, so it’s great to use in any page layout.

Why Use Fill Slide Show?
The new Fill Slide Show feature has some differentiators when compared to EverWeb‘s Image Slider widget. For a start, it can be applied to a TextBox which is incredibly useful when you want text overlaying the slide show rather than a caption. Fill Slide Show also lets you apply different layers so, for example, you could have three different TextBoxes overlaying three different slides in a slide show. When using a Responsive Row widget, you can even put a slide show on top of the background slide show which can make for some awesome effects! The last thing of note is that Fill Slide Show feature can sometimes be used to replace animation effects e.g. EverWeb’s animation feature allows you to fade in, but not to fade out, so you have to workaround this. With the the Fill Slide Show feature you can reproduce a fade out effect easily!

Using the Fill Slide Show Feature
As mentioned earlier you can use the Fill Slide Show with a TextBox, image, rectangle Shape or the Responsive Row widget. The way in which you use the feature is the same for all the types of objects that it can be used with. Simply select the object you want to apply the slide show to, then go to the Shape Options tab and select Slide Show from the Fill dropdown menu.

The Shape Options tab will then display the Slide Show options. Start by adding the slides that you want to use to the Slide Show list using the Choose… button. If you have selected an image as the object for your slide show, you will need to re-add the image that you selected back in to the slide show.

If you selected a TextBox as the Slide Show object, the TextBox itself can be empty if you want. It does not have to include text to be used as a slide show. When choosing Slide Show as the Fill option, the text in the TextBox is retained and overlaid on top of the slide show. Similarly, a rectangle or default shape is also, in essence, an empty TextBox and so can be used in the same way with the Slide Show feature. If you select a shape to be used as a slide show, you must use the default or rectangle shape. If you select, e.g. a star shape, then apply Fill Slide Show to it, the shape will be converted to a rectangle shape.

The Responsive Row widget can also be used as a slide show background. This is great if you want to use the widget as a hero image slide show. You can also add TextBox, image or rectangle/default shapes in to the Responsive Row and make them slide shows too, giving you slide shows on top of a background slid show. There are more options available which we will come back to later on…

Fill Slide Show Options and Features
The Transition Options section is where you set the type of transition that you want. There are two options: Fade and Slide Left. If you want a slide show with other transition options you will need to use Image Slider widget. This section also includes sliders for adjusting the transition and, when Automatically Change Slides is checked, Slideshow Speed.

The second section, Navigation Options is where you control how your visitors can manually navigate the slide show. When you set the ‘Show Pagination’ option, you will see ellipses displayed at the bottom, center of the slide show. This section is also where you can choose whether to display the navigation arrows on the far left and right of the slide show. You can have the arrows always display, only when they are moused over or not displayed at all. When displayed, you can also use the navigation arrows in the Editor Window before you publish your site to skip to the previous or next slide. In addition, you can also choose the color of the navigation arrows and its background color.

Creating Slide Shows With The Responsive Row Widget
Adding a slide show to a Responsive Row widget works in the same way as it does for the object types mentioned above. Just select the Responsive Row widget, then go to the Shape Options tab and set the Fill to ‘Slide Show’ from the dropdown menu. Add your slides as you would for any other object. If you want to view the any slide image either select the one you want to view by clicking on the slide name in the Fill Slide Show’s Assets List, or use the direction arrows on the left and right hand sides of the slide show object. Using the left arrow will show you the previous in Assets List and using the right arrow takes you to the next slide.

Creating a Slide Show On Top of a Slide Show
As you may already know, the Responsive Row widget is like a container that can hold other objects, so you can add other slide show capable objects to it to create a slide show within a slide show e.g drag and drop a TextBox inside of the Responsive Row widget and use the Fill Slide Show feature on the TextBox. Voila!

When adding objects to a slide in a Responsive Row widget, the object will be ‘attached’ to the current background slide that is displayed. For example, if you have added three slides to the Responsive Row widget, you will in effect have three layers. If I select the second slide I might then want to add a TextBox on top of that slide. If I then move to the third slide, the TextBox will no longer be visible as it is attached to the second slide.

If you have added an object to the wrong slide, you can easily move it to the background slide that you want it to be attached to. In my example, I want to move the TextBox that I added to second Responsive Row slide to the third Responsive Row slide. First, I use the arrow keys in the Responsive Row slide show, or the Fill Slide Show Assets List, to select the second Responsive Row slide where the TextBox is located. Secondary (right) click on the TextBox then select the ‘Embed In’ from the submenu. Select the Responsive Row that the TextBox is currently in, then you should see the three background slides the widget contains listed as “Slide 1′, ‘Slide 2’ and ‘Slide 3’. You will see that ‘Slide 2’ is currently be ticked, as it contains the Textbox, so select ‘Slide 3’ to move the TextBox to the third background slide. The TextBox will now be located in the third Responsive Row widget slide.

Using EverWeb’s new Fill Slide Show feature adds easy and flexible ways to creating dynamic, hassle free, slide shows in an instant!

You may also like

Comments

Leave a reply

Your email address will not be published. Required fields are marked *

More in EverWeb