Korean 
English 
German 
Spanish 
Italian 
French 
Danish 
Portuguese 
Swedish 
Polish 
Japanese 
A sleek and modern look should be a top concern while designing your WordPress website. No matter how contemporary or distinctive the design you create it won’t be much effective if your site struggles to maintain responsiveness.
On that account, a circle menu in WordPress can keep your site trendy, stylish, and responsive at a time. Besides, it allows the menu to fit on a compact and small screen that can expand and fold with a click or hover.
Hence, in this guide, we’ll show how to create a circle menu in WordPress using both a tool 그리고 맞춤 CSS. Along with the WordPress menu tutorial, you’ll also get to learn some tempting circle menu designs for your site.
A WordPress circular navigation menu can be created in various styles and designs. The circle menu plays a significant role in maintaining seamless navigation and evenly distributed layouts while presenting links or web pages.
This menu can be displayed not only in different designs but also in various directions such as top, left, right, bottom, bottom left, bottom right, etc. Also, a rich icon library is attached to clearly display your circle menu.
Let’s have a look at diverse circular menus that can be added to your site:
Website navigation is the top concern for visitors around the globe. Even the majority of visitors leave a site for not having an easy-to-navigate menu.
It has been tested and proved that 94% of visitors prioritize easy website navigation over anything.
This strongly denotes that your site won’t work well without having smooth and accessible navigation. Luckily, a circular WordPress navigation menu plays a notable role in building easy-to-navigate sites.
Besides, displaying a circular menu brings additional benefits to your WordPress site such as:
- Engaging circular layout: A circle menu allows you to display navigational links or pages in a circular layout that induces a modern and unique look in your site.
- Space-optimized design: The circular menu keeps navigation uncluttered and makes it more optimized for small screens.
- Interactive and intuitive navigation: This menu creates interactive navigation by providing different visual effects and styles.
- 고도로 사용자 정의 가능: Starting from icons, color, typography, speed, and direction, everything can be customized while creating a circular menu.
A circle menu is a unique way of presenting navigational links or pages in a circular format. This type of circular menu can be created in minutes in WordPress. To integrate this menu, you will only require an effective WordPress menu plugin that comes with such an option.
ElementsKit is one of those plugins that have a circular menu-adding feature along with a 메가 메뉴, WordPress navigation menu, and drop-down menu. Again, this circular menu plugin provides a friendly user interface and interactive design options for your site.
Since it’s a premium feature, you will need the ElementsKit pro version to unlock the “Circle Menu” feature. So, before jumping into the process, installing the following plugins is a prerequisite step:
- 엘레멘터 (Free): As ElementsKit is an Elementor addon and supports its drag-and-drop interface, you need to install and activate this plugin first.
- ElementsKit (무료 & 찬성): Install and activate both the free and paid versions of ElementsKit.
Now, dive into the steps mentioned below and go through them one by one to learn how to create a circle menu in WordPress using ElementsKit:
Step 1: Activate the “Circle Menu” widget
ElementsKit’s Circle Menu widget is packed with wide design controls. An option to add circle menu will be unavailable without activating this widget. So, you have to first enable the “Circle Menu” 위젯.
For that, navigate to ElementsKit > ElementsKit 그리고 hit the Widget tab. Then, scroll down till you see the “Circle Menu” widget and 위젯 켜 줘. 이후, "변경 사항 저장"을 누르세요. 단추.
Next, you have to add a responsive circle menu to a suitable page by visiting the Pages >> All Pages 그리고 hitting the “Edit with Elementor” button of the page where you want to integrate a circle menu.
Elementor 편집기로 리디렉션한 후, search for the “Circle Menu” widget 그리고 "+"에 드래그 앤 드롭하세요. icon. This added circle menu will display different options for creating a customized circle navigation menu in WordPress.
This last step is all about adjusting content, settings, and styles for pulling off a responsive circle menu. First, you have to customize the content part of your circle menu items.
지금, expand the “Item #1” under the Content tab and adjust the fields mentioned below:
- 상: Select an icon from the icon library.
- 제목: Enter the title for your first item.
- Tooltip: Add the text you want to show in your tooltip.
- 링크: Insert a link to which you would like to get your customers redirected whenever they click.
동일한 과정을 거쳐, customize content for Item #2, Item #3, Item #4, 그리고 Item #5. Also, you can add more items by pressing the “Add Item” 단추.
After content editing, expand the “Settings” tab and leverage the following configurations for creating a WordPress custom circular menu:
- 메뉴 방향: Decide the direction of your circle menu.
- 서클 메뉴 크기: Control the circle meu size.
- 원형 메뉴 거리: Adjust the distance between the circles from here.
- 속도: Set the speed of your animated circular menu.
- 지연: Set the delay time for your step out and step in the circular menu.
- 밖으로 나가십시오: Adjust the step-out speed or motion of the menu items.
- 들르다: Control the step-in speed or motion of the menu items.
- 방아쇠: Click or hover; select how you would like to trigger your circular menu.
- 이행: Try and choose a visual effect for your menu items from the drop-down menu.
You can also control the style of your circular navigation menu by editing color, radius, background, etc. To do that, expand the “Wrapper” tab 그리고 alter Background Type, 박스 섀도우, 테두리 유형, 테두리 반경, 그리고 Content Transform.
그 다음에, open the Content tab 그리고 customize the Icon size, 색상, 호버 색상, 여유, 타이포그래피, etc. for content, Title, and Tooltip. 마지막으로, hit the “Publish” button after making all adjustments.
After going through all the edits and customizations, here is the final look of the circular menu designed with the dedicated “Circle Menu” widget of ElementsKit:
Besides adding a circle menu with a WordPress plugin, you can also create one using custom CSS. This method requires coding expertise which is not feasible. Still, here we’re showing how to display circle menu with custom CSS.
So, follow the steps below to add a WordPress custom CSS menu in minutes:
Step 1: Add and customize a container.
First, visit the page where you would like to display a circle menu by navigating to Pages >> All Pages. 그 다음에 "Elementor로 편집"을 누르세요 option for that page.
Elementor 편집기로 리디렉션한 후, drag-and-drop the container on the “+” 상.
그 다음에 조정하다 그만큼 height, justify content, alignment, background color, etc. from the Layout and Style tab of the container.
Step 2: Insert custom code into the HTML widget.
이 단계에서는 다음을 수행해야 합니다. search for an HTML widget 그리고 drag-and-drop this widget on the “+” icon to insert custom code.
After adding an HTML widget, you will see a space for inserting custom CSS code.
지금, download the custom CSS code by pressing the button below and copy the code after opening the file.
finally, paste it on the HTML Code tab and you will get to see a circle menu on the right side. You can bring more tweaks to this code to customize menu appearance and settings. Lastly, "업데이트"를 누르세요 button when you’re done with customizations.
Here is a glimpse of the circle menu built with custom CSS:
마무리
So, you have got both ways of adding a circle menu using a tool and custom CSS. However, creating a circle menu using custom CSS is not friendly for all, especially non-coders.
That’s why, we also included the guide to adding a circle menu using ElementsKit which is not only user-friendly but also time-saving and effortless. Now, make your easy-to-navigate and browse site by adopting a process that aligns with your expertise and comfort.
답글쓰기