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.
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
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.
Icon
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.
Content
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.
Additional
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.
