Table Of Contents

Circle Info Widget in Elementor

How to Use Circle Info Widget in Elementor

To show web-based content info, the Circle Info Widget by Element Pack is here. Normally, information is what is conveyed or represented by a particular arrangement or sequence of things. With the Circle info widget, you can easily arrange the info neatly and present it to the viewers.

I’ll guide you in different phases of how you can insert & use the widget to design layout for the content (text, image, and video, etc.)  you want to work with and style as well.

Content Tab

The Content Tab having some handy sections for making an impressive web page will get you to have a structure of the web content (text, image, video, etc.).

In this section, you can edit or select all the controls and can also enable the switcher button(Yes/No) following the design you want for the interactive circle.

Circle Info

After dragging and dropping the widget in a new section, you will get a list group. The list is not limited, you can add a new list in the list group by just clicking on the ADD ITEM button.

Circle Info Widget settings

You can edit every single list item. Simply, hit on the List Item and edit the field provided by the List Item, and set Title, Icon, and Link included by the list item.

img 61135874e82b0 - BdThemes

If you have to get the same designed content, you’ll be able to duplicate clicking on the duplicate icon and delete clicking on the delete icon.

Additional Info

Circle Info Widget additional tab

This section will allow you to set circle size, icon area size, icon size. Simply go to Content tab >Additional Info.

In addition, you can determine a margin just by enabling the Custom Margin switcher button and going to the Select Event control, you simply select Hover or Click. One more important thing, If you enable Auto Mode control, the circle with icon, title, and description of a specific one.

That’s all for the elementor info widget controls. Now, let’s see what else Element Pack has made for you.

Style Tab

It is time to work with Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you want to design with the Circle Info Widget.

Let’s have a look.


Circle Info Widget icon style

Normal, Hover, and Active mode using all these under Icon section, you’ll be able to put solid and background color and also shadow color. As you see in the demonstration above.

Title and Description

title style

In these two sections in Normal mode, you can set text color and typography but text color only in Hover mode.


interactive circle content style

In this section, you will be able to set a background, padding, border type, and border radius in the normal mode. Go to Style tab > Content > Normal to adjust the Circle Info Widget as you prefer.

circle info widget style shot 4 - BdThemes

In hover mode just background and border color. Go to Style > Content > Hover.


This section will allow you to add two borders in a different style with width and color under respectively border1 and border2. Just go to Style tab> Additional.

Video Tutorial

For more details, please see the video on the Circle Info Widget by Element Pack.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design. 

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.