Divi 5 상호 작용에 대해 알아야 할 모든 것

플러그인이나 사용자 정의 CSS없이 동적 팝업, 토글 및 스크롤 효과를 가진 방문자를 유치하려면 최신 Divi 5 Public Alpha 기능 릴리스 중 하나를 좋아할 것입니다. Divi 5의 상호 작용을 통해 Divi 사용자는 시각적 빌더 내부에 매력적이고 대화식 요소를 만들 수 있습니다. 이 게시물에서는 Divi 5 상호 작용, 기능, 몇 가지 팁 및 실제 응용 프로그램을 탐색하여 기능에 익숙해지는 데 필요한 모든 것에 대해 알아야합니다.

중요한 참고 사항 : Divi 5는 현재 공개 알파에 있으며 새로운 웹 사이트에 최적화되었습니다. 기존 Divi 4 사이트를 마이그레이션하는 것이 좋지 않습니다. 지속적인 개발 및 레거시 모듈의 잠재적 호환성 문제로 인해 발생합니다. Divi 5가 전체 릴리스에 가까워지면서 업데이트를 계속 지켜봐주십시오!

그것에 가자.

Divi 5 상호 작용이란 무엇입니까?

Divi 5 상호 작용은 시각적 빌더 내에서 직접 웹 사이트의 대화식 요소를 만들 수있는 건축업자입니다. 단순한 팝업 빌더 이상의이 기능을 사용하면 팝업부터 스크롤 트리거 애니메이션에 이르기까지 다양한 커드 상호 작용을 만들 수 있습니다.

YouTube 채널을 구독하십시오

모든 모듈, 열, 행 또는 섹션의 고급 탭에 원활하게 통합 된 상호 작용은 매력적이고 사용자 중심 경험을 구축 할 수있는 유연성을 제공합니다.

Divi 5 상호 작용의 핵심 구성 요소

Divi 5 상호 작용의 핵심에는 디자인에 활력을 불어 넣기 위해 함께 작동하는 세 가지 주요 구성 요소가 있습니다.

이벤트 트리거

트리거는 상호 작용을 시작하는 이벤트입니다. 예를 들어 버튼을 클릭하거나 이미지 위의 호버링, 페이지의 특정 지점에 도달하는 것과 같은 스크롤 기반 이벤트 또는 페이지로드 후 지연과 같은 시간 기반 트리거와 같은 사용자 작업이 포함됩니다.

사용 가능한 트리거에는 다음이 포함됩니다.

• 클릭 : 사용자는 버튼, 이미지 또는 기타 요소를 클릭하여 상호 작용을 시작합니다.
• 마우스 입력/종료 : 사용자는 요소를 떠나거나 떠납니다.
• 뷰포트 입력/종료 : 요소가 사용자가 스크롤 할 때 화면의 가시 영역에 들어가거나 종료합니다.
• 로드 : 선택 시간 지연으로 페이지가로드 될 때 상호 작용이 시작됩니다.

예를 들어, 페이지로드 후 5 초 후 팝업을 트리거하거나 사용자가 스크롤 할 때 요소를 애니메이션 할 수 있습니다.

효과 행동

트리거가 활성화되면 효과가 발생하면 어떤 일이 발생하는지 결정합니다. 옵션에는 요소 표시 또는 숨기기, 페이드로 애니메이션, 스케일, 회전 또는 일관된 스타일을 위해 사전 설정 전환 적용이 포함됩니다.

• 전환 가시성 : 가시와 숨겨진 사이의 요소를 전환합니다.
• 표시/숨기기 요소 : 요소를 보거나 숨겨지게 만듭니다.
• 전환 사전 설정 : 기존 사전 설정을 교체 할 수있는 설계 요소의 사전 설정 또는 끄기를 켜십시오.
• 사전 설정 추가 : 요소에 사전 설정 스타일 클래스를 추가하는 데 사용됩니다. 기존 사전 설정을 교체 할 수도 있습니다.
• 사전 설정 제거 : 요소에서 사전 설정 스타일을 제거하는 데 사용하십시오.
• 토글 속성 : CSS 클래스 또는 CSS ID와 같이 요소의 HTML 속성을 추가하거나 제거합니다.
• 속성 추가 : 현재 존재하지 않는 특정 HTML 속성 값을 추가합니다.
• 속성 제거 : 요소에 적용되는 속성을 제거합니다.
• 토글 쿠키 : 쿠키 값을 추가하거나 제거합니다. 예를 들어, 팝업이 나타나면 쿠키를 설정하고 Divi 5의 조건 설정을 사용하여 한 번만 표시하도록 설정할 수 있습니다.
• 쿠키 추가 : 사용자의 브라우저에 정의 할 수있는 쿠키 값을 추가합니다.
• 쿠키 제거 : 이전에 지정된 쿠키를 제거합니다.
• 요소로 스크롤 : 페이지가 부드럽게 스크롤하여 대상 요소를 볼 수 있도록합니다.
• 미러 마우스 움직임 : 사용자의 마우스 움직임에 따른 움직임을 설정할 수 있습니다. 옵션에는 번역, 스케일, 불투명도, 기울기 또는 회전이 포함됩니다. 움직임의 민감도를 조정할 수도 있습니다.

모듈을 대상으로합니다

대상은 모듈, 행, 열 또는 전체 섹션과 같은 상호 작용에 영향을 미치는 요소입니다. 페이지의 요소 자체 또는 다른 요소를 타겟팅하여 복잡한 상호 작용을 만들 수있는 유연성을 제공 할 수 있습니다.

Divi 5 상호 작용의 주요 특징

Divi 5 상호 작용은 사용자 친화적이고 다재다능한 기능 세트로 두드러집니다.

• 코드 인터페이스 없음 : CSS 또는 JavaScript를 사용하지 않고 요소의 고급 탭 내에서 직관적 인 인터페이스를 통해 트리거, 효과 및 대상을 구성합니다.
• 다양한 상호 작용 유형 : 리드 캡처 용 팝업 생성, FAQ 토글, 영웅 섹션의 스크롤 트리거 페이드 또는 포트폴리오의 시차와 같은 마우스 효과를 만듭니다.
• 경량 성능 : Divi 5에 직접 구축 된 상호 작용은 타사 플러그인의 필요성을 제거하여 사이트 팽창을 줄이고 부하 시간을 개선합니다.
• 동적 트리거 조합 : 스크롤 이벤트와 같이 시간 지연과 같은 여러 트리거를 결합하여 사용자가 페이지 아래로 스크롤 한 후 나타나는 팝업과 같은 정교한 상호 작용.
• 반응 형 디자인 : Divi 5의 사용자 정의 가능한 반응 형 중단 점을 사용하여 데스크탑, 태블릿 및 모바일 상호 작용을 사용자 정의합니다.

Divi 5 상호 작용에 액세스하고 사용하는 방법

Divi 5에서 상호 작용을 만드는 것은 시각적 빌더 내의 통합 덕분에 간단합니다. 다음과 같은 간단한 단계에 따라 시작하십시오.

Divi 5에서 페이지를 열어 시작하십시오. 상호 작용을 추가 할 모듈, 행, 열 또는 섹션을 선택하십시오. 예를 들어, 페이지에서 이미지 모듈을 선택하십시오.

고급 탭 으로 이동하여 상호 작용 드롭 다운을 클릭하십시오. 거기에서 상호 작용 버튼 + 를 클릭하십시오.

우리는 이미지에 대한 틸트/변환 마우스 오버 효과를 만들고 싶습니다. 이를 위해서는 이미지와 이미지가 포함 된 열에 대한 두 가지 상호 작용을 만들어야합니다. 상호 작용을 관리자 라벨 에 이름을 제시 한 다음 다음 설정을 입력하여 시작하십시오.

• 트리거 이벤트 : 마우스가 들어갑니다
• 효과 동작 : 미러 마우스 움직임
• 대상 모듈 : 이미지
• 시간 지연 : 0
• 움직임 유형 : 번역
• 민감도 : 10

모든 설정이 제자리에 있으면 상호 작용 저장 버튼을 클릭하여 계속하십시오.

다음으로 열에서 변환 상호 작용을 생성합니다. +를 다시 한 번 클릭하십시오. 상호 작용을 만들려면 다음 설정을 입력하십시오.

• 관리자 라벨 : 틸트 열
• 트리거 이벤트 : 마우스가 들어갑니다
• 효과 동작 : 미러 마우스 움직임
• 대상 모듈 : 열
• 시간 지연 : 0
• 움직임 유형 : 기울기
• 민감도 : 30

설정이 입력되면 상호 작용이 다음과 같습니다.

미리보기 버튼을 사용하여 상호 작용을보십시오.

페이지가 새 탭에 표시되므로 상호 작용을 미리보고 테스트 할 수 있습니다.

당신이 만들 수있는 상호 작용의 유형

다음은 Divi 5 상호 작용의 다양성을 보여주는 몇 가지 실제 사례입니다. 트리거, 효과 및 실제 응용 프로그램으로 완성됩니다.

새로운 방문객을위한 팝업을 환영합니다

팝업은 방문자에게 뉴스 레터, 프로모션 또는 이벤트에 가입하도록 촉구하는 데 좋습니다. Divi 5 상호 작용을 사용하면 페이지로드 후 나타나는 환영 팝업을 만들 수 있습니다.

이 상호 작용을 만들려면 팝업 섹션을 작성하고 다음 설정을 할당해야합니다.

• 관리자 레이블 : 팝업
• 트리거 이벤트 : 로드
• 효과 조치 : 요소 표시
• 대상 모듈 : 섹션 (팝업)-상호 작용을 만들기 전에 섹션의 이름을 지정하십시오.
• 시간 지연 : 5 초

또한 팝업을 닫기 위해 상호 작용을 만들어야합니다. 가장 쉬운 방법은 팝업 섹션의 오른쪽 상단에 아이콘 모듈을 추가하고 다음 설정을 할당하는 것입니다.

• 관리자 레이블 : 닫기 버튼
• 트리거 이벤트 : 클릭하십시오
• 효과 조치 : 요소를 숨기십시오
• 대상 모듈 : 섹션 (팝업)
• 시간 지연 : 0

팝업 배치를 제어하려면 Divi 5의 위치 설정을 사용하십시오. 고급 탭 에서 위치 드롭 다운 메뉴를 찾아 위치를 고정 상태 로 설정하십시오. 거기에서 팝업이 페이지에 나타나는 위치를 선택하십시오. 이 예에서는 센터 로 설정되어 있습니다. 팝업이 99999 와 같이 페이지의 다른 모든 것보다 팝업이 나타나도록 Z 인덱스를 설정하는 것도 좋습니다.

마지막 단계는 모든 장치에 팝업의 가시성을 숨기도록 설정하는 것입니다. 이렇게하려면 고급 탭 으로 이동하여 가시성 드롭 다운 메뉴로 스크롤 한 다음 모든 옵션을 전환하여 모든 장치의 팝업 섹션을 숨기십시오.

요소의 가시성을 전환하십시오

토글은 FAQ, 아코디언 메뉴, 가격 테이블 또는 서비스와 같은 접을 수있는 컨텐츠 섹션을 만드는 데 적합합니다. 이를 통해 사용자는 클릭하여 콘텐츠를 확장하거나 붕괴시켜 페이지를 깨끗하고 대화식으로 유지할 수 있습니다. 예를 들어 버튼을 클릭 한 후에 만 표시되는 전체 서비스 목록을 공개 할 수 있습니다.

이 효과를 만들려면 섹션의 트리거로 설정하려는 버튼에서 상호 작용을 설정합니다. 상호 작용에 대한 다음 설정을 입력하십시오.

• 관리자 라벨 : 서비스 표시
• 트리거 이벤트 : 클릭하십시오
• 효과 조치 : 요소 표시
• 대상 모듈 : 섹션 (공개 서비스)
• 시간 지연 : 0

다음으로 앵커 링크를 설정하여 섹션을 열십시오. 버튼의 설정을 열고 컨텐츠 탭의 버튼 링크 URL 필드에 #Services를 입력하십시오.

버튼 아래의 기능 섹션을 클릭하고 고급 탭으로 이동하십시오. CSS ID 및 클래스 메뉴에서 CSS ID 필드에 서비스를 추가하여 앵커를 설정하십시오.

고급 탭에있는 동안 팝업과 마찬가지로 섹션의 가시성을 숨겨진 상태로 설정해야합니다.

마우스 움직임 효과

Divi 5 상호 작용을 통해 사용자가 설계 요소를 가리킬 때 동적 마우스 이동 효과를 생성 할 수 있습니다. 예를 들어, 상호 작용을 결합하여 제목 및 상위 열에 틸트 효과를 생성 할 수 있습니다.

이 상호 작용을 달성하기 위해 먼저 제목을 위해 상호 작용을 만들어야합니다. 이미지의 고급 탭에 다음 설정을 입력하십시오.

• 관리자 라벨 : 애니메이션 제목
• 트리거 이벤트 : 마우스가 들어갑니다
• 효과 동작 : 미러 마우스 움직임
• 대상 모듈 : 텍스트
• 시간 지연 : 0
• 움직임 유형 : 기울기
• 민감도 : 30

설정이 입력되면 아래 스크린 샷처럼 보일 것입니다.

다음으로 다음 설정을 사용하여 제목을 포함하는 열에서 상호 작용을 설정하십시오.

• 관리자 라벨 : 열 틸트
• 트리거 이벤트 : 마우스가 들어갑니다
• 효과 동작 : 미러 마우스 움직임
• 대상 모듈 : 열
• 시간 지연 : 0
• 움직임 유형 : 기울기
• 민감도 : 50

완료되면 설정은 아래 스크린 샷과 유사하게 보일 것입니다.

사전 설정 기반 상호 작용

사전 설정과 함께 Divi 5 상호 작용을 사용하여 마우스 오버 또는 뷰포트 입력/종료 트리거와 함께 효과를 생성 할 수 있습니다. 예를 들어, 배경색을 변경하거나 테두리 그림자 스타일을 추가하여 페이지에 섹션을 표시하려면 상호 작용을 사용하여이를 수행 할 수 있습니다. 아래의 예에서, 사용자가 섹션 위로 떠날 때 배경색, 너비 및 테두리가 변경됩니다.

이 효과를 만들려면 먼저 마우스 오버 전후 섹션을 표시하려면 사전 설정을 만들어야합니다. 이 예에서는 하나의 노란색 배경이 있고 다른 하나는 다양한 효과와 녹색 배경을 가진 두 가지를 만들었습니다.

사전 설정이 생성되면 상호 작용을 사용하여 호버의 변경 사항을 전환 할 수 있습니다. 다음 설정과의 첫 번째 상호 작용을 만들어 시작하십시오.

• 관리자 라벨 : 노란색 배경
• 트리거 이벤트 : 마우스가 들어갑니다
• 효과 조치 : 전환 사전 설정
• 대상 모듈 : 섹션 (가격)
• 시간 지연 : 1 초
• 사전 설정 : 노란색 배경

다음으로 다음 설정을 입력하여 마우스 오버에 대한 두 번째 상호 작용을 만듭니다.

• 관리자 라벨 : 녹색 배경
• 트리거 이벤트 : 마우스 종료
• 효과 조치 : 전환 사전 설정
• 대상 모듈 : 섹션 (가격)
• 시간 지연 : 0
• 사전 설정 : 녹색 사전 설정

Divi 5 상호 작용 사용의 이점

Divi 5 상호 작용은 웹 사이트 구축에 대한 강력하고 간소화 된 접근 방식을 제공하여 Divi 사용자에게 눈에 띄는 기능을 제공하는 다양한 장점을 제공합니다. 이 기능이 왜 Divi 5에 유용한 이유를 더 깊이 살펴보십시오.

1. 플러그인이 필요하지 않습니다

Divi 5 상호 작용은 Divi의 핵심에 통합되어 있기 때문에 팝업 및 기타 상호 작용을 만들기 위해 타사 플러그인이 필요하지 않습니다. 이 기본 접근 방식은 사이트에서 실행되는 스크립트 수를 줄여로드 시간이 빠르고 성능 메트릭을 향상시킵니다.

예를 들어, 팝업 플러그인에 의존하는 대신 Divi 5 상호 작용은 시각적 빌더 내의 모든 것을 처리하여 더 얇은 코드베이스와 더 부드러운 사용자 경험을 보장합니다. 이는 또한 플러그인 충돌의 관리 및 위험을 낮추기위한 업데이트가 적어 사이트를보다 신뢰할 수있게합니다.

2. 사용자 친화적입니다

Divi 5 상호 작용은 직관적으로 설계되었으며, 상호 작용을 만들기 위해 몇 번의 클릭 만 필요합니다. 초보자는 기본 사항을 신속하게 파악할 수 있으며 프로 개발자는 단일 코드 라인을 쓰지 않고 복잡한 조합으로 뛰어들 수 있습니다.

상호 작용 설정은 모든 요소의 고급 탭 내에서 깔끔하게 구성되며, 전체 프로세스를 통해 명확한 레이블 및 툴팁이 안내됩니다. 예를 들어, 팝업을 설정하려면 트리거와 효과를 선택하려면 몇 번의 클릭이 필요하므로 누구나 쉽게 사용할 수 있습니다.

3. 사용자 정의 할 수있는 자유

Divi 5 상호 작용의 유연성과 방대한 설정 (트리거, 효과 및 목표)을 통해 사이트 방문자에게 고유 한 경험을 만들 수 있습니다. 스크롤 기반 뷰포트 입력을 시간 지연과 결합하는 등 여러 트리거를 혼합하여 사용자가 페이지의 반쯤 스크롤 한 후에는 홍보 배너와 같이 정교한 상호 작용을 만듭니다.

모듈, 행, 열 또는 섹션을 타겟팅하는 기능은 단일 버튼을 애니메이션하거나 전체 영웅 섹션을 변환하든 필요한 경우 정확하게 효과를 적용 할 수 있음을 의미합니다.

4. 향상된 사용자 참여

대화식 요소는 웹 사이트를보다 몰입하고 반응성있게 만들어 사용자 참여를 향상시킵니다. Divi 5 상호 작용은 대체 가격 책정을 공개하거나 리드 캡처를위한 팝업을 유발하는 등의 상호 작용을 장려함으로써 방문자를 사이트에 유지하는 데 도움이됩니다. 예를 들어, 식당 웹 사이트는 스크롤 트리거 애니메이션을 사용하여 메뉴 섹션을 공개 할 수 있습니다.

시작하기위한 실용적인 팁

Divi 5 상호 작용을 최대한 활용하려면 최적의 결과를 보장하기 위해 전략적으로 접근하십시오. 다음은 프로세스를 안내하는 몇 가지 팁입니다.

• 간단하게 시작하십시오 : 팝업이나 토글과 같은 간단한 상호 작용으로 시작하여 마우스 움직임이나 멀티 트리거 애니메이션과 같은 고급 효과를 다루기 전에 기능에 익숙해 지십시오.
• 관리자 라벨 필드 사용 : 상호 작용과 요소 라벨링은 특히 여러 섹션이있는 복잡한 페이지에서 중요합니다. 각 모듈의 컨텐츠 탭에서 admin 레이블 필드에 이름을 추가하면 물건을 정리하고 올바른 대상 요소를 쉽게 인식 할 수 있습니다.
• 사전 설정 사용 : Divi 5의 사전 설정 시스템은 시간을 절약하고 상호 작용에 대한 일관성을 유지하는 데 좋습니다. 사전 설정을 사용하면 페이드 인 애니메이션 또는 색상 전환과 같은 재사용 가능한 스타일을 정의하고 여러 요소에 적용 할 수 있습니다.
• 철저한 테스트 : Divi 5의 미리보기 기능을 사용하여 상호 작용을 항상 미리보기 위해 게시하기 전에 문제를 해결하십시오. Divi 5의 사용자 정의 가능한 반응 형 중단 점을 사용하여 모든 장치에서 상호 작용이 어떻게 작동하는지 테스트 할 수 있습니다.

Divi 5 상호 작용으로 웹 사이트를 높이십시오

Divi 5 상호 작용은 웹 사이트의 사용자 경험을 향상시키기 위해 매력적이고 노 코드 대화식 요소를 만들기위한 완벽한 기능입니다. 팝업에서 디자인에 생명을 불어 넣는 스크롤 트리거 애니메이션으로 이어지는이 기능을 통해 누구나 코드 라인을 만지지 않고 역동적 인 전문 웹 사이트를 구축 할 수 있습니다. 가벼운 통합 및 다양한 트리거 옵션은 최신 웹 디자인을위한 필수 도구입니다.

시작할 준비가 되셨습니까? 최신 Divi 5 알파를 다운로드하고 상호 작용으로 뛰어 들어 팝업, 토글 컨텐츠, 스크롤 효과 등을 만듭니다. 빠른 참고 사항 : Divi 5는 새로운 웹 사이트에 대한 준비가되었지만 아직 기존 사이트에서는 사용하지 않는 것이 좋습니다.

아래에 의견을 말하거나 소셜 미디어 채널에 연락하여 귀하의 창조물을 우리와 공유하십시오. 우리는 그들을보고 싶습니다!