Divi에서 스크롤 진행률 표시줄을 고정 탐색 메뉴와 결합하는 방법

진행률 표시줄 표시기는 웹사이트에 멋진 터치를 추가하여 유용하고 재미있는 상호 작용으로 UX를 향상시킬 수 있습니다. 일반적으로 진행률 표시줄은 페이지의 실제 내용과 많이 연결되지 않고 페이지 상단에 단독으로 표시됩니다. 사용자는 단순히 페이지에서 자신이 어디에 있는지에 대한 시각적 표시기를 가지고 있습니다. 그러나 오늘 우리는 이 기능을 다른 수준으로 끌어올릴 것입니다.

이 튜토리얼에서는 스크롤 진행률 표시줄과 Divi의 고정 탐색 메뉴를 결합하는 방법을 보여 드리겠습니다. 이 디자인은 진행률 표시줄이 메뉴 버튼의 너비와 관련이 있다는 점에서 독특합니다. 그리고 메뉴 버튼의 너비는 페이지에서 스크롤 가능한 콘텐츠 섹션의 높이(백분율)와 같기 때문에 사용자가 버튼의 해당 섹션에 도달하면 각 버튼이 스크롤 진행률 표시줄로 채워집니다. 그리고 그것으로 충분하지 않다면 UX 보너스를 추가하기 위해 각 버튼을 해당 섹션에 대한 앵커 링크로 만들 것입니다!

이 디자인은 프로세스의 단계를 설명하는 방문 페이지로 사용자를 안내하는 데 적합합니다. 글쎄, 당신은 볼 것입니다.

시작하자!

엿보기

다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.

무료로 레이아웃 다운로드

이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

https://youtu.be/Kf-ciVKEZFI

YouTube 채널 구독

섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.

가져오기 버튼을 클릭합니다.

이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.

그런 다음 가져오기 버튼을 클릭합니다.

완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다.

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. "처음부터 빌드" 옵션을 선택합니다.

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

1부: 전체 화면 섹션 페이지 레이아웃 만들기

상단 섹션

시작하려면 섹션에 1열 행을 추가하세요.

모듈을 추가하기 전에 다음과 같이 행 설정을 업데이트하십시오.

• 폭: 100%
• 최대 너비: 100%
• 패딩: 0px 상단, 0px 하단

행 내부에 텍스트 모듈을 추가합니다.

그런 다음 텍스트 모듈에 대한 설정을 열고 다음 HTML을 붙여넣어 다채로운 제목을 만듭니다.

<h2><span style="color: #00A4E0;">Let's</span><span style="color: #EE4266;>get</span style="color: #2a1e5c;>star</span><span style="color: #26c485;">ted</span></h2>

디자인 탭에서 텍스트 정렬을 가운데로 업데이트합니다.

다음 H2 제목 스타일을 업데이트합니다.

• 제목 2 글꼴: Roboto
• 제목 2 텍스트 크기: 6vw

섹션 설정을 열고 높이를 100vh(또는 뷰포트/창 높이의 100%)로 업데이트합니다. 이렇게 하면 섹션이 전체 화면으로 표시됩니다. 그런 다음 다음과 같이 패딩을 꺼냅니다.

• 높이: 100vh
• 패딩: 0px 상단, 0px 하단

섹션 안의 행/내용이 섹션 내에서 세로로 가운데에 유지되도록 하려면 섹션의 기본 요소에 다음 사용자 지정 CSS를 추가합니다.

display:flex;
flex-direction:column;
justify-content:center;

1단계 섹션

레이아웃의 다음 섹션은 네 단계 중 첫 번째 단계입니다. 첫 번째 메뉴 앵커 링크가 스크롤되는 첫 번째 섹션이기도 합니다.

첫 번째 단계 섹션을 생성하려면 방금 생성한 상단 섹션을 복제합니다.

그런 다음 복제 섹션에 대한 설정을 열고 배경색을 업데이트합니다.

• 배경색: #222222

그런 다음 텍스트 설정을 열고 본문 텍스트를 다음으로 바꿉니다.

<h2>Step One...</h2>
Sed aliquet risus a urna aliquet blandit. Maecenas a scelerisque lorem. Sed commodo lectus sit amet felis rutrum, blandit elementum dui tincidunt. Nunc in tortor sit amet leo pharetra lobortis sed a velit. Fusce eu ante lacinia, gravida nibh id, semper lectus. Quisque lacinia rhoncus consectetur. 

텍스트 정렬을 왼쪽 정렬로 변경합니다.

그런 다음 다음을 업데이트합니다.

• 제목 2 텍스트 색상: #00a4e0
• 최대 너비: 40vh(데스크톱), 80vh(태블릿)
• 모듈 정렬: 중앙

1단계 섹션을 처리합니다.

2단계 섹션

2단계 섹션을 만들려면 방금 만든 1단계 섹션을 복제합니다.

섹션 설정을 열고 다음과 같이 배경색 위에 배경 그라디언트를 추가합니다.

• 왼쪽 그라데이션 배경색: rgba(255,255,255,0.85)
• 오른쪽 그라데이션 배경색: rgba(255,255,255,0.85)

그런 다음 제목 색상을 업데이트합니다.

• 제목 2 텍스트 색상: #ee4266

이 섹션의 배경 및 제목 색상은 나중에 만들 메뉴에서 이 섹션과 관련된 버튼의 색상과 일치합니다.

3단계 섹션

3단계 섹션을 만들려면 2단계 섹션을 복제하고 페이지 맨 아래로 끕니다.

그런 다음 텍스트 모듈의 제목 색상을 변경합니다.

• 제목 2 텍스트 색상: #26c485

4단계 섹션

우리의 마지막 단계는 4단계입니다. 이 섹션을 만들려면 2단계 섹션을 복제하고 페이지 맨 아래로 끕니다.

그런 다음 해당 섹션에서 텍스트 모듈의 제목을 업데이트합니다.

• 제목 2 텍스트 색상: #2a1e5c

결과

여기까지 레이아웃의 결과가 있습니다.

2부: 스크롤 진행률 표시줄 및 메뉴 만들기

이 다음 부분은 마침내 메뉴 버튼으로 스크롤 진행률 표시줄을 만드는 곳입니다. 아이디어는 페이지 상단에 고정 섹션을 추가하는 것입니다. 그런 다음 섹션 내에서 진행률 표시줄 역할을 하는 구분선 모듈을 포함하는 행을 만듭니다. 진행률 표시줄이 있는 행의 맨 위에 단추를 포함할 다른 행을 추가합니다. 각 버튼에는 사용자가 페이지를 아래로 스크롤할 때 뒤에 진행률 표시줄을 표시하기 위해 투명(또는 반투명) 배경이 있습니다.

시작하려면 페이지 상단에 고정 섹션을 생성해 보겠습니다. 계속해서 새 일반 섹션을 만들고 페이지 레이아웃의 맨 위로 끕니다.

섹션 설정을 열고 다음과 같이 패딩을 꺼냅니다.

• 패딩: 0px 상단, 0px 하단

고급 탭에서 다음을 업데이트합니다.

• 위치: 고정
• Z 인덱스: 999

이렇게 하면 쉬운 앵커 링크 기능을 위해 섹션이 브라우저 창 상단에 고정된 상태로 유지됩니다. 또한 섹션이 문서/html의 정상적인 흐름을 벗어나 전체 문서의 높이에 추가되지 않도록 합니다. 이렇게 하면 사용자가 스크롤할 때 페이지의 각 섹션/단계에 도달할 때 스크롤 막대가 각 버튼의 끝에 도달하게 됩니다.

섹션 내에서 1열 행을 추가합니다.

행 설정을 열고 다음을 업데이트합니다.

• 거터 폭: 1
• 폭: 100%
• 최대 너비: 100%
• 패딩: 0px 상단, 0px 하단
• 위치: 절대

열 설정을 열고 다음 사용자 정의 CSS를 기본 요소에 추가합니다.

height: 100%;
display:flex;
align-items:center;

이렇게 하면 열의 높이가 섹션과 같은지 확인됩니다. 또한 모듈의 높이도 100%로 설정할 수 있습니다. 이것은 진행률 표시줄이 섹션을 채우는지 확인하는 데 중요합니다.

진행률 표시줄을 만들려면 열에 구분선 모듈을 추가합니다.

그런 다음 다음과 같이 구분선 설정을 업데이트합니다.

• 디바이더 표시: 아니오
• 배경색: #222222

• 폭: 100%
• 높이: 100%

참고: 디자인 내에서 볼 수 있도록 진행률 표시줄의 너비를 100%로 지정했습니다. JQuery를 사용하여 구분선/진행률 표시줄의 너비를 늘리거나 줄입니다.

고급 탭에서 CSS ID를 추가하고 절대 위치를 지정합니다.

• CSS ID: 스크롤바
• 위치: 절대

백분율 텍스트 표시기 추가

다음으로 사용자가 페이지를 아래로 스크롤할 때 스크롤 위치의 백분율을 표시하는 위치를 추가합니다. 이것은 진행률 표시줄의 너비와 관련이 있습니다.

구분선 아래에 텍스트 모듈을 추가합니다.

그런 다음 다음 HTML을 본문에 붙여넣습니다.

<p><span></span></p>

JQuery는 이 HTML(스팬 태그 사이)에 백분율 텍스트를 씁니다. 이제 아무것도 볼 수 없습니다.

백분율 텍스트는 아직 표시되지 않지만 표시될 것으로 예상하여 다음 스타일을 추가해야 합니다.

• 텍스트 글꼴: Roboto
• 텍스트 글꼴 스타일: TT
• 텍스트 텍스트 색상: #ffffff
• 텍스트 텍스트 크기: 16px
• 패딩: 상단 0.8em, 하단 0.8, 왼쪽 15px

고급 탭에서 사용자 지정 CSS 클래스를 지정하고 휴대폰 및 태블릿에서 비활성화합니다.

• CSS 클래스: et-progress-label
• 비활성화 켜기: 전화, 태블릿

아직 완료되지 않았지만 스크롤 진행률 표시줄과 백분율을 표시하는 데 필요한 사용자 지정 코드를 추가하기에 좋은 위치입니다.

코드를 추가하려면 텍스트 모듈 아래에 코드 모듈을 추가합니다.

그런 다음 코드 상자에 다음 코드를 붙여넣고 필수 스크립트 태그로 래핑합니다.

(function($) {
$(document).ready(function(){
var docHeight = $(document).height();
var winHeight = $(window).height();
var $scrollBar = $('#scrollBar');
var $progressLabel = $('.et-progress-label p span'); 
$scrollBar.css('width', 0);
$progressLabel.html('0%');
$(window).scroll(function(){
var winScrollTop = $(window).scrollTop();
var scrollPercentage = Math.abs(winScrollTop / (docHeight - winHeight)*100);
$scrollBar.css('width', (scrollPercentage + '%'));
$progressLabel.html( Math.round(scrollPercentage) + '%');
});
});
})( jQuery );

진행률 표시줄과 백분율 텍스트를 처리합니다. 탐색 메뉴로 이동해 보겠습니다.

앵커 링크로 메뉴 버튼 만들기

이제 브라우저의 전체 너비에 걸쳐 있는 4개의 버튼을 포함하는 탐색 메뉴를 만들 준비가 되었습니다. 사용자가 링크되는 해당 섹션에 도달할 때 스크롤 막대가 각 버튼을 채우도록 하는 것이 멋질 것이라고 생각했습니다. 여기 아이디어가 있습니다. 각 버튼의 너비는 브라우저 전체 너비의 25%입니다. 그리고 4개의 섹션이 모두 동일한 높이(100vh)를 가지므로 4개의 섹션 각각은 페이지 레이아웃의 전체 스크롤 가능 영역의 25%를 나타냅니다. 이렇게 하면 해당 섹션이 뷰포트를 채울 때 진행률 표시줄이 각 버튼의 끝에 정확하게 도달합니다. 잡았어? 그렇지 않다면 나중에 더 의미가 있기를 바랍니다.

행과 열

메뉴 버튼을 생성하려면 먼저 진행률 표시줄/구분자를 포함하는 행 아래에 4열 행을 생성해야 합니다.

행 설정을 열고 다음을 업데이트합니다.

• 거터 폭: 1
• 폭: 100%
• 최대 너비: 100%
• 패딩: 0px 상단, 0px 하단

열이 모바일에 쌓이도록 하려면 다음 사용자 정의 CSS를 기본 요소에 추가해야 합니다.

display:flex;
flex-wrap:nowrap;

1단계 버튼

첫 번째 버튼을 생성하려면 맨 왼쪽 열에 버튼 모듈을 추가합니다.

다음과 같이 버튼 텍스트 및 링크 URL을 업데이트합니다.

• 버튼 텍스트: 1단계
• 버튼 링크 URL: #one
  (이 앵커 링크는 나중에 추가할 해당 CSS ID가 있는 섹션으로 이동합니다.)

다음으로 버튼 스타일을 다음과 같이 업데이트합니다.

• 버튼 정렬: 중앙
• 버튼 텍스트 크기: 20px(데스크톱), 14px(태블릿)
• 버튼 배경색: 투명
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 0px
• 버튼 문자 간격: 0.2em
• 버튼 글꼴: Roboto
• 버튼 글꼴 스타일: TT
• 패딩: 상단 0.8em, 하단 0.8em, 왼쪽 0, 오른쪽 0

버튼이 열의 전체 너비로 확장되도록 하려면 다음 사용자 정의 CSS를 기본 요소에 추가하십시오.

display:block !important;
width: 100%;

2단계 버튼

2단계 버튼을 생성하려면 1열의 버튼을 복제하고 2열로 드래그합니다.

그런 다음 다음을 업데이트합니다.

• 버튼 텍스트 색상: #ee4266
• 버튼 배경색: rgba(255,255,255,0.85)

반투명 배경색은 해당하는 2단계 섹션 배경과 일치하도록 검은색 진행률 표시줄 색상(뒤에 있음)과 결합됩니다.

그런 다음 버튼 링크 URL을 다음으로 업데이트합니다.

• 버튼 링크 URL: #two

3단계 버튼

3단계 버튼을 생성하려면 1단계 버튼(같은 bg 색상을 가짐)을 복제하고 3열로 드래그합니다.

그런 다음 버튼 텍스트 색상을 업데이트합니다.

• 버튼 텍스트 색상: #26c485

그런 다음 다음으로 버튼 링크 URL을 업데이트합니다.

• 버튼 링크 URL: #three

4단계 버튼

3단계 버튼을 생성하려면 2단계 버튼(같은 bg 색상을 가짐)을 복제하고 4열로 드래그합니다.

그런 다음 버튼 텍스트 색상을 업데이트합니다.

• 버튼 텍스트 색상: #2a1e5c

그런 다음 다음으로 버튼 링크 URL을 업데이트합니다.

• 버튼 링크 URL: #4

앵커 링크에 해당 섹션 CSS ID 추가

버튼이 완료되고 모두 앵커 링크 URL이 있으면 페이지에서 각 버튼이 이동할 각 섹션에 해당 섹션 CSS ID를 추가할 수 있습니다.

1단계 섹션 CSS ID

1단계 섹션의 설정을 열고 다음 CSS ID를 추가합니다.

• CSS ID: 하나

2단계 섹션 CSS ID

2단계 섹션의 설정을 열고 다음 CSS ID를 추가합니다.

• CSS ID: 2

3단계 섹션 CSS ID

3단계 섹션의 설정을 열고 다음 CSS ID를 추가합니다.

• CSS ID: 3

4단계 섹션 CSS ID

4단계 섹션의 설정을 열고 다음 CSS ID를 추가합니다.

• CSS ID: 4

최종 결과

마지막 생각들

이 진행률 표시줄 메뉴는 다양한 응용 프로그램에 사용할 수 있는 고유한 디자인입니다. 다음 프로젝트에 도움이 되길 바랍니다. 또한 Divi 빌더 내에서 사용할 수 있는 수많은 디자인 변형을 자유롭게 탐색하여 자신만의 진행률 표시줄 메뉴를 만들 수 있습니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!