• Your cart is empty.

Before After Slider Module for Divi

Another excellent product by CakeWP

*Support is provided by vendors directly. Please click here to access support for individual products
For payment or licensing issues, please click here to access EMP Support

Changelog

* v 2.0

– Now Full Visual Builder Compatible.

* v 1.2

– NEW: Move the slider on hover option added.
– NEW: Move the slider on click option added.
– NEW: Option added to enable/disable Hover Overlay.
– NEW: Bunch of sliding bar styling options added.
– NEW: Bunch of sliding handle styling options added.
– NEW: Overlay styling options added.
– NEW: Before/After Label styling options added.
– Improvement: Refactored some code and improved the module output.
– Improvement: Reorganize Some Options.
– Fix: Auto Update functionality fixed.

* v 1.1
– New Option: Slider Initial Position.
– Added One Page Bonus Layout Pack
– Bug Fix: Fixed vertical slider issue in IOS devices and elsewhere.
– License file & Detailed Readme file added.
– Little bit code improvement.

* v1.0
– Initial Release

V2 – NOW FULL VISUAL BUILDER COMPATIBLE

Showcase your before & after photos in an awesome unique way with this easy to use Divi module.

This Divi Module is fast and responsive, and it will adjust depending on your screen size. What’s more awesome is that it works blazing fast in mobile devices and becomes a touch and drag slider.

This Divi Module is perfect for showcasing:

  • Makeup or makeover before & after photos,
  • Before & after shots of landmarks and places,
  • Photography or design before & after screenshots,
  • Website before & after redesigns,
  • And much more.

Module’s Main Features:

  • Full Visual Builder Compatible
  • Easy to use
  • Lightweight
  • Horizontal & Vertical Orientation
  • Possible to change the Before / After Label Text
  • Add/customize Borders the same way you do with Divi Image Module
  • Responsive & Touch Enabled
  • Possible to adjust initial slider bar position
  • Move slider on Hover or Click anywhere option
  • Fully customize the sliding bar
  • Fully customize Before/After labels
  • Fully customize hover overlay, or even disable it completely.

It also works with Extra theme too as that uses Divi Builder as well.

FREE Bonus Divi Layout

A creative one page profile divi layout is added to the bundle now for existing & new customers. This layout also demonstrate how creatively we may use this module with in Divi’s Tab module. Have a look at demo here there is also detailed installation instructions on the documentation page.

Install Instructions:

Simply upload and install the plugin and then you should see a new module named “Accordion Image Gallery”. Add it via the visual builder or back-end builder and the options there are simple and self-explanatory.

Important – Add your License Key

When you purchase this product a License key will be generated and shown in your invoice & in your EMP account, please copy that and once the plugin is installed and activated go to Plugins > BA Slider License page and insert your License key and save it. This is really important step so you get future updates notification right in your WordPress dashboard and it can be updated directly from there.

If you like this, have a look at my other available freebies and products.

DiviHQ     Products by CakeWP

Licensing

This theme or plugin is comprised of two parts.

1. The PHP code and integrated HTML are licensed under the General Public
License (GPL). You will find a copy of the GPL in the same directory as this
license file.

2. All other parts, including but not limited to the CSS code, images and design are
copyrighted by the vendor concerned and are NOT licensed under GPL.

This license allows the item to be used in projects for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resale either on its own, in part, or as part of a larger project including that being part of a hosting offer. Distribution of source files is not permitted.

We understand that there can be issues whilst utilizing out of date browsers. Please ensure you use up to date browsers when using our vendors products. For DIVI Theme – Third Party Plugins may not perform as desired in the Divi Visual Builder. We are working with our vendors to rectify this situation as quickly as possible. With the release of Divi 3.1 developer documentation and SOME support of third party modules and plugins are now accessible through the visual builder. 

Please be aware that you will need an amount of experience in the master theme that you are using in order to take advantage of our themes and plugins.
Please make your decision to purchase based upon your skill level to see if our products fit your needs. Due to the nature of Digital Downloads, Refunds are not possible unless the plugin or theme is unusable in your set up – we will require proof of this – please ensure that the product you are buying will do the job you want it too. In the case of Divi and Visual Builder compatibility – some plugins do not yet have 100% VB compatibility. Please check descriptions thoroughly to ascertain VB compatibility. Whilst every effort is made by our vendors to ensure compatibility with other themes, plugins and or web servers. This can never be guaranteed due to the many thousands of iterations in the wild. Please do not be afraid to ask the vendor for support by visiting the product page and clicking the relevant link.

 

General Note: You MAY need to purchase the Divi Theme or the Elementor page builder to use this product. Please see the product description notes above for more information.

Licensing

This theme or plugin is comprised of two parts.

1. The PHP code and integrated HTML are licensed under the General Public
License (GPL). You will find a copy of the GPL in the same directory as this
license file.

2. All other parts, including but not limited to the CSS code, images and design are
copyrighted by the vendor concerned and are NOT licensed under GPL.

This license allows the item to be used in projects for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resale either on its own, in part, or as part of a larger project including that being part of a hosting offer. Distribution of source files is not permitted.

We understand that there can be issues whilst utilizing out of date browsers. Please ensure you use up to date browsers when using our vendors products. For DIVI Theme – Third Party Plugins may not perform as desired in the Divi Visual Builder. We are working with our vendors to rectify this situation as quickly as possible. With the release of Divi 3.1 developer documentation and SOME support of third party modules and plugins are now accessible through the visual builder. 

Please be aware that you will need an amount of experience in the master theme that you are using in order to take advantage of our themes and plugins.
Please make your decision to purchase based upon your skill level to see if our products fit your needs. Due to the nature of Digital Downloads, Refunds are not possible unless the plugin or theme is unusable in your set up – we will require proof of this – please ensure that the product you are buying will do the job you want it too. In the case of Divi and Visual Builder compatibility – some plugins do not yet have 100% VB compatibility. Please check descriptions thoroughly to ascertain VB compatibility. Whilst every effort is made by our vendors to ensure compatibility with other themes, plugins and or web servers. This can never be guaranteed due to the many thousands of iterations in the wild. Please do not be afraid to ask the vendor for support by visiting the product page and clicking the relevant link.

 

V2 – NOW FULL VISUAL BUILDER COMPATIBLE

Showcase your before & after photos in an awesome unique way with this easy to use Divi module.

This Divi Module is fast and responsive, and it will adjust depending on your screen size. What’s more awesome is that it works blazing fast in mobile devices and becomes a touch and drag slider.

This Divi Module is perfect for showcasing:

  • Makeup or makeover before & after photos,
  • Before & after shots of landmarks and places,
  • Photography or design before & after screenshots,
  • Website before & after redesigns,
  • And much more.

Module’s Main Features:

  • Full Visual Builder Compatible
  • Easy to use
  • Lightweight
  • Horizontal & Vertical Orientation
  • Possible to change the Before / After Label Text
  • Add/customize Borders the same way you do with Divi Image Module
  • Responsive & Touch Enabled
  • Possible to adjust initial slider bar position
  • Move slider on Hover or Click anywhere option
  • Fully customize the sliding bar
  • Fully customize Before/After labels
  • Fully customize hover overlay, or even disable it completely.

It also works with Extra theme too as that uses Divi Builder as well.

FREE Bonus Divi Layout

A creative one page profile divi layout is added to the bundle now for existing & new customers. This layout also demonstrate how creatively we may use this module with in Divi’s Tab module. Have a look at demo here there is also detailed installation instructions on the documentation page.

Install Instructions:

Simply upload and install the plugin and then you should see a new module named “Accordion Image Gallery”. Add it via the visual builder or back-end builder and the options there are simple and self-explanatory.

Important – Add your License Key

When you purchase this product a License key will be generated and shown in your invoice & in your EMP account, please copy that and once the plugin is installed and activated go to Plugins > BA Slider License page and insert your License key and save it. This is really important step so you get future updates notification right in your WordPress dashboard and it can be updated directly from there.

If you like this, have a look at my other available freebies and products.

DiviHQ     Products by CakeWP

General Note: You MAY need to purchase the Divi Theme or the Elementor page builder to use this product. Please see the product description notes above for more information.

You may also like these items

Support Request

You have questions about your purchased plugin, theme or layout? Then use this form to get your answers as soon as possible. If you have a license key, please enter it here. You can find it in your account under "view details and downloads". Otherwise, please use the purchase id from your transaction. You can find them in the first column in your purchase history (ID).

5 + 5 =

29 Comments

  1. Klaas Cornelis

    Hi, I’ve found that when I activate Lazy loading in Jetpack the plugin acts up in strange way. It looks like the slider is bigger than the pictures and when clicked it bugs out completly and disappears.

    With Lazy loading turned off, everything is fine.

    • CakeWP

      Hi,

      Yes, that may cause an issue because the Javascript used on the plugin measures the height of the image on page load and adjust it’s container/wrapper accordingly. If you enable lazy load and the images loads later this may cause the script to not work properly.

      The solution is to exclude lazy loading for images used in Before After Slider, fortunately upon digging at jetpack website I can see there is a filter for this, you can use that filter to exclude classes “twentytwenty-before” & “twentytwenty-after”.

      https://developer.jetpack.com/hooks/jetpack_lazy_images_blacklisted_classes/

      If you need help with this, please open a support ticket at http://www.cakewp.com/support

      Cheers,
      Munir

  2. Max

    Hi, A presales Question… Is it possible to change the Slider graphic at all. It looks that by standard it is a circle with arrow heads pointing out…. It would be great to be able to use my customers circular logo in place of that graphic…
    Thanks.

    • CakeWP

      Hi,

      This seems like a good suggestion. This is not possible now but I have noted it as a feature request to follow in next update which is expected to release soon.

      Thanks,
      Munir

  3. Melissa Doyle

    I have no issues with the Divi Theme, but it doesn’t work with the Divi Builder. I have tried on several sites. : /

    • Andrew Palmer

      It does work with the divi builder but it may not work with the Visual builder. We are awaiting instructions and developer notes form Elegant Themes in order to make third party plugins and modules compatible with the VB

    • CakeWP

      Hi Melissa,

      As Andrew said, it works with Divi back-end builder for now only, like any 3rd party divi plugin at this time. If you are having any issue using it with the back-end builder, please open a support ticket at cakewp.com/support and I will follow up.

      Regards,
      Munir

  4. Michael Walch

    Hi Munir,
    my “key activate” does not work with the beaslider plugin. any ideas on that?

    kind greetings,
    Michael

  5. EmberInteractive

    Id like to use this module in an Full Width Section instead of a Standard Section. How can I achieve this?

  6. Nelson

    Hi,
    I absolutely love what I’m seeing with this plugin, but I have a pre-sales question. Is it possible to use GIFs as the images? or perhaps videos?

    Thank you!

  7. William Lee

    This is a great slider except for one issue I’m having. The slider causes issues with Divi’s visual builder. Background images in other parts of the page are messed up when the plugin is activated, even if it’s not being used. Any way to fix those issues?

    • William Lee

      Also, forgot to mention, this plugin doesn’t show up in the visual builder when trying to add a new module. It can only be used in the backend builder.

  8. Jeff White

    Hello,
    Is it possible to add multiple pictures to this slider? Like a slider in a slider I guess. I refinish floors and I would like to add 10 or 11 before and after photos in the same place on my site. I don’t have enough room to display the individually. I love the way my clients can see the before and after of each floor in one picture. Please let me know if this is possible. I have searched everywhere for your product if I can stack pictures in one place.

    Thanks
    Jeff

    • CakeWP

      Hi Jeff,

      That is unfortunately not an option in this plugin, this might work if you add this to a slider plugin but i may not confirm you if that will work 100% within a slider module. Sorry about that.

      Thanks,
      Munir

  9. Fulvio

    Hi,

    As soon I install this plugin on a multisite I receive this alert message from wp

    Notice: wp_register_script was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or login_enqueue_scripts hooks. Please see Debugging in WordPress for more information. (This message was added in version 3.3.0.) in /home/xxx/public_html/wp-includes/functions.php on line 4137

    What can I do to solve that?
    It’s quiet urgent, thanks

    • CakeWP

      Hi,

      That is strange warning, i have personally using it on a multisite the demo site is a multisite as well. May i please request you to get in contact via the contact form here ( http://cakewp.com/contact-us/ ) and i will be bale to debug the issue for you.

      Regards,
      Munir

  10. Stavros Zakkas

    The plugin works like a charm! I had bookmarked 2 other similar plugins from envato, as I could never imagine that someone would ever put his hands in such a specific feature for Divi.
    Kudos Munir.
    I have some queries regarding the background color of the before/next labels. How could I get support?

    Thank you

    • CakeWP

      Hi Stavros,

      Thanks for the feedback and please reach via the form on my website for support i will be here to help you out with that.
      http://cakewp.com/contact-us/

      Cheers,
      Munir

  11. Maciej Ciesielski

    Hi CakeWP,

    When I install plugin on WP 4.6.x it works perfectly, but on 4.7.x sider does not work. When do you plan to update it?

    • Andrew Palmer

      I have informed the developer of this issue. Thanks and it will be updated very soon. I have it installed on a number of site under 4.7 and it works fine. Can you check your php version as well please as we recommend at least 5.5.

  12. Christian

    I’m wondering if it’s possible to use this module as some sort of gallery or thumbnail slider? If not, this could be a nice addition in for example projects of architect, interior designers.

    • CakeWP

      Hi Christian,

      No it’s not possible currently. Thanks for the idea i will think about the possibilities.

      Cheers,
      Munir

  13. Picteos

    Hi, is it possible to edit this custom module with the front visual builder ?

    • Andrew Palmer

      currently no. We are waiting for the developers edition of Divi so our vendors can apply this aspect too. 🙂

  14. Deana

    Really useful plugin, I can show my feature clients how important is my service around pictures. Many thanks!

    • CakeWP

      I am glad you liked it. And sit tight as i am working on a one page Projects layout pack which utilize this module to display the projects / portfolio nicely 🙂 It will be available in a couple of days and will be a bonus freebie.

Submit a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

External links on this website may be affiliate links that could result in us receiving compensation (payment) when you purchase a product or service from that link. For example, we may receive pay per click revenue or commission on sales of products. This helps us to pay the bills and deliver great content for you to enjoy when you are browsing these web pages. You do not pay any extra fees for these items.

By purchasing a product from The Elegant Marketplace you are agreeing to these terms. We do not offer custom support queries, although suggestions will be accepted and acted upon if possible. We do hold data that allows us to connect with you for product updates when you purchase a product. This is not an email marketing list. Should you wish to sign up to our marketing list, please visit our homepage where you will see an optin - We send out around two emails a week to keep you informed of product updates, You may opt out of our marketing communications at anytime by using the unsubscribe facility found at the bottom of each email.

Get the latest news!

Join our mailing list to receive the latest news and updates from our team and a 15% discount code on all products you can add to your cart as a thankyou gift. 

Thanks, we appreciate your support

Pin It on Pinterest

Share This

    Support Form


    The author will normally get back to you within the next 48 hours. All requests are processed one after the other. If you do not receive an answer within this time, please check your spam folder and make sure that you have entered the correct email address.

    You can help us to help you faster. If errors occur, first deactivate all plugins and go back to the parent theme if you are using a child theme (which you should). Check again. Then first turn on your child theme again and then step by step your plugins. Check again every time. Where does the error occur? You can also enable debug.log to get more information to share with us. Use the following snippet to write the debug.log to your "wp-content" folder: Enable debug.log

    Please submit some screenshots showing the problem. The JPG and PNG format and several files are allowed (optional).

    12 + 8 =