한 페이지 Divi 웹 사이트의 스크롤에 활성 링크를 만드는 방법

게시 됨: 2017-08-30

오늘의 튜토리얼에서는 방문자가 페이지를 아래로 스크롤할 때 방문자가 있는 섹션에 해당하는 메뉴 링크가 강조 표시되도록 세로 탐색 링크의 스타일을 지정하는 방법을 보여줍니다. 웹 디자인과 사용자의 행동 사이에 약간의 상호 작용을 추가하는 좋은 작은 효과입니다. 이 방법은 한 페이지짜리 웹사이트를 만드는 경우에 특히 효과적입니다.

이 효과를 머릿속에 그리는 데 어려움을 겪는 사람들을 위해 아래에 미리 보기를 제공했습니다.

결과

이 게시물을 따른 후 달성할 수 있는 최종 결과를 살펴보겠습니다.

활성 링크

보시다시피 강조 표시된 활성 링크는 사용자가 페이지 섹션을 스크롤할 때와 클릭 시 자동으로 변경됩니다.

영감

수직 탐색에 대한 게시물에서 예로 언급한 Filmschool Berlin 웹 사이트에서 이 게시물에 대한 영감을 찾았습니다. 해당 게시물의 댓글에 있는 독자가 스크롤링 활성 링크 효과를 만드는 방법을 보여달라고 요청하여 여기 있습니다!

활성 링크

한 페이지 Divi 웹 사이트의 스크롤에 활성 링크를 만드는 방법

YouTube 채널 구독

시작하기: Page Scroll to ID 플러그인 다운로드

이 디자인을 시작하기 위해 여기에서 찾을 수 있는 무료 및 평가가 좋은 Page Scroll to ID 플러그인을 사용하여 시작하겠습니다. '다운로드' 버튼을 클릭하고 플러그인 ZIP 파일을 바로 찾을 수 있는 곳에 저장하세요.

활성 링크

ID 플러그인으로 페이지 스크롤 업로드 및 활성화

다음으로 해야 할 일은 WordPress 대시보드 > 플러그인 > 새로 추가 > 방금 다운로드한 ZIP 파일을 선택하고 업로드하는 것입니다.

활성 링크

그 후에 플러그인도 활성화하는 것을 잊지 마십시오.

수직 탐색 활성화

Page Scroll to ID 플러그인의 설정에 들어가기 전에 먼저 수직 탐색(및 다음 단계에서 고정 탐색)을 활성화합니다. WordPress 대시보드에 있는 경우 모양 > 사용자 정의 > 헤더 및 탐색 > 헤더 형식 > 수직 탐색 활성화로 이동합니다.

활성 링크

고정 탐색 활성화

계속해서 웹사이트의 고정 탐색을 활성화해 보겠습니다. 스크롤 시 활성 링크를 사용하는 요점은 방문자가 어느 섹션에 있는지, 언제 어느 섹션에 있는지 확인하는 것이기 때문에 필요합니다. WordPress 대시보드에 있는 경우 Divi > 테마 옵션 > 일반 탭에서 고정 탐색 모음을 활성화합니다.

활성 링크

ID 플러그인 설정 페이지 스크롤

이 부분에서는 최근에 업로드된 플러그인으로 돌아가겠습니다. 플러그인을 활성화한 후에는 올바른 설정을 사용해야 합니다. 설정으로 이동하려면 플러그인 이름 바로 아래에 있는 '설정'을 클릭하세요.

활성 링크

그렇게 하면 웹사이트에서 활성 링크가 어떻게 작동할지 결정하는 데 도움이 되는 다양한 옵션을 확인할 수 있습니다. 우리가 만든 예에서는 다음 설정을 사용하고 있습니다.

WordPress 메뉴 링크에서 활성화: 예
스크롤 지속 시간: 200밀리초
스크롤 시간 자동 조정: 예
스크롤 애니메이션 이징: 선형
페이지/문서 끝에 도달할 때 항상 부드럽게 스크롤: 예
마우스 휠 또는 터치 스와이프 시 페이지 스크롤 중지: 예
페이지 레이아웃: 자동
한 번에 하나의 강조 표시된 요소만 허용: 예
다음 요소가 표시될 때까지 현재 요소를 강조 표시한 상태로 유지: 예
다음 대상으로 강조 표시: 예
클릭한 링크의 해시 값을 브라우저의 URL/주소 표시줄에 추가: 예
다른 페이지에서/로 스크롤: 예
페이지 로드 시 대상으로 스크롤하는 데 0밀리초 지연
다른 스크립트가 플러그인의 링크를 처리하지 못하도록 방지(가능한 경우): 예
기준점 대상 정규화: 예

활성 링크

섹션에 CSS ID 및 클래스 추가

다음으로 해야 할 일은 다른 CSS ID와 ID CSS 클래스의 페이지 스크롤을 단일 호출기의 다른 섹션에 할당하는 것입니다. 그렇게 하려면 각 섹션의 설정을 열고 고급 탭으로 이동하십시오. 고급 탭에서 섹션에 사용할 다양한 CSS ID를 결정합니다. 이것이 작동하려면 한 페이지의 각 섹션에 다른 CSS ID를 할당해야 합니다.

활성 링크

이 예에서는 'home'을 첫 번째 CSS ID로 사용하고 있습니다. 그러나 CSS 클래스는 각 섹션에 대해 동일하며 섹션을 ID로 페이지 스크롤 플러그인에 연결하는 데 도움이 됩니다. CSS 클래스 이름은 'ps2id'입니다.

메뉴 항목에 ID 추가

다음으로 메뉴 항목을 만들고 섹션 및 ID로 페이지 스크롤 플러그인과 일치하는지 확인합니다. WordPress 대시보드에 있는 경우 모양 > 메뉴 로 이동합니다. 기본 메뉴가 이미 있는 경우 해당 메뉴에서 작업할 수 있습니다. 그렇지 않은 경우 제목을 입력하고 새 메뉴를 만들 수 있습니다. 기본 메뉴로 만드는 것을 잊지 마십시오.

사용자 지정 링크 사용

다음으로 원하는 결과를 얻으려면 사용자 지정 링크가 필요합니다. 첫 번째 사용자 정의 링크를 추가하여 시작하십시오. 아래 스크린샷과 같이 링크 필드에 웹사이트와 첫 번째 섹션 ID를 차례로 추가합니다.

CSS 클래스 활성화

이전에 아직 하지 않았다면 다음으로 해야 할 일은 메뉴 항목에 대한 CSS 클래스를 활성화하는 것입니다. 그렇게 하려면 오른쪽 모서리에 있는 '화면 옵션' 옵션을 클릭합니다. 가능성이 나타나면 CSS 클래스를 활성화합니다.

활성 링크

페이지 스크롤을 사용하여 CSS 클래스 ID 지정

메뉴 항목에 대해 CSS 클래스를 활성화했으면 계속해서 Page Scroll to ID 클래스를 메뉴 항목 각각에 수동으로 연결할 수 있습니다. CSS 클래스는 'ps2id'라는 섹션에 ID를 할당하는 데 사용한 것과 동일합니다.

활성 링크

모양 수정

이 방법을 사용하는 경우에도 기본 메뉴에 대한 모든 종류의 수정을 수행할 수 있습니다. 변경 방법을 보여주기 위해 수직 탐색 예제를 다시 만들 것입니다.

참고: 이 게시물의 소개에서 언급했듯이, 페이지를 미리 보는 동안 변경 사항을 볼 수 없습니다. 결과를 확인하려면 먼저 페이지를 게시하고 라이브 방식으로 확인해야 합니다.

테마 커스터마이저

테마 사용자 정의 > 헤더 및 탐색 > 기본 메뉴로 이동하여 기본 메뉴의 모양을 다음과 같이 변경합니다.

로고 이미지 숨기기: 예
로고 최대 높이: 83
메뉴 상단 여백: 0
텍스트 크기: 14
문자 간격: -1
글꼴: Lato Light
글꼴 스타일: 대문자
텍스트 색상: #FFFFFF
활성 링크 색상: #FFFFFF
배경색: rgba(255,255,255,0)
드롭다운 메뉴 배경색: rgba(255,255,255,0)

활성 링크

사용자 정의 CSS 테마 옵션

활성 링크 스타일을 변경하려면 사용자 정의 CSS 코드를 추가해야 합니다. WordPress 대시보드에 있는 경우 Divi > 테마 옵션 > 일반 탭으로 이동하여 사용자 지정 CSS 상자에 다음 CSS 코드 줄을 붙여넣습니다.

#top-menu .current-menu-item a.mPS2id-highlight{
background: black;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-top: 15px;
}

그 외에도 겹치는 투명 메뉴를 사용했는데 이 게시물에서 더 자세히 다루었습니다. 이러한 CSS 변경 사항을 웹사이트에도 적용하려면 사용자 정의 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;
}
}

활성 링크

결과

이 게시물의 모든 단계를 수행하면 다음과 같은 최종 결과를 얻을 수 있습니다.

활성 링크

물론 스타일을 자신의 기본 설정으로 수정할 수 있습니다(또는 상위 탐색에도 사용할 수 있습니다).

마지막 생각들

이 자습서에서는 단일 호출기를 위한 대화형 수직 탐색 메뉴를 만드는 방법을 보여주었습니다. 원하는 결과를 쉽게 얻기 위해 Divi 테마와 함께 Page Scroll to ID 플러그인을 사용하는 방법을 보여 주었습니다. 향후 게시물에서 다시 이 방법을 통해 사용 중인 활성 링크의 스타일을 창의적으로 지정하는 방법을 보여드리겠습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!

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

Yurlick/Shutterstock.com의 주요 이미지