Meet the New Carousel Image Animation Effects

Divi Pixel team does not slow down. In previous updates we added a completely new module that allows you to create amazing text headers. We also worked on the Image Mask module, to which we finally added powerful customization options, 28 new masks and the option to add your own masks.

In this update, we took a heavy look at Blog Slider where we added new features and fixed some small issues. New features have also been added to the carousel slider and the picture accordion. You’ve asked many times how to always display the content of an image, not just on hover, and in this update, such an option has been added. There are a few other improvements and fixes, but you can read about them below.

New Image Animation Effects

The Carousel module is one of the most popular modules in web design industry and can be used for just about anything. We can place our services, partner logos, photo gallery and much more and let users move them around using the slider. This module is very customizable and responsive. We can control the number of columns on mobile devices, open images in a modal window, enable autoplay, change the display time of each slide, and much much more.

In this update, our team added custom animations for the image displayed in the Carousel module. We have 7 image animations to choose from, which will activate when the user hovers over the carousel element. This improvement will greatly improve the user experience. When we developed these improvements, we thought it would be good to add the same effect to the Blog Slider module too.

Both modules also have new custom CSS fields that allow you to highlight the active slide. For the fields to be active, our slider must have the Centered option turned on. Then we can add the code with styles for the active slide and for the rest of the slides.

Image Accordion Content Always Visible

The Image Accordion is another module that we improved in this update. A new option has been added, where we can choose what content elements will always be visible, not just on mouseover. This option, while useful, has some limitations. Our image will increase width on hovering the mouse, and thus, the element where the text is located will also change its width, which may cause our content to change width during the animation.

However, there are ways to use these options. The best thing is to simply limit the content, or make the content in the open image the same width as the content in the inactive image. Another solution is to turn off the animation, i.e. set the Active Image Width to 1. Then our image will not increase in width and content animation will be seamless.

Divi Pixel modules work with the new Divi icons

Elegant Themes introduced us to completely new icons in version 4.13. In the new version, Divi users can select icons more intuitively and quickly. Over 1,500 new FontAwesome icons have been added, and the ability to filter and preview icons in a large window. Another improvement is the new icon module that allows you to add icons to your page and gives you more customization options.

Unfortunately, with all these improvements, the icon selection in all 3rd party Divi modules was cancelled, and the new Font Awesome icons were also not working. Due to the lack of documentation, fixing this was not easy, but as always, our team did their best to let users enjoy the new icons across all Divi Pixel modules.

Other Fixes and Improvements

There are a few other things that have been improved that I would like to mention here. In the Image Showcase module, we added an option to add links to individual images, so displaying our portfolio will now be easier and will allow visitors to click on a specific slide to see more information.

You also reported a problem with one of the new masks that was displayed correctly in the builder, but not working in the front-end. It was a regular typo and it was fixed. There are still a few small fixes that I won’t mention here, but if you want to know more, feel free to visit the chang log page.

Win A Free Divi Pixel Lifetime License

This is it! We hope you enjoy reading this article and we believe that the new features will make your web design process easier. We will soon introduce the new module, so if you don’t want to miss it, subscribe to our newsletter.