Customer File Uploads

Customer File Uploads

Before After Slider for Joomla Website Builder Gridbox. Compare Easily

Before After Slider for Joomla Website Builder Gridbox. Compare Easily

Looking for a simple and effective way to showcase and compare your skills or work results? With Joomla website builder Gridbox 2.12.9, it's as easy as typing. Because now you have an excellent new plugin in your arsenal of powerful Gridbox tools. Meet the Before After Slider - a perfect tool for creating visual comparisons. Just pull the slider!


Before After Slider for Joomla Sites


The Before After Slider is a touch-friendly Gridbox plugin that allows you to show two image versions together. Use Before After Slider on Joomla sites to showcase the results of different projects. For example, you can visually compare the stages of transformation. It can be a change in hairstyle, the results of a workout, diet or massage. As a matter of fact, the Before After Slider is perfect for any site created for the beauty or fitness industry, building, design, and photography.

Showcase the Results of Different Projects - Before After Slider for Joomla Website Builder Gridbox


Setting Up the Before After Slider Plugin


The flexible Before After Slider plugin comes with a wide range of settings. Here you can configure all plugin elements so that it fits perfectly into the design of your site. Scroll down to learn about the available settings and see some excellent examples.


Setting Up Photos and Labels


After adding the plugin Before After Slider to the page, you'll need to set images and labels. Also, don't forget to add Image Alts for search engine optimization.

Setting Up Images and Labels - Before After Slider for Joomla Website Builder Gridbox

Please note that if you want perfect results, the before and after images should have the same proportions, and guess what? We have provided for everything. We have Photo Editor that will allow you to do this with a few simple clicks right in the Gridbox!

Editing Images using Photo Etitor - Before After Slider for Joomla Website Builder Gridbox


Slider Direction


By default, the Before After Slider will render horizontally. But as we wrote above, using the plugin is as easy as typing. So changing the slider orientation to a vertical layout is not difficult. Just use the Slider Direction option.


Horizontal slider direction

Horizontal Slider Direction - Before After Slider for Joomla Website Builder Gridbox


Vertical slider direction

Vertical Slider Direction - Before After Slider for Joomla Website Builder Gridbox


Slider Starting Point


The Slider Starting Point option allows you to set the starting point for the slider movement. When interacting with the slider, changes are immediately displayed to your customer.

Slider Starting Point - Before After Slider for Joomla Website Builder Gridbox


Label on Mouseover


Display labels permanently or only on hover, it's up to you. The Label on Mouseover option will help you with this. Disable the Label on Mouseover option if you want the labels to be visible to site visitors at all times.


Before After Slider Design Settings


Well, after the basic settings of the Before After Slider, let's take a look at the design settings with you.


Label


In the Design tab, select Label. Here you can set all necessary Typography options such as a font family, size, color, letter spacing, and so on. Depending on the Slider Direction, you can change the position of the Label on the image.

Label Settings - Before After Slider for Joomla Website Builder Gridbox


Divider


Want to change the color or width of the Divider in the new plugin? No problem, choose Divider in the Select dropdown list and set the desired value.

Divider Settings - Before After Slider for Joomla Website Builder Gridbox


Slider


How about changing the slider design? And this is also possible without a single line of code because this is the Gridbox. You'll find a large number of different options in the Slider settings. Here you can set size, color, padding, border, shadow. And that's not all, because you can also experiment with Hover Effects. So you're absolutely free to implement your most daring design ideas!


Before After Slider on Mobile Devices


You're probably wondering how Before After Slider works on mobile devices. Like all Gridbox plugins, Before After Slider is very responsive and works with touch and swipe functionality. Let's take a look at this.


Conclusion


The Before After Slider is at your disposal. Now you can use it to create stunning comparison sliders that you've never been able to create before. Add an effective showcase presentation on your Gridbox sites and increase engagement through interaction. Enjoy!


Changelist

v.2.12.9 - 10/02/2022

  • Added: The Before After Slider plugin;
  • Fixed: Issue with sitemap;
  • Fixed: Issue with multilingual blog post associations.