하단 서랍은 어디에나 유용하게 사용할 수 있습니다. 사이트 웹, 사용자가 쉽게 액세스할 수 있는 추가 콘텐츠를 저장하기 때문입니다. 바닥글 서랍은 버튼을 클릭하거나 마우스를 가져가면 열고 닫을 수 있는 웹 콘텐츠 컨테이너(예: Divi 섹션)입니다. 프리미엄 콘텐츠를 위한 약간의 은닉처가 있는 것과 같습니다.
이 튜토리얼에서는 Divi에서 부동 바닥 글 서랍을 디자인합니다. 글로벌 바닥글 영역에 바닥글 서랍을 추가하겠습니다. 웹 사이트 템플릿 바닥글 서랍은 일반 바닥글 콘텐츠로 사이트 전체에 액세스할 수 있습니다.
우리가 사용할 프로세스를 통해 모든 Divi 섹션 (및 해당 콘텐츠)을 몇 분만에 바닥 글 서랍으로 변환 할 수 있습니다.
바닥 글 서랍 템플릿을 Divi 사이트에 추가하는 방법
이 모델을 추가하면 웹 사이트 템플릿 기본적으로(있는 경우) Divi 사이트에 있습니다. 라이브 사이트에서 아무 것도 망치지 않도록 테스트 사이트에 추가하는 것이 좋습니다.
고정 바닥글 서랍 템플릿을 직접 가져오려면 사이트 웹, JSON 파일에 액세스하려면 다운로드 zip 파일의 압축을 풉니다.
그런 다음 WordPress 대시 보드로 이동하여 Divi> Theme Builder로 이동합니다.
그런 다음 페이지 오른쪽 상단의 이동성 아이콘을 클릭합니다.
이식성 창에서 방금 압축을 푼 JSON 파일을 선택하고 "가져오기 전에 백업 다운로드" 옵션을 선택합니다. 웹 사이트 템플릿 재정의하지 않으려는 기본값입니다.
그런 다음 가져 오기 버튼을 클릭하십시오.
마지막으로, 변경 사항을 테마 생성기에 저장하고 라이브 페이지를 표시하여 고정 된 바닥 글 표시 줄을보십시오.
이제 튜토리얼을 시작하겠습니다.
1 부 : 전역 바닥 글 추가
Divi 테마 생성기를 사용하면 기본 웹 사이트 템플릿을 업데이트하여 기본 바닥 글을 새 바닥 글로 바꿀 수 있습니다.
글로벌 바닥 글을 만들려면 WordPress 대시 보드로 이동하고 Divi> Theme Builder로 이동합니다. 그런 다음 기본 웹 사이트 템플릿에서 "전체 바닥 글 추가"공간을 클릭합니다.
그런 다음 드롭 다운 목록에서 "Build Global Footer"옵션을 선택합니다.
글로벌 바닥 글 레이아웃에 사전 정의 된 레이아웃 추가
그러면 모델 레이아웃 편집기가 배포되고 빌드를 시작할 방법에 대한 세 가지 선택 사항이 즉시 표시됩니다. "사전 정의 된 레이아웃 선택"옵션을 선택합니다.
라이브러리에서로드 팝업 창에서 편지지 랜딩 페이지 레이아웃을 찾습니다. 그런 다음 "이 레이아웃 사용"을 클릭합니다.
사전 제작 된 레이아웃에서 원치 않는 내용 제거
레이아웃이 편집기에로드되면 설정 메뉴에서 레이어 아이콘을 클릭하여 레이어 팝업 상자를 확장합니다. 그런 다음 마지막 XNUMX 개를 제외한 레이아웃의 모든 섹션을 삭제합니다.
두 섹션으로 이동 및 레이블 지정
섹션이 제거되면 두 개의 섹션이 있어야합니다. 하나는 "바닥 글"이고 다른 하나는 "작동 방식"입니다. "바닥 글"섹션을 레이아웃의 맨 위로 이동합니다.
하단 섹션의 문구를 "Footer Drawer"로 변경하십시오. 이것은 바닥 글 서랍의 내용으로 사용할 섹션입니다.
파트 2 : 고정 바닥 글 서랍 작성
이제 섹션 중 하나를 바닥 글로 지정하고 다른 하나를 바닥 글 서랍으로 지정 했으므로 고정 바닥 글 서랍을 만들 준비가되었습니다. 바닥 글 서랍을 전환하는 데 사용할 광고 아이콘을 만들어 보겠습니다.
바닥 글 서랍 버튼 만들기
새 행 추가
하단 바닥 글 섹션에서 열에 새 행을 추가하십시오.
서랍 열기 및 닫기를 전환하는 데 사용되는 버튼이 포함될 행이기 때문에 새 행에 "서랍 버튼"이라는 레이블을 지정합니다. 그런 다음 선을 섹션 상단으로 이동합니다.
행 패딩
모듈을 추가하기 전에 행 설정을 열고 다음과 같이 패딩을 업데이트하십시오.
- 패딩 : 0px 높이, 0px low
섹션 패딩
그런 다음 "Footer drawer"섹션에서 설정을 열고 다음과 같이 패딩을 업데이트하십시오.
바닥 글 서랍을 토글하는 클릭 가능한 버튼을 만들기 위해 아이콘이있는 블 러브 모듈을 사용할 것입니다. 그리고 Blurb 포드 컨테이너의 사각형 모양과 원형 아이콘을 결합하여 독특한 물방울 모양을 만들 것입니다.
방법은 다음과 같습니다.
Blurb 모듈 추가
섹션 상단의 "서랍 단추"행에 프리젠 테이션 텍스트 모듈을 추가하십시오.
콘텐츠 / 아이콘 흐림
그런 다음 기본 제목과 본문 콘텐츠를 제거하고 왼쪽 상단을 가리키는 화살표 아이콘을 선택합니다 (스크린 샷 참조). 나중에 회전 할 것이기 때문에 부분적으로 회전 된 아이콘을 사용하고 있습니다.
블 러브 디자인
그런 다음 프레젠테이션 텍스트를 다음과 같이 제공하십시오.
- 배경색 : # 081540
그런 다음 다음과 같이 디자인 매개 변수를 업데이트하십시오.
- 아이콘 색상 : #eeeeee
- 원형 아이콘 : 예
- 서클 색상 : # 081540
- 아이콘 글꼴 크기 사용 : 예
- 아이콘 글꼴 크기 : 17 픽셀
프리젠 테이션 텍스트 크기
이제 다음과 같이 모듈에 높이와 너비를 지정하십시오.
- 너비 : 30px
- 높이 : 30px
이렇게하면 원형 아이콘이 텍스트 컨테이너로 넘쳐 물방울 모양이 만들어집니다.
블 러브 포지션
그런 다음 프레젠테이션 텍스트를 섹션 상단 중앙에 절대 위치로 지정하십시오.
- 위치 : 절대
- 위치 : 탑 센터
블 러브 변환 설정
이제 변형 옵션을 사용하여 블 러브 / 아이콘을 위로 회전하고 섹션 컨테이너 바로 위에 배치 할 수 있습니다. 이제 브라우저 창에서 섹션을 숨길 때 아이콘이 계속 표시 / 클릭 가능합니다.
다음 항목을 업데이트하십시오.
- X 축 변환 변환 : -50 %
- Y 축 변환 변환 : -250 %
- Z 축 회전 변환 : -45도
그런 다음 기본 아이콘 애니메이션을 제거합니다.
- 이미지 / 아이콘 애니메이션 : 애니메이션 없음
우리는 JQuery를 사용하여 서랍을 토글 할 것이므로 나중에 코드에서 사용할 CSS 클래스를 사용하여 텍스트 / 아이콘을 클릭 가능한 요소로 타겟팅해야합니다. 다음 CSS 클래스를 추가하십시오.
- CSS 클래스 : 대상 서랍
바닥 글 서랍 섹션 설정
이제 변환 변환 옵션을 사용하여 "Footer Drawer"섹션을 숨길 것입니다. 섹션 설정을 열고 다음을 업데이트하십시오.
- 변환 Y 축 변환 : 100 %
여기서 변환을 사용하는 장점은 백분율 값이 항목의 실제 크기를 기반으로한다는 것입니다. 따라서 Y 축의 100 %는 섹션의 높이에 직접적으로 관련됩니다 (주어진 시간에 해당하는 값). 즉, 요소는 자신의 높이만큼 정확한 거리 아래로 이동합니다.
Footer Drawer를 다시보기로 가져 오려면 방금 섹션에 추가 한 변환 변환을 반전해야합니다. 이렇게하려면 CSS 클래스로 요소를 대상으로 지정하고 아이콘을 클릭하여 번역 변환을 비활성화해야합니다 (전체 섹션을 원래 위치로 되돌림).
바닥 글 서랍 섹션에 CSS 클래스 추가
고급 탭에서 다음 CSS 클래스를 추가하십시오.
- CSS 클래스 : has-transform
바닥 글 서랍 섹션 고정 위치
마지막 단계에서는 바닥 글 서랍을 고정하여 아이콘과 함께 브라우저 창 하단에 떠있게해야합니다.
"Footer Drawer"섹션의 위치를 다음과 같이 업데이트하십시오.
- 위치 : 고정
- 위치 : 왼쪽 하단
- Z 지수 : 13
모바일 콘텐츠 끄기
제한된 화면 높이로 인해 태블릿과 휴대폰 모두에 적합한 바닥 글 서랍 콘텐츠의 양이 제한되므로 디스플레이에서 필수가 아닌 항목을 비활성화하거나 숨겨야합니다. 이 예에서는 섹션 레이아웃의 중간 행을 숨길 것입니다.
"바닥 글 서랍"섹션에서 두 번째 행부터 마지막 행까지 설정을 엽니 다. 고급 탭에서 가시성 옵션을 업데이트하여 전화기와 태블릿의 회선을 끕니다.
맞춤 코드 추가
바닥 글 서랍에 클릭 및 토글 기능을 추가하려면 사용자 정의 CSS 및 JQuery를 페이지에 추가해야합니다. 이렇게하려면 버튼에 사용되는 Blurb 모듈 아래에 새 코드 모듈을 만듭니다.
그런 다음 코드 영역에 다음 코드를 붙여 넣습니다.
.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;} .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation'); $('.has-transform').toggleClass('toggle-drawer-animation'); }); });})( jQuery );
변경 사항 저장
편집기를 종료하기 전에 레이아웃을 저장하는 것을 잊지 마십시오.
또한 테마 생성기에서 변경 사항을 저장하십시오.
최종 결과
이제 우리는 귀하의 모든 페이지로 이동할 수 있습니다 사이트 웹 최종 결과를 보려면.
마지막 생각
플로팅 바닥글 서랍이 도움이 되기를 바랍니다. 홍보 재미있고 접근 가능한 방식으로 콘텐츠를 제공합니다. 다른 서랍과 마찬가지로, 당신이 생각할 수 있는 거의 모든 것을 채울 수 있습니다.
기타 자료
다음은 Divi의 내부 기능으로 더 많은 것을 달성 할 수 있도록 도와주는 튜토리얼 목록입니다.
번역 : 우아한 테마
