Divi 5의 상호 작용 (팝업, 토글, 마우스 효과 등)

오늘날, 우리는 팝업 및 토글과 같은 대화 형 요소를 생성하기위한 강력한 시스템, 창의적인 스크롤 기반 및 마우스 영화 기반 효과를 생성하기위한 강력한 시스템 인 Divi 5의 상호 작용을 공개하게되어 기쁩니다.

팝업 빌더가 아닙니다. 건축업자 입니다. 방아쇠를 만들고, 효과를 할당하고, 대상을 선택하고, 사용자 정의 상호 작용을 실현시킵니다. 이 시스템으로 많은 놀라운 일을 할 수 있으며, 그것이 어떻게 작동하는지 보여주기를 기다릴 수 없습니다.

새로운 기능을 보려면 다음 비디오를 확인하십시오.

자신만의 대화식 요소를 구축하십시오

모든 요소의 고급 탭에 새로운 상호 작용 그룹이 표시됩니다. 상호 작용 추가 버튼을 클릭하면 각 상호 작용의 트리거, 효과 및 대상을 구성 할 수있는 상호 작용 편집기가 열립니다.

트리거는 클릭하거나 호버링 할 때와 같은 상호 작용을 시작합니다. 효과는 가시성, 사전 설정 또는 속성과 같은 상호 작용이 트리거 될 때 발생하며 대상은 페이지의 영향을받는 요소입니다.

상호 작용 예

이 설정에 더 깊이 들어가기 전에 상호 작용이 달성 할 수있는 몇 가지 예를 보여 드리겠습니다.

예 1 : 팝업 구축

아래 비디오 예에서는 상호 작용을 사용하여 팝업을 만듭니다.

Enter viewport 트리거를 섹션에 추가하여 토글 가시성 효과를 팝업에 적용합니다. 이 섹션은 내 뷰포트를 입력하여 팝업의 가시성을 유발하고 Divi의 애니메이션 설정을 사용하는 데 미끄러 져 들어갑니다.

또한 팝업 내의 아이콘 모듈에는 클릭 기반 상호 작용이있어 팝업의 가시성을 전환하여 닫습니다. 모든 유형의 팝업 또는 플로팅 배너를 만들 수 있습니다!

예 2 : 토글 구축

아래 비디오 예에서는 상호 작용을 사용하여 매월 및 연간 가격 책정 테이블을 전환했습니다.

매년 및 월별 가격 책정 섹션의 가시성을 전환하기 위해 두 가지 상호 작용을 행에 추가했습니다. 다음으로 두 개의 아이콘 모듈의 가시성을 전환하기 위해 두 가지 상호 작용을 추가하여 사용자에게 클릭에 대한 추가 피드백을 제공합니다.

예 3 : 사전 설정 간 전환

가장 강력한 효과 중 하나는 토글 사전 설정 효과입니다. 사전 설정을 사용하면 요소의 설정을 수정할 수 있으므로 수행 할 수있는 작업에는 제한이 없습니다. 트리거가 대상 요소에서 사전 설정을 변경하면 여러 가지 방법으로 변환 할 수 있습니다.

아래 비디오 예에서는 뷰포트에 들어가서 종료 할 때 행에 사전 설정을 추가하고 제거하기 위해 두 가지 상호 작용을 설정했습니다. 하이라이트 사전 설정은 행의 배경색과 스케일을 변경하고 상자 그림자를 추가하여 페이지를 아래로 스크롤 할 때 사용자의 관심을 끌어냅니다!

예 F : 마우스 이동 효과

상호 작용 시스템의 마우스 조용 기반 효과는 많은 재미입니다.

아래 비디오 예에서. 나는 다양한 감수성의 마우스 운동 기반 효과를 가진 다양한 요소를 대상으로 한 영웅 섹션에 몇 가지 상호 작용을 추가했습니다.

마우스의 상호 작용이 유발되어 마우스가 움직일 때 변화하는 요소에 불투명도, 움직임 및 기울기 효과를 적용합니다. 또한 버튼 모듈에 상호 작용을 추가하여 사전 설정을 전환하여 제곱 개요의 스타일을 변경했습니다.

가능성은 끝이 없습니다!

나는 다른 예를 계속 진행할 수 있었고, 당신이 무엇을 생각해 낸 것을 보게되어 기쁩니다.

상호 작용 편집기를 더 자세히 살펴보면 속성 토글, 쿠키 및 요소로 스크롤과 같이 아직 언급하지 않은 추가 효과를 볼 수 있습니다.

예를 들어, 속성 효과를 사용하여 요소의 CSS 클래스, ID 또는 다른 것을 변경할 수 있습니다.

상호 작용의 버전 중 하나는 다음과 같은 효과를 뒷받침합니다.

• 전환 가시성 - 가시 상태와 숨겨진 상태 사이의 요소를 자동으로 전환합니다.
• 표시 요소 - 숨겨진 요소를 보이게 만듭니다.
• 요소 숨기기 - 눈에 보이는 요소를 숨기십시오.
• 전환 사전 설정 - 기존 사전 설정을 선택적으로 교체하여 요소의 사전 설정/끄기를 전환합니다.
• 사전 설정 추가 - 기존 사전 설정을 선택적으로 교체하여 사전 설정 스타일 클래스를 요소에 적용합니다.
• 사전 설정 제거 - 요소에서 사전 설정 스타일 클래스를 제거합니다.
• 토글 속성 - CSS 클래스 및 ID와 같은 요소의 특정 HTML 속성 값을 추가하거나 제거합니다.
• 속성 추가 - 아직 존재하지 않으면 특정 HTML 속성 값을 요소에 추가합니다.
• 속성 제거 - 요소에서 특정 HTML 속성 값을 제거합니다.
• 쿠키 전환 - 쿠키에서 쿠키 값을 추가하거나 제거하십시오. 예를 들어, 사용자가 팝업을 보았을 때 팝업이 추적되는 경우 쿠키를 설정하십시오. 그런 다음 Divi의 조건 옵션을 사용하여 해당 사용자의 향후 페이지 방문에서 팝업을 숨기십시오.
• 쿠키 추가 - 방문자의 브라우저에 정의하는 쿠키와 쿠키 값을 추가합니다.
  쿠키 제거 - 지정된 쿠키를 제거하십시오.
• 요소로 스크롤 - 페이지를 부드럽게 스크롤하여 대상 요소를 볼 수 있습니다.
• 미러 마우스 이동 - 대상 요소는 조정 가능한 감도로 다양한 이동 유형 (번역, 스케일, 불투명, 틸트 또는 회전)을 사용하여 트리거 요소 내에서 마우스 이동을 따릅니다.

오늘 Divi 5를 사용해보십시오

Divi 5의 상호 작용은 오늘 이용할 수 있으며 올해 Divi에 오는 많은 기능 중 하나입니다.

Divi 5 이상의 최종 릴리스를 통해 2 주마다 업데이트를 통해 진행할 수 있습니다. 우선 순위에 따라 Divi 5를 사용하여 새 웹 사이트를 구축하거나 더 많은 기능을 추가 할 때까지 기다릴 수 있습니다.

Divi 5의 원래 다중 단계 릴리스 일정에 요약 된 바와 같이, Divi 5 Public Alpha는 "Divi 5 Lite"와 같습니다. 몇 가지 기능이없고 기존 웹 사이트에 적합하지 않을 수 있지만 Divi 4의 경험을 선호하는 경우 새 웹 사이트에서 사용할 준비가되었습니다.

우리는 당신이 그것을 시도하기를 원하며, 당신이 그것을 좋아한다면 그것을 사용하십시오. 모두가 그것을 좋아할 때, 우리는 그것을 공식화 할 것입니다.

상대 색상을 사용해 보셨습니까?

당신이 그것을 놓친 경우, 우리는 최근 Divi 5의 상대 색상을 출시하여 Divi를 색상 관리 및 고급 색상 시스템의 명확한 리더로 만들었습니다. HSL을 사용하여 중첩 된 색상 관계를 가진 수학적으로 아름다운 가변 기반 색상 시스템을 만들 수 있습니다. 이 기능에서 자고 싶지 않습니다.

모든 세부 사항에 대해이 비디오를보십시오.

더 많은 Divi 5 업데이트가 진행 중입니다

2025는 Divi 5의 해입니다 . 지루한 일은 우리 뒤에 있습니다. 우리는 초고속 재단을 만들었고 이제 Divi가 복귀 할 때입니다.

Divi 컴백을 위해 여기에 있다면, 우리에게 큰 호의를 베풀고이 비디오를 좋아하고 의견을 남겨서 알려주십시오. 그것은 당신이 Divi를 응원하는 것을 보는 것을 우리에게 의미하며, 알고리즘을 공급하고 단어를 전파하는 것이 필수적입니다.

YouTube에서 우리를 팔로우하고 Divi 뉴스 레터를 구독하여 업데이트를 놓치지 마십시오. 또 다른 Divi 5 장편 발표를 위해 곧 뵙겠습니다.