기본 제공 변환 옵션 Divi 페이지의 모든 요소를 쉽게 크기 조정, 회전, 기울이기 또는 배치할 수 있는 매우 유용한 디자인 도구임이 입증되었습니다. 또한 멋진 호버 효과를 위해 항목을 호버 상태로 전환하도록 선택할 수도 있습니다. 그래서 오늘은 한 번의 클릭으로 이러한 애니메이션을 배포하는 방법을 보여 드리겠습니다.
이 방법은 jQuery를 사용해야 합니다. 이 기술의 가장 큰 장점은 내장된 설계 매개변수를 사용할 수 있다는 것입니다. Divi 변환 속성의 스타일을 지정하려면 마우스 클릭으로 해당 변환 속성을 활성화(또는 비활성화)하세요. 이를 통해 공개할 수 있는 수많은 독특한 가능성이 열릴 것입니다. 내용 호버 대신 클릭 시 항목을 이동하여 숨겨집니다. 또한 CSS를 많이 알아야 할 필요성을 줄이는 데도 도움이 됩니다.
시작하자.
시작하려면 무엇이 필요합니까?
이 튜토리얼에서 필요한 것은 Divi. 시작하려면 WordPress 대시보드로 이동하세요. 새 페이지를 만들고 페이지 제목을 지정한 다음 전경에 있는 Divi 빌더에서 계속 디자인하세요. "처음부터 빌드" 옵션을 선택하세요. 이제 갈 준비가 되었습니다!
기본 아이디어 설명
이 자습서에서 너무 자세히 설명하기 전에이 기술이 어떻게 작동하는지 몇 마디로 설명하겠습니다.
Divi에서 요소 (섹션, 라인 또는 모듈)를 사용자 정의 할 때마다 배경에서이 요소에 사용자 정의 CSS를 추가합니다. 예를 들어 Divi의 내장 설정을 사용하여 블 러브 모듈에 변형 회전 속성을 추가하여 Z 축을 따라 모듈을 20도 회전 할 수 있습니다.
그러나 배후에서이 텍스트 모듈에 추가되고 다음과 같은 사용자 정의 CSS를 만듭니다.
.et_pb_text_0 {transform : rotateZ (20deg); }
충분히 간단합니다. 그리고 동일한 호버 변환 옵션을 추가하고 싶다고 가정 해 보겠습니다. Divi Builder의 설정에서 hover 상태에 대한 transform 속성을 적용하기 만하면됩니다.
코드는 뒤에서 다음과 같이 보일 것입니다.
.et_pb_text_0 : hover {transform : rotateZ (20deg); }
그러나 클릭시 transform 속성을 배포하려면 약간 다르게 작동해야합니다. 요소 (또는 텍스트 모듈)에서 클릭 이벤트를 트리거하려면 자바 스크립트 코드를 입력해야합니다.
현재 예제에서 우리의 주요 목표는 기본적으로 클릭시 변형 속성 "transform : rotateZ (20deg)"를 켜고 끄는 것입니다. 이를 수행하는 쉬운 방법은 "transformer : none!"속성을 사용하여 사용자 정의 CSS 클래스를 만드는 것입니다. 페이지 (또는 외부 스타일 시트) 설정에서 "중요". 다음과 같이 보일 것입니다.
.toggle-transform-animation {변형 : 없음! 중요; }
CSS가 제자리에 있습니다. transform 속성이있는 blurb 모듈 요소에 CSS 클래스 "toggle-transform-animation"을 추가 할 수 있습니다.
이렇게 하면 변형 속성이 비활성화(재정의)되고 변형 속성의 스타일이 이미 추가된 경우에도 처음에 활성화되지 않습니다.
이제 요소를 클릭 할 때이 사용자 정의 CSS 클래스를 활성화 (추가 및 제거)하기 만하면됩니다. 따라서 요소를 클릭 할 때마다 클래스가 삭제되고 변환 속성 (Div로 추가 한 속성)이 배포됩니다.
다음은이를 수행하는 간단한 예입니다. 먼저 "transform_target"이라는 blurb 모듈에 다른 CSS 클래스를 추가합니다.
다음으로 Divi > 테마 옵션 > 통합으로 이동하여 헤더에 다음 jQuery 스크립트를 추가합니다. 블로그:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
그게 다야 ! 이제 프레젠테이션 모듈을 클릭 할 때마다 Divi에서 프레젠테이션에 추가 한 변형 속성이 활성화 또는 비활성화됩니다.
이제 자신의 프로젝트에 이것이 어떻게 유용한 지 알 수 있도록 예제를 작성해 보겠습니다.
클릭하여 변환 속성을 전환하는 방법 Divi에서 콘텐츠를 표시하려면 클릭
이 예에서는 위에 사용된 간단한 광고문 예를 사용하겠습니다. 다음으로, 이 뒤에 추가 광고를 추가하여 상단 광고를 클릭할 때마다 해당 광고가 방해가 되지 않고 이동하여 해당 광고가 표시되도록 할 것입니다. 내용 문서 뒤에 있는 추가 광고문.
앞면과 뒷면에 Blurb 모듈 만들기
그런 다음 1 열에 프리젠 테이션 모듈을 추가하십시오.
업데이트 내용 제목만 포함하려면(기본 본문 내용 제거) 광고문 아이콘을 추가하세요.
그런 다음 다음과 같이 디자인 매개 변수를 업데이트하십시오.
배경색 : #4c5866
아이콘 색상 : #ffffff
텍스트의 방향 : 중심
텍스트 색상
: 경량 맞춤 여백 : 하단에 0px
맞춤 패딩 : 상단은 15 %, 하단은 15 %, 왼쪽은 10 %, 오른쪽은 10 %
나중에이 모듈로 돌아올 것이지만 지금은 추가 컨텐츠가 포함 된 "반환"모듈로 사용할 두 번째 Blurb 모듈을 만들어야합니다.
이렇게하려면 방금 만든 프레젠테이션 모듈을 복제하십시오.
그런 다음 두 번째 모듈에서 프레젠테이션 아이콘 (및 기본 이미지)을 제거하고 본문 콘텐츠를 다시 모듈에 추가합니다. 그런 다음 다음과 같이 설계 매개 변수를 업데이트합니다.
배경색 : rgba (76,88,102,0.3)
텍스트 색상 : 검정색
맞춤 패딩 : 20 % top
요약하기 전에 모듈 배치
이제 두 개의 광고 문구가 스타일이 지정되었으므로 앞 (위) 광고로 돌아가서 뒤 (하단) 광고 위에 배치해야합니다. 이를 위해 높이가 100 %이고 너비가 100 % 인 절대 위치를 지정합니다.
먼저 상단 / 전면 프리젠 테이션 모듈 설정을 열고 다음을 업데이트하십시오.
높이 : 100 %;
너비 : 100 %;
그런 다음 기본 요소에 다음 사용자 정의 CSS 코드를 추가하십시오.
위치 : 절대! 중요; 전환 : 모든 .5;
그런 다음 z 인덱스를 다음과 같이 업데이트하십시오.
Z 색인 : 2000
100 % 높이 및 너비 및 z 인덱스와 결합 된 절대 위치는 blurb 모듈이 그 뒤에있는 blurb 모듈 위에 유지되도록합니다. 전환 속성은 실제로 다음 클릭시 배포 할 변환 옵션의 전환 기간입니다. 그리고 "커서 : 포인터"는 요소가 사용자가 클릭 할 수 있도록 커서를 변경하는 것입니다.
전면 블러에 변환 옵션 및 사용자 정의 클래스 추가
이제 트랜스 폼 속성을 프론트 블 러브에 추가 할 때입니다. 그런 다음 클릭시 이러한 속성을 토글하기 위해 jQuery에 필요한 사용자 지정 CSS 클래스를 추가합니다.
전면 블러 디자인 매개 변수 아래에 다음 변환 특성을 추가하십시오.
X 및 Y 변환 척도 : 20 %
변환 원점 : 상단 중앙
이 시점에서 표시되는 변형 디자인은 클릭시 트리거되는 디자인입니다. 원하는 디자인을 얻기 위해 Divi 빌더를 활용하기 만하면됩니다. 이 경우 전면 광고 문구가 축소되어 클릭 가능한 아이콘처럼 상단 중앙에 위치합니다.
완료되면 다음과 같이 jQuery로 프론트 블 러브를 대상으로하는 데 필요한 두 개의 CSS 클래스를 추가하십시오.
CSS 클래스 : toggle-transform-animation transform_target
(각 클래스 이름을 공백으로 분리하십시오)
그런 다음 jQuery를 사용하여 변환 속성을 활성화 및 비활성화하는 데 사용되는 다음 사용자 지정 CSS 코드 스 니펫을 추가하십시오.
.toggle-transform-animation {변환 : 없음! 중요; }
이 클래스가 적용 되었기 때문에 이전에 추가 된 블러그 변환 속성이 비활성화되었습니다.
이제 Divi> Theme options> Integration으로 이동하여 다음 jQuery 스크립트를 블로그 헤드에 추가하십시오.
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
최종 결과를 보자.
이 예제를 사용하여 더욱 인상적인 디자인을 만들 수 있습니다. 댓글 섹션에서 주저하지 말고 의견을 공유하십시오.
