We didn’t add a new module in the last update, although there were many improvements and fixes, such as Floating Images new animations, new social icons and a few other significant tweaks. This time we have something special. The Info Circle, the thirty-fourth module added to the plugin gives us another powerful tool for building interactive Divi websites.

This creative module saves a lot of space by displaying content in a circle with icons, where the user can switch content by clicking on the icons placed in the circle. This module can be used for almost anything. We can show our services, menus, team members, photo gallery and much more in a beautiful and interactive way. You probably have a question – what does it look like on mobile phones? Well, we have made every effort to deal with this issue. All options are responsive. We also added an additional option that allows you to display your content in a list layout.

This module has some really powerful customization options and is mobile friendly. In this article, I’ll go over its features and show some usage examples. If you’re interested, read on.

Introducing Info Circle

Divi offers a Blurb module which is great for displaying content in a grid layout. But what if we want our section to be interactive, creative and unique at the same time? This is a job for the Circle Info.

This module works similarly to the Blurb module, but in one module we can add a few items/child modules and display the same information as in the Blurb module, such as icon, title, description and button and allow users to switch between items to see the relevant content.

Using this module will not only save space on your Divi site but also allow users to interact with your website by switching between content using circle icons.

What about mobiles?

This is a good question. At first glance, it can be said that this module will not work on mobile devices, or at least it will create problems. However, we have made every effort to ensure that this is not the case. Circle Info module is fully adapted to mobile devices. All options are responsive, which allows you to customize the display to any device.

We even went a step further. We have added the “List View” option that allows you to switch to the list view on specific devices. Most of the time, this will be a great idea for mobile devices, but sometimes it won’t be necessary.

If our content is short, for example, we only display the title in the module, then nothing prevents you from leaving the original look also on mobile devices. All we have to do is adjust the size of the wheel, text and icons for mobile devices.

Auto Mode & Auto Rotate Mode

As always, we wanted to add something from ourselves. The Circle Info module allows users to interact by clicking on the icons to view all the options available in the circle.

The Auto Mode option will allow us to change the content automatically, after a certain period of time, i.e. it will act as a slider. The user will still be able to click the icons manually because the Auto Mode option will turn off automatically when the mouse hovers over the wheel.

Auto Rotate Mode, in turn, is a higher driving school. Personally, I just love this option. By enabling this option we will make the wheel spin during the change. We can define the duration of the animation and the angle and select if the animation should loop or not.

Usage Examples

The Info Circle module has many uses. Thanks to the possibility of adding an icon, title, description and button to each item, it can replace the standard Blurb module and save a lot of space on the page. This compact module is packed with powerful features and is great for showing services, team members, menu specials, photo galleries, process steps and much more. On the demo page, you will find various usage examples with the Info Circle module in action!

Fixes and improvements

In this version of the plugin, we have fixed a dozen minor issues that some users may have encountered. Below are some of the most important ones I’d like to mention but if you would like to see the full list, please see the change log.

Update Google social icon
Divi Pixel allows you to add social icons to the header or footer and to the mobile menu. We can add a total of 16 of the most popular networks. In this version, we have updated the Google icon.

Updated Image Hotspot position value step
Image Hotspot is a great module for displaying hotspots on an image. Some of you have had problems with accurately setting the hotspot in the image, so we have updated the step value to 0.1, which will allow you to set the marker more accurately.

Improved Scroll Image horizontal mouse scroll performance
Scroll Image allows you to move images by hovering over the mouse or using the mouse scroll. When we selected horizontal mouse scroll, it wasn’t smooth, especially in the Safari browser. We fixed it in this version.

Panorama module fixes
Panorama module is a unique module available only in the Divi Pixel plugin. In this version, we have fixed 2 issues that were present when Video Panorama was used. The module wasn’t rendering in builder properly, and also module height didn’t work.

Added support for PHP 8
More and more servers are using PHP 8. While working on the new version of Divi Pixel, we tested all modules so that there were no problems with using PHP 8.