비즈니스를 주도하는 Divi로 수직 탐색을 만드는 방법

게시 됨: 2017-08-29

오늘의 Divi 튜토리얼에서는 웹사이트의 비즈니스를 주도하는 수직 탐색을 만드는 방법을 보여 드리겠습니다. 만드는 방법을 보여드릴 수직 탐색은 일반적으로 방문자가 즉시 행동하도록 하는 것이 중요하다고 생각하는 비즈니스에 사용됩니다. 예를 들어 고객이 온라인으로 주문할 수 있는 레스토랑을 소유하고 있다면 웹사이트에서 방문자가 빠르게 행동할 수 있기를 원할 수 있습니다.

만드는 방법을 보여드릴 수직 탐색에는 페이지 대신 중요한 정보와 클릭 유도문안이 포함됩니다. 수직 탐색에 이들을 포함하면 방문자가 주문하도록 자극하여 웹 사이트의 전환율을 높일 수 있습니다.

결과

다양한 단계와 영감을 얻기 전에 이 게시물의 끝에서 달성할 수 있는 수직 탐색 결과를 살펴보겠습니다.

세로

수직 탐색에 다양한 메뉴 항목을 모두 추가하는 방법을 보여주는 것 외에도 고정 탐색도 사용합니다. 그렇게 하면 한 페이지 분량의 전체 페이지에서 정보가 방문자를 따라갈 수 있습니다.

영감

비즈니스를 주도하는 수직 탐색에 대한 영감은 이전 게시물에서 선보인 웹사이트에서 비롯되었습니다. 그 게시물에서 우리는 자체 웹사이트의 목적을 위해 수직 탐색을 사용하는 12개의 웹사이트를 나열했습니다. 사람들의 시선을 사로잡은 사례 중 하나는 Eat Thai Restaurant 웹사이트였습니다. 수직 탐색은 기본 개념 중 하나입니다. 그들의 웹사이트는 한 페이지짜리지만 탐색 가능성을 계속 사용할 수 있는 좋은 방법을 찾았습니다. 그들의 웹사이트는 다음과 같습니다.

세로

비즈니스를 주도하는 Divi로 수직 탐색을 만드는 방법

YouTube 채널 구독

수직 탐색 활성화

시작하려면 Divi가 제공하는 수직 탐색 옵션을 활성화해야 합니다. 그렇게 하려면 WordPress 대시보드 > 모양 > 머리글 및 탐색 > 머리글 형식 > 수직 탐색 활성화로 이동합니다.

세로

고정 탐색 활성화

Eat Thai Restaurant 웹사이트와 같이 다시 만들고 있는 수직 탐색이 수정됩니다. 수직 탐색을 고정하려면 WordPress 대시보드 > Divi > 테마 옵션 > 일반 탭 > 고정 탐색 활성화로 이동합니다.

세로

기본 메뉴 설정(테마 커스터마이저)

다음으로 해야 할 일은 기본 메뉴를 변경하는 것입니다. WordPress 대시보드에 있는 경우 모양 > 사용자 정의 > 헤더 및 탐색 > 기본 메뉴 표시줄 로 이동 합니다. 여기에서 다음과 같이 변경할 수 있습니다(또는 원하는 기타 변경 사항).

  • 로고 이미지 숨기기: 비활성화
  • 로고 최대 높이: 100
  • 메뉴 상단 여백: 0
  • 텍스트 크기: 14
  • 문자 간격: -1
  • 글꼴: Lato Light
  • 텍스트 색상: #FFFFFF
  • 활성 링크 색상: #FFFFFF
  • 배경색: #004159
  • 드롭다운 메뉴 배경색: #004159

세로세로

고정 탐색 메뉴 설정(테마 커스터마이저)

Theme Customizer에서 마지막으로 해야 할 일은 스크롤하는 동안에도 로고가 나타나는지 확인하는 것입니다. 아직 테마 사용자 지정 프로그램에 있는 경우 헤더 및 탐색 > 고정 탐색 설정으로 이동 하여 '로고 숨기기' 옵션이 비활성화되어 있는지 확인합니다.

세로

메뉴 항목 추가

계속해서 수직 탐색에 메뉴 항목을 추가하겠습니다. 게시물의 이 부분은 아마도 대부분의 시간을 할애할 것입니다. 사용자 지정 링크를 통해 각 항목을 개별적으로 추가해야 합니다.

CSS 클래스 활성화

그러나 메뉴 항목 추가를 시작하기 전에 CSS 클래스 옵션이 활성화되어 있는지 확인해야 합니다. 이 옵션을 사용하면 메뉴 항목 각각에 개별적으로 클래스를 할당할 수 있습니다. 이 경우 대부분의 항목에 고유한 스타일 설정이 있으므로 이 작업이 필요합니다. CSS 클래스 옵션을 활성화하려면 메뉴 페이지 오른쪽 상단의 '화면 옵션'을 클릭하고 아래 스크린샷과 같이 CSS 클래스 옵션을 활성화합니다.

세로

새 메뉴 추가

메뉴 항목에 대한 CSS 클래스를 활성화했으면 계속해서 새 메뉴를 만들 수 있습니다. 이름을 지정하고 이 새 메뉴를 기본 메뉴로 만드십시오.

세로

모든 메뉴 항목을 추가한 후(단계별로 보여줌) 메뉴는 백엔드에서 다음과 같이 표시됩니다.

세로

전화 번호

이것은 한 페이지이므로 메뉴에 포함된 페이지가 없습니다. 메뉴에 추가할 모든 항목은 사용자 지정 링크가 될 것입니다. 이것은 우리가 추가하고 싶은 것들을 가지고 놀 수 있는 가능성을 제공합니다.

첫 번째 메뉴 항목을 추가하려면 사용자 정의 링크를 클릭하고 탐색 레이블 필드에 전화번호를 추가하십시오. URL을 추가할지 여부를 선택할 수 있습니다. 그러나 메뉴 항목을 메뉴에 추가할 때 URL을 입력해야 합니다. 메뉴 항목이 메뉴에 추가된 후 URL을 지울 수 있으며 누군가 메뉴 항목을 클릭할 때 아무 일도 일어나지 않을 것입니다.

세로

메뉴 항목을 메뉴에 추가하면 CSS 클래스도 표시됩니다. 여기에서 메뉴 항목의 스타일을 수정할 CSS 클래스를 결정해야 합니다. 이 경우 'phone-number' 클래스를 사용합니다. 이 게시물의 끝에 CSS 코드 라인을 복사하여 붙여넣고 싶다면 이 단계에서 언급한 CSS 클래스를 사용해야 합니다.

세로

주소

마찬가지로 주소를 추가합니다. 탐색 레이블에 주소를 입력하고 원하는 경우 URL을 추가합니다. 주소 메뉴 항목에 사용하는 클래스는 단순히 '주소'입니다.

세로

소셜 아이콘

수직 탐색에 소셜 아이콘을 추가하려면 더 많은 노력이 필요합니다. 이전 게시물에서 기본 메뉴에 소셜 아이콘을 추가하는 것을 명시적으로 처리했습니다. 그러나 이 경우 수직 탐색에서 아이콘을 나란히 정렬해야 하므로 방법이 약간 다릅니다.

멋진 글꼴 추가

아직 하지 않았다면 가장 먼저 해야 할 일은 테마 옵션에 Font Awesome을 추가하는 것입니다. 그렇게 하려면 WordPress 대시보드 > Divi > 테마 옵션 > 통합 > 웹사이트 헤드에 다음 단축 코드를 붙여넣습니다. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

세로

단축 코드 가져오기

소셜 아이콘에 대한 단축 코드를 얻으려면 Font Awesome 웹사이트에서 이 페이지를 엽니다. 해당 페이지에 표시되는 검색 필드에서 수직 탐색에 추가하려는 다양한 아이콘을 검색합니다.

아이콘을 클릭하면 아이콘에 연결된 단축 코드가 표시됩니다. 이 단축 코드를 각각 어딘가에 저장하십시오.

세로

메뉴에 소셜 아이콘 추가

계속해서 소셜 아이콘을 추가하겠습니다. 일반적으로 각 소셜 아이콘을 메뉴 항목으로 개별적으로 추가할 수 있습니다. 그러나 우리는 그것들이 서로 바로 옆에 나타나길 원하기 때문에 동일한 메뉴 항목에 배치해야 합니다. 탐색 레이블에 추가해야 하는 HTML 코드는 다음과 같습니다. 

<a href="#" target="_blank"><i class="fa fa-facebook-official facebook" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-instagram instagram" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-envelope envelope" aria-hidden="true"></i></a>

세로

각 아이콘에 URL을 추가하는 것을 잊지 마십시오. 세 가지 소셜 아이콘을 결합하여 사용하는 클래스는 'icon-wrapper'이지만 개별 조정을 위해 소셜 아이콘 각각에 추가 클래스를 할당했습니다. Font Awesome 클래스 직후에 이러한 클래스를 확인할 수 있습니다. '페이스북', '인스타그램', '봉투'라고 합니다.

세로

지도

다음 메뉴 항목의 경우 CSS 클래스 이름으로 '길찾기'라는 단어를 사용했습니다.

세로

선

길찾기 바로 아래에 줄을 추가하려면 레이블 탐색에 공백 문자를 추가해야 합니다. 워드프레스에서는 링크된 레이블 없이 메뉴 항목을 생성할 수 없기 때문입니다. 라인 메뉴 항목에 공백 문자를 추가하려면 '&nbsp;' 탐색 레이블로 이동합니다. 또한 이 메뉴 항목에 CSS 클래스 이름으로 'line'을 추가합니다.

세로

개관 시간

계속해서 영업 시간을 추가하고 여기에 'hours' CSS 클래스 이름을 할당하겠습니다.

세로

CTA 1

다음으로 첫 번째 CTA를 추가합니다. 여기에 'cta-1' CSS 클래스 이름을 할당하겠습니다.

세로

CTA 2

두 번째 CTA의 경우 'cta-2' CSS 클래스 이름을 사용할 것입니다.

세로

버튼 CTA

수직 탐색에 버튼 CTA를 추가하려면 텍스트인 일반 메뉴 항목보다 몇 단계가 더 필요합니다. 단일 호출기로 사용 중인 페이지를 열고 아래에 언급된 다음 단계를 따르십시오.

방문 페이지에 버튼 만들기

수직 탐색에서 버튼 CTA를 사용하려면 한 페이지에 동일한 버튼이 있어야 합니다. 생성한 후에는 요소를 검사하고 웹사이트 코드에 표시되는 다음 코드 줄(생성한 버튼에 연결됨)을 복사할 수 있습니다. 

<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> 
<a class="et_pb_button et_pb_button_0 et_pb_module et_pb_bg_layout_light"> 
ORDER NOW 
</a> 
</div>

세로

물론 이 코드는 스타일을 지정하는 방식에 따라 다를 수 있습니다. 또한 동일한 페이지에 다른 버튼이 있는지 여부에 따라 다릅니다. 버튼은 버튼이 위치한 페이지에서 사용자가 할당한 스타일로만 나타납니다. 그렇기 때문에 수직 탐색에 버튼을 추가하는 것은 일반적으로 단일 호출기와 관련된 경우에만 선호됩니다.

참고: 수직 탐색에 완벽하게 맞도록 버튼 모듈 내에서 버튼의 글꼴 크기와 패딩을 조정해야 합니다.

메뉴 항목으로 추가

이제 버튼에 연결된 필요한 HTML 코드를 복사했으므로 새 사용자 지정 링크를 추가하고 코드를 탐색 레이블에 추가합니다. 이 메뉴 항목에 사용하는 CSS 클래스는 'cta-3'입니다.

세로

CSS 코드 라인 추가

이 게시물의 다음 부분은 최종 결과와 레이아웃을 달성하는 데 도움이 되는 CSS 코드 라인을 공유하는 데 전념합니다. 다른 메뉴 항목에 할당한 CSS 클래스를 사용했음을 알 수 있습니다. 그러나 다른 클래스 이름을 사용하기로 결정했다면 CSS 코드에서 이를 변경하여 작동하도록 하십시오.

CSS 코드를 추가하려면 WordPress 대시보드 > Divi > 테마 옵션 > 일반 탭으로 이동하고 다음 CSS 코드 줄을 사용자 정의 CSS 상자에 추가합니다. 

@media only screen and (min-width:992px) {
.et_vertical_nav #page-container #main-header {
margin: 10px !important;
height: 93% !important;
z-index: 9999;
}}
.phone-number {
font-size: 1.9em !important;
font-weight: 400 !important;
}
.address {
font-weight: 300 !important;
}
@media only screen and (min-width:769px){
#main-header div#et-top-navigation {
padding-top: 110px;
height: 100%;
position: static !important;
}}
@media only screen and (min-width:769px){
.et_vertical_nav span.logo_helper {
display: none;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header #logo {
margin-bottom: 28px;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header .container {
margin-left: 25px !important;
margin-right: 25px !important;
height: 100% !important;
}}
.facebook, .instagram, .envelope {
padding: 7px 13px 7px 13px;
font-size: 1.6em;
}
.icon-wrapper a {
display: inline-block !important;
}
.directions {
font-size: 1.2em;
font-weight: 400;
padding-top: 0;
text-align: center;
}
.line {
border-top: 1px solid;
color: #fff;
margin: 8px auto auto;
width: 20%;
}
.hours {
color: #ffffff;
font-size: 10px;
font-weight: 300;
text-align: center;
}
.cta-1 {
margin-top: 5px !important;
font-size: 1.3em;
font-weight: 600;
text-align: center;
}
.cta-2{
font-size: 1.1em;
font-weight: 300;
letter-spacing: 0.02em;
text-align: center;
}
#page-container {
background: #d6d4d1;
}

@media only screen and (max-width:768px) {
.directions, .line, .cta-1, .cta-2, .cta-3 {
display: none !important;
}}

#main-header #top-menu-nav .nav li {
line-height: 10.5px;
}

세로

섹션 배경색 변경

마지막 단계는 단일 호출기 섹션의 배경색을 변경하는 것입니다. 이 색상이 페이지 컨테이너에 사용 중인 색상과 동일한지 확인하십시오. 이 경우 '#d6d4d1'입니다.

세로

결과

모든 메뉴 항목과 이러한 메뉴 항목 각각에 연결된 CSS 코드를 추가하면 다음과 같은 결과를 얻을 수 있습니다.

세로

마지막 생각들

이 게시물에서는 단일 호출기를 위한 수직 탐색을 만드는 방법을 보여 주었습니다. 이 포스트는 Divi로도 만든 Eat Thai Restaurant 웹사이트에서 영감을 받았습니다. 전체 게시물을 단계별로 따랐다면 위에 표시된 결과를 얻을 수 있었을 것입니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!

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

Vectomart / shutterstock.com의 주요 이미지