Divi 웹 사이트에서 표준 및 수직 탐색을 겹치게 만드는 방법

게시 됨: 2017-08-22

이 게시물에서는 표준 탐색과 수직 탐색을 결합하는 방법을 보여 드리겠습니다. 더 구체적으로; 보조 메뉴와 바닥글을 웹사이트의 수직 탐색과 겹치게 만드는 방법. 즉, 상단 탐색 또는 수직 탐색 중에서 선택할 필요가 없습니다. 당신은 둘 다 할 수 있습니다! 테마 커스터마이저 내에서 원하는 대로 기본 메뉴와 보조 메뉴의 스타일을 지정할 수 있습니다. 이는 이 게시물에서 명시적으로 달성하는 데 도움이 되지 않습니다. 다음 작업을 수행하는 과정에서 도움이 되는 다음 항목을 보여 드리겠습니다.

보조 메뉴를 수직 탐색과 겹치게 만드는 방법
스크롤할 때 보조 메뉴를 고정하는 방법
바닥글을 수직 탐색과 겹치게 만드는 방법

이것들은 웹사이트에서 표준 탐색과 수직 탐색 사이의 균형을 잘 맞추는 데 도움이 되는 모든 것입니다. 표준 및 수직 탐색을 겹치게 하면 웹사이트가 수직 탐색에 의해 지배되는 것처럼 느껴지지 않을 것입니다. 웹사이트의 기본 콘텐츠는 수직 탐색에 맞게 조정되지만 보조 메뉴와 바닥글은 수직 탐색이 활성화되지 않은 경우와 같은 방식으로 작동합니다.

결과

이 튜토리얼을 마치면 수직 탐색을 사용한 웹사이트에서 다음과 같은 결과를 얻을 수 있을 것입니다.

표준 및 수직 탐색

겹치는 표준 및 수직 탐색에 대한 영감

이전 게시물에서 수직 탐색을 사용하는 웹사이트의 몇 가지 예를 공유했습니다. 모든 예는 자주 사용되지 않는 Divi 옵션으로 얼마나 창의적일 수 있는지 보여주었습니다. 웹사이트에 대한 세심한 수직 탐색은 방문자와 달성하려는 추가 상호작용을 제공할 수 있습니다.

예제를 보여주는 동안 특정 결과를 달성하는 방법을 보여주도록 영감을 주는 몇 가지 의견이 있었습니다. 이 게시물은 솔루션을 직접 검색할 필요 없이 웹사이트를 약간 조정하는 방법을 보여주는 영감 기반 자습서 중 하나입니다.

우리는 상단의 보조 메뉴와 페이지 왼쪽의 수직 탐색을 사용하는 Alex Brands 웹사이트에서 영감을 받았습니다.

표준 및 수직 탐색

스크롤하는 동안 보조 메뉴가 함께 스크롤됩니다. 웹 사이트에 약간의 추가 터치를 제공하고 보조 메뉴 내의 콘텐츠에 집중하는 데 도움이 됩니다. Alex Brands는 전자 상거래 웹사이트이며 고정된 보조 메뉴는 사람들에게 장바구니에 담긴 내용과 제공하는 거래를 상기시키는 데 도움이 됩니다.

이러한 종류의 수직 탐색은 전자 상거래 웹사이트에서 특히 흥미로웠습니다. 수직 탐색을 통해 방문자는 웹사이트에서 제공되는 다양한 범주의 항목을 쉽게 탐색할 수 있습니다. 메뉴 항목은 사람들이 거쳐야 하는 목록으로 해석되기 쉽기 때문에 수직 탐색에 있을 때 메뉴 항목을 따라가기가 더 쉽습니다.

Divi 웹 사이트에서 표준 및 수직 탐색을 겹치게 만드는 방법

YouTube 채널 구독

일반 단계

표준 탐색을 수직 탐색과 겹치게 만드는 방법을 보여주는 부분으로 들어가기 전에 먼저 일반적인 단계를 살펴보겠습니다. 이러한 일반 단계는 겹침을 적용하기 전에 거쳐야 하는 기초입니다.

더 이상 기한 없이; 시작하자.

메뉴 만들기 및 메뉴 항목 추가

가장 먼저 해야 할 일은(아직 수행하지 않은 경우) 웹사이트에 메뉴와 메뉴 항목을 추가하는 것입니다. 수직 탐색에 표시되는 메뉴 항목입니다. 웹사이트에 새 메뉴를 추가하려면 WordPress 대시보드 > 모양 > 메뉴로 이동합니다. 해당 페이지에 있으면 새 메뉴에 제목을 지정하고 메뉴를 만드십시오.

표준 및 수직 탐색

계속해서 메뉴 항목을 추가하고 이것을 기본 메뉴로 만드십시오.

표준 및 수직 탐색

보조 메뉴에 소셜 아이콘 추가

다음으로 해야 할 일은 보조 메뉴를 활성화하는 것입니다. 웹사이트에 보조 메뉴가 나타나도록 하려면 보조 메뉴에 활성화된 요소가 있어야 합니다. 이 게시물에서는 소셜 미디어 아이콘만 추가하지만 물론 원하는 대로 추가할 수 있습니다.

보조 메뉴를 활성화하고 소셜 아이콘을 표시하려면 먼저 WordPress 대시보드 > 사용자 정의 > 헤더 및 탐색 > 헤더 요소 > '소셜 아이콘 표시' 옵션을 활성화합니다.

표준 및 수직 탐색

수직 탐색 활성화

수행해야 할 다음 단계는 Divi 빌더 내에서 수직 탐색을 활성화하는 것입니다. 그렇게 하려면 WordPress 대시보드 > 모양 > 사용자 정의 > 헤더 및 탐색 > 헤더 형식 > 수직 탐색 활성화로 이동합니다.

표준 및 수직 탐색

그 외에도 수직 탐색을 표시할 위치를 선택할 수도 있습니다. 웹사이트의 왼쪽 또는 오른쪽에 있습니다.

기본 메뉴에 대한 고정 탐색 비활성화

고급 수정으로 넘어가기 전에 마지막으로 해야 할 일이 남아 있습니다. 바로 기본 메뉴에 대한 고정 탐색을 비활성화하는 것입니다. 이미 기본 메뉴를 비활성화한 경우 이 단계를 건너뜁니다. 그러나 기본 메뉴가 현재 고정되어 있는 경우 WordPress 대시보드 > Divi > 테마 옵션 > 고정 탐색을 비활성화합니다.

표준 및 수직 탐색

표준 및 수직 탐색 결합

이 게시물의 다음 부분에서는 표준 및 수직 탐색을 평소와 다른 것으로 만드는 방법을 보여 드리겠습니다. 수직 탐색과 관련하여 우리는 화면의 일부가 가려지는 것을 보는 데 익숙합니다. 보조 메뉴와 바닥글은 기본적으로 수직 탐색을 통과하지 않습니다.

그러나 경우에 따라 보조 탐색 및 바닥글이 수직 탐색의 맨 위에 있도록 하고 싶습니다. 그렇게 하면 수직 탐색에 의존하는 유일한 것은 주요 콘텐츠입니다. 귀하의 웹사이트는 완전히 두 곳으로 나뉘어져 있는 것처럼 느껴지지 않을 것입니다. 수직 탐색 및 웹사이트의 나머지 부분.

테마 옵션에 CSS 코드 추가

두 가지 방법으로 CSS 코드를 추가할 수 있습니다. Divi의 테마 옵션 또는 테마 사용자 지정 프로그램을 사용합니다. 테마 옵션에 코드를 추가하려면 WordPress 대시보드 > Divi > 테마 옵션 > 일반 > 탭으로 이동하고 다음 CSS 코드 줄을 사용자 정의 CSS 상자에 붙여넣습니다.

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

표준 및 수직 탐색

테마 커스터마이저에 CSS 코드 추가

다른 가능성은 CSS 코드 라인을 Theme Customizer에 추가하는 것입니다. 그렇게 하려면 WordPress 대시보드 > 모양 > 사용자 정의 > 추가 CSS > 사용자 정의 CSS 필드에 CSS 라인을 붙여넣습니다.

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

표준 및 수직 탐색

마지막 생각들

이 게시물에서는 웹사이트에서 표준 탐색과 수직 탐색을 결합하는 방법을 보여 주었습니다. 더 정확하게; 보조 메뉴와 바닥글을 수직 탐색과 겹치게 만드는 방법과 보조 메뉴를 고정하는 방법을 보여 주었습니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 자유롭게 댓글을 남겨주세요!

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

라인 디자인의 주요 이미지 / Shutterstock.com