Divi 플러그인 하이라이트: Next Image Effect Pro

Next Image Effect Pro는 이미지와 링크에 관심을 끄는 데 도움이 되는 많은 이미지 호버 효과를 추가하는 Divi용 타사 플러그인입니다. 플러그인은 Divi Builder에 각각 고유한 디자인과 효과 세트를 가진 7개의 모듈을 추가합니다. 이 기사에서는 Next Image Effect Pro를 살펴보고 무엇을 할 수 있는지 알아보겠습니다.

다음 이미지 효과 프로 설치

Divi Marketplace에서 플러그인을 구매하고 다운로드하십시오. 설치하려면 다음 단계를 따르세요.

1. WordPress 대시보드에서 플러그인 > 새로 추가 로 이동합니다.
2. 컴퓨터에서 플러그인 업로드
3. 지금 설치를 클릭하십시오
4. 플러그인이 설치되면 활성화를 클릭하십시오.

다음으로 라이선스를 활성화해야 합니다. 플러그인 > Image Effect Pro 라이선스로 이동합니다. 라이센스 키를 입력하고 변경 사항을 저장하십시오.

Next Image Effect Pro 모듈

Image Effect Pro는 이미지와 텍스트의 스타일 조합이 포함된 모듈 세트를 Divi Builder에 추가합니다. 수백 가지의 호버 효과와 방향 조합을 추가합니다. 텍스트 스타일 옵션에는 제목, 포커스 텍스트, 콘텐츠 및 배경에 대한 독립적인 컨트롤이 포함됩니다.

모듈에는 다음이 포함됩니다.

• 원형 이미지 호버
• 이미지 호버 상자
• 이미지 아이콘 효과
• 메가 이미지 효과
• 최소한의 이미지 호버
• 다음 이미지 스크롤
• 궁극의 이미지 호버

원형 이미지 호버

원형 이미지 호버에는 이미지와 텍스트(호버 콘텐츠)의 두 가지 주요 섹션이 있습니다. 직사각형 이미지를 추가했습니다. 이미지를 원래 모양으로 표시한 다음 원형으로 만듭니다. 이미지가 정사각형이면 완벽한 원이 됩니다.

이미지의 디자인 설정에는 상자 그림자 위치, 강도 및 색상이 포함됩니다.

텍스트에는 제목과 내용을 추가하는 섹션이 포함됩니다. 디자인 설정에서 스타일을 지정할 수 있습니다. 이 예에서는 크기를 늘렸습니다.

캡션 배경은 단색 또는 그라디언트일 수 있습니다. 이것은 기본 그라디언트를 사용합니다.

각 효과에 대해 4개의 방향 옵션이 있는 19개의 호버 효과가 있습니다. 이것은 효과 1입니다. 효과에는 이미지를 전환하고 내용을 전환하는 다양한 방법이 있습니다. 여기에는 확대/축소, 뒤집기, 슬라이드 등이 포함됩니다.

이미지 호버 상자

이미지 호버 상자에는 호버 콘텐츠가 있는 이미지도 포함됩니다. 그것은 이미지의 모양을 변경하지 않습니다.

또한 오버레이(또는 오버레이처럼 보이는 배경)를 포함하고 제목 배경을 추가합니다. 두 배경 모두 단색과 그라디언트를 포함할 수 있습니다. 이 예에서는 기본 오버레이 배경을 사용합니다. 제목 배경색을 변경하고 텍스트 크기를 늘렸습니다.

플립, 슬라이드, 페이드, 확대/축소 등을 포함한 13가지 다른 호버 효과가 있습니다. 여러 효과는 방향에 대한 옵션을 추가합니다. 효과 1입니다.

이미지 아이콘 효과

이미지 아이콘 효과는 이미지 위에 제목과 포커스 텍스트를 표시하는 호버 요소를 추가합니다. 다른 사람들과 마찬가지로 단색이나 그라디언트로 배경색을 변경할 수 있으며 여러 호버 효과가 포함되어 있습니다. 이것의 호버 효과는 테두리를 가져오고 특히 우아하게 보입니다. 이것은 Zoe 호버 효과입니다.

이것을 구별하는 것은 아이콘입니다. 4개의 다른 아이콘을 추가하여 동일한 창이나 새 창에서 열 수 있습니다.

아이콘 설정에는 색상, 크기, 간격, 선 높이, 배경색, 그림자, 테두리 등이 포함됩니다. 이 예에서는 배경색을 추가하고 선 높이를 줄여 선을 만듭니다. 그림자도 추가했습니다. 호버 이펙트 헤라입니다.

호버 효과 테리입니다. 제목과 포커스 텍스트의 색상을 변경하고 이전 예제의 글꼴 크기 및 아이콘 설정을 사용했습니다.

메가 이미지 효과

메가 이미지 효과는 한 면에 이미지가 있고 다른 면에 콘텐츠가 있는 또 다른 양면 카드입니다. 전면은 정상적으로 이미지를 표시합니다.

카드 뒷면에는 내용이 정상적으로 표시되며 글꼴 및 배경 조정이 포함됩니다. 그것을 구별하는 것은 버튼을 추가하는 기능입니다.

표준 배경과 동일한 단색 및 그라디언트 옵션을 포함하여 버튼 디자인을 완벽하게 제어할 수 있습니다. 이 예는 버튼의 배경에 대한 그라디언트를 보여줍니다.

글꼴 및 배경에 대한 버튼의 스타일을 완전히 제어할 수 있습니다. 이 예에서 글꼴과 테두리를 조정했습니다. 모듈의 모든 요소에는 간격 조정 기능도 있습니다. 버튼 하단에 20픽셀을 추가했습니다. 각 모듈에는 이러한 간격 조정이 있습니다.

이 모듈에는 셀 수 없을 정도로 많은 호버 효과가 있습니다. 이미지 효과만으로도 인상적이지만 텍스트 효과도 많습니다. 이미지 호버와 텍스트 호버를 별도로 조정하고 텍스트 효과의 타이밍을 설정할 수 있습니다.

이 예는 평행 왼쪽 이미지 호버, 확대 텍스트 효과 및 작은 텍스트 지연입니다.

최소한의 이미지 호버

최소 이미지 효과는 세트에서 가장 간단한 모듈입니다. 호버 효과가 있는 이미지를 표시합니다.

유일한 사용자 정의 설정은 호버 효과입니다. 선택할 수 있는 10가지 효과가 포함되어 있습니다. 몇 가지를 살펴보겠습니다.

이 예는 Scale Out 회전입니다. 이미지가 축소되고 정상 상태에서 약간만 회전됩니다. 마우스를 가져가면 이미지가 확대되고 정상 상태로 회전합니다.

블러입니다. 이미지는 마우스를 가져갈 때까지 흐릿한 다음 선명해질 때까지 천천히 흐려지지 않습니다.

플래싱입니다. 흰색이 이미지 위로 번쩍이다가 마우스를 가져가면 사라집니다.

다음 이미지 스크롤

다음 이미지 스크롤은 이미지 위에 오버레이를 배치하고 오른쪽 상단 모서리에 버튼을 추가합니다. 단색과 그라디언트 모두에 대해 버튼의 색상을 조정할 수 있습니다. 이 예는 기본 설정을 보여줍니다.

오버레이를 조정할 수도 있습니다. 단색 또는 그라디언트를 설정합니다. 그라디언트 유형과 표준 컨트롤도 포함됩니다.

배경 위치를 사용하면 이미지의 상단 또는 하단을 표시할 수 있습니다.

마우스를 올리면 이미지가 상단 또는 하단으로 이동합니다. 이 예에서 모듈은 이미지 하단을 표시하고 마우스를 가져가면 이미지 상단으로 스크롤합니다.

궁극의 이미지 호버

Ultimate Image Hover는 선택한 효과에 따라 크기와 모양을 표시합니다. 이것은 Effect 1입니다. 긴 직사각형 이미지에서 사진의 일부를 보여줍니다. 여기에는 제목과 포커스 텍스트, 콘텐츠 및 오버레이가 포함됩니다. 오버레이에는 단색 또는 그라디언트로 색상에 대한 조정이 포함됩니다.

마우스를 가져가면 오버레이가 밝아지고 텍스트가 표시됩니다.

이미지 불투명도를 사용하면 볼 수 있는 배경의 양을 조정할 수 있습니다. 이 예에서는 불투명도를 줄이고 제목 및 포커스 텍스트의 크기, 제목 텍스트 색상, 포커스 텍스트 굵기를 변경하고 포커스 텍스트를 모두 대문자로 만들고 포커스 텍스트에 텍스트 그림자를 추가했습니다.

이 모듈에는 24개의 호버 효과가 있습니다. 다양한 크기, 불투명도, 텍스트 배치로 이미지를 표시하고 테두리를 추가합니다.

Effect 4입니다. 이미지를 정사각형으로 표시하고 끝 부분이 겹치는 내부 테두리를 추가합니다.

이것은 Effect 5입니다. 오버레이를 어둡게 하고 이미지 내부에 테두리를 추가하고 이미지를 정사각형으로 표시합니다.

효과 6은 제목과 포커스 텍스트를 맨 위에 배치하고 그 아래에 선을 표시하고 내용을 맨 아래에 배치합니다.

효과 8은 큰 직사각형 크기를 유지하고 얇은 테두리를 추가합니다.

이것은 효과 10입니다. 마우스를 올리면 이미지가 확대되고 선이 x가 되고 그라디언트가 나타납니다.

다음 이미지 효과 프로 예

간단한 예를 들어, CTA를 생성하기 위해 Ultimate Image Hover 모듈이 추가된 Divi Home Renovation 레이아웃을 살펴보세요. 이미지 왼쪽에 추가하고 레이아웃의 색상을 사용했습니다.

마우스를 가져가면 이미지가 오른쪽으로 슬라이드되고 CTA가 표시되고 이미지가 덜 불투명해지며(배경색이 더 많이 통과함) 테두리가 추가됩니다. 이 예에서는 호버 효과 8을 사용합니다.

Next Image Effect Pro 구매

Next Image Effect Pro는 Divi Marketplace에서 $49에 구입할 수 있습니다. 여기에는 무제한 웹 사이트 사용, 30일 환불 보증, 1년 지원 및 업데이트가 포함됩니다.

마무리 생각

이것이 Divi용 Next Image Effect Pro에 대한 우리의 모습입니다. 7개의 모듈은 사이트를 돋보이게 하는 많은 이미지 기능을 추가합니다. 그것들을 사용하는 것은 직관적입니다. 모든 모듈 간의 효과와 조합의 수는 인상적입니다. 각 모듈은 고유하지만 대부분 CTA, 팀원, 평가, 일반 정보, 연락처 정보 등을 위한 많은 디자인 가능성을 제공하기 위해 이미지, 제목 및 콘텐츠를 추가합니다.

우리는 당신의 의견을 듣고 싶습니다. Next Image Effect Pro를 사용해 보셨습니까? 의견에 대해 어떻게 생각하는지 알려주십시오.

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