Mac SEO Blog

The new EverWeb 4.5 version has recently been released to the public and is packed with lots of exciting new and updated features! One of the headline features is the all new Carousel Widget!

We think that the Carousel widget is a truly amazing, highly customizable, multi-media slider widget, built around EverWeb’s Container technology. In this post we will explain why we think this is a next level widget and how you can get acquainted with it! There’s also a video at the top of this post with a detailed, step by step guide to the widget for those of you who may be new to EverWeb or its Container technology.

A Truly Versatile Multi-Media Widget

The key feature of the Carousel widget is that it lets you combine disparate object elements together: Images, videos, widgets, maps, Containers and text, all within your slide show. Six different animation styles let you show off your mixed media slides in the best way possible. As you would expect, you also get the standard slide show features such as autoplay and loop. There are also options to adjust the slider speed and to pause the slide show on mouse over.

In addition to being able to mix media as you want, you can also add in EverWeb 4.5’s new features such as Background Masks, Overlay Effects, On Click Actions, Margins and Padding and Containers, to give the slide show the look and abilities that you require of it.

What You Can Use The Carousel Widget For…

The ability to use mixed media in your slide show makes this widget ideal for an almost unlimited range of tasks. Here are some suggestions:

• Educational Subjects: Step by Step guides
• Information Sharing: e.g. resource guides, general company info guides
• Directions: e.g. you could provide step by step directions to a location – real or virtual
• Instructional slide shows, e.g. cooking recipes.
• How To Do Instructions: e.g. DIY instructions
• Business Case or Course Outlines
• Product or Services Sales

Customizable Click-Through Options

In addition to selecting the slide show animation, you can also change the slide show background and the spacing between slides. The Previous/Next buttons can also be customised. You can move these buttons independently to your desired location within the widget. Additionally, you can also change the icons and/or the icon colorsl.

Getting Started with The Carousel Widget

To see the Carousel widget in action, just drag and drop it from the Widgets tab on to the page. In this example, we will add it as a full width object in a Responsive page. Once you have added the widget to the page, just drag and drop the media that you want in to the widget e.g. you could use EverWeb’s Free Stock Media library to add images to the slide show. You can also, for example, add a shape to the widget then use the Shape Options: Fill options to change the shape to a video or map fill.

Customizing The Carousel Widget

In our example, the Carousel Widget uses the full width of the page, as indicated by the Full Width info box displayed just outside of the bottom left hand corner of the widget.  The widget is populated with TextBoxes, images and video fills. After adding in your media, the next thing to do is to set the type of slide animation that you want. There are six options to choose from in the Slide Animation drop down menu in the Widget Settings: Slide, Fade, Cube, Coverflow, Flip and Cards. For some Slide Animations, such as Cube, you will need to preview and use the Previous/Next buttons to see the animation effect in action.

After selecting your slider animation you might want to re-order some of the objects in the slide show. To do this just drag and drop the objects you want to move left or right to their new locations. A vertical blue dashed line will help you with placement of the object. If you need to, you may have to use the Previous/Next buttons to scroll the slideshow along when placing objects.

Once you have placed objects where you want them, you might want to change the spacing between them. You can do this globally through the Widget Settings’ Slide Spacing option. If you want to space objects individually, select the object you want then use the Margins & Padding options.

Setting the Slide Show Background

Now that the objects in the slide show are where you want them, you now might want to set the background of the slide show. Click on the Carousel widget itself. You should see the Widget Settings displayed in the Inspector Window. Next, go to the shape Options tab and use the Fill section to set the background that you want. This could be a different color, a gradient fill, or an image. Note that some options such as Slide Show, Video, and Map Fill are not available for use.

In addition to setting the slide show background, you can further customize it with Border Options to give it rounded corners. You could also apply a line stroke option to it to highlight it on your page if you want. This can produce an interesting effect; for example, if you set the stroke to 150, you will see the background is now smaller than the images on top of it.

Customizing The Previous/Next Buttons

You can further customize the look of the widget by changing the appearance of the Previous/Next buttons. You can start by moving the button around the widget to place them where you want. You can use EverWeb 4.5’s new Pin Settings feature here to pin the buttons to the top, bottom, left, and right sides of the widget. Use the info boxes from the vertical and horizontal guides to help you line up the buttons equally from each edge if required.

We recommend that you do not uncheck the Always on Top setting. If you do, it may make if difficult to re-locate the buttons later on. If you cannot find the buttons, you may have to remake the slide show.

You can also change the color of the buttons using Fill options in the Shape Options tab. if you want, you can also change the type of button that you are using as well. Again, in the Shape Options tab, take a look at the Background Mask section. You will see that the image used for the button is shown in the SVG section. You can rotate the button if you want, or replace it with another button image simply by clicking on the existing image displayed in the square. When you do this, you will be presented with a library of different SVG images that you can use. For Previous/Next buttons, we recommend using images from the Arrow section of the SVG library. As the images are SVG files, you can also scale them without loss of resolution which is handy to know.

EverWeb’s new Carousel widget expands the capabilities of what a slide show can do. Also, there’s a wealth of customization options available for the slide show itself as well as the media used in it, via options such as Border Options, Background Masks, Padding & Margins and Overlay Effects.