주요 내용으로 건너 뛰기

Divi에서 애니메이션 서랍을 만드는 방법

Divi : 사용하기 가장 쉬운 WordPress 테마

Elementor로 웹 사이트를 쉽게 만들 수 있습니다

Elementor를 사용하면 전문적인 모양으로 웹 사이트 디자인을 쉽게 만들 수 있습니다. 자신이 할 수있는 일에 대해 비용을 지불하지 마십시오. [무료]

바닥 글 서랍은 사용자가 쉽게 액세스 할 수있는 추가 콘텐츠를 저장하므로 모든 웹 사이트에 유용한 추가 항목입니다. 바닥 글 서랍은 버튼을 클릭하거나 그 위로 마우스를 가져 가서 열고 닫을 수있는 웹 콘텐츠 컨테이너 (예 : Divi 섹션)입니다. 프리미엄 콘텐츠를위한 약간의 은닉처가있는 것과 같습니다.

이 튜토리얼에서는 Divi에서 플로팅 푸터 드로어를 디자인 할 것입니다. 바닥 글 서랍이 사이트 전체에서 일반 바닥 글 콘텐츠로 액세스 할 수 있도록 전체 웹 사이트 템플릿 바닥 글 영역에 바닥 글 서랍을 추가합니다.

우리가 사용할 프로세스를 통해 모든 Divi 섹션 (및 해당 콘텐츠)을 몇 분만에 바닥 글 서랍으로 변환 할 수 있습니다.

바닥 글 서랍 템플릿을 Divi 사이트에 추가하는 방법

이 템플릿을 추가하면 Divi 사이트의 기본 웹 사이트 템플릿 (있는 경우)이 대체됩니다. 라이브 사이트에서 아무것도 엉망으로 만들지 않도록 테스트 사이트에 추가하는 것이 좋습니다.

고정 바닥 글 서랍 모델을 자신의 웹 사이트로 가져 오려면 다운로드 zip 파일의 압축을 풀어 JSON 파일에 액세스하십시오.

그런 다음 WordPress 대시 보드로 이동하여 Divi> Theme Builder로 이동합니다.

그런 다음 페이지 오른쪽 상단의 이동성 아이콘을 클릭합니다.

이식성 창에서 방금 압축을 푼 JSON 파일을 선택하고 '가져 오기 전에 백업 다운로드'옵션을 선택합니다. 이전에 기본 웹 사이트 템플릿에 포함되지 않은 항목이있는 경우를 대비하여. 교체하고 싶지 않았습니다.

그런 다음 가져 오기 버튼을 클릭하십시오.

모델 divi 가져 오기

마지막으로, 변경 사항을 테마 생성기에 저장하고 라이브 페이지를 표시하여 고정 된 바닥 글 표시 줄을보십시오.

divi 레이아웃 변경 사항 저장

이제 튜토리얼을 시작하겠습니다.

1 부 : 전역 바닥 글 추가

Divi 테마 생성기를 사용하면 기본 웹 사이트 템플릿을 업데이트하여 기본 바닥 글을 새 바닥 글로 바꿀 수 있습니다.

글로벌 바닥 글을 만들려면 WordPress 대시 보드로 이동하고 Divi> Theme Builder로 이동합니다. 그런 다음 기본 웹 사이트 템플릿에서 "전체 바닥 글 추가"공간을 클릭합니다.

Divi 편집기 선택

그런 다음 드롭 다운 목록에서 "Build Global Footer"옵션을 선택합니다.

divi 모델 바닥 글 추가

글로벌 바닥 글 레이아웃에 사전 정의 된 레이아웃 추가

그러면 모델 레이아웃 편집기가 배포되고 빌드를 시작할 방법에 대한 세 가지 선택 사항이 즉시 표시됩니다. "사전 정의 된 레이아웃 선택"옵션을 선택합니다.

Divi : 모든 시간의 최고의 WordPress 테마!

901.000 다운로드Divi는 세계에서 가장 인기있는 WordPress 테마입니다. 그것은 완전하고, 사용하기 쉽고 62 무료 템플릿 이상을 제공합니다. [추천]

사전 구성된 모델 divi 선택

라이브러리에서로드 팝업 창에서 편지지 랜딩 페이지 레이아웃을 찾습니다. 그런 다음 "이 레이아웃 사용"을 클릭합니다.

divi 모델 사용

사전 제작 된 레이아웃에서 원치 않는 내용 제거

레이아웃이 편집기에로드되면 설정 메뉴에서 레이어 아이콘을 클릭하여 레이어 팝업 상자를 확장합니다. 그런 다음 마지막 XNUMX 개를 제외한 레이아웃의 모든 섹션을 삭제합니다.

불필요한 섹션 삭제

두 섹션으로 이동 및 레이블 지정

섹션이 제거되면 두 개의 섹션이 있어야합니다. 하나는 "바닥 글"이고 다른 하나는 "작동 방식"입니다. "바닥 글"섹션을 레이아웃의 맨 위로 이동합니다.

Divi 바닥 글

하단 섹션의 문구를 "Footer Drawer"로 변경하십시오. 이것은 바닥 글 서랍의 내용으로 사용할 섹션입니다.

divi 바닥 글 레이블 수정

파트 2 : 고정 바닥 글 서랍 작성

이제 섹션 중 하나를 바닥 글로 지정하고 다른 하나를 바닥 글 서랍으로 지정 했으므로 고정 바닥 글 서랍을 만들 준비가되었습니다. 바닥 글 서랍을 전환하는 데 사용할 광고 아이콘을 만들어 보겠습니다.

바닥 글 서랍 버튼 만들기

새 행 추가

하단 바닥 글 섹션에서 열에 새 행을 추가하십시오.

고정식 발판

서랍 열기 및 닫기를 전환하는 데 사용되는 버튼이 포함될 행이기 때문에 새 행에 "서랍 버튼"이라는 레이블을 지정합니다. 그런 다음 선을 섹션 상단으로 이동합니다.

선택 레이아웃 divi

행 패딩

모듈을 추가하기 전에 행 설정을 열고 다음과 같이 패딩을 업데이트하십시오.

  • 패딩 : 0px 높이, 0px low
구성 분할 간격

섹션 패딩

그런 다음 "Footer drawer"섹션에서 설정을 열고 다음과 같이 패딩을 업데이트하십시오.

Divi 섹션 간격 구성

바닥 글 서랍을 토글하는 클릭 가능한 버튼을 만들기 위해 아이콘이있는 블 러브 모듈을 사용할 것입니다. 그리고 Blurb 포드 컨테이너의 사각형 모양과 원형 아이콘을 결합하여 독특한 물방울 모양을 만들 것입니다.

방법은 다음과 같습니다.

Blurb 모듈 추가

섹션 상단의 "서랍 단추"행에 프리젠 테이션 텍스트 모듈을 추가하십시오.

바닥 글 서랍 divi
콘텐츠 / 아이콘 흐림

그런 다음 기본 제목과 본문 콘텐츠를 제거하고 왼쪽 상단을 가리키는 화살표 아이콘을 선택합니다 (스크린 샷 참조). 나중에 회전 할 것이기 때문에 부분적으로 회전 된 아이콘을 사용하고 있습니다.

아이콘 바닥 글 서랍 divi 선택
블 러브 디자인

그런 다음 프레젠테이션 텍스트를 다음과 같이 제공하십시오.

  • 배경색 : # 081540
divi 배경 수정

그런 다음 다음과 같이 디자인 매개 변수를 업데이트하십시오.

  • 아이콘 색상 : #eeeeee
  • 원형 아이콘 : 예
  • 서클 색상 : # 081540
  • 아이콘 글꼴 크기 사용 : 예
  • 아이콘 글꼴 크기 : 17 픽셀
홍보 문구 버튼 맞춤 설정
프리젠 테이션 텍스트 크기

이제 다음과 같이 모듈에 높이와 너비를 지정하십시오.

최고의 WordPress 테마 및 플러그인을 찾고 계십니까?

Envato에서 최고의 플러그인과 WordPress 테마를 다운로드하고 쉽게 웹 사이트를 만드십시오. 이미 49.720.000 다운로드 이상. [EXCLUSIVE]

  • 너비 : 30px
  • 높이 : 30px

이렇게하면 원형 아이콘이 텍스트 컨테이너로 넘쳐 물방울 모양이 만들어집니다.

divi 버튼 디자인 편집
블 러브 포지션

그런 다음 프레젠테이션 텍스트를 섹션 상단 중앙에 절대 위치로 지정하십시오.

  • 위치 : 절대
  • 위치 : 탑 센터
divi 버튼 위치 수정
블 러브 변환 설정

이제 변형 옵션을 사용하여 블 러브 / 아이콘을 위로 회전하고 섹션 컨테이너 바로 위에 배치 할 수 있습니다. 이제 브라우저 창에서 섹션을 숨길 때 아이콘이 계속 표시 / 클릭 가능합니다.

다음 항목을 업데이트하십시오.

  • X 축 변환 변환 : -50 %
  • Y 축 변환 변환 : -250 %
  • Z 축 회전 변환 : -45도

그런 다음 기본 아이콘 애니메이션을 제거합니다.

  • 이미지 / 아이콘 애니메이션 : 애니메이션 없음
반환 divi 버튼

우리는 JQuery를 사용하여 서랍을 토글 할 것이므로 나중에 코드에서 사용할 CSS 클래스를 사용하여 텍스트 / 아이콘을 클릭 가능한 요소로 타겟팅해야합니다. 다음 CSS 클래스를 추가하십시오.

  • CSS 클래스 : 대상 서랍
divi 선택기 정의

바닥 글 서랍 섹션 설정

이제 변환 변환 옵션을 사용하여 "Footer Drawer"섹션을 숨길 것입니다. 섹션 설정을 열고 다음을 업데이트하십시오.

  • 변환 Y 축 변환 : 100 %

여기서 변환을 사용하는 장점은 백분율 값이 항목의 실제 크기를 기반으로한다는 것입니다. 따라서 Y 축의 100 %는 섹션의 높이에 직접적으로 관련됩니다 (주어진 시간에 해당하는 값). 즉, 요소는 자신의 높이만큼 정확한 거리 아래로 이동합니다.

섹션 divi 변환

Footer Drawer를 다시보기로 가져 오려면 방금 섹션에 추가 한 변환 변환을 반전해야합니다. 이렇게하려면 CSS 클래스로 요소를 대상으로 지정하고 아이콘을 클릭하여 번역 변환을 비활성화해야합니다 (전체 섹션을 원래 위치로 되돌림).

바닥 글 서랍 섹션에 CSS 클래스 추가

고급 탭에서 다음 CSS 클래스를 추가하십시오.

  • CSS 클래스 : has-transform
클래스 추가에는 변형 divi가 있습니다.

바닥 글 서랍 섹션 고정 위치

마지막 단계에서는 바닥 글 서랍을 고정하여 아이콘과 함께 브라우저 창 하단에 떠있게해야합니다.

"Footer Drawer"섹션의 위치를 ​​다음과 같이 업데이트하십시오.

  • 위치 : 고정
  • 위치 : 왼쪽 하단
  • Z 지수 : 13
divi 모서리에서 위치 수정

모바일 콘텐츠 끄기

제한된 화면 높이로 인해 태블릿과 휴대폰 모두에 적합한 바닥 글 서랍 콘텐츠의 양이 제한되므로 디스플레이에서 필수가 아닌 항목을 비활성화하거나 숨겨야합니다. 이 예에서는 섹션 레이아웃의 중간 행을 숨길 것입니다.

모바일에서 섹션 숨기기

"바닥 글 서랍"섹션에서 두 번째 행부터 마지막 ​​행까지 설정을 엽니 다. 고급 탭에서 가시성 옵션을 업데이트하여 전화기와 태블릿의 회선을 끕니다.

가시성 구분 섹션 제어

맞춤 코드 추가

바닥 글 서랍에 클릭 및 토글 기능을 추가하려면 사용자 정의 CSS 및 JQuery를 페이지에 추가해야합니다. 이렇게하려면 버튼에 사용되는 Blurb 모듈 아래에 새 코드 모듈을 만듭니다.

모듈 코드 추가

그런 다음 코드 영역에 다음 코드를 붙여 넣습니다.

온라인 상점을 쉽게 만들 수 있습니다.

무료 WooCommerce를 다운로드하십시오. 전자 상거래 플러그인은 WordPress에서 실제 제품과 디지털 제품을 판매하는 플러그인입니다. [추천]

.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 코드 모듈 추가

변경 사항 저장

편집기를 종료하기 전에 레이아웃을 저장하는 것을 잊지 마십시오.

divi 수정 사항 저장

또한 테마 생성기에서 변경 사항을 저장하십시오.

변경 사항을 저장하다

최종 결과

이제 웹 사이트의 모든 페이지로 이동하여 최종 결과를 볼 수 있습니다.

마지막 생각

플로팅 바닥 글 서랍이 재미 있고 접근 가능한 방식으로 콘텐츠를 홍보하는 데 도움이되기를 바랍니다. 다른 서랍처럼 생각할 수있는 모든 것으로 채울 수 있습니다.

기타 자료

다음은 Divi의 내부 기능으로 더 많은 것을 달성 할 수 있도록 도와주는 튜토리얼 목록입니다.

번역 : 우아한 테마

이 문서에는 메모의 0을 포함

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드는 표시됩니다 *

이 사이트는 원하지 않는 것을 줄이기 위해 Akismet을 사용합니다. 댓글 데이터 사용 방법에 대해 자세히 알아보기.

맨 위로
0 주식
짹짹
레지스터