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.

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.

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.


Don’t worry we hate spam and we promise you will get only quality news and offer from us.

Enjoy Black Friday Exciting Deals Right Now. Check Here
© Copyright 2021 All Rights Reserved by BdThemes

Enjoy Black Friday Exciting Deals Right Now. Grab The Deals Before The Time Ends!