Divi에서 고정 페이지 제목을 사용하여 클릭 가능한 아코디언을 만드는 방법
게시 됨: 2020-09-03Divi의 새로운 고정 위치 옵션은 새롭고 흥미로운 디자인 가능성을 많이 열어줍니다. 이 자습서에서는 Divi의 고정 위치 옵션을 부드러운 스크롤 앵커 링크와 결합하여 페이지를 색인화하고 탐색하는 아코디언과 같은 방법을 만드는 방법을 보여줍니다. Divi의 내장 옵션을 사용하면 정말 쉽게 빌드할 수 있으므로 추가 CSS나 다른 코드가 필요하지 않습니다. 완료되면 페이지를 구성하고 데스크톱 및 모바일에서 사용자 경험을 향상할 수 있는 고유한 방법을 갖게 됩니다.
시작하자!
엿보기
다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.
여기에서 고정 페이지 제목이 브라우저 창의 상단과 하단에 붙어 있고 아코디언처럼 서로 겹쳐져 있는 것을 볼 수 있습니다.
여기에서 고정 제목 중 하나를 클릭하면 아코디언처럼 페이지의 해당 섹션으로 이동(부드러운 스크롤 앵커 링크 사용)하는 것을 볼 수 있습니다.
여기에 모바일에서도 기능이 있습니다.
무료로 레이아웃 다운로드
이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.
가져오기 버튼을 클릭합니다.
이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.
그런 다음 가져오기 버튼을 클릭합니다.
완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다.
튜토리얼로 들어가 볼까요?
시작하는 데 필요한 것
시작하려면 다음을 수행해야 합니다.
- 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
- WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
- "처음부터 빌드" 옵션을 선택합니다.
그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.
고정 행 만들기
우선 고정 행을 만들어 보겠습니다. 그렇게 하려면 기본 섹션에 1열 행을 추가하십시오.
행 설정을 엽니다. 고급 탭에서 다음과 같이 고정 위치를 업데이트합니다.
- 고정 위치: 상단 및 하단에 고정
이렇게 하면 사용자가 아래로 스크롤할 때 행이 브라우저 창 상단에 고정되고 사용자가 위로 스크롤할 때 브라우저 창 하단에 고정됩니다.
고정 행 스타일링
이제 고정 위치가 지정되었으므로 고정 위치가 적용(또는 고정)될 때마다 요소에 특정 스타일을 부여할 수 있는 기본 제공 고정 스타일 옵션을 사용하여 행 스타일 지정을 시작할 수 있습니다. 행의 경우 배경이 고정 위치에 있을 때마다 어두운 색으로 변경되기를 원합니다. 이렇게 하려면 행 설정을 열고 다음을 업데이트하십시오.
- 배경색(데스크톱): #ffffff
- 배경색(스티키): #051923
디자인 탭에서 다음을 업데이트합니다.
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
- 너비(태블릿 및 휴대폰): 100%
- 패딩: 0px 상단, 0px 하단
다음으로, 제목과 아래 내용 사이의 구분선 역할을 하기 위해 행에 아래쪽 테두리를 지정하려고 합니다. 그리고 행이 고정 위치에 있으면 대신 왼쪽 테두리를 표시하려고 합니다.
테두리 옵션 토글에서 다음을 업데이트합니다.
- 테두리 색상: #6eeb83
- 하단 테두리 너비(데스크톱): 8px
- 하단 테두리 너비(고정): 0px
- 왼쪽 테두리 너비(데스크톱): 0px
- 왼쪽 테두리 너비(고정): 8px
고정 제목 텍스트 만들기
페이지 머리글 텍스트를 만들려면 행에 새 텍스트 모듈을 추가합니다.
그런 다음 본문 내용에 다음 HTML을 붙여넣습니다.
<h2><strong>Step 2:</strong> S<span>ed do eiusmod tempor incididunt</span></h2>
그리고 호버의 배경색도 업데이트하십시오…
- 배경색(호버): rgba(255,255,255,0.2)
이렇게 하면 사용자가 제목을 클릭할 수 있다는 것이 더 분명해집니다.
고정 제목 텍스트 스타일 지정
디자인 탭에서 다음을 업데이트합니다.
- 제목 2 글꼴: 몬세라트
- 제목 2 텍스트 정렬: 왼쪽
- 제목 2 텍스트 색상(데스크탑): 기본값(또는 검정색)
- 제목 2 텍스트 색상(고정): #ffffff
- 제목 2 텍스트 크기: 80px(데스크톱), 22px(고정), 28px(전화)
- 제목 2 줄 높이: 1.3em(데스크톱), 1em(고정)
그런 다음 패딩을 다음과 같이 업데이트합니다.
- 패딩(데스크톱): 상단 15px, 하단 15px
- 패딩(고정): 위쪽 10px, 아래쪽 0px, 왼쪽 20px
- 패딩(태블릿 및 휴대전화): 상단 15픽셀, 하단 15픽셀, 왼쪽 15픽셀, 오른쪽 15픽셀
모의 페이지 콘텐츠 만들기
고정 행이 제자리에 있으면 제목 아래에 일부 모의 페이지 콘텐츠를 포함할 다른 행을 추가할 수 있습니다. 이렇게 하려면 고정 행 아래에 새 1열 행을 만듭니다.
그런 다음 행에 새 텍스트 모듈을 추가하고 일부 모의 콘텐츠를 붙여넣습니다.
더 많은 고정 페이지 머리글 및 콘텐츠를 위해 필요에 따라 섹션 복제
이 시점에서 섹션을 복제하기만 하면 고정 제목이 있는 추가 페이지 섹션을 만들 수 있는 기본 디자인이 완성되었습니다.
중복 섹션
다른 섹션을 생성하려면 고정 행/제목과 모의 콘텐츠 행이 포함된 기존 섹션을 복제합니다. 이렇게 하면 페이지의 다음 섹션을 만드는 개발 프로세스의 속도가 빨라집니다.
텍스트 내용 및 행 테두리 색상 업데이트
복제 섹션에서 텍스트 모듈 내부의 텍스트를 업데이트한 다음 행 설정 아래의 테두리 색상을 업데이트합니다.
필요에 따라 반복
계속해서 섹션을 복제하고 필요에 따라 텍스트 내용과 행 테두리 색상을 업데이트합니다. 이 예에서는 섹션을 두 번 더 복제하여 아코디언을 구성할 총 4개의 고정 페이지 머리글을 제공합니다.
고정 페이지 머리글에 앵커 링크 추가
현재 이 기능을 통해 사용자는 페이지를 아래로 스크롤하고 제목을 아코디언처럼 위쪽과 아래쪽에 고정할 수 있습니다. 이제 사용자가 고정 제목 중 하나를 클릭하면 사용자가 페이지의 해당 섹션으로 이동하도록 제목을 클릭 가능하게 만들고 싶습니다. 이것은 앵커 링크를 사용하여 수행됩니다.
앵커 링크를 추가하려면 먼저 링크를 이동할 섹션에 CSS ID를 추가해야 합니다.
섹션 1 CSS ID 추가
섹션에 대한 설정을 열고 다음 CSS ID를 추가합니다.
- CSS ID: 하나
그런 다음 고정 행에 대한 설정을 열고 다음 행 링크 URL을 추가합니다.
- 행 링크 URL: #one
이제 사용자가 행/제목을 클릭하면 페이지가 이 첫 번째 섹션으로 이동합니다.
섹션 2 CSS ID 추가
다음으로 두 번째 제목에 대한 앵커 링크를 추가해야 합니다.
두 번째 섹션 설정을 열고 다음 CSS ID를 추가합니다.
- CSS ID: 2
섹션 1 고정 행 링크 URL 추가
그런 다음 두 번째 섹션 내에서 고정 행에 대한 설정을 열고 행 링크 URL을 추가합니다.
- 행 링크 URL: #two
섹션 3 CSS ID 추가
다음으로 세 번째 제목에 대한 앵커 링크를 추가해야 합니다.
세 번째 섹션 설정을 열고 다음 CSS ID를 추가합니다.
- CSS ID: 3
섹션 1 고정 행 링크 URL 추가
그런 다음 세 번째 섹션 내에서 고정 행에 대한 설정을 열고 행 링크 URL을 추가합니다.
- 행 링크 URL: #3
섹션 4 CSS ID 추가
마지막으로 네 번째 제목에 대한 앵커 링크를 추가해야 합니다.
네 번째 섹션 설정을 열고 다음 CSS ID를 추가합니다.
- CSS ID: 4
섹션 1 고정 행 링크 URL 추가
그런 다음 네 번째 섹션 내에서 고정 행에 대한 설정을 열고 행 링크 URL을 추가합니다.
- 행 링크 URL: #4
최종 결과
여기에서 고정 페이지 제목이 브라우저 창의 상단과 하단에 붙어 있고 아코디언처럼 서로 겹쳐져 있는 것을 볼 수 있습니다.
여기에서 고정 제목 중 하나를 클릭하면 아코디언처럼 페이지의 해당 섹션으로 이동(부드러운 스크롤 앵커 링크 사용)하는 것을 볼 수 있습니다.
여기에 모바일에서도 기능이 있습니다.
마지막 생각들
이 디자인은 독특한 방식으로 고정 위치 옵션을 사용합니다. 사용자가 스크롤할 때 페이지 제목이 계속 표시될 뿐만 아니라 각 제목을 클릭할 수도 있으므로 앵커 링크를 사용하여 사용자를 해당 특정 섹션으로 안내합니다. 결과는 전체 페이지에 대한 아코디언과 매우 유사합니다. 이 디자인은 긴 형식의 콘텐츠를 인덱싱하거나 사용자 친화적인 단일 호출기를 만드는 데 확실히 유용합니다.
댓글로 여러분의 의견을 기다리겠습니다.
건배!