Divi 수직 탐색의 활성 링크 스타일을 지정하는 3가지 창의적인 방법

게시 됨: 2017-09-11

이 Divi 튜토리얼에서는 수직 탐색에서 활성 링크의 스타일을 지정하는 몇 가지 흥미로운 방법을 보여 드리겠습니다. 이 튜토리얼은 한 페이지짜리 Divi 웹사이트에 대해 스크롤 시 활성 링크를 생성하는 방법을 보여준 이전 튜토리얼의 후속입니다. 따라서 다양한 스타일 지정 방법을 시도하기 전에 먼저 이전 기사를 스크롤할 때 활성 링크를 설정해야 합니다. 왜냐하면 우리가 사용할 코드가 이를 기반으로 추가 구축할 것이기 때문입니다.

이 자습서에서 염두에 두어야 할 사항은 페이지를 저장한 후에만 결과를 볼 수 있다는 사실입니다. 페이지를 미리보기만 하면 변경 사항이 표시되지 않습니다.

Divi 수직 탐색의 활성 링크 스타일을 지정하는 3가지 창의적인 방법

YouTube 채널 구독

작동 원리

페이지를 아래로 스크롤할 때 활성 링크를 자동으로 조정하는 탐색을 만들기 위해 원하는 결과를 쉽게 얻을 수 있도록 도와주는 Page Scroll to ID 플러그인을 사용했습니다. 게다가 플러그인은 설정 내에서 수동으로 선택할 수 있는 다양한 옵션도 제공합니다.

플러그인은 방문자가 웹사이트에서 차지하는 위치를 식별하는 데 도움이 되며 현재 보고 있는 웹사이트 섹션에 따라 메뉴 항목을 변경합니다. 이것은 방문자가 단일 페이지를 탐색하는 데 확실히 도움이 되는 작은 상호 작용입니다. 페이지의 어느 부분을 탐색하고 관심을 가질 만한 다른 섹션과 얼마나 멀리 떨어져 있는지 자동으로 알게 됩니다.

참고: 이 방법은 한 페이지로만 구성된 웹사이트에만 적용됩니다.

수직 탐색 활성화

만드는 방법을 보여드릴 예제는 수직 탐색을 사용하는 경우 특히 유용합니다. 따라서 Theme Customizer에서 수직 탐색을 활성화하십시오(이전 게시물에서 아직 수행하지 않은 경우).

WordPress 대시보드에 있는 경우 모양 > 사용자 정의 > 헤더 및 탐색 > 헤더 형식 > 수직 탐색 활성화로 이동합니다.

활성 링크

활성 링크 스타일 #1

우리가 보여주고 싶은 첫 번째 예는 빛나는 것입니다. 방문자가 섹션 중 하나를 지날 때마다 다른 메뉴 항목이 빛나기 시작합니다. 방문자가 단일 호출기를 탐색할 수 있도록 하는 미묘하지만 아름답고 우아한 방법입니다.

활성 링크

기본 메뉴 모음 설정

기본 메뉴 모음을 약간 변경하여 시작하십시오. WordPress 대시보드에 있는 경우 모양 > 사용자 정의 > 헤더 및 탐색 > 기본 메뉴 표시줄로 이동하여 다음과 같이 수정합니다.

로고 이미지 숨기기: 활성화
텍스트 크기: 24
문자 간격: -1
글꼴: 해피 몽키
텍스트 색상: #FFFFFF
활성 링크 색상: #FFFFFF
배경색: rgba(255,255,255,0)
드롭다운 배경색: rgba(255,255,255,0)

활성 링크

테마 옵션에 CSS 코드 추가

다음으로 해야 할 일은 CSS 코드를 추가하는 것입니다. 웹사이트에 CSS 코드를 추가할 수 있는 몇 가지 방법이 있습니다. 테마 옵션부터 시작하여 이 예제에서 세 가지 방법을 처리할 것입니다. WordPress 대시보드에 있는 경우 Divi > 테마 옵션 > 일반 탭으로 이동하여 사용자 정의 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;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight{ 
text-shadow:  0 0 10px #fff,  0 0 30px #fff,  0 0 50px #e3e98e,  0 0 70px #e3e98e, 0 0 90px #e3e98e;
border-top: 1px dotted #FFFFFF;
border-bottom: 1px dotted #FFFFFF;
padding-top: 15px;
}
nav#top-menu-nav {
width:80% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
text-align: center;
margin-bottom: 15px;
padding-left: 25%;
}
#et-top-navigation {
padding-top: 100% !important;
}
#top-menu {
text-align: center;
padding-left: 10%;
}}

활성 링크 스타일 #2

두 번째 액티브 링크 스타일은 매우 깔끔하고 우아한 느낌을 주는 스타일입니다. 평소와 같이 활성 링크는 한 페이지 웹 사이트를 아래로 스크롤하는 방식에 따라 변경됩니다. 메뉴 항목 중 하나를 클릭하면 동일한 스타일이 적용됩니다.

활성 링크

기본 메뉴 모음 설정

이 게시물의 첫 번째 예에서 했던 것과 동일한 작업을 시작합니다. 기본 메뉴 모음을 수정합니다. 그렇게 하려면 WordPress 대시보드 내에서 모양 > 사용자 정의 > 헤더 및 탐색 > 기본 메뉴 표시줄로 이동하고 다음 설정이 있는지 확인하십시오.

로고 이미지 숨기기: 활성화
텍스트 크기: 24
문자 간격: 2
글꼴: 랍스터
텍스트 색상: #FFFFFF
활성 링크 색상: #FFFFFF
배경색: rgba(255,255,255,0)
드롭다운 메뉴 배경색: rgba(255,255,255,0)

활성 링크

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

이전 예에서 설명한 것처럼 여러 방법을 통해 CSS 코드를 웹사이트에 추가할 수 있습니다. 테마 옵션에 사용자 지정 코드를 추가하는 것 외에도 테마 사용자 지정 프로그램에도 추가할 수 있습니다. WordPress 대시보드에 있는 경우 모양 > 사용자 정의 > 추가 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;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
padding: 0.5em 1.9em;
}
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
height: 20px;
width: 20px;
position: absolute;
content: '';
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
}
#top-menu .current-menu-item a.mPS2id-highlight:before {
left: 0;
top: 0;
border-left: 4px solid #000000;
border-top: 4px solid #FFFFFF;
-webkit-transform: translate(100%, 50%);
transform: translate(100%, 50%);
}
#top-menu .current-menu-item a.mPS2id-highlight:after {
border-right: 4px solid #000000;
border-bottom: 4px solid #FFFFFF;
-webkit-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
} 
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
opacity: 1;
}
nav#top-menu-nav {
width:87% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

활성 링크 스타일 #3

귀하와 공유하기 위해 선택한 세 번째 활성 링크 스타일은 주로 메뉴 항목으로 사용되는 키워드에 중점을 둔 스타일입니다. 텍스트 그림자에 대한 올바른 설정을 사용하면 방문자가 웹사이트에서 차지하는 위치를 강조하는 동일한 텍스트가 메뉴 항목을 둘러싸게 됩니다.

활성 링크

기본 메뉴 모음 설정

이 마지막 예에서는 기본 메뉴 모음을 약간 변경하여 시작합니다. WordPress 대시보드에 있는 경우 모양 > 사용자 정의 > 헤더 및 탐색 > 기본 메뉴 표시줄로 이동하여 수직 탐색에 다음 변경 사항을 적용합니다.

로고 이미지 숨기기: 활성화
텍스트 크기: 16
문자 간격: 2
글꼴: Josefin Slab
글꼴 스타일: 대문자
텍스트 색상: #FFFFFF
활성 링크 색상: #FFFFFF
배경색: rgba(255,255,255,0)
드롭다운 메뉴 배경색: rgba(255,255,255,0)

활성 링크

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

CSS 코드를 추가해야 하는 또 다른 옵션은 특히 한 페이지에 추가하는 것입니다. Divi Builder로 첫 페이지(모든 콘텐츠를 배치한 페이지)를 열고 다음 아이콘을 클릭하십시오.

활성 링크

아이콘을 클릭한 후 사용자 정의 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;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
margin-left: 80px;
text-shadow:0 0 0 #000, -70px 0 0 rgba(255, 255, 255, .4), 70px 0 0 rgba(255, 255, 255, .4), 0 25px 0 rgba(255, 255, 255, .4) , 0 -25px 0 rgba(255, 255, 255, .4) ; }
}
nav#top-menu-nav {
width:95% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

마지막 생각들

이 게시물에서는 메뉴에서 활성 링크의 스타일을 지정하는 멋지고 쉬운 몇 가지 방법을 보여 드렸습니다. 이 게시물은 한 페이지짜리 Divi 웹사이트에 대해 스크롤 시 활성 링크를 만드는 방법을 보여드린 이전 게시물에 대한 후속 조치입니다. 결과를 보려면 먼저 변경 사항을 저장해야 합니다. 페이지를 미리 보는 것만으로는 작업이 수행되지 않습니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요!

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

Botond1977의 추천 이미지 / shutterstock.com