토글 메뉴

메뉴 모듈이 이제 베타 버전입니다!

게시 됨: 2015-08-04

Beaver Builder 제품 25% 할인! 서둘러 판매가 종료됩니다... 더 많은 것을 기대해 보세요!

new-menu-module
  • 비버 빌더

메뉴 모듈이 이제 베타 버전입니다!

업데이트: 이제 버전 1.6.2부터 메뉴 모듈을 사용할 수 있습니다.

오늘 우리는 지난 2주 동안 베타 버전이었던 새로운 게시물 모듈과 새로운 메뉴 모듈의 베타 버전을 공식 출시했습니다. 아직 다운로드하지 않았다면 계정으로 이동하여 최신 베타 버전을 다운로드하고 메뉴 모듈을 사용해 보세요!

강력한 맞춤형 메뉴

내장된 사용자 정의 메뉴 위젯과 마찬가지로 메뉴 모듈을 사용하면 모양 > 메뉴에서 생성된 메뉴 중 하나를 선택하여 레이아웃에 삽입할 수 있습니다. 메뉴 모듈을 사용하면 메뉴의 레이아웃, 스타일 및 반응형 표시에 대한 옵션을 통해 훨씬 더 많은 작업을 수행할 수 있으므로 유사점이 멈춥니다.

다양한 메뉴 레이아웃

메뉴 모듈에는 메뉴에 대한 네 가지 레이아웃 옵션이 포함되어 있습니다. 이러한 옵션에는 다음이 포함됩니다.

  • 수평 – 대부분의 테마에서 볼 수 있는 것과 유사한 표준 수평 레이아웃입니다. 이 레이아웃은 드롭다운 하위 메뉴도 지원합니다.
  • 수직 – 메뉴의 왼쪽이나 오른쪽으로 날아가는 하위 메뉴를 지원하는 수직 레이아웃입니다.
  • 아코디언 – 토글 아이콘을 클릭하면 하위 메뉴가 인라인으로 표시되는 수직 아코디언 레이아웃입니다.
  • 확장 – 최상위 메뉴 항목과 하위 메뉴 항목이 순서가 지정되지 않은 목록 스타일 형식으로 표시된다는 점에서 사용자 정의 메뉴 위젯과 유사한 레이아웃입니다.

스타일의 모든 것

메뉴 모듈에는 다양한 독특한 메뉴 디자인을 만들 수 있는 몇 가지 스타일 옵션도 포함되어 있습니다. 이러한 옵션에는 텍스트 색상, 글꼴 크기, 배경 색상 및 전체 메뉴 정렬과 같은 스타일이 포함됩니다. 사용 가능한 모든 옵션을 보려면 메뉴 모듈 설정의 스타일 탭을 확인하세요.

모바일에서 잘 작동합니다.

강력한 사용자 정의 메뉴를 생성할 수 있는 것 외에도 메뉴 모듈은 모바일 장치에서 볼 수 있는 것과 같은 작은 화면 크기에서도 멋지게 보입니다. 일반 탭 아래에는 작은 화면 크기에서 메뉴가 표시되는 방식을 사용자 정의할 수 있는 모바일 스타일이라는 옵션이 있습니다. 이러한 옵션에는 다음이 포함됩니다.

  • 확장됨 – 메뉴가 축소되지 않고 모든 메뉴 항목이 순서가 지정되지 않은 목록 스타일 형식으로 표시됩니다.
  • 햄버거 아이콘 – 메뉴가 축소되고 햄버거 아이콘 토글 버튼이 표시됩니다.
  • 햄버거 아이콘 + 라벨 – 메뉴가 축소되고 햄버거 아이콘 토글 버튼이 메뉴 라벨과 함께 표시됩니다.
  • 메뉴 버튼 – Beaver Builder 테마의 작동 방식과 유사하게 이 옵션은 전체 너비 메뉴 버튼을 표시합니다.

언제 출시되나요?

이전 게시물에서 언급했듯이 베타 기간은 큰 문제가 발생하지 않는 한 약 2주 동안 지속됩니다. 모든 것이 계획대로 진행된다면 메뉴 모듈은 8월 17일 주에 공식적으로 출시될 것입니다.

다음은 무엇입니까?

이제 표준 및 전역 행/모듈 템플릿이 팀 내부에서 테스트되고 있음을 발표하게 되어 기쁘게 생각합니다! 모든 것이 순조롭게 진행된다면 다음 주에 비공개 베타를 출시하고 그 다음 주에는 공개 베타를 출시할 수 있기를 바랍니다. 행/모듈 템플릿 외에도 색상 사전 설정을 저장할 수 있는 새로운 색상 선택기를 구현하고 Beaver Builder에 Genesis 지원을 추가하기 위한 솔루션을 검토하는 작업도 시작했습니다.

당신의 생각을 알려주세요!

언제나 그렇듯, 무대는 여러분에게 맡깁니다. 새로운 메뉴 모듈에 대한 의견, 개선 방법에 대한 피드백이 있거나 문제가 발생한 경우 주저하지 말고 아래 댓글을 통해 알려주시기 바랍니다.

다음 시간까지 행복한 건물 되세요!

저스틴 부사의 약력

댓글 47개

  1. 2015년 8월 3일 오후 5시 39분

    정말 멋지네요! 잘했어요.

    이 글을 쓰면서 메뉴 모듈을 만지작거립니다. 지금까지는 정말 좋았습니다! 예상대로 작동합니다.

    릴리스 주기가 마음에 듭니다.



    • 저스틴 부사(Justin Busa) 2015년 8월 4일 오전 8:45

      고마워요, 벤! 마음에 든다니 기쁘네요.



  2. Kjetil 2015년 8월 4일 오전 6:16

    안녕
    잘했어요! 새로운 기능이 꾸준히 등장하고 있습니다.
    새로운 베타 메뉴 모듈을 시험해보고 다음과 같은 질문이 필요했습니다. 목록으로 표시해야 합니까, 아니면 드롭다운 메뉴로 표시해야 합니까? 지금은 확장된(다단계) 정렬되지 않은 목록을 얻었습니다. 그게 목표가 아닌 것 같은데요...?
    그리고 제가 만든 메뉴 중 하나만 선택하는 것도 가능합니다.
    나는 이것이 내가 여기서 사용하는 테마(Bridge – 약간… 민감했습니다) 때문에 발생한 것일 수 있다고 생각했지만 TwentyFifteen으로 전환해도 아무런 변화가 없었습니다(글쎄, 외모를 제외하면…;o)
    이상하게 들리거나 로그인하여 살펴보고 싶으시면 알려주시기 바랍니다. 그리고 계속 좋은 일을 하세요!
    KJ



    • 저스틴 부사(Justin Busa) 2015년 8월 4일 오전 8:50

      안녕하세요, Kjetil님,

      게시해 주셔서 감사합니다! 메뉴는 선택한 레이아웃에 따라 다양한 방식으로 나타날 수 있습니다. 그러나 여기에 문제가 있을 수 있는 것 같습니다. 우리가 로그인해서 살펴볼 수 있도록 포럼에 게시해 주시겠어요?

      저스틴



      • Kjetil 2015년 8월 4일 오전 9:14

        할 것이다!
        그런데 재미있는 메뉴는 다음과 같습니다: http://www.dolcevita.no/demo1/gardasjoen-sykkeltur/
        KJ



        • redsnappertrading 2016년 4월 11일 오전 3시 50분

          안녕하세요, NEWBIE bb 빌더 훌륭한 작업입니다. 페이지가 바닥글 위로 미끄러지는 효과를 어떻게 얻었는지 알려주실 수 있나요?



  3. Carlos 2015년 8월 4일 오전 6:55

    안녕하세요 여러분!

    이것은 훌륭한 추가 사항입니다! 나는 이미 그걸 가지고 놀고 있어요. 버그를 발견한 것 같아요.

    중앙에 위치한 메뉴를 만들었습니다. 메뉴 항목에만 배경이 표시됩니다. 그런 다음 모바일 기능을 확인하기 위해 창 크기를 조정하고 다시 크기를 조정하면 버그가 나타납니다. 메뉴는 더 이상 중앙에 있지 않으며 배경은 행의 전체 너비에 맞춰 표시됩니다. 저는 Chrome을 사용하고 있습니다. 링크는 http://miracomoes.com/chia/입니다.

    이것이 도움이 되기를 바랍니다!



    • 저스틴 부사(Justin Busa) 2015년 8월 4일 오전 8:52

      고마워요, 카를로스! 그것은 확실히 버그입니다. 이 문제는 출시되기 전에 해결하겠습니다.



  4. zenoform 2015년 8월 4일 오후 12:03

    Dynamik Website Builder를 사용했다면 어떻게 작동하나요?



    • 저스틴 부사 2015년 8월 4일 오후 12:08

      안녕하세요, 제노폼 님,

      정상적으로 작동할 것입니다. 하지만 문제가 발생하는 경우 포럼에 알려주시면 살펴보겠습니다.

      감사해요,
      저스틴



  5. 2015년 8월 4일 오후 10시 59

    안녕하세요 여러분, 제품에 큰 도움이 되었습니다.

    짧은 이름(예: MENU1, MENU2)을 갖는 모든 레벨1 항목으로 콘서티나 메뉴를 생성하면 이름이 약간 더 긴 레벨2 항목이 있습니다. MENU1.1, MENU1.2 등 레벨 1 항목을 선택하면 전체 탐색 구조가 넓어집니다. 너비를 제어하기 위한 스타일 옵션은 좋은 옵션이 될 것입니다.

    고마워요, 딘



    • 저스틴 부사(Justin Busa) 2015년 8월 5일 오전 8:40

      안녕하세요 딘, 어떤 레이아웃 스타일을 사용하고 있는지 알려주실 수 있나요?



      • 2015년 8월 5일 오후 11시 14

        안녕하세요 저스틴

        죄송합니다. 용어가 잘못되었습니다. 레이아웃은 아코디언입니다.

        다음은 제가 언급하고 있는 내용의 스크린샷이 포함된 슬라이드 링크입니다.

        https://docs.google.com/presentation/d/1t2wbUEvhf4SAWNk3W5ASLZjuEExXpcWOcRYrykTV56o/edit?usp=sharing

        고마워요, 딘



  6. 저스틴 부사(Justin Busa) 2015년 8월 6일 오전 9:27

    고마워요, 딘! 버그 보고서를 제출하면 이 문제를 해결해 드리겠습니다.



  7. Edward 2015년 8월 7일 오전 12:08

    제가 생각하는 또 다른 버그 – 하단을 -5로 설정해야 하거나 링크 배경 호버 색상 아래 하단에 5픽스의 추가 공간이 있어 상단처럼 플러시되도록 해야 합니다. 좋아 보인다.

    아직 작업 중이라면 이렇게 두꺼운 메뉴를 만들 수 있도록 메뉴 높이 크기를 설정하는 방법을 추가해 주실 수 있나요? 링크 간격이 있지만 메뉴 높이/크기가 없으며 단 하나의 설정만 가능합니다.

    http://destinvacationguide.com/testtwo/

    가능하다면 Google 글꼴을 사용하는 방법도 있습니다.



    • 저스틴 부사(Justin Busa) 2015년 8월 7일 오전 8:46

      보고해 주셔서 감사합니다, 에드워드! 5px 간격 문제를 재현할 수 없었습니다. 어쩌면 테마 문제일까요?

      간격/높이 문제가 의미가 있습니다. 이에 대해 보고서를 제출하겠습니다. 또한 올해 말에 빌더를 위한 Google 글꼴 설정 작업을 진행할 예정이므로 메뉴 모듈에서 이를 구현할 수 있습니다.



  8. Edward 2015년 8월 7일 오전 12:18

    이제 기존 최상위 메뉴를 제거하는 방법 – 메뉴를 선택하세요, 아니면 메뉴를 선택하면 두 개의 최상위 메뉴가 표시됩니까?라는 메시지가 계속 표시됩니다.
    감사해요



    • 저스틴 부사(Justin Busa) 2015년 8월 7일 오전 8:50

      그렇게 하려면 헤더 > 헤더 레이아웃을 없음으로 설정하여 맞춤설정 기능에서 헤더를 숨겨야 합니다.



  9. Edward 2015년 8월 7일 오전 12:32

    좋아요, 이 새 메뉴를 모든 페이지의 기본 메뉴로 만들 수 있는 방법에 대해 질문이 하나 더 있습니다. 제가 만든 페이지에서만 작동하는 것 같군요.



    • 저스틴 부사(Justin Busa) 2015년 8월 7일 오전 8:52

      앞으로 몇 주 내에 "전역" 행을 저장하는 기능을 출시할 예정입니다. 이 작업이 완료되면 동일한 행을 모든 페이지에 추가하고 한 곳에서 편집할 수 있습니다. 안타깝게도 현재로서는 다른 방법이 없습니다.



  10. Kjetil 2015년 8월 7일 오전 7:44

    안녕
    메뉴 선택기(메뉴 모듈 내) 관련: 이전에 선택기가 작동하지 않는다고 언급했습니다. 글쎄요. 메뉴를 2개 만들었는데 하나만 나오던데, 어쩐지 두 번째 메뉴의 내용이 다 없어져 있더라구요. 따라서: 빈 메뉴를 선택할 수는 없습니다. 그래도 괜찮을 것 같습니다…
    그냥 당신이 알고 싶었어요 :o)
    케틸



    • 저스틴 부사 2015년 8월 7일 오전 8:53

      아, 잘 잡았어! 빈 메뉴에 대한 몇 가지 논리를 추가하겠습니다.



  11. Ignittermr 2015년 8월 8일 오전 10시 40분

    엄청난. 메뉴 작업을 하는 동안 메뉴 제목이 투명해질 수 있도록 알파 채널을 제어하는 ​​설정을 추가하는 것을 고려해 보시겠습니까?(제가 말하는 것이 맞는지 확실하지 않습니다. 제 뜻이 이해가 되십니까?) 헤더 탐색을 투명하게 만들고 싶습니다. 그게 작업 중인가요? 감사해요.



    • 저스틴 부사(Justin Busa) 2015년 8월 10일 오전 9:29

      피드백을 보내주셔서 감사합니다! 하지만 아직은 내가 당신을 따라갈지 확신할 수 없습니다. 텍스트에 불투명도 설정이나 메뉴 배경을 요구하고 있습니까?



      • Brianplant 2015년 8월 10일 오전 11시 19분

        메뉴의 탐색 배경이므로 이미지가 표시됩니다. 이렇습니다: http://screencast.com/t/2zZJEjPqmMpl



        • 저스틴 부사 2015년 8월 10일 오전 11시 53분

          고마워요, 브라이언! 이를 구현하는 방법을 살펴보겠습니다.



  12. 나탈리아 브란트 2015년 8월 11일 오후 3:44

    표시할 메뉴의 수준을 선택할 수 있는 옵션이 있으면 좋을 것 같습니다. 예를 들어 하위 메뉴(2단계 페이지)만 표시하려는 경우 해당 옵션이 있습니까?



    • Robby McCullough 2015년 8월 11일 오후 3:58

      안녕하세요 나탈리아. 제안해 주셔서 감사합니다. 이것이 우리가 플러그인에 포함할 것인지 확실하지 않습니다. 하지만 기능 요청으로 자유롭게 추가하세요.

      https://wpbeaverbuilder.uservoice.com/forums/270594-general

      또한 WordPress 관리 영역에 두 개의 메뉴를 만들어 실험해 볼 수도 있습니다. 하나는 최상위 탐색용이고 다른 하나는 두 번째 수준용입니다. 그런 다음 페이지의 두 번째 수준 메뉴를 사용할 수 있습니다. 그게 효과가 있을 거라고 생각하세요?



      • 나탈리아 브란트 2015년 8월 25일 오후 12:19

        저는 제네시스를 사용하고 있습니다. 당신이 제안한 것이 Genesis Subpages를 보조 메뉴 플러그인으로 사용할 수 있는지 궁금합니다. 아이디어는 보조 메뉴를 동적으로 생성하여 하위 페이지를 표시하는 것입니다.



  13. David 2015년 8월 17일 오후 4:08

    엄청난! 저는 베타 버전을 가지고 놀고 있는데 행/모듈 템플릿이 바로 제가 현재 프로젝트에서 찾던 것입니다.

    감사합니다!
    데이비드



    • 저스틴 부사 2015년 8월 17일 오후 5:12

      듣기 좋네요, 데이빗! 피드백이 있으면 알려주십시오.



  14. m33 2015년 8월 21일 오후 5:02

    뭔가 빠졌나요? 내 계정의 다운로드 항목 어디에도 메뉴 모듈이 표시되지 않습니다. 대행사를 위한 최신 베타 버전을 사용해 보았지만 페이지 빌더에 모듈이 전혀 표시되지 않습니다.



    • 저스틴 부사 2015년 8월 24일 오전 10시 39분

      메뉴 모듈은 실제로 지난주에 출시되었습니다. 아직 1.6.2로 업데이트하셨나요?



      • m33 2015년 8월 24일 오전 11시 14분

        저는 1.6.3(베타)을 사용 중인데 전혀 표시되지 않습니다. 선택 항목은 '지도'에서 '게시물'로 이동합니다. 지도 모듈 이후에 표시되었을 것이라고 가정합니다.



        • 저스틴 부사 2015년 8월 24일 오전 11시 43분

          우리가 로그인해서 살펴볼 수 있도록 포럼에 게시해 주실 수 있나요?



  15. Nick 2015년 8월 25일 오후 8:13

    안녕하십니까 – 훌륭한 추가 기능입니다. 하지만 데스크탑/모든 화면에 대해 반응형 버거 메뉴를 활성화하는 옵션을 추가할 수 있습니까? 요즘 자주 들어오는 디자인 요청!
    감사해요



    • 저스틴 부사(Justin Busa) 2015년 8월 26일 오전 8:30

      고마워요, 닉! 흥미로운 제안이네요. 향후 업데이트를 위해 기록을 남길 수 있도록 UserVoice 페이지에 자유롭게 추가하세요… https://wpbeaverbuilder.uservoice.com/forums/270594-general



  16. Bill Rusu 2015년 10월 14일 오후 12:55

    메뉴 모듈을 사용하여 내 사이트의 메뉴를 생성하는 경우 해당 메뉴를 모든 페이지/게시물에 표시할 수 있는 방법이 있습니까? 메뉴가 포함된 전역 행을 만들고 이를 각 페이지에 수동으로 추가할 수 있지만 게시물/카테고리 페이지 등에 추가할 수 있는 방법은 없는 것 같습니다.



    • Robby McCullough 2015년 10월 14일 오후 2:03

      안녕 빌. 현재는 아닙니다. 이는 언젠가 갖고 싶은 기능이지만 아직 아이디어 단계에 있습니다.

      기술적으로는 페이지 삽입이라는 플러그인을 사용하여 해결 방법을 통해 이 작업을 수행할 수 있습니다. 그래도 좀 진보된 기술이군요. 기본적으로 메뉴에 대한 페이지를 만든 다음 페이지 삽입 플러그인을 사용하여 PHP 템플릿에 메뉴/페이지를 포함할 수 있습니다.

      원하시면 연락처 페이지에서 이메일을 보내주세요. 아직 겁내지 않으셨다면 자세히 설명해 드리겠습니다.



  17. Richard 2015년 11월 25일 오전 5:14

    아코디언 스타일 메뉴의 경우 하위 항목이 있는 메뉴 링크를 다음과 같이 말할 수 있는 옵션이 있으면 좋을 것 같습니다.

    1. 클릭 시 페이지 표시
    2. 페이지를 표시하지 않고 레벨만 확장합니다.

    이런 식으로 우리는 사용자가 정확하게 십자가를 클릭하는 것에 의존하지 않는 아코디언을 만들 수 있습니다. 제 생각에는 이것이 항상 직관적이지는 않습니다. 이와 함께 확장 아이콘이 없는 옵션도 있습니다.

    또 다른 좋은 옵션은 현재 페이지를 기반으로 아코디언 메뉴를 자동 확장하는 것입니다.



  18. John 2016년 6월 20일 오후 12:25

    안녕,
    메뉴 모듈을 사용하여 작업했습니다. 내 레이아웃의 전체 너비에 걸쳐 표시할 수 없는 것 같습니다. 일반 레이아웃 옵션을 가로로 설정하고 스타일 메뉴 정렬 옵션을 가운데로 설정하면 메뉴가 레이아웃 중앙에 위치하지만 메뉴 표시줄(색상)의 너비는 텍스트 범위까지만 확장됩니다. 메뉴 정렬을 기본값으로 설정하면 메뉴 표시줄은 전체 너비로 확장되지만 텍스트는 왼쪽으로 정렬됩니다. 도와주실 수 있나요?
    고마워요, 존



  19. Barry 2016년 9월 23일 오전 11:43

    모듈은 훌륭하지만 페이지 제목 대신 메뉴 모듈을 사용하여 이 모듈을 얻는 이유를 아는 사람이 있습니까? : #26 (제목 없음)



    • 저스틴 부사 2016년 9월 23일 오후 5:38

      배리 님, 안녕하세요. 우리가 한 번 볼 수 있도록 티켓을 찍어주실 수 있나요? 감사해요!



  20. robhall007 2016년 11월 1일 오전 8:14

    메뉴 모듈의 경우… 드롭다운 메뉴에 CSS 유동성을 부드럽게 적용할 수 있는 방법이 있나요? 그냥 나타나는 것 같습니다. 슬라이드 다운 또는 페이드 인하고 싶습니다. 이를 수행할 수 있는 방법이 있습니까?



    • Robby McCullough 2016년 11월 1일 오전 10:01

      안녕 롭. 이는 아마도 CSS 전환을 통해 가능할 것입니다. 나는 거기에서 약간의 연구를 시작할 것입니다. 우리는 이 기능도 잠재적인 기능으로 염두에 둘 것입니다! 의견을 보내주셔서 감사합니다.



  21. 누가 2016년 11월 6일 오후 3시 54분

    햄버거 아이콘 바꾸는 방법 없나요? 라벨을 '메뉴'에서 '더 보기'로 변경하는 방법이 있나요?

    음식을 판매하는 사이트에서 작업할 때 메뉴라는 단어를 사용하면 누군가가 그곳에서 음식 메뉴를 찾을 수 있다고 믿게 될 수 있습니다.



    • Robby McCullough 2016년 11월 8일 오전 9:27

      안녕 루크! 핵심 모듈을 재정의하고 원하는 대로 조정할 수 있습니다. 이 기사에는 이에 대한 자세한 정보가 있습니다.

      http://kb.wpbeaverbuilder.com/article/124-custom-module-developer-guide



우리의 뉴스레터

우리의 뉴스레터는 개인적으로 작성되어 한 달에 한 번 정도 발송됩니다. 조금도 짜증나거나 스팸이 아닙니다.
우리는 약속합니다.

뉴스레터에 가입하세요

지금 Beaver Builder를 사용해 보세요

Beaver Builder