아래로 스크롤할 때 완전히 드러나는 DIVI로 고정 바닥글을 만들고 싶습니까?
고정 바닥글 추가 사이트 웹 당신이 찾고 있던 그 작은 추가 터치를 당신의 사이트 웹. 아래로 스크롤할 때 바닥글이 표시되도록 하는 "공개" 효과는 웹 페이지에 매우 매력적인 디자인을 제공합니다.
일반적으로 이 효과는 제한적이고 사용하기 어려운 사용자 정의 CSS가 필요합니다. 그러나 DIVI 덕분에 쉽게 달성할 수 있습니다.
이 자습서에서는 고정 바닥글에 표시 효과를 만드는 방법을 보여줍니다. 몇 가지 쉬운 단계만 거치면 됩니다.
시작하자!
측량
다음은 이 튜토리얼에서 생성할 Reveal 효과가 있는 고정 바닥글에 대한 간략한 개요입니다.
새 바닥글 템플릿 만들기
방문 Divi >> 테마 빌더 WordPress 대시보드에서.
거기, 클릭 "전체 바닥글 추가"
그런 다음 선택 "글로벌 바닥글 구축"
이 자습서에서는 미리 만들어진 레이아웃을 사용하여 생성 프로세스의 속도를 높이지만 처음부터 할 수도 있습니다. 이렇게 하려면 "라이브러리에서 로드".
팝업 창 아래 라이브러리에서 로드, 레이아웃 찾기 및 사용 " 마리나 소개 페이지 » 마리나 레이아웃 팩에서.
레이아웃이 로드되면 바닥글 섹션을 제외한 모든 섹션을 삭제합니다. 이 바닥글 섹션을 사용하여 표시 효과를 추가합니다.
Reveal 효과를 추가하고 바닥글을 끈적하게 만듭니다.
바닥글 고정
먼저 바닥글을 고정해야 합니다. 이렇게 하려면 섹션 설정을 열고 탭을 클릭합니다. 고급. 아래에 "스크롤 효과", 다음과 같이 설정을 변경합니다.
- 고정 위치: 바닥에 고정
고정 상태에 대한 Z 인덱스 업데이트
다음으로 섹션이 고정 상태일 때 바닥글 섹션에 0의 z-색인을 제공해야 합니다. 이렇게 하면 스크롤할 때 섹션이 페이지 본문의 다른 섹션이나 요소 뒤에 머무를 수 있습니다.
이렇게 하려면 Z 인덱스 옵션 옆에 있는 고정 아이콘을 클릭하여 Z 인덱스 위치를 업데이트합니다. 그런 다음 Z 인덱스를 0으로 업데이트합니다.
- Z 인덱스(스티키): 0
고정 바닥글 자리 표시자 Z 인덱스 업데이트
Divi에서 요소가 고정 위치에 할당되면 중복 자리 표시자 요소도 자동으로 생성됩니다. 이것은 Divi Builder를 사용하여 고정 요소를 배치하고 디자인하는 데 필요한 기능을 제공합니다.
이 경우 바닥글 섹션 자리 표시자는 기본 z-색인 1로 생성됩니다. 우리는 자리 표시자 섹션 뒤에 실제 고정 바닥글 섹션(현재 Z-색인 0)을 원하지 않으므로 업데이트해야 합니다. -1에 대한 자리 표시자의 Z 인덱스입니다.
이렇게 하려면 먼저 다음과 같이 바닥글 섹션에 사용자 정의 CSS 클래스를 추가합니다.
- CSS 클래스: 스티커 바닥글 표시
그런 다음 의 설정 메뉴를 사용하여 페이지 설정을 엽니다. 테마 빌더.
"로 이동 고급의 " 상자에 다음 CSS를 입력하십시오. CSS 사용자 정의 :
.sticky-footer-reveal.et_pb_sticky_placeholder {
z-index:-1;
}
이렇게 하면 자리 표시자 섹션이 고정 바닥글 뒤에 있게 됩니다.
변경 사항 저장
완료되면 바닥글 템플릿에 대한 변경 사항을 저장합니다.
또한 Divi 테마 빌더 변경 사항을 저장하십시오.
최종 결과
최종 결과를 보려면 페이지를 보고 스크롤하십시오.
지금 DIVI를 다운로드하세요!!!
결론
Divi에서 고정 바닥글 추가하기 사이트 웹 플러그인이나 복잡한 사용자 정의 CSS가 필요하지 않습니다. 생성자 사용 테마, 다음을 사용하여 바닥글 템플릿을 쉽게 만들 수 있습니다. 효과를 드러내다 몇 분 안에.
이렇게 하면 매력적인 상호 작용으로 바닥글 디자인이 미묘하게 향상될 수 있기를 바랍니다. 방문자 고맙겠습니다. 우려 사항이나 제안 사항이 있으면 다음에서 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
또한보십시오 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
