Divi 5(공개 알파)에서 호버 효과를 마스터하는 방법

Divi 5를 사용하면 호버 효과를 그 어느 때보다 쉽게 ​​추가하고 편집할 수 있습니다. 이 가이드에서는 호버 효과에 대한 모든 주요 개선 사항과 이를 Divi 5에서 사용하여 이전과는 전혀 다른 방식으로 작업 흐름을 간소화하는 방법을 안내합니다.

Divi 5 Public Alpha와 다운로드 방법에 대해 자세히 알아보세요.

Divi 5 공개 알파 다운로드

Divi 5(공개 알파)의 호버 효과 이해

Divi 5에서 호버 효과와 관련된 중요한 변경 사항 중 하나는 이제 구현하기가 더 쉽고 접근하기가 더 쉽다는 것입니다. Divi 4에서는 설정 내 각 요소에 대한 호버 효과를 수동으로 활성화해야 했습니다. 변경 사항을 적용하기 전에 특정 옵션을 찾고 호버 상태를 활성화해야 하므로 이 프로세스는 번거로울 수 있습니다.

Divi 5의 새로운 인터페이스에는 호버 효과, 반응형 및 고정 편집 모드가 완전히 통합되어 즉시 액세스할 수 있습니다. 더 이상 개별적으로 활성화할 필요가 없습니다!

이 개선 사항은 고급 호버 상태 디자인을 적용하는 데 필요한 단계를 줄이고 작업 흐름 속도를 높이며 동적 상호 작용을 생성하는 것을 더욱 직관적으로 만들어 디자인 프로세스를 간소화합니다.​​

Divi 5 호버 효과의 주요 개선 사항

다음은 호버 효과를 더 빠르고 쉽게 적용하고 편집할 수 있게 해주는 Divi 5의 주요 개선 사항 중 일부입니다.

• 일반 모드와 마우스 오버 모드 간 더 빠른 탐색: 원클릭 전환을 사용하면 상태 간 전환과 조정이 더 쉬워집니다.
• 하나의 패널에 있는 모든 마우스 오버 설정: 더 이상 흩어져 있는 설정이 없습니다. 요소에 대한 모든 마우스 오버 설정은 설정 패널에서 쉽게 업데이트할 수 있습니다.
• 즉각적인 시각적 피드백: 실시간 미리보기는 호버 효과 변경 사항을 표시하여 작업 흐름 속도를 높입니다.
• 더 나은 구성 및 설정 가시성: 비활성 설정이 회색으로 표시되어 사용 가능한 옵션에 집중할 수 있습니다.

이러한 개선 사항은 호버 효과를 사용하여 동적인 대화형 디자인을 만드는 프로세스를 간소화합니다.

새로운 설정에 대해 더 자세히 알아보고 싶으신가요? Divi 5 인터페이스 알아보기에서 디자인 작업 흐름을 어떻게 단순화할 수 있는지 알아보세요.

Divi 5 공개 알파 받기

Divi 5(공개 알파)에서 호버 효과를 마스터하는 방법

1. 한 곳에서 모든 호버 상태 설정에 액세스하고 편집합니다.

Divi 5의 호버 설정은 설정 패널에 편리하게 표시되므로 한 곳에서 모든 것에 빠르게 액세스할 수 있습니다. 이 간소화된 패널을 사용하면 각 옵션에 대해 별도의 호버 효과를 전환할 필요성이 줄어듭니다. 즉, 설정 패널에서 호버 효과 상태를 선택하면 각 탭 아래의 모든 옵션(콘텐츠, 디자인 및 고급)이 이제 요소의 호버 상태에만 적용됩니다.

이를 통해 사용자 정의 또는 복잡한 호버 효과를 더 빠르게 추가할 수 있습니다.

2. 지원되지 않는 호버 설정을 쉽게 관리하세요

Divi 5에서는 지원되지 않는 마우스 오버 설정이 자동으로 회색으로 표시되어(액세스할 수 없음) 작업 중인 요소에 사용할 수 없는 기능을 빠르게 확인할 수 있습니다. 이러한 가시성을 통해 호버 상태에서 사용자 정의할 수 있는 옵션을 그렇지 않은 옵션에서 제거하는 데 시간이 낭비되는 것을 방지하여 전반적인 작업 흐름을 개선할 수 있습니다.

3. 즉각적인 실시간 시각적 피드백을 즐기세요

Divi 5의 실시간 시각적 피드백은 즉각적입니다. 설정을 조정하면 변경 사항이 즉시 확인되므로 추측이 줄어들고 이동 중에 호버 효과를 미세 조정할 수 있습니다.

4. 페이지 전체에서 빠르게 호버 효과 편집

Divi 5에서는 다른 요소를 클릭해도 설정 패널이 마우스오버 상태로 유지됩니다. 이를 통해 요소를 클릭하고 변경하기만 하면 페이지 전체의 요소에 대한 호버 효과를 빠르게 업데이트할 수 있습니다.

5. 프런트엔드에서 자신 있게 호버 효과 미리보기

설정 패널에서 호버 상태를 활성화하면 한 번의 클릭으로 모든 요소의 호버 상태 디자인을 미리 볼 수 있습니다. 호버 상태는 활성 상태로 유지되므로 요소에 호버 효과가 있는 경우 해당 요소를 클릭하면 호버 상태 디자인이 즉시 표시되고 동시에 해당 요소에 대한 호버 상태 설정이 열립니다.

아래 비디오 스니펫에서 볼 수 있듯이 프런트 엔드에서 각 광고문의 호버 상태 디자인을 미리 볼 수 있으며 라이브 페이지를 미리 보는 것과 동일한 호버 효과가 표시됩니다.

따라서 페이지의 호버 상태 디자인을 확인하려면 페이지의 요소를 클릭하기만 하면 해당 요소의 호버 상태 디자인이 즉시 표시됩니다. 이를 통해 라이브 페이지로 앞뒤로 전환하지 않고도 호버 효과가 정확한지 쉽게 확인할 수 있습니다.

Divi 5 공개 알파 다운로드

Divi 5에서 호버 효과를 만드는 방법: 빠른 예

이제 Divi 5 호버 효과의 주요 기능을 다루었으므로 Divi 5에서 호버 효과를 만드는 것이 얼마나 쉬운지 간단한 예를 통해 살펴보겠습니다.

1. 모듈 추가

Divi 비주얼 빌더에서 사용자 정의하려는 모듈을 추가하십시오. 이 예에서는 버튼을 추가해 보겠습니다.

2. 호버 설정에 액세스

모듈을 클릭하면 설정 패널이 나타납니다. 오른쪽 사이드바에서 호버 아이콘을 클릭하여 호버 모드로 전환합니다.

3. 호버 효과 사용자 정의

호버 모드에서는 배경색, 테두리, 크기 조정, 애니메이션 등 다양한 스타일 속성을 변경할 수 있습니다. 마우스를 올리면 확대되도록 버튼에 변형 효과를 추가해 보겠습니다.

잊지 마세요. Divi 5의 단순화된 설정 패널에는 하나의 패널에 모든 컨트롤이 포함되어 있으므로 원하는 대로 변경한 다음 완료되면 저장을 클릭하세요.

색상 및 배경 전환, 이미지 및 텍스트 애니메이션, 그림자 효과, 요소 크기 조절, 회전 또는 이동을 위한 변환 컨트롤 등 다양한 호버 효과 설정을 자유롭게 테스트해 보세요. 또한 흐림이나 밝기와 같은 테두리 스타일과 필터를 조정하고 고급 CSS 애니메이션을 적용하여 더욱 매력적인 사용자 경험을 제공할 수도 있습니다.

Divi 5는 호버 효과 디자인의 판도를 바꾸는 제품입니다

Divi 5의 호버 효과는 비교할 수 없는 용이성, 속도 및 유연성을 제공하여 Divi 4에 비해 디자인 프로세스를 간소화합니다. 숙련된 웹 디자이너이든 초보자이든 이러한 직관적인 기능을 사용하면 사이트에 대화형 요소를 그 어느 때보다 쉽게 ​​추가할 수 있습니다.

웹사이트의 사용자 경험을 향상시킬 준비가 되셨나요? 지금 Divi 5 Public Alpha를 다운로드하고 새로운 호버 효과 실험을 시작하여 디자인이 생생하게 나타나는지 확인하세요!

Divi 5 공개 알파 다운로드