Divi 웹 사이트와 겹치는 투명한 수직 탐색을 만드는 방법

오늘의 Divi 튜토리얼에서는 주로 웹 사이트의 수직 탐색으로 특별한 작업을 수행하는 데 중점을 둘 것입니다. 수직 탐색은 Divi 테마가 제공하는 종종 잊혀진 옵션입니다. 자주 사용되지는 않지만 웹 사이트의 전체 모양과 느낌을 변경하고 원하는 수준으로 가져올 수 있습니다. 수직 탐색을 기존보다 훨씬 더 특별하게 만들 수 있도록 투명하게 만들 것입니다. 그 외에도 투명한 메뉴가 웹사이트의 나머지 부분과 겹치도록 합니다.

현재 수직 탐색 기능이 있는 웹사이트는 많지 않습니다. 그러나 어떤 경우에는 놀라운 결과를 제공할 수 있습니다. 이전 게시물 중 하나에서 수직 탐색을 사용하여 웹 디자인을 향상시키는 Divi 웹 사이트의 12가지 예를 보여 드렸습니다.

수직 탐색을 웹사이트와 겹치게 만들 때 투명한 배경색을 사용하는 것이 중요합니다. 투명한 배경색을 사용하지 않는 경우 세로 탐색이 웹사이트의 일부 콘텐츠와 겹칠 수 있습니다. 웹사이트 콘텐츠에 대한 주요 초점을 없애고 싶지 않으며 중복되는 것도 절대 원하지 않습니다.

우리가 정확히 무엇을 의미하는지 보여주기 위해 만드는 방법을 보여줄 우아하고 단순한 예를 만들었습니다. 다음 결과를 달성하는 데 필요한 다양한 단계를 단계별로 안내해 드립니다.

오늘의 최종 결과: 단순하고 우아한 세로 메뉴

위 이미지에서 투명한 수직 탐색이 웹사이트에 가져올 수 있는 단순함을 알 수 있습니다. 투명한 세로 메뉴를 만드는 방법을 보여 주는 것 외에도 웹사이트에 맞게 다시 만들 때 사용할 수 있는 일반적인 디자인 팁도 제공합니다.

Divi에서 디자인 만들기

YouTube 채널 구독

일반 설정

우리가 만든 예제에 뛰어들기 전에 투명한 탐색을 간단한 방법으로 통합하는 데 도움이 되는 몇 가지 일반 정보(및 CSS 코드 라인)를 제공할 것입니다(예제에서 수행한 다른 모든 수정 없이). .

수직 탐색 활성화

시작하려면 웹사이트에서 수직 탐색을 활성화해야 합니다. 그렇게 하려면 WordPress 대시보드 > 모양 > 사용자 정의 > 머리글 및 탐색 > 머리글 형식 > 수직 탐색을 활성화합니다.

테마 커스터마이저에서 디자인 설정 선택

이제 테마 사용자 정의 도구에 있으므로 상단 탐색을 변경하는 것과 동일한 방식으로 수직 탐색의 모든 설정을 조정할 수 있습니다. 헤더 및 탐색 > 기본 메뉴로 돌아가서 기본 메뉴를 수정합니다.

이 부분에서는 불투명도가 1 미만인 메뉴에 배경색을 제공하는 것이 중요합니다. 바람직하게는 0.5 미만입니다. 이것이 배경색을 적용하는지 확인하십시오. 드롭다운 메뉴 배경색에도 동일하게 적용하려면 동일한 색상을 선택하십시오.

CSS 코드 추가

수직 탐색의 디자인 부분을 원하는 대로 모두 변경했으면 CSS 부분으로 이동할 수 있습니다. 이미 Theme Customizer에 있으므로 거기에 사용자 정의 CSS 코드를 추가할 것입니다. 물론 CSS 코드를 특정 페이지에 추가하거나 테마 옵션을 통해 추가할 수 있습니다.

우리가 제공할 CSS 코드는 두 가지 작업을 수행합니다. 우선, 투명한 수직 탐색과 웹사이트가 겹치는지 확인합니다. 둘째, 수직 탐색의 너비를 조정하는 데 도움이 됩니다. 너비를 전혀 변경하지 않으려면 해당 코드를 웹사이트에서 제외하고 투명한 수직 탐색과 웹사이트가 겹치도록 하면 됩니다.

이러한 변경 사항은 웹사이트의 데스크톱 버전에만 적용됩니다. 너비가 981px보다 작은 화면에서는 수정 사항이 적용되지 않습니다.

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

첫째, 웹사이트가 브라우저의 전체 너비를 채우도록 하는 코드가 있습니다. 다음 코드를 복사하여 테마 사용자 정의 프로그램의 추가 CSS 탭에 붙여넣습니다.

@media (min-width: 981px) { 
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important; 
}
}

또한 수직 탐색의 너비도 조정하려면 다음 CSS 코드 줄을 대신 복사하여 붙여넣습니다.

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important;
}
.et_vertical_nav #page-container #main-header
{
width: 120px;
}
}

단순한 수직 탐색 재현

웹사이트와 겹치는 투명한 수직 탐색을 만드는 데 필요한 단계를 처리했으므로 이제 예제를 다시 만들 것입니다. 다시 한 번 예제는 다음과 같습니다.

전반적인 디자인 팁

시작하기 전에 염두에 두어야 할 몇 가지 일반적인 디자인 팁과 생각을 공유합니다. 이 팁은 귀하가 만들고 있는 우아하고 단순한 웹사이트를 최대한 활용하는 데 도움이 될 것입니다. 확실히 강조하고 싶은 두 가지 팁을 살펴보겠습니다.

모든 것을 중앙 집중화

첫째, 웹사이트의 콘텐츠를 중앙 집중화해야 합니다. 자명하지만 언급할 가치가 있습니다. 웹사이트와 겹치는 투명한 수직 탐색을 사용하는 경우 콘텐츠를 중앙 집중화하는 것이 가장 적합합니다. 대신 모든 것을 웹사이트의 왼쪽에 맞추면 투명한 수직 탐색과 콘텐츠가 혼동될 가능성이 높아집니다. 그것은 아마도 당신이 얻고자 하는 결과가 아닐 것입니다. 웹사이트에서 대칭성과 가독성을 우선시하고 싶습니다.

다르게 정렬된 콘텐츠를 선택하는 경우 콘텐츠의 패딩과 여백을 확인하세요. 여백과 패딩을 적절하게 수정하면 결과가 여전히 멋지게 보일 수 있습니다. 그러나 아마도 많은 수동 수정을 해야 할 것입니다.

어디서나 같은 색 배경

이 예에서 사용하는 것처럼 수직 탐색에 완전히 투명한 배경색을 사용하는 경우 일정한 일관성을 유지하는 것이 중요합니다. 사람들이 웹사이트를 원활하게 탐색할 수 있어야 하기 때문에 수직 탐색의 색상이 읽기 쉽고 눈에 띄기를 원합니다.

투명한 수직 탐색에서 밝은 글꼴 색상을 선택하는 경우 배경 이미지 또는 색상에 어두운 색상이 포함되어 있는지 확인하십시오. 마찬가지로 어두운 글꼴 색상을 사용하는 경우 사용하는 배경 이미지나 색상이 밝은 색상인지 확인하세요.

예제 만들기 시작

더 이상 기한 없이 보여드린 예제를 다시 만들어 보겠습니다. 먼저 새 페이지를 만들고 여기에 전체 너비 섹션을 추가합니다. 페이지의 한 섹션을 다시 만드는 방법만 보여드리겠습니다. 물론 계속해서 원하는 만큼 섹션을 추가할 수 있습니다. 메뉴는 스크롤할 때 정확히 동일하게 유지됩니다.

전각 헤더 생성

전체 너비 섹션 내에서 전체 너비 헤더를 추가합니다. 그런 다음 디자인 탭으로 이동하여 텍스트 및 로고 방향을 '중앙'으로 설정하고 전체 너비 헤더의 전체 화면 모드도 활성화합니다.

제목 설정

또한 동일한 탭을 아래로 스크롤하여 제목 텍스트 하위 범주를 다음과 같이 변경합니다.

• 제목 글꼴: Lato Light
• 제목 글꼴 스타일: 대문자
• 제목 글꼴 스타일: 60(데스크톱), 50(태블릿), 40(전화)
• 제목 텍스트 색상: #FFFFFF

부제목 설정

또한 스크롤을 계속하고 Subhead Text 하위 범주의 설정이 다음과 같은지 확인하십시오.

• 부제 글꼴: Lato Light
• 부제목 글꼴 크기: 22px(데스크톱 및 태블릿), 19(전화)
• 부제목 텍스트 색상: #c4c4c4

버튼 설정

마지막으로 디자인 탭의 버튼 하위 범주를 다음과 같이 변경합니다.

• 버튼 1에 사용자 정의 스타일 사용: 예
• 버튼 하나의 텍스트 크기: 15(데스크톱 및 태블릿), 12(전화)
• 버튼 하나의 텍스트 색상: #000000
• 버튼 하나의 배경색: #FFFFFF
• Button One 글꼴: Lato Light
• Button One 글꼴 스타일: 굵게 및 대문자

그라데이션 배경 설정

다음으로, 전체 너비 섹션의 설정을 열어 콘텐츠 탭의 배경 하위 범주 내에 그라데이션 오버레이가 있는 배경 이미지를 추가합니다. 사용하는 배경 및 색상 유형에 따라 일치하는 색상을 추가합니다.

이 예에서는 어두운 배경을 사용하고 있습니다. 따라서 그라디언트의 검정색으로 시작합니다. 배경 이미지와 일치시킨 다른 색상은 'rgba(0,49,109,0.43)'입니다.

또한 그라디언트 색상에 사용한 설정은 다음과 같습니다.

• 그라디언트 유형: 선형
• 기울기 방향: 87deg
• 시작 위치: 0%
• 최종 위치: 62%

계속해서 배경 이미지를 추가하고 다음 설정을 적용합니다.

• 배경 이미지 크기: 표지
• 배경 이미지 위치: 중앙
• 배경 이미지 반복: 반복 없음
• 배경 이미지 혼합: 오버레이

테마 커스터마이저의 변경 사항

다음 단계에서는 Theme Customizer에서 몇 가지 다른 수정 작업을 수행해야 합니다. WordPress 대시보드에 있는 경우 모양 > 사용자 정의 > 헤더 및 탐색 > 기본 메뉴 표시줄 >로 이동하여 다음과 같이 변경합니다.

• 로고 최대 높이: 83
• 텍스트 크기: 14
• 문자 간격: 0
• 글꼴: Lato Light
• 글꼴 스타일: 대문자
• 텍스트 색상: #FFFFFF
• 활성 링크 색상: #FFFFFF
• 배경색: #FFFFFF
• 드롭다운 메뉴 배경색: rgba(221,153,51,0)
• 드롭다운 메뉴 선 색상: #1E73BE
• 드롭다운 메뉴 텍스트 색상: #FFFFFF

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

테마 사용자 지정 프로그램에 있는 동안 필요한 CSS 코드 라인을 추가하여 레이아웃이 원래대로 보이도록 할 것입니다.

코드의 첫 번째 부분은 수직 탐색을 사용할 때 웹사이트의 왼쪽 여백을 제거합니다. 두 번째 부분은 메뉴를 왼쪽에 더 가깝게 배치합니다. 세 번째 부분은 메뉴의 각 페이지에 위쪽 여백과 아래쪽 테두리를 배치합니다. 네 번째 부분은 로고에 상단 여백을 추가하고 로고 뒤의 여백을 제거합니다. 그리고 마지막으로 상단 패딩을 제거하여 메뉴가 로고와 메뉴 항목 사이에 동일한 거리를 유지하도록 했습니다. 이러한 변경 사항은 스크롤할 때 메뉴에도 적용됩니다. 따라서 메뉴는 전체 웹 사이트에서 동일하게 보입니다.

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
#top-menu li {
margin-top: 15px;
border-bottom: 1px solid #FFFFFF;
}
.et_vertical_nav #main-header #logo {
margin-top: 80% !important;
margin-bottom: 0px !important;
}
.et_vertical_nav.et_vertical_fixed.et_header_style_left .et-fixed-header #et-top-navigation, .et_vertical_nav.et_vertical_fixed.et_header_style_split .et-fixed-header #et-top-navigation {
padding-top: 0px !important;
}}

최종 결과

이 게시물 전체에서 수행한 모든 단계의 결과로 작업 중인 웹 사이트에 다음 결과가 표시되어야 합니다.

마무리

이 게시물에서는 웹사이트와 겹치는 투명한 수직 탐색을 만드는 방법을 보여주었습니다. 또한 이 게시물을 차근차근 따라하시면 ​​자신의 웹사이트에 사용할 수 있는 우아하고 단순한 디자인도 공유했습니다. 질문이나 요청이 있는 경우 아래 의견 섹션에 의견을 남겨주시면 연락을 드리겠습니다!

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