모든 Divi 페이지 요소를 고정시키는 방법
게시 됨: 2018-11-09Divi 페이지 요소를 고정(또는 고정)으로 만드는 방법을 아는 것은 웹 디자이너가 여러 가지 방법으로 사용할 수 있는 편리한 기술 중 하나입니다. "고정"이라는 용어에 익숙하지 않은 경우 사용자가 페이지를 아래로 스크롤할 때 "고정"된 상태로 유지되는 웹 페이지의 요소를 가리킵니다. 고정 요소의 인기 있는 예는 고정 탐색 메뉴입니다. Divi에는 기본적으로 사용 가능한 고정(또는 고정) 탐색 기능이 있습니다. 따라서 사용자가 페이지를 아래로 스크롤하면 고정된 버전의 메뉴가 사용자가 스크롤할 때 페이지 상단에 고정된 상태로 유지됩니다. 그러나 고정 요소는 거의 모든 것에 사용할 수 있으며 주어진 페이지에서 원하는 클릭 유도문안으로 주의를 환기시키는 좋은 방법입니다.
이 튜토리얼에서는 Scroll에서 Sticky Menu(또는 Anything!)라는 플러그인을 사용하여 페이지의 모든 요소를 고정시키는 쉬운 방법을 보여 드리겠습니다. 플러그인 설정을 구성하는 데 몇 분 밖에 걸리지 않습니다. 그런 다음 요소에 사용자 정의 CSS ID를 추가하기만 하면 됩니다. 정말 쉽습니다.
그 속으로 들어가 보자!
이 튜토리얼에 필요한 것
이 튜토리얼에서는 다음이 필요합니다.
- 디비 테마
- Scroll 플러그인의 고정 메뉴(또는 무엇이든!)
- 회계사 블로그 페이지 레이아웃(Divi Builder 내에서 사용 가능)
모든 Divi 페이지 요소를 고정시키는 방법
YouTube 채널 구독
플러그인 설정 구성
Divi 테마에서 Scroll 플러그인의 고정 메뉴(또는 모든 것!)를 설치하고 활성화한 후 WordPress 대시보드로 이동하여 설정 > 고정 메뉴(또는 모든 것!)로 이동합니다.
기본 설정 탭에서 다음과 같이 옵션을 업데이트합니다.
먼저 고정 요소에 대한 고유 식별자를 추가해야 합니다. CSS ID 또는 클래스일 수 있습니다. 그런 다음 나중에 이 식별자를 Divi의 요소에 추가합니다. 기억하기 쉽도록 CSS ID "#sticky"를 추가하겠습니다.
스티커 요소: #sticky
그런 다음 페이지 상단과 고정 요소 사이의 공간에 대한 픽셀 값을 추가해야 합니다. Divi의 고정 탐색 모음은 기본적으로 높이가 54px이므로 고정 요소가 고정 탐색과 겹치지 않도록 이 옵션에 대해 최소 54px를 추가하려고 합니다.
페이지 상단과 고정 요소 사이의 간격: 54픽셀
모바일에서 고정 요소를 비활성화하는 것도 좋은 생각입니다. 이렇게 하려면 화면이 980px보다 작을 때 요소를 고정하지 않도록 플러그인을 구성해야 합니다.
화면이 980픽셀보다 작을 때 요소를 붙이지 마십시오.
설정을 저장한 다음 고급 설정 탭으로 이동하여 다음을 업데이트합니다.
Z-색인 옵션의 경우, 특히 스크롤 시 다른 요소와 겹치는 요소를 계획하는 경우 요소가 페이지의 다른 모든 요소 위에 쌓이도록 하고 싶습니다. 이런 일이 발생하는지 확인하려면 z-색인을 99998로 설정하십시오.
Z-색인: 99998
Divi에서 요소가 정렬되는 방식에 대한 아이디어를 제공하기 위해 섹션의 z-인덱스는 2, 열의 z-인덱스는 9, 헤더/탐색 막대의 z-인덱스는 99999입니다. 기본적으로 우리는 스티키 요소가 헤더 탐색을 위한 z-색인보다 1 낮은 숫자가 되기를 원합니다. 이렇게 하면 고정 요소가 탐색을 제외한 페이지의 다른 모든 요소 위에 놓이도록 합니다. 이것은 요소를 중지하고 페이지 위로 밀어서 스크롤할 때 끈적한 요소가 탐색 상단에 놓이지 않도록 하려는 때마다 유용합니다(더러워 보이고 깨져 보임).
다음으로 "푸시업" 요소 식별자를 추가할 수 있습니다. 이것을 끈적거리는 요소의 스토퍼로 생각할 수 있습니다. 이것은 일반적으로 바닥글 요소입니다. 기본적으로 이것은 페이지를 아래로 스크롤할 때 고정 요소를 중지할 요소를 식별하여 고정 요소를 페이지의 나머지 부분과 함께 위로 올릴 수 있도록 합니다. 이 예에서는 CSS ID "#stop"으로 식별자를 설정하겠습니다.
푸시업 요소: #stop
설정을 저장합니다.
이제 우리는 끈적한 요소를 만드는 데 필요한 능력을 갖추었습니다!
Divi 페이지 요소를 고정하기
Divi 요소를 고정시키는 방법을 보여주기 위해 Accountant Layout Pack에서 Divi의 Accountant 블로그 페이지를 사용하겠습니다. 시작하려면 새 페이지를 만들고 페이지에 제목을 지정한 다음 Visual Builder를 배포하세요. 그런 다음 "미리 만들어진 레이아웃 선택" 옵션을 선택합니다. 라이브러리에서 로드 팝업에서 회계사 레이아웃 팩을 선택하고 블로그 페이지를 선택합니다.
이 페이지는 전문 섹션의 오른쪽 사이드바에 이메일 구독 선택 양식이 있습니다. 이 양식에 더 많은 관심을 끌기 위해 사용자가 페이지를 아래로 스크롤하면 이 양식이 고정되게 만들 수 있습니다. 그런 다음 겹치지 않도록 페이지의 다음 섹션에 도달할 때마다 요소를 중지(또는 밀어 올리기)할 수 있습니다.
기둥을 끈적하게 만드는 방법
그러나 이 시점에서 우리는 어떤 특정 요소를 고정시키고 싶은지 결정해야 합니다. 이메일 옵션 모듈을 고정으로 만들 수는 있지만 고정으로 만들려는 양식 바로 아래의 소셜 미디어 팔로우 모듈은 설명하지 않습니다. 그리고 두 모듈 모두 동일한 위치에 달라붙어 겹치기 때문에 동일한 식별자를 둘 수 있습니다. 이를 수행하는 가장 좋은 방법은 전체 열(2열)을 끈적하게 만드는 것입니다.
열 2를 고정하려면 대상으로 지정하려는 열이 포함된 행의 행 설정을 엽니다. 그런 다음 고급 탭에서 CSS ID "sticky"를 추가합니다. 이것은 플러그인 설정에서 추가한 고정 요소 고유 식별자에 해당합니다.
CSS ID: 고정
(참고: ID 앞에 해시태그(또는 파운드) 기호를 넣지 마십시오. 또한 CSS 클래스가 아닌 CSS ID에 추가해야 합니다.)
설정을 저장하고 페이지의 라이브 버전을 미리 봅니다. 아래로 스크롤하면 열 2(두 모듈 모두 포함)가 창 상단에서 54픽셀이 되면 고정되어 계속 스크롤할 때 해당 위치에 머무는 것을 알 수 있습니다.
섹션에서 스티커 요소 중지
보시다시피 요소는 계속 고정되어 아래 다른 섹션의 내용과 겹치게 됩니다. 이러한 일이 발생하지 않도록 플러그인 설정에 추가한 "푸시업" 식별자(#stop)를 사용할 수 있습니다.
아래 섹션에서 고정 요소를 중지하려면 섹션 설정을 열고 CSS ID "stop"을 추가해야 합니다.
CSS ID: 중지
이제 페이지의 라이브 버전을 미리 봅니다. 고정 요소가 식별한 섹션에서 어떻게 멈추는지 확인합니다.
꽤 멋지죠?
모듈을 고정시키는 방법
단일 모듈을 고정하려면 Divi에서 조정하여 요소에 올바른 z-색인이 있는지 확인하여 스크롤할 때 페이지 전체의 다른 요소 위에 놓이도록 해야 합니다. 앞서 언급했듯이 Divi는 모든 섹션에 2의 aa z-index를 할당합니다. 그리고 플러그인은 99998의 z-index를 고정 요소에 적용합니다. 그러나 모듈은 상위 요소(섹션) 위에 정렬(또는 인덱싱)할 수 없으므로 모듈은 여전히 페이지의 다른 모듈 뒤에 있습니다. 이 문제를 해결하려면 고정 모듈을 유지하는 섹션에 99998의 z-색인을 수동으로 지정해야 합니다.
이를 설명하기 위해 이전에 사용한 것과 동일한 Accountant Blog 페이지 레이아웃을 사용하겠습니다. 모듈에 CSS ID를 추가하기 전에 먼저 열 2에 대해 설정한 CSS ID(고정)를 제거해야 합니다. 그런 다음 아래 섹션에 대해 설정한 CSS ID(중지)를 제거해야 합니다. 그런 다음 Social Media Follow 모듈 설정을 열고 모듈에 CSS ID "sticky"를 추가합니다.
라이브 페이지를 보면 스크롤할 때 아래 섹션의 다른 모듈을 겹칠 때 고정 요소가 숨겨져 있음을 알 수 있습니다.
이 문제를 해결하려면 소셜 미디어 팔로우 모듈 고정 요소가 포함된 섹션에 대한 섹션 설정을 엽니다. 그런 다음 기본 요소에 다음 사용자 정의 CSS를 추가합니다.
z-index: 99998;
이제 라이브 페이지를 확인하십시오. 소셜 미디어 아이콘이 페이지 상단(상단에서 54px)에 고정된 탐색 메뉴 바로 아래에 고정된 다음 스크롤할 때 다른 모듈 위에 유지되는 방식을 확인하세요.
섹션을 끈적하게 만들기
전체 섹션을 고정하려면 선택한 섹션에 CSS ID를 "고정"으로 추가하는 것과 동일한 프로세스를 따릅니다. 플러그인이 자동으로 수행하므로 사용자 정의 CSS를 사용하여 z-색인을 업데이트할 필요가 없습니다.
호버 효과로 인해 고정 요소에 결함이 발생할 수 있음
페이지 전체 또는 고정 요소에 호버 효과가 활성화되어 있으면 몇 가지 결함이 발생할 수 있습니다. 이 경우 고정 요소 호버 효과를 비활성화해야 할 수 있습니다.
페이지당 하나의 고정 요소만
플러그인은 페이지당 하나의 고정 요소만 허용하므로 여러 고정 요소를 추가하려면 고급 솔루션(또는 이를 지원하는 다른 플러그인)이 필요합니다.
마지막 생각들
이 기사가 모든 Divi 페이지 요소를 고정시키는 새롭고 간단한 방법을 제공하는 데 도움이 되었기를 바랍니다. 고정 하위 메뉴, 고정 CTA, 고정 프로모션 제안 및 기타 생각할 수 있는 모든 것을 만드는 데 사용합니다. 가능성을 탐색하는 재미를 느껴보세요!
아래 의견에서 여러분의 의견을 기다리겠습니다.
건배!