๋ฉ”๊ฐ€ ๋ฉ”๋‰ด

Create multi-dimensional WordPress mega menus in Gutenberg. Build beautiful menu layouts in submenu and dropdowns with containers, carousels, tabs & more, and provide a smoother browsing experience with better navigation in WordPress Mega Menu.

์ „์ œ ์กฐ๊ฑด:  #

To create a Mega Menu in Gutenberg, you must install both GutenKit and GutenKit Pro plugins on your WordPress site.

  1. GutenKit (Free Version): ํ”Œ๋Ÿฌ๊ทธ์ธ ๋‹ค์šด๋กœ๋“œ
  2. ๊ตฌํ…ํ‚ท ํ”„๋กœ: ํ”Œ๋Ÿฌ๊ทธ์ธ ๋ฐ›๊ธฐ

๊ตฌํ…๋ฒ ๋ฅดํฌ์—์„œ WordPress ๋ฉ”๊ฐ€ ๋ฉ”๋‰ด๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ• #

โš ๏ธ Mega Menu is a premium extension for the GutenKit Nav Menu block. So you need to have Nav Menu enabled.

Therefore, create a Nav Menu first in your WordPress blocks editor.

๐Ÿ’ก GutenKit์„ ์‚ฌ์šฉํ•˜์—ฌ WordPress ํƒ์ƒ‰ ๋ฉ”๋‰ด๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ• ์•Œ์•„๋ณด๊ธฐ

1๋‹จ๊ณ„: ํ•˜์œ„ ๋ฉ”๋‰ด ์ถ”๊ฐ€ #

Once you create a Nav menu, you can add submenu items and create Mega Menu. To add a WordPress Mega menu in Gutenberg,ย 

  1. ํ™œ์„ฑํ™” ํ•˜์œ„ ๋ฉ”๋‰ด ์ถ”๊ฐ€ option for the Nav menu.
  2. ํ•˜์œ„ ๋ฉ”๋‰ด ์œ ํ˜•์„ ๋ฉ”๊ฐ€ ๋ฉ”๋‰ด๋กœ ์„ ํƒ 
Add WordPress mega menu in Gutenberg as submenu

๋˜๋Š” ๋ธ”๋ก ๋„๊ตฌ ๋ชจ์Œ์—์„œ ๋ฉ”๊ฐ€ ๋ฉ”๋‰ด ์ถ”๊ฐ€ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜์—ฌ ๋ฉ”๊ฐ€ ๋ฉ”๋‰ด๋ฅผ ํ•˜์œ„ ๋ฉ”๋‰ด๋กœ ํ™œ์„ฑํ™”ํ•ฉ๋‹ˆ๋‹ค.

Add WordPress Mega Menu in Gutenberg using mega menu icon in block toolbar

2๋‹จ๊ณ„: ๋ธ”๋ก์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ฉ”๊ฐ€ ๋ฉ”๋‰ด ๋””์ž์ธํ•˜๊ธฐ #

๋ฉ”๊ฐ€ ๋ฉ”๋‰ด์˜ ๋ฉ”๋‰ด ํ•ญ๋ชฉ์œผ๋กœ ๋ธ”๋ก์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. GutenKit Mega Menu ๋ธ”๋ก์„ ์‚ฌ์šฉํ•˜๋ฉด ์ด๋ฏธ์ง€, ์ง€๋„, ์•„์ฝ”๋””์–ธ, ์–‘์‹, ๊ฐ€๊ฒฉํ‘œ ๋˜๋Š” ํ•˜์œ„ ๋ฉ”๋‰ด์˜ Gutenberg ๋ธ”๋ก์ด ํฌํ•จ๋œ ๋ฉ”๋‰ด๋ฅผ ๋””์ž์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Design Mega Menu with any Gutenberg blocks

Here we have added the Advanced Tab as a menu item in the Mega menu.

3๋‹จ๊ณ„: WordPress ๋ฉ”๊ฐ€ ๋ฉ”๋‰ด ์Šคํƒ€์ผ ์‚ฌ์šฉ์ž ์ •์˜ #

์ด์ œ GutenKit์„ ์‚ฌ์šฉํ•˜์—ฌ WordPress ๋ฉ”๊ฐ€ ๋ฉ”๋‰ด์˜ ๋ชจ์–‘์„ ์‚ฌ์šฉ์ž ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฉ”๋‰ด ๋„ˆ๋น„์™€ ๋ฉ”๋‰ด ์œ„์น˜๋ฅผ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์„ ํƒ ๋ฉ”๋‰ด ๋„ˆ๋น„ ๋‹ค์Œ์—:

  • ์ „์ฒด ๋„“์ด
  • ์ธ๋ผ์ธ
  • ๊ด€์Šต

์‚ฌ์šฉ์ž ์ •์˜ ๋„ˆ๋น„์˜ ๊ฒฝ์šฐ ๋ฉ”๋‰ด ๋„ˆ๋น„๋ฅผ ์ˆ˜๋™์œผ๋กœ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Customize WordPress Mega Menu styles in Gutenberg

๋ฉ”๋‰ด ์œ„์น˜ ์‹œ์ž‘: ์™ผ์ชฝ ๋˜๋Š” ์˜ค๋ฅธ์ชฝ

You can set the menu position from the left or the right.ย 

์œ„์น˜: ์™ผ์ชฝ

Set the WordPress mega menu position to left

์œ„์น˜: ์˜ค๋ฅธ์ชฝ

Set the WordPress mega menu position to right

Don’t feel like reading? Check out this video tutorial instead! ๐Ÿ‘‡

๋ฉ”๊ฐ€ ๋ฉ”๋‰ด ๋ธ”๋ก๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ GutenKit์—๋Š” Gutenberg๋กœ ๊ตฌ์ถ•๋œ ์›น ์‚ฌ์ดํŠธ์— ํŽ˜์ด์ง€ ๋นŒ๋” ๊ธฐ๋Šฅ์„ ๊ฐ€์ ธ์˜ค๋Š” ๋ธ”๋ก ํŽธ์ง‘๊ธฐ์šฉ ๊ณ ๊ธ‰ ๊ธฐ๋Šฅ์ด ๋งŽ์ด ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹น์‹ ์˜ ๊ฐ์ •์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

Updated on 2024๋…„ 7์›” 30์ผ