데스크탑 및 모바일 메뉴 막대를 Divi와 일치시키는 방법

오늘의 Divi 게시물에서는 모바일 디자인을 향상시키는 데 도움이 되는 간단한 팁을 공유하겠습니다. 모바일에서의 디자인이 데스크탑에서만큼 중요하다는 것을 우리 모두 알고 있지만 Divi의 일부 표준 설정으로 인해 Theme Customizer에서 변경한 모든 사항이 데스크탑에서 모바일에서와 동일하게 보이지 않습니다.

특히 이번 포스트에서 하려고 하는 것은 최대 로고 높이와 최소 메뉴 높이를 사용할 때 데스크탑의 메뉴바와 똑같이 보이는 더 작은 모바일 메뉴바를 만드는 방법을 보여드리는 것입니다. 기본적으로 모바일과 데스크톱의 전망은 다릅니다. 특정 메뉴 높이와 로고 최대 높이를 설정했다고 해서 모바일에서도 동일하게 적용되는 것은 아닙니다.

모바일과 데스크탑의 차이점

높이가 높지 않은 기본 메뉴 모음을 의도적으로 선택하는 웹 사이트가 많이 있습니다. 더 우아해 보이고 공간을 덜 차지하므로 고정 탐색을 사용하는 경우에도 고려해야 할 흥미로운 사항입니다.

테마 사용자 정의 도구 내에서 로고 최대 높이의 가장 높은 값(100)과 메뉴 높이의 가장 낮은 값(30)을 선택하면 바탕 화면에서 다음과 같은 결과를 얻을 수 있습니다.

단, 모바일에서는 로고 비율과 메뉴 높이가 다릅니다. 로고 최대 높이에 대해 가장 높은 값을 선택하고 메뉴 높이에 대해 가장 낮은 값을 선택한 경우 데스크탑에서와 동일한 결과를 얻을 수 없습니다. 결과는 대신 다음과 같습니다.

결과

이제 모바일 메뉴 막대에 동일한 레이아웃을 적용하는 방법을 보여드리겠습니다. 이는 로고가 메뉴에서 최대 높이를 갖는다는 것을 의미합니다. 그 외에도 메뉴 막대 자체가 훨씬 작아집니다. 결국에는 페이지의 콘텐츠가 표시될 화면에 더 많은 공간이 남게 됩니다.

이 자습서를 단계별로 수행하면 다음 결과를 얻을 수 있습니다.

분명히 데스크탑 버전과 더 비슷하게 보입니다.

데스크탑 및 모바일 메뉴 막대를 Divi와 일치시키는 방법

YouTube 채널 구독

기본 메뉴 모음 설정

가장 먼저 할 일은 Theme Customizer 내의 기본 메뉴 모음에 필요한 변경 사항을 적용하는 것입니다. WordPress 대시보드에 있는 경우 모양 > 사용자 정의 > 헤더 및 탐색 > 기본 메뉴 표시줄로 이동하여 다음 설정이 적용되는지 확인합니다.

• 로고 이미지 숨기기: 비활성화
• 메뉴 높이: 30
• 로고 최대 높이: 100

모바일 메뉴바 추가 CSS 코드

다음으로 해야 할 일은 모바일 메뉴 표시줄이 데스크탑의 메뉴 표시줄과 같은 방식으로 보이도록 CSS 코드를 추가하는 것입니다. 특히 한 페이지(특정 페이지에서만 메뉴를 표시하려는 경우) 또는 전체 웹사이트에 CSS 코드를 추가하도록 선택할 수 있습니다. 일반적으로 웹 사이트에서 필요한 일관성을 유지하기 위해 전체 웹 사이트에 CSS 코드를 적용하지만 이는 사용자에게 달려 있습니다.

특히 한 페이지에 CSS 코드 추가

특히 한 페이지에 CSS 코드를 추가하려면 WordPress 대시보드 내에서 페이지를 열어야 합니다. Divi 빌더를 사용하는 동안 내부에서 다음 아이콘을 클릭해야 합니다.

다음으로, 다음 CSS 코드 행을 사용자 정의 CSS 필드에 배치할 수 있습니다.

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

전체 웹사이트에 CSS 코드 추가

다른 가능성, 아마도 가장 많이 사용될 가능성은 전체 웹사이트에 코드를 추가하는 것입니다. 두 가지 방법이 있습니다.

테마 커스터마이저를 통해

첫 번째 방법은 CSS 코드를 Theme Customizer에 추가하는 것입니다. 그렇게 하려면 WordPress 대시보드 > 모양 > 사용자 정의 > 추가 CSS > 사용자 정의 CSS 필드에 다음 CSS 코드 행을 배치합니다.

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

이 옵션을 사용하면 실시간으로 변경 사항을 볼 수 있습니다. 코드에서 몇 가지 사항을 변경하고 변경 사항을 저장하기 전에 어떻게 보이는지 확인하려는 경우 가장 흥미로운 선택일 것입니다.

테마 옵션을 통해

두 번째 방법은 CSS 코드를 테마 옵션에 추가하는 것입니다. 그렇게 하려면 WordPress 대시보드 > Divi > 테마 옵션 > 일반 탭으로 이동하여 사용자 정의 CSS 필드에 다음 CSS 코드를 입력합니다.

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

자신의 기본 설정에 맞게 코드 수정

물론 모바일 메뉴바를 이렇게만 만들 수 있는 것은 아닙니다. 테마 사용자 지정 프로그램의 기본 메뉴 모음에 다른 설정을 적용하는 경우 CSS 코드 내에서도 변경해야 할 가능성이 높습니다. 그러나 사용하게 될 CSS 클래스와 CSS ID는 동일합니다.

그러나 확실히 고려해야 할 사항 중 하나는 페이지 컨테이너의 상단 패딩입니다. CSS 코드에서 할당한 값은 다른 변경 사항과 일치합니다. 그러나 다른 클래스의 값을 변경하는 경우 상단 패딩이 올바른지 확인해야 합니다. 가장 쉬운 방법은 더 높은 값으로 시작하여 페이지 컨테이너가 제자리에 들어갈 때까지 값을 수정하는 것입니다.

결과

이 튜토리얼을 단계별로 따라했다면 모바일 메뉴 바에 대해 다음과 같은 결과를 얻을 수 있었을 것입니다.

데스크탑에서 얻은 결과와 거의 동일하게 보입니다.

CSS를 변경하기 전의 모바일 결과는 다음과 같습니다.

마지막 생각들

이 게시물에서는 모바일 메뉴 표시줄을 더 작게 만들고 데스크탑의 메뉴 표시줄에 맞추는 방법을 보여 주었습니다. 특정 페이지나 전체 웹사이트에 필요한 CSS 코드를 추가하기만 하면 이 방법이 작동합니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요!

중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!