Divi 플러그인 하이라이트: Divi Next Blurb

Divi Next Blurb는 고유한 광고 디자인을 만들기 위해 여러 기능을 추가하는 타사 광고 모듈입니다. 이 모듈은 아이콘과 이미지를 동시에 표시하고 거의 모든 요소를 ​​독립적으로 사용자 정의할 수 있으며 대부분의 요소에 많은 호버 효과를 추가할 수도 있습니다. 이 기사에서 우리는 Divi Next Blurb를 살펴보고 그것이 무엇을 할 수 있는지 알아볼 것입니다.

Divi 다음 블러브 모듈

Divi Next Blurb를 업로드하고 활성화하면 Next Blurb라는 새 모듈이 Divi Builder에 추가됩니다. 아무것도 설정할 필요가 없습니다. 사용할 준비가 되었습니다.

Divi Next Blurb 콘텐츠 탭

콘텐츠 탭에는 텍스트에 대한 설정이 포함되어 있어 머리말 텍스트를 활성화하고, 텍스트를 입력하고, 표제 태그를 선택하고, 게시물 표제 텍스트를 활성화할 수 있습니다. 콘텐츠를 추가할 수도 있습니다.

사전 제목은 제목 위에 텍스트를 배치하고 포스트 제목은 제목 아래에 텍스트를 배치합니다. 각각의 제목 태그를 변경할 수 있습니다.

이미지와 아이콘을 동시에 또는 개별적으로 추가합니다. 표준 Divi 블러브 모듈은 둘 중 하나만 표시합니다. Divi Next Blurb는 동시에 두 가지를 모두 표시할 수 있도록 하여 많은 디자인 가능성을 열어줍니다.

표준 버튼 스타일의 버튼을 포함합니다.

또한 제목, 설명, 이미지, 아이콘 및 버튼에 대한 많은 배경색 옵션이 포함되어 있습니다. 독립적으로 활성화하고 조정할 수 있습니다. 각각에 대해 색상 또는 그라디언트를 선택합니다.

Divi Next Blurb 디자인 탭

디자인 탭에는 이미지, 아이콘, 호버 효과, 제목 및 설명 텍스트, 버튼 텍스트, 아이콘 및 호버 효과에 대한 설정이 포함됩니다. 대부분의 요소에는 간격, 테두리 및 상자 그림자에 대한 별도의 섹션도 있습니다. 광고 문구를 디자인하기 위한 조정이 많이 있습니다.

다음 광고 이미지

이미지 설정을 통해 이미지 배치를 선택하고 테두리를 조정할 수 있습니다. 이 예에서는 이미지를 왼쪽 하단에 배치합니다.

이것은 이미지를 오른쪽 중앙에 배치합니다. 테두리를 추가하고 색상을 변경했습니다. 상자 그림자도 추가했습니다.

이 예에서는 이미지를 하단 중앙에 배치했습니다. 테두리를 제거하고 모서리를 둥글게 처리했습니다. 이것은 다른 상자 그림자를 가지고 있습니다.

아이콘에는 배치 옵션도 포함됩니다. 크기, 색상, 테두리 등을 조정할 수도 있습니다. 이 예에서는 아이콘을 오른쪽 하단에 배치했습니다.

다음 광고 아이콘

이 예는 왼쪽 중앙에 아이콘을 보여줍니다. 크기를 늘리고 테두리를 추가하고 테두리 색상을 변경했습니다.

이 예는 상단 중앙에 있는 아이콘을 보여줍니다. 크기를 줄이고 상자 그림자를 추가하고 모서리를 둥글게 만들어 원을 만듭니다.

다음 블러브 호버 효과

호버 효과에는 2D 및 기울기 옵션이 포함됩니다. 2D 옵션은 선택할 수 있는 16가지 효과를 제공합니다.

이 예는 펄스 호버 효과를 보여줍니다.

틸트 효과에는 글레어 옵션, 반전 옵션, 원근감, 속도, 시작점 및 끝점 등이 포함됩니다. 이 예는 글레어가 활성화된 표준 틸트 옵션을 보여줍니다. 설정을 기본값으로 두었습니다.

이 예는 더 많은 눈부심과 원근감을 추가합니다. 기울기를 사용자 정의하는 방법에는 여러 가지가 있습니다.

다음 광고 문구

제목 텍스트에는 사전, 제목 및 사후 텍스트에 대한 설정이 있습니다. 여기에는 텍스트에 대해 기대하는 모든 설정이 포함됩니다. 이 예에서 세 가지 텍스트 세트를 모두 조정했습니다.

설명 텍스트에는 텍스트, 링크, 글머리 기호, 따옴표 등의 조정을 포함한 모든 표준 텍스트 설정이 포함됩니다. 이 예에서는 글꼴 크기를 늘리고 빨간색으로 변경하고 그림자 효과를 추가했습니다.

다음 광고 버튼

모든 표준 버튼 텍스트 및 아이콘 조정이 포함됩니다. 글꼴 크기를 늘리고 색상을 변경했습니다. 이 예는 버튼 아이콘 설정을 보여줍니다.

버튼 호버에는 2D, 배경, 획 및 아이콘을 포함한 많은 조정이 포함됩니다. 2D 설정에는 많은 호버 효과가 포함됩니다.

버튼 호버에는 2D, 배경, 획 및 아이콘을 포함한 많은 조정이 포함됩니다. 2D 설정에는 많은 호버 효과가 있습니다. 배경 효과에는 다른 효과 세트가 포함됩니다. 이것은 호버에 있는 버튼을 보여줍니다.

획은 배경 및 테두리 조정과 여러 호버 효과를 추가합니다. 이 예에서는 내부 주위에 테두리를 추가하고 색상을 변경합니다.

아이콘은 또한 호버의 아이콘에만 영향을 주는 호버 효과를 많이 추가합니다.

Divi Next Blurb 예제 1

예를 들어 Leather Company 레이아웃의 오른쪽에 있는 Sale 텍스트를 Next Blurb 모듈로 바꾸고 몇 가지 기능을 추가하고 싶습니다.

여기 와이어프레임 보기에서 볼 수 있듯이 일반적으로 텍스트 모듈과 버튼으로 만들어집니다. 검은색 배경이 열에 추가됩니다.

다음은 Next Blurb 모듈만 사용하여 다시 만든 판매 클릭 유도문안입니다. 이 예에서는 열에 검은색 배경을 계속 사용하고 있습니다.

다음은 와이어프레임 보기입니다. 이 모듈은 전문 섹션과 잘 작동합니다.

이제 원본 레이아웃의 이미지와 버튼으로 얻을 수 없었던 효과와 기능을 추가할 수 있습니다. 예를 들어, Grow Rotate 2D 호버 효과를 추가했습니다. 해당 열 공간의 검은색 배경 위에 헤더 텍스트와 버튼을 배치했기 때문에 콘텐츠가 기울어지는 동안 카드가 제자리에 남아 있는 것처럼 보입니다.

여기에는 틸트 효과가 포함됩니다. 카드가 호버링할 때 배경 내에서 보이도록 눈부심을 추가했습니다.

이 예에서는 광고 문구에 이미지를 추가했습니다. 나는 그것을 광고 카드 상단에 남겼습니다.

이 경우 애니메이션을 표시하기 위해 팝 호버 효과를 추가했습니다. 이것은 안내문 위로 마우스를 가져가는 방문자의 주의를 끌기에 좋은 방법입니다.

여기에는 눈부심 없이 틸트 효과가 포함됩니다. 카드는 열 내에서 기울어 지지만 카드의 테두리는 인식되지 않습니다.

열에서 배경을 제거하고 모듈에 추가했습니다. 이렇게 하면 텍스트 뒤에 검정색 배경이 유지됩니다. 또한 이미지에만 상자 그림자를 추가했습니다. 틸트 효과를 사용할 때 테두리가 표시되지 않도록 테두리를 제거했습니다.

틸트 효과가 적용된 모습입니다. 이미지에 원근감을 더해주는 훌륭한 역할을 합니다. 나는 상자 그림자의 모양을 좋아합니다.

Divi 다음 블러브 예제 2

이 예에서는 Startup 홈 페이지 레이아웃의 광고 문구를 Next Blurb 모듈로 교체하고 디자인을 좀 더 복잡하게 만들고 싶습니다.

현재 설정으로 광고 문구를 쉽게 재현할 수 있었습니다. 여기서 내가 한 일은 이미지, 제목 및 콘텐츠를 추가하는 것뿐입니다. 이제 약간의 조정을 할 것입니다.

이미지를 왼쪽 상단으로 이동하고 이미지와 본문 텍스트 모두에 상자 그림자를 추가했습니다. 테두리의 모서리가 둥글고 본문 텍스트의 위쪽과 아래쪽에 5픽셀의 패딩이 있습니다.

이 경우 아이콘을 오른쪽 중앙에 배치하고 이미지 간격을 조정하여 제목 텍스트에 맞춥니다. 텍스트를 흰색으로 만들고 본문의 배경을 원래 텍스트 색상으로 지정했습니다. 제목 텍스트의 경우 배경을 그라데이션으로 만들었습니다.

결과는 다음과 같습니다. 제목 텍스트 상단에 패딩을 추가하고 모든 텍스트를 가운데에 배치하고 하단 테두리가 있는 버튼을 추가했습니다. 하단 중앙에 이미지를 추가하고 크기를 늘렸습니다. 이미지는 상단에 패딩을 포함하여 이미지와 콘텐츠 영역 사이에 공간을 추가합니다. 버튼에는 눈에 띄는 상자 그림자가 있습니다. 아래쪽 테두리만 표시되도록 위쪽과 측면 테두리를 숨겼습니다. 호버 효과를 위해 3D 기울기를 추가했습니다.

다음은 레이아웃 내에서 다음 블러브가 어떻게 보이는지 보여줍니다.

Divi Next Blurb 가격 및 구매처

Divi Next Blurb에는 세 가지 라이선스가 있습니다.

• 단일 라이선스 – $25.00
• 무제한 라이선스 – $49.00
• 평생 라이선스 – $99.00

개발자 웹 사이트에서 구입할 수 있습니다.

마무리 생각

Divi Next Blurb는 Divi를 위한 흥미로운 모듈입니다. 나는 그것이 할 수 있는 것과 그것으로 디자인할 수 있는 것의 표면만을 긁어모았다. 생각보다 많은 설정과 조정이 있습니다. 거의 모든 요소에는 자체 테두리, 간격 및 상자 그림자 설정이 있습니다.

보다 표준적인 영역에 배치할 수 있는 것처럼 보이는 몇 가지 기능이 있습니다. 예를 들어, 제목 태그 선택기는 디자인 탭이 아닌 콘텐츠 탭에 있습니다. 여전히 위치를 파악하기 쉽고 설정이 무엇을 하는지 이해하는 데 어려움이 없었습니다.

나는 Divi Next Blurb를 아주 좋아합니다. 표준 Divi 모듈보다 훨씬 더 많은 기능을 수행하는 사용하기 쉬운 광고 모듈에 관심이 있다면 Divi Next Blurb를 살펴볼 가치가 있습니다.

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

Leonid Zarubin/Shutterstock.com을 통한 주요 이미지