Divi 5의 트리거, 효과 및 목표의 차이 이해

Divi 5의 새로운 상호 작용은 트리거, 효과, 대상 인 간단한 모델을 사용합니다. 시작하는 것, 무슨 일이 일어나고, 어떤 변화가 있는지, 당신은 당신의 레이아웃에서 명확하고 조정 된 움직임을 만들 수 있습니다. 이 게시물에서는 각 부분을 설명하고, 어떻게 맞는지 보여주고, 재사용 할 수있는 빠른 예를 살펴 보겠습니다. 그것에 가자!

트리거, 효과 및 대상은 무엇입니까?

Divi 5의 상호 작용은 함께 작동하는 3 개의 움직이는 부분으로 구축됩니다. 트리거는 일을 움직이게하고 효과는 응답 모양을 결정하며 대상은 어떤 요소가 변경되는지 정의합니다.

YouTube 채널을 구독하십시오

상호 작용을 설정하면 Divi는 세 부분을 모두 작성하도록 요청합니다.

각 역할을 개별적으로 이해하면 하나의 완전한 시스템에 연결하는 방법을 쉽게 볼 수 있습니다.

트리거는 시작입니다

모든 상호 작용은 트리거라는 시작 동작으로 시작합니다. 마우스 클릭, 호버 오버 또는 페이지로드와 같이 사용자가 취하는 첫 번째 단계는 작업을 시작합니다. 예를 들어, 마우스를 가격 책정 카드 위로 이동하면 체인이 움직입니다.

그 자체로는 방아쇠가 아무것도하지 않습니다. 응답이 필요합니다.

효과는 일어나는 일입니다

트리거가 발생하면 효과가 뒤 따릅니다. 이곳에서 틸트, 페이드, 스케일, 흐림 또는 움직임의 혼합과 같은 반응을 결정하는 곳입니다. 동일한 가격 책정 카드를 약간 스케일링하고 커서가 그 위에 맴돌면서 더 깊은 그림자를 추가하십시오. 이것이 효과입니다.

마지막으로 효과를 적용 할 위치를 결정해야합니다.

대상은 변화입니다

대상은 단순히 방아쇠가 발사 될 때 변경되는 요소입니다. 호버링은 일반적으로 사용되는 상호 작용이지만 요소 자체에만 영향을 미칩니다. 다시 말해, 상호 작용을 시작한 요소 (트리거)도 바꾸는 요소 (대상)입니다.

예를 들어, 열 위로 호버링하면 대상이기 때문에 동일한 열 스케일을 만들 수 있습니다.

이것은 모든 것을 단일 요소에 국한 상태로 유지했습니다. Divi 5에서 그런 식으로 물건을 설정할 수는 있지만 더 이상 제한되지 않습니다.

이제 방아쇠와 대상이 다를 수있어 훨씬 더 많은 제어를 제공합니다. 예를 들어 커서가 섹션을 입력하면 버튼이 터치하지 않더라도 스케일이 발생합니다. 이 경우 버튼이 대상입니다.

그들이 함께 일하는 방법

이제 우리는 각 부분 자체를 보았으므로 실제 힘은 체인에 연결할 때 발생합니다.

• 트리거 발사 : 방문자는 클릭, 마우스 이동, 입력, 떠나거나 페이지를로드하는 것과 같은 일을합니다.
• 효과 정의 : 당신은 어떤 종류의 시각 또는 모션 응답을 보여줄지 결정합니다.
• 대상이 적용됩니다 : 그 변화는 선택한 요소의 착륙입니다.

회로 배선처럼 생각하십시오. 스위치가 뒤집히고, 현재 흐름, 전구가 불이 켜집니다.

Divi 5에서는 원하는 방식으로 회로를 연결할 수 있습니다. 열의 호버는 버튼을 기울일 수 있습니다. 영웅 이미지에서 페이지로드가 사라질 수 있습니다. 한 번의 클릭은 여러 모듈을 동시에 애니메이션 할 수 있으므로 섹션이 조정 된 느낌을줍니다.

이것은 상호 작용이 더 좋은 호버처럼 느끼고 디자인 언어처럼 일하기 시작할 때입니다. 더 이상 하나의 요소가 그 자체에 반응하지 않습니다. 전체 레이아웃을 연결하기 위해 체인, 스 태거 및 스프레드 응답을 할 수 있습니다.

Divi 5의 상호 작용에 관한 모든 것을 배우십시오

Divi 5의 공식

Divi 5의 상호 작용의 아름다움은 무작위 부가 기능이 아니라는 것입니다. 그들은 명확한 공식을 따릅니다 : 트리거 → 효과 → 대상. 복잡한 상호 작용을 구축하면 반복 가능한 패턴으로 보이면 간단하고 일관되게됩니다.

이 공식을 실천하여 그들이 어떻게 작동하는지 보여 주겠습니다. 이 예에서는 사용자가 버튼을 클릭 할 때 화면에서 팝업되는 연락처 양식을 작성하겠습니다.

이 효과를 만들려면 트리거로 사용하려는 버튼에서 상호 작용을 설정합니다. 이 설정을 선택하십시오.

• 트리거 이벤트 : 클릭 (사용자가 버튼을 클릭하면 이벤트가 트리거되기로 결정했습니다).
• 효과 조치 : 표시 요소 (숨겨진 연락처 양식)
• 대상 모듈 : 섹션 (연락처)은 연락처 섹션에 할당 된 레이블입니다.

다음으로 앵커 링크를 설정하여 연락처 섹션을 열십시오. 먼저 연락처 양식의 섹션 설정을 열고 고급 탭으로 이동하십시오. CSS ID 및 클래스 에서 CSS ID : Contact를 설정하십시오.

그런 다음 버튼의 설정으로 이동하여 버튼 링크 URL 필드에 #Contact를 입력하십시오.

마지막으로 양식의 초기 상태를 숨겨 지도록 설정하여 트리거 된 경우에만 나타납니다. 연락처 양식의 섹션 설정을 열고 고급 탭으로 이동 한 다음 Visib 에서 숨길 중단 점을 선택하십시오.

이제 테스트하십시오. 버튼을 클릭하면 숨겨진 연락처 섹션이 나타납니다.

그 간단한 흐름 (클릭 → 쇼 → 연락처 양식)은 팝업, 토글, 부드로 공개 된 부드러운 공개 또는 섹션 전체의 묶인 애니메이션에 대해 재사용하는 것과 동일한 패턴입니다. 트리거, 효과 및 대상 측면에서 생각하면 가능성이 빠르게 열립니다.

오늘 Divi 5에서 상호 작용을 시도하십시오

당신은 패턴이 있습니다. 이제 실제 페이지에서 작동하도록하십시오. 테스트 레이아웃을 열고 10 분 안에 마무리 할 수있는 작은 상호 작용 효과를 구축하십시오. 클라이언트 사이트에서 실제로 사용하는 것을 선택하십시오.

롤링을위한 미니 프롬프트는 다음과 같습니다.

• 마우스는 섹션을 입력하여 버튼 스케일을 미묘하게 만듭니다
• "연락처"버튼을 클릭하면 자리 잡은 양식이 표시됩니다
• 마우스는 카드를 재설정합니다
• 페이지로드는 영웅 이미지에서 사라지고 잠시 후 헤드 라인

Divi 5의 상호 작용 기능을 아직 사용했는지, 그리고 당신이 생각하는지 의견에 알려주십시오!