Divi 플러그인 하이라이트 – Tilt Blurb Divi 모듈

Blurbs는 Divi 레이아웃에서 널리 사용됩니다. 텍스트, 이미지, 아이콘 등을 표시하므로 제품 및 서비스를 보여주는 데 적합합니다. 더 눈에 띄고 흥미로운 호버 애니메이션을 제공하려면 어떻게 하시겠습니까? 일반적인 애니메이션은 CSS를 통해 수행할 수 있지만, 다른 것을 원하면 어떻게 될까요? Tilt Blurb Divi Module이라는 플러그인이 원하는 것일 수 있습니다.

틸트 블러브 모듈이란?

Tilt Blurb Module은 흥미로운 기울기 효과를 추가하여 3D 모양을 만드는 Divi Builder(Divi 및 Extra 모두용)에 새로운 블러 모듈을 추가하는 Hadworm의 타사 플러그인입니다. 이 플러그인 하이라이트에서는 모듈을 살펴보고 무엇을 할 수 있는지 알아보겠습니다. 몇 개의 gif를 보여주었지만 대부분은 gif의 파일 크기로 인해 이미지일 것입니다. 예제의 이미지는 Unsplash.com과 WordPress.org에서 가져왔습니다.

Tilt Blurb Divi 모듈 설치

정상적으로 플러그인을 업로드하고 활성화합니다. 대시보드 메뉴 내의 플러그인 링크에서 Tile Blurb License라는 새 항목을 찾을 수 있습니다. 이것을 클릭하고 라이센스 키를 입력하고 변경 사항을 저장하십시오. 이렇게 하면 업데이트를 받을 수 있습니다.

Divi Builder에 Tilt Blurb라는 새 모듈이 추가되었습니다. Divi Builder 내에서 보라색으로 표시되어 있으므로 놓치기 어렵습니다. 저는 개발자가 모듈에 다른 색상을 사용하여 표준 모듈(가치에 따라)과 눈에 띄는 것을 좋아합니다.

이 모듈에는 표준 탭과 새로운 탭이 포함되어 있습니다.

• 콘텐츠 – 텍스트, 링크, 이미지 및 아이콘, 배경, 관리자 레이블
• 틸트 설정 – 틸트 설정, 틸트 배경, 틸트 레이어
• 디자인 – 이미지 및 아이콘, 텍스트, 헤더 텍스트, 본문 텍스트, 테두리, 크기 조정, 간격
• 고급 – CSS ID 및 클래스, 사용자 정의 CSS, 애니메이션, 가시성

기울기 설정

이 예에서는 배경을 추가한 다음 더 작은 이미지를 전경으로 배치하여 3D 효과를 만들었습니다. 그리고는 커피를 시켰다. 많은 커피.

기본 설정이 있는 예

다음은 조정하기 전에 3D 기울기가 어떻게 보이는지 보여주는 예입니다. 제목, 텍스트, 배경, 아이콘을 추가했습니다. 틸트는 내 마우스를 따라가며 텍스트와 아이콘을 이미지와 별도로 설정하여 3D 모양을 제공합니다. 나를 위해 시차 효과는 배경을 제거하므로 사용하지 않았습니다.

이미지 크기

이렇게 하면 숨겨진 이미지를 사용하여 광고의 크기를 조정하고 콘텐츠를 중앙에 배치합니다.

플로트 콘텐츠가 있는 2개의 이미지가 있는 틸트 블러브 크기

이것은 두 개의 이미지를 포함합니다. 하나는 전경용이고 하나는 배경용입니다. 전경 이미지와 텍스트는 플로트 콘텐츠 기능을 사용하여 3D입니다.

확대/축소처럼 작동하는 부동 양을 조정하여 전경 콘텐츠를 판독기에 더 가깝게 가져올 수 있습니다. 이 이미지는 최대 플로트 금액으로 200을 사용합니다.

기울기 양

기울기 양 슬라이더를 사용하여 이미지가 기울어지는 정도를 제어할 수 있습니다. 기본 설정은 20입니다. 이것은 100을 사용합니다.

틸트 원근법

틸트 원근법은 원근감을 심화시킵니다. 숫자가 낮을수록 원근감이 깊어집니다. 기본값은 1000입니다. 이 예는 200입니다.

틸트 스케일

기울기 배율은 확대/축소 수준입니다. 기본값은 1.1이며, 마우스를 가져가면 이미지에 1.1이 곱해집니다. 이 예는 2입니다. 0으로 이동하지만 0 레벨은 이 이미지에 대해 작동하지 않는 연속적인 앞뒤 확대를 생성했습니다. 원하는 작업을 수행하려면 약간의 실험이 필요할 수 있습니다.

틸트 속도

틸트 속도는 마우스를 가져갈 때 이미지가 움직이는 속도를 제어합니다. 숫자가 낮을수록 빠르게 움직입니다. 기본값은 100입니다. 이것은 5000입니다. 저는 느린 효과에 부분적입니다.

틸트 리버스

틸트 리버스는 틸트 방향을 변경합니다. 일반적으로 기울기는 마우스에서 멀어집니다. Reverse는 이미지를 마우스 쪽으로 기울입니다.

틸트 글레어

Tilt Glare는 마우스를 따라가는 눈부심 효과를 추가합니다. 눈부심 양은 조정 가능합니다. 위 이미지는 기본 설정인 .8을 사용합니다. 이것은 조명 효과를 만드는 데 좋습니다.

테두리 반경

테두리 반경은 테두리 모양을 변경합니다. 기본값은 40입니다. 최대값인 100으로 설정되어 있습니다.

틸트 배경

Tilt Background를 사용하면 배경색과 테두리 효과를 설정할 수 있습니다.

틸트 배경

Tilt Background Color의 부작용 중 하나는 이미지 주위에 멋진 빛을 생성한다는 것입니다.

기울기 배경색, 테두리 너비, 배경 테두리 스타일, 테두리 너비, 테두리 및 상자 그림자 색상을 조정합니다.

기울기 배경 거리

기울기 배경 거리는 그림자의 거리를 조정합니다. 기본적으로 -50으로 설정되어 있습니다. 이 예에서는 -25를 사용합니다.

이 예제는 배경 위에 오버레이를 만드는 0의 기울기 배경 거리와 .3의 불투명도를 사용합니다.

기울기 배경 크기/축척

틸트 배경 크기/배율은 틸트 배경의 거리를 변경합니다. 기본값은 1.04입니다. 이것은 1.2입니다.

틸트 레이어

틸트 레이어는 동일한 이미지를 여러 레이어에 반복해서 적용하여 견고한 3D 효과를 만듭니다. 이미지나 배경색을 사용할 수 있으며 레이어 깊이를 조정할 수 있습니다. 위의 이미지를 레이어 깊이 50으로 적용했습니다.

내가 적용한 이미지는 여기에서 테두리로 표시됩니다. 보기 쉽도록 기울기 양을 조정했습니다.

예상대로 이미지 하단이 다르게 보입니다. 이것은 테두리에 약간의 질감을 추가하는 좋은 방법입니다. 레이어 깊이가 작을수록 테두리가 더 얇아집니다.

이것은 10의 레이어 깊이를 사용합니다.

이 예제에서는 틸트 배경과 틸트 레이어를 모두 사용합니다.

다음은 크리스탈로 둘러싸인 3D WordPress 로고입니다. 이미지 및 아이콘 이미지 영역에 로고를 업로드하고 틸트 양을 100으로 설정하고 기본 틸트 글레어를 사용하고 틸트 레이어 아래의 레이어 이미지에 로고를 추가하고 레이어 깊이를 50으로 설정하고 레이어 색상을 흰색으로 설정했습니다. 거의 완전히 투명합니다.

다음은 레이어 색상이 없는 로고입니다. 측면이 더 보기 어렵습니다.

라이선스, 지원 및 문서

플러그인은 귀하와 귀하의 고객을 위해 무제한 웹사이트에서 사용할 수 있습니다. 여기에는 6개월의 지원이 포함됩니다. 문서는 개발자 웹사이트에서 제공됩니다. 여기에는 웹 사이트에 표시되는 몇 가지 예제를 만드는 방법에 대한 지침이 포함되어 있습니다. 로고가 어떻게 만들어 졌는지와 같은 더 많은 예를보고 싶습니다.

마지막 생각들

틸트 블러브 모듈은 이미지, 아이콘 및 텍스트에 멋진 3D 모양을 만드는 흥미로운 틸팅 효과를 많이 제공합니다. CTA, 3D 책 표지 및 제품 이미지를 만드는 좋은 방법입니다. Tilt Blurb Module은 혁신적이고 직관적입니다. 블러브에 멋진 틸팅 효과를 추가하고 싶다면 틸트 블러브 모듈을 고려해 볼 가치가 있습니다.

우리는 당신의 의견을 듣고 싶습니다. Tilt Blurb Divi 모듈을 사용해 보셨습니까? 아래 의견에서 그것에 대해 어떻게 생각하는지 알려주십시오.

hobbit/Shutterstock.com을 통한 추천 이미지