Divi로 부드러운 스크롤 앵커 링크로 반응형 고정 사이드바를 구축하는 방법

사이드바는 예전만큼 인기가 없습니다. 많은 경우에, 그들은 도움이 되는 것보다 더 주의를 산만하게 만듭니다. 그러나 때때로 사이드바는 특히 긴 콘텐츠를 다룰 때 완벽하게 이해됩니다. 그래서 의미가 있는 사이드바를 만들기 시작했습니다.

오늘은 Divi Builder를 사용하여 부드럽게 스크롤되는 앵커 링크(또는 점프 링크)가 있는 반응형 고정(또는 고정) 사이드바를 만드는 방법을 보여 드리겠습니다. 사이드바가 계속 표시되고 앵커 링크가 페이지의 다른 섹션으로 부드럽게 스크롤되기 때문에 사이드바는 콘텐츠와 결합된 상태를 유지하여 유용한 UX 기능이 됩니다. 문서 개요와 마찬가지로 이 조합을 사용하면 웹 페이지 콘텐츠를 보다 쉽게 ​​액세스할 수 있고 읽기 쉽게 만들 수 있습니다. 긴 스크롤 페이지를 위한 상쾌한 솔루션입니다.

확인 해봐!

엿보기

다음은 우리가 함께 구축할 내용에 대한 간략한 정보입니다.

개념

저처럼 Google 문서도구를 사용하는 분들이라면 문서의 다른 제목으로 이동하는 클릭 가능한 개요가 있는 고정 사이드바를 쉽게 배포할 수 있는 유용한 문서 개요 도구를 알고 계실 것입니다. 정보를 훨씬 빨리 찾는 데 도움이 되기 때문에 이 기능이 마음에 듭니다. 나는 당신의 웹사이트에 이 동일한 기능을 가져오는 것이 멋질 것이라고 생각했습니다.

시작하는 데 필요한 것

이 튜토리얼에서는 Divi만 있으면 됩니다! 또한 Divi Builder에서 무료로 액세스할 수 있는 Food Recipes Layout Pack의 Recipes 페이지도 사용할 것입니다.

페이지에 레이아웃 추가하기

YouTube 채널 구독

시작하려면 새 페이지를 만들고 Divi Builder를 배포하세요. "미리 만들어진 레이아웃 선택" 옵션을 선택합니다. 라이브러리에서 로드 팝업에서 음식 레시피 레이아웃 팩을 선택한 다음 클릭하여 레시피 페이지를 사용합니다.

레이아웃이 로드된 후 클릭하여 프런트 엔드에서 빌드합니다.

새 섹션 만들기

프런트 엔드 Divi Builder에서 새 섹션을 만들고 레이아웃의 맨 위로 드래그합니다.

레이아웃의 헤더 섹션에 있는 버튼을 복사하여 생성한 새 섹션의 1열 행에 붙여넣습니다.

버튼 설정을 열고 고급 탭 아래의 기본 요소에 다음 사용자 지정 CSS를 추가합니다.

display: block !important;

이렇게 하면 버튼이 열의 전체 너비에 걸쳐 있을 수 있습니다.

버튼 텍스트를 "소개"로 변경합니다. 그런 다음 버튼 링크 URL에 대해 다음을 추가합니다.

#소개

이것이 앵커 링크를 만드는 방법입니다. 해시태그(#)는 브라우저에 CSS ID에 연결할 것임을 알려줍니다. 다음 텍스트 "소개"는 레이아웃의 섹션 중 하나에 추가할 CSS ID의 이름에 해당합니다. CSS ID의 이름은 원하는 대로 지정할 수 있습니다. 나중에 섹션에 제공하는 CSS ID와 일치하는지 확인하십시오.

버튼을 복제한 다음 버튼에 새 버튼 텍스트와 새 버튼 링크 URL을 부여하는 과정을 반복합니다. 이것은 페이지의 다른 섹션으로 이동하는 앵커 링크가 되므로 CSS ID("#" 뒤의 텍스트)가 고유하고 나중에 섹션에 부여할 이름과 일치하는지 확인하십시오.

이 버튼의 경우 버튼 텍스트를 "Ingredients"로 변경하고 버튼 링크 URL을 "#ingredients"로 변경합니다.

버튼을 다시 복제한 다음 새 버튼에 "Nutrition" 텍스트를 지정하고 버튼 링크 URL을 "#nutrition"으로 변경합니다.

버튼을 한 번 더 복제한 다음 새 버튼에 버튼 텍스트 "Instructions"를 지정하고 버튼 링크 URL을 "#instructions"로 변경합니다.

그것이 지금 우리가 해야 할 전부입니다. 잠시 후 이 섹션으로 돌아가서 고정된 사이드바로 전환하겠습니다.

섹션 및 행에 CSS ID 추가

이제 앵커 링크가 있는 모든 버튼이 생성되었으므로 해당 CSS ID 이름을 섹션과 행에 추가할 준비가 되었습니다.

앵커 링크는 해당 CSS ID가 있는 페이지의 모든 요소로 자동으로 이동합니다. CSS ID는 인라인 텍스트, 모듈, 행 또는 섹션에 적용할 수 있습니다. HTML을 사용하여 제목에 CSS ID를 추가하려는 경우 다음과 같이 보일 것입니다.

<h2 id="introduction">Introduction</h2>

그러나 페이지의 섹션으로 이동하고 싶기 때문에 페이지의 특정 섹션에 CSS ID를 추가할 수 있습니다. 이것은 방문자가 페이지에서 자신이 어디에 있는지 쉽게 알아볼 수 있도록 사용자에게 충분한 편안한 보기 공간을 제공합니다. 인라인 텍스트나 모듈로 점프하면 방문자에게 혼란을 줄 수 있습니다.

앞에서 다루었듯이 우리가 만든 각 버튼 URL은 점프해야 하는 섹션의 CSS ID에 해당합니다.

"소개" 버튼의 경우, 소개 내용이 포함된 페이지 섹션에 CSS ID를 추가해야 합니다. 이렇게 하려면 페이지의 세 번째 섹션(헤더 바로 아래 섹션)의 섹션 설정을 열고 고급 탭에서 다음 CSS ID를 추가합니다.

CSS ID: 소개

이것은 이전에 만든 소개 앵커 링크 버튼에 해당합니다.

이제 같은 섹션에서 "성분"이라는 제목이 포함된 행을 찾습니다. 그런 다음 행 설정을 열고 다음 CSS ID를 추가합니다.

CSS ID: 재료

이것은 이전에 만든 구성 요소 앵커 링크 버튼에 해당합니다.

"영양"이라는 제목의 다음 섹션으로 스크롤하여 섹션 설정을 엽니다. 그런 다음 다음 CSS ID를 추가합니다.

CSS ID: 영양

이것은 우리가 이전에 만든 Nutrition 앵커 링크 버튼에 해당합니다.

마지막으로 "단계별 지침"이라는 제목의 레이아웃의 다음 섹션으로 스크롤합니다. 그런 다음 섹션 설정을 열고 고급 탭에서 다음 CSS ID를 추가합니다.

CSS ID: 지침

이것은 이전에 만든 지침 앵커 링크 버튼에 해당합니다.

변경 사항을 저장합니다.

이제 앵커 링크가 작동하는지 확인할 좋은 시간입니다. 새 탭에서 페이지를 열고 상단 섹션의 버튼을 클릭하여 페이지의 해당 위치로 점프/스크롤하도록 합니다.

작동하지 않는 경우 돌아가서 CSS ID가 올바르고 일치하는지 확인하십시오.

고정 사이드바 레이아웃 만들기

섹션에 왼쪽 여백을 추가하여 사이드바 공간 만들기

페이지 상단에 앵커 링크가 있으면 목차와 같은 경우에 적합합니다. 그러나 이 사용 사례의 경우 사용자가 링크 중 하나를 클릭한 후 페이지 상단으로 다시 스크롤할 필요가 없도록 앵커 링크를 항상 사용자에게 표시하고자 합니다. 고정된 사이드바는 사용자가 앵커 링크를 클릭할 때 페이지 측면에 고정된 상태로 유지되기 때문에 이 문제를 해결합니다.

그러나 사이드바를 배치하기 전에 페이지 왼쪽에 사이드바를 위한 공간을 만들어야 합니다. 이를 위해 레이아웃의 각 섹션에 왼쪽 여백을 추가합니다.

각 섹션에 추가하는 왼쪽 여백의 양은 사이드바의 너비와 같으므로 이제 사이드바의 너비를 결정할 때입니다. 이 예에서는 너비가 20%이면 충분합니다.

앵커 링크 버튼 바로 아래에 있는 두 번째 섹션의 설정을 열고 다음 사용자 지정 여백을 추가합니다.

맞춤 여백: 20% 남음

이제 설정을 저장하기 전에 사용자 지정 여백 옵션을 마우스 오른쪽 버튼으로 클릭하고 "사용자 지정 여백 복사"를 클릭하고 설정을 저장합니다.

페이지 레이아웃 전체의 나머지 섹션 각각에서 섹션을 마우스 오른쪽 버튼으로 클릭하고 "사용자 정의 여백 붙여넣기"를 클릭하여 섹션에 사용자 정의 여백을 붙여넣습니다.

이렇게 하면 앵커 링크 버튼이 포함된 맨 위 섹션을 제외한 모든 섹션에 20%의 왼쪽 여백이 생깁니다.

고정 사이드바 만들기

사이드바를 생성하려면 페이지 왼쪽에 고정 위치를 지정해야 합니다. 따라서 기본적으로 상단 섹션을 고정된 사이드바로 전환합니다. 이렇게 하려면 상단 섹션의 설정을 열고 다음을 업데이트하십시오.

디자인 탭에서 높이와 너비 업데이트…

폭: 20%
높이: 100%

고급 탭에서 위치 업데이트…

위치: 고정
수직 오프셋: 80px

이렇게 하면 페이지 너비가 20%인 고정 위치가 섹션에 제공됩니다. 또한 헤더 탐색의 높이를 수용하기 위해 페이지 왼쪽과 페이지 상단에서 80px에 섹션을 배치합니다. 100% 높이는 섹션이 페이지의 전체 높이에 걸쳐 있는지 확인합니다.

이제 다른 브라우저 탭에서 페이지를 보고 기능을 확인하십시오. 페이지를 아래로 스크롤하면 사이드바가 고정되어 있고 앵커 링크 버튼을 클릭하여 다른 섹션으로 쉽게 이동할 수 있습니다.

바닥글 겹침 수정

섹션이 페이지 하단의 하단 바닥글 막대와 겹치는 것을 보셨을 것입니다.

이 문제를 해결하는 몇 가지 방법이 있습니다. 예를 들어 섹션에서 "높이: 100%"를 제거하거나 페이지 설정에 일부 CSS를 추가하여 바닥글 막대의 너비를 조정할 수 있습니다. 그러나 섹션 높이를 100%로 유지하려면 섹션 배경색을 제거하면 쉽게 해결할 수 있습니다. 사이드바에 사용 중인 섹션의 섹션 설정을 열고 다음 배경색을 추가합니다.

배경색: rgba(255,255,255,0)

사이드바의 색상을 변경하려면 페이지 설정을 열고 콘텐츠 영역 배경색을 변경할 수 있습니다.

섹션 배경색이 투명하기 때문에 페이지의 콘텐츠 영역 배경색이 빛을 발합니다. 그리고 다른 모든 섹션에는 배경색이 있으므로 하단 바닥글 막대가 겹치지 않고 사이드바 섹션을 통해서만 표시됩니다.

모바일 조정

이 디자인은 사이드바를 위한 공간이 없고 페이지 상단에 링크가 있으면 사용자가 앵커 링크를 클릭할 때마다 다시 위로 스크롤해야 하기 때문에 스마트폰에는 적합하지 않습니다. 그러나 디자인은 여전히 ​​태블릿에서 작동하지만 해당 앵커 링크를 위한 공간을 더 만들어야 할 수도 있습니다. 이렇게 하려면 섹션 사이드바의 행에 대한 행 설정을 열고 다음을 업데이트하십시오.

사용자 정의 너비: 100
맞춤 패딩(데스크톱): 왼쪽 10%, 오른쪽 10%
맞춤 패딩(태블릿): 왼쪽 0%, 오른쪽 0%

이제 스마트폰에서 해당 섹션을 숨기거나 비활성화하기만 하면 됩니다. 그렇게하려면 섹션 설정을 열고 고급 탭으로 이동하여 스마트 폰에서 확인란을 클릭하여 비활성화하십시오.

그게 다야 이제 부드러운 스크롤링 앵커 링크가 있는 반응형 고정 사이드바 메뉴가 있습니다!

최종 결과

이제 최종 결과를 확인해보자.

다음은 태블릿에서 레이아웃이 어떻게 보이는지입니다.

고정 요소 및 앵커 링크에 대해 자세히 알아보기

이 튜토리얼이 도움이 되었다면 아래의 관련 튜토리얼을 확인하십시오.

• 앵커 링크로 Divi에서 할 수 있는 5가지 멋진 일
• 모든 Divi 페이지 요소를 고정시키는 방법
• WordPress의 사이드바에 고정 위젯을 추가하는 방법
• Divi 탐색을 맨 아래에서 시작한 다음 스크롤할 때 맨 위에 고정된 상태로 유지하는 방법
• Divi 바닥글을 수정하는 방법
• Divi에서 플로팅 팝업 메뉴를 만드는 방법

마지막 생각들

이 설정의 장점은 다른 앵커 링크(또는 원하는 모든 것)가 있는 페이지에 고정 사이드바를 쉽게 추가할 수 있다는 것입니다. 사이드바는 기본적으로 Divi 섹션이므로 기본 제공 설정을 사용하여 사용자 정의하고 더 많은 행을 추가하고 원하는 모듈 조합을 사용할 수 있습니다.

이 설정은 회원 과정, 자습서, FAQ, 포트폴리오 또는 긴 블로그 게시물에 적합합니다. 한 페이지 웹 사이트에도 사용할 수 있습니다. 공유할 다른 용도가 있습니까? 댓글에 어떤 내용이 있는지 듣고 싶습니다.

건배!