Circle Menu is a very creative widget which can be used to create bubble style menus on clicking or hovering. There are lots of styles and animations which can be used with the Circle Menu. This widget is very unique and can make your website standout.
How to use the Circle Menu Widget of The Plus Addons For Elementor
The Circle Menu widget comes with different styles and a plethora of customization options using which you can create stylish looking Menus for your websites.
Search for the Circle Menu element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Circle Menu widget. First, click on the Content tab.
Select the Icon Layout for the Circle Menu here. The options to choose are Circle and Straight.
Select the Icon Direction for the Circle Menu here.
Add item to the menu from here. You can add tooltip title, icon and URL. You can also set normal and hover background colors.
Select the Icon, Custom Image using this option.
Select the font for the Menu icons.
Select the Icon from the Icon Library.
Menu Open Icon Style
Set the Menu open Icon style here. You can select any one of the three styles provided.
Choose the Menu position here.
Left (Auto / %)
Enable and adjust the menu position from the left side.
Right (Auto / %)
Enable and adjust the menu position from the right side.
Top (Auto / %)
Enable and adjust the menu position from the top.
Bottom (Auto / %)
Enable and adjust the menu position from the bottom.
Set the circle radius of the Menu here.
Set Icon Delay here.
Menu Open Speed
Set the Menu open Speed here.
Icon Step In
Set the Icon step in for the Circle Menu.
Icon Step Out
Set the Icon step out for the Circle Menu.
Set the Icon Transition effect here.
Set the Icon Trigger effect here.
The Style tab is used for customizing the appearance of all the Circle Menu widget components. Let’s understand each of these customization options.
Set the Icon style, Icon width, Image width, Icon border, Border radius, and Box Shadow here.
Toggle Icon Style
Set the Icon Size, Toggle Icon Width, Image Width, Circle Menu Border, Icon Color, Background Type, Border Radius and Box Shadow here.
Enable and set the Typography, Text Color, Background Color, Box Shadow, Visibility Desktop, Visibility Tablet, and Visibility Mobile.
Enable and set the Show Menu Scroll Offset and Overlay color here.
On Scroll View Animation
On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.
View On Scroll View Animation Tutorial