Divi를 사용하여 WordPress 사이트에 대한 넓은 모바일 메뉴를 만들면 모바일 기기에서 사용자 경험을 크게 향상시킬 수 있습니다. 기본 햄버거 메뉴는 복잡한 탐색 요구 사항에 종종 부족합니다. 이 문서에서는 Divi 메뉴를 사용자 지정하여 기능적이고 시각적으로 매력적인 전체 너비 모바일 메뉴를 만드는 방법을 안내합니다. 테마 빌더를 사용하고, 메뉴 모듈을 조정하고, 사용자 지정 CSS를 적용하여 원하는 결과를 얻는 방법을 살펴보겠습니다. 자식 테마로 작업하든 Divi의 테마 사용자 지정 도구에서 직접 작업하든 이러한 기술은 기본 Divi 메뉴에서 돋보이는 모바일 친화적인 탐색을 만드는 데 도움이 됩니다.
모바일 기기에서 와이드 디비 메뉴를 사용하는 이유
오늘날의 모바일 중심 세계에서 모바일 기기에 맞게 웹사이트 탐색을 최적화하는 것이 중요합니다. 햄버거 아이콘이 있는 기본 Divi 메뉴는 간단한 사이트에 적합하지만, 넓은 모바일 메뉴는 여러 가지 이점을 제공할 수 있습니다.
- 가시성 향상: 넓은 메뉴는 전체 화면 너비를 활용하여 메뉴 항목을 더 눈에 띄게 만들고 작은 화면에서도 읽기 쉽게 만듭니다.
- 향상된 사용자 경험: 한 번에 더 많은 옵션을 표시함으로써 사용자는 간단한 햄버거 메뉴를 반복해서 열고 닫지 않고도 사이트를 보다 효율적으로 탐색할 수 있습니다.
- 사용자 정의 기회: 폭넓은 모바일 메뉴를 통해 배경색, 메뉴 글꼴 크기, 심지어 소셜 미디어 아이콘 통합을 포함한 메뉴 스타일을 더욱 자유롭게 사용자 정의할 수 있습니다.
- 브랜딩 일관성: 전반적인 디자인과 일치하도록 모바일 메뉴를 사용자 정의하여 데스크톱 및 모바일 버전에서 사이트의 시각적 정체성을 유지할 수 있습니다.
- 클릭 수 감소: 사용자는 추가 탭 없이 모든 기본 메뉴 항목에 액세스할 수 있어 사이트 탐색이 간소화됩니다.
- 다재다능함: 폭이 넓은 메뉴는 기존 모바일 메뉴에서 구현하기 어려운 메가 메뉴를 포함한 보다 복잡한 탐색 구조를 수용할 수 있습니다.
- 독특한 디자인: 사용자 정의형 전체 메뉴는 기본 Divi 메뉴를 사용하는 사이트와 차별화되어 사용자 참여도와 유지율을 높일 수 있습니다.
Divi의 테마 빌더를 활용하고 사용자 정의 CSS를 적용하면 멋지게 보일 뿐만 아니라 WordPress 사이트의 전반적인 모바일 사용자 경험을 향상시키는 모바일 메뉴를 만들 수 있습니다.
Divi 모바일 메뉴를 넓게 만드는 방법
Divi Theme Builder 튜토리얼에 익숙한 사람들에게 기본 헤더에서 빠진 일반적인 기능은 전체 화면 메뉴 옵션입니다. 개발하기 어렵지만, 이 단계별 튜토리얼은 사용자가 매력적인 전체 화면 메뉴 경험을 만들 수 있도록 설계되었습니다.
놀라운 웹사이트 만들기
최고의 무료 페이지 빌더 Elementor와 함께
지금 시작CodeWatcher에는 Divi 튜토리얼이 광범위하게 수집되어 있어 Divi 사용자가 자주 마주치는 문제에 대한 솔루션을 제공합니다. 더 많은 것을 찾아보세요.
테마 빌더 헤더
이것이 작동하려면 Menu 모듈이 Theme Builder 헤더 템플릿 내에서 사용되어야 합니다. Divi Theme Builder에 이미 익숙하다면 시작할 준비가 된 것입니다.
첫 번째 단계는 Divi > Theme Builder로 이동하여 헤더 템플릿을 추가하거나 편집하는 것입니다. 메뉴를 사이트 전체에 적용하려면 첫 번째 템플릿을 사용하여 글로벌 헤더를 만듭니다. 특정 페이지에 나타나기를 원하거나 테스트하고 싶다면 새 템플릿을 만들고 사용자 지정 헤더를 적용합니다.
메뉴 모듈 조정
헤더 템플릿에 들어가면 단일 열 행을 추가하고 메뉴 모듈을 삽입하는 것으로 시작합니다. 메뉴 모듈 설정에 대한 필수 조정은 필요하지 않지만 권장되는 조정은 다음과 같습니다.
- 디자인 탭 > 메뉴 텍스트 토글에서 텍스트 색상을 설정합니다.
- 디자인 탭 > 메뉴 텍스트 토글에서 텍스트 글꼴 크기를 늘리고 데스크톱, 태블릿, 휴대폰에 맞게 조정하세요.
- 텍스트 줄 높이를 1.2em으로 설정합니다.
- 디자인 탭 > 아이콘 토글에서 햄버거 메뉴 색상을 사용자 지정하세요.
- 디자인 탭 > 아이콘 토글에서 햄버거 메뉴 아이콘의 글꼴 크기를 늘립니다.
이러한 조정은 선택 사항이지만 인상적인 디자인을 빠르게 달성하는 데 도움이 될 수 있습니다. 아래로 스크롤하여 만든 메뉴의 스크린샷을 보세요. 정말 놀랍습니다!
섹션에 사용자 정의 CSS
이제 CSS 클래스를 모듈에 직접 추가하는 대신, 사용자 정의 CSS 클래스를 파란색 섹션에 적용합니다. 이는 이전 단계에서 Menu 모듈이 추가된 섹션과 동일합니다.
이렇게 하려면 섹션 설정을 열고 고급 탭으로 이동한 다음 사용자 지정 CSS 및 ID 토글을 확장합니다. CSS 클래스 입력 필드에 "pa-fullscreen-menu"를 입력합니다.
이제 가장 중요한 튜토리얼 부분인 무료 코드 스니펫이 나옵니다! 이 코드는 여러 가지 기능을 수행하므로 완전한 이해를 위해 비디오 튜토리얼과 코드 주석을 모두 참조하는 것이 좋습니다. 그렇지 않으면 코드를 복사하여 붙여넣기만 하면 됩니다.
/*align the hamburger menu to the right right*/
.pa-fullscreen-menu .et_pb_menu__wrap {
justify-content: flex-end !important;
}
/*hide the desktop version of the menu*/
.pa-fullscreen-menu .et_pb_menu__wrap .et_pb_menu__menu {
display: none !important;
}
/*show the mobile version of the menu on desktop*/
.pa-fullscreen-menu .et_pb_menu__wrap .et_mobile_nav_menu {
display: block !important;
align-items: center !important;
}
/*style the opened menu*/
.pa-fullscreen-menu .opened #mobile_menu1 {
width: 100vw !important;
position: fixed !important;
top: 0em !important;
left: 0vw !important;
height: 100vh !important;
display: flex !important;
justify-content: center !important;
flex-direction: column !important;
opacity: 1 !important;
visibility: visible !important;
transition: visibility 0.3s, opacity 0.3s ease-in-out;
padding: 0 !important;
}
/*style the closed menu*/
.pa-fullscreen-menu .closed #mobile_menu1 {
background-color: #fff !important;
text-align: center !important;
width: 100vw !important;
position: fixed !important;
left: 100vw !important;
top: 0em !important;
height: 100vh !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-direction: column !important;
transition: visibility 0.3s, opacity 0.3s, left 1s, ease-in-out;
opacity: 0 !important;
visibility: hidden !important;
}
/*remove the bullet points from the list items*/
.pa-fullscreen-menu #mobile_menu1 li {
list-style: none !important;
text-align: center !important;
width: 100%
}
/*move the menu to the top above other elements*/
.pa-fullscreen-menu .et_pb_menu__wrap span.mobile_menu_bar {
z-index: 999999 !important;
}
/*change the opened menu icon*/
.pa-fullscreen-menu .et_pb_menu__wrap .opened .mobile_menu_bar:before {
content: "\4d" !important;
}
/*make the hamburger menu fixed position on mobile*/
.pa-fullscreen-menu .opened .mobile_menu_bar {
position: fixed !important;
}
/*remove the default blue border top on the mobile menu*/
.pa-fullscreen-menu .et_mobile_menu {
border-top: none;
}
/*remove the default background color on menu items*/
.pa-fullscreen-menu .et_mobile_menu .menu-item-has-children>a {
background-color: transparent;
}
/*remove the default hover background color and adjust opacity*/
.et_mobile_menu li a:hover {
background-color: transparent;
opacity: 1;
}
/*remove the default border bottom on menu items*/
.pa-fullscreen-menu .et_mobile_menu li a {
border-bottom: none;
}다음 시스템을 통해 코드를 적용할 수 있습니다.
- Divi Assistant 플러그인 : Divi Assistant 플러그인을 사용하는 경우 Divi Visual Builder의 사용자 정의 코드 창 내에 있는 CSS 탭에 코드를 붙여넣습니다.
- 자식 테마 : 자식 테마를 사용하는 사람들을 위해 style.css 파일에 코드를 추가합니다 . 자식 테마가 없는 경우 사이트에서 직접 생성하거나 제공된 무료 자식 테마를 다운로드할 수 있습니다.
- Divi 테마 옵션 통합 : 아니면, Divi > 테마 옵션 > 사용자 정의 CSS 코드 상자에 코드를 붙여넣습니다.
이제 완료되었습니다!
마무리하기
Divi WordPress 사이트에 대한 넓은 모바일 메뉴를 만들면 모바일 기기에서 사용자 경험이 향상되고 사이트의 미적 매력도 유지됩니다. Divi Theme Builder를 활용하고, 메뉴 모듈을 조정하고, 사용자 정의 CSS를 적용하면 기본 햄버거 메뉴를 전체 너비 탐색 파워하우스로 바꿀 수 있습니다.
이러한 사용자 지정은 가시성과 접근성을 개선할 뿐만 아니라 소셜 미디어 아이콘 및 사용자 지정 배경색과 같은 요소를 통합하여 더 큰 디자인 유연성을 제공합니다. 성공의 열쇠는 기능성과 디자인의 균형을 맞추는 데 있다는 것을 기억하세요. 노련한 개발자이든 Divi 초보자이든 이러한 기술은 혼잡한 디지털 환경에서 돋보이는 모바일 메뉴를 만드는 도구를 제공합니다.
