Jak utworzyć menu kołowe w WordPressie (przewodnik dla nie-kodujących i ekspertów)

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 I niestandardowe CSS. Along with the WordPress menu tutorial, you’ll also get to learn some tempting circle menu designs for your site.

Sneak peek at wonderful circular menu designs

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:

Why does your WordPress site need a circular menu?

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.
• Wysoce konfigurowalny: Starting from icons, color, typography, speed, and direction, everything can be customized while creating a circular menu.

How to create a circle menu in WordPress

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 mega menu, 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:

• Elementora (Free): As ElementsKit is an Elementor addon and supports its drag-and-drop interface, you need to install and activate this plugin first.
• ElementsKit (Bezpłatny & Zawodowiec): 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” widżet.

For that, navigate to ElementsKit > ElementsKit I hit the Widget tab. Then, scroll down till you see the “Circle Menu” widget and Włącz widżet. Po tym, naciśnij „Zapisz zmiany” przycisk.

Step 2: Integrate a circle menu in the WordPress website

Next, you have to add a responsive circle menu to a suitable page by visiting the Pages >> All Pages I hitting the “Edit with Elementor” button of the page where you want to integrate a circle menu.

Po przekierowaniu do edytora Elementora, search for the “Circle Menu” widget I przeciągnij i upuść na „+” icon. This added circle menu will display different options for creating a customized circle navigation menu in WordPress.

Step 3: Customize the design of the circular menu.

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.

Teraz, expand the “Item #1” under the Content tab and adjust the fields mentioned below:

• Ikona: Select an icon from the icon library.
• Tytuł: Enter the title for your first item.
• Tooltip: Add the text you want to show in your tooltip.
• Połączyć: Insert a link to which you would like to get your customers redirected whenever they click.

Postępując zgodnie z tym samym procesem, customize content for Item #2, Item #3, Item #4, I Item #5. Also, you can add more items by pressing the “Add Item” przycisk.

After content editing, expand the “Settings” tab and leverage the following configurations for creating a WordPress custom circular menu:

• Kierunek menu: Decide the direction of your circle menu.
• Rozmiar menu koła: Control the circle meu size.
• Odległość menu koła: Adjust the distance between the circles from here.
• Prędkość: Set the speed of your animated circular menu.
• Opóźnienie: Set the delay time for your step out and step in the circular menu.
• Wyjdź: Adjust the step-out speed or motion of the menu items.
• Wejść: Control the step-in speed or motion of the menu items.
• Spust: Click or hover; select how you would like to trigger your circular menu.
• Przemiana: 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 I alter Background Type, Pudełko Cień, Typ obramowania, Promień granicy, I Content Transform.

Następnie, open the Content tab I customize the Icon size, Kolor, Kolor najechania, Margines, Typografia, etc. for content, Title, and Tooltip. Wreszcie, hit the “Publish” button after making all adjustments.

Final appearance of circle menu built with ElementsKit

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:

How to add a WordPress circle menu using custom CSS

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. Następnie kliknij „Edytuj za pomocą Elementora” option for that page.

Po przekierowaniu do edytora Elementora, drag-and-drop the container on the “+” Ikona.

Następnie regulować 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.

Na tym etapie musisz to zrobić search for an HTML widget I 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.

Teraz, 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, kliknij „Aktualizuj” button when you’re done with customizations.

Here is a glimpse of the circle menu built with custom CSS:

Podsumowanie

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.