How to Use Circle Info Widget

element pack

How to Use Circle Info Widget

What is information? There are three types of information as processed, stored or transmitted by a computer. Normally, information is what is conveyed or represented by a particular arrangement or sequence of things.

To show web-based content info, the Circle Info Widget by Element Pack is here.

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) in accordance with the design you want.

Circle Info

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

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 to delete clicking on the delete icon.

Additional Info

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 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.

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.

Let’s have a look.


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

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


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.

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


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

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

Copyright © 2022 BdThemes. All Rights Reserved.