Divi 플러그인 하이라이트: Divi 마스크

Divi Mask는 Divi용 타사 플러그인으로 이미지와 배경에 고유한 스타일이 있는 Divi Builder에 새 모듈을 추가합니다. 이미지 위에 마스크를 배치하여 이미지가 마스크의 모양을 취하도록 합니다. 마스크 외부의 모든 것은 그라디언트 또는 다른 배경을 포함하여 원하는 색상이 될 수 있습니다.

여기에는 컷아웃으로 작동하여 그 뒤에 있는 이미지를 드러내는 54개의 사전 설정 마스크가 포함되어 있습니다. SVG를 사용하여 자신의 것을 추가할 수도 있습니다. 여기에는 제목, 콘텐츠 및 배경 도구가 포함됩니다. 각 요소를 조정하고 스타일을 지정할 수 있습니다.

이 플러그인 하이라이트에서는 Divi Mask를 살펴보고 무엇을 할 수 있는지, 얼마나 사용하기 쉬운지 살펴보겠습니다. 개발자의 웹 사이트에서 Divi Mask를 구입할 수 있습니다.

Divi 마스크 모듈

정상적으로 플러그인을 업로드하고 활성화합니다. 설정할 사항이 없습니다. 활성화되는 즉시 사용할 수 있습니다. Divi Builder에 Divi Mask 모듈이 추가되었습니다.

콘텐츠 탭에서는 이미지, 마스크 및 텍스트를 추가할 수 있습니다. 기타 조정을 통해 이미지 배경색을 사용자 정의하고, 이미지를 미러링하고, 이미지 불투명도를 설정할 수 있습니다. 링크와 배경을 추가할 수도 있습니다. 이 이미지는 마스크 설정의 마스크 탭을 보여줍니다. eSports 레이아웃 팩에서 이미지를 추가했습니다.

마스크 설정의 마스크 탭입니다. 54개의 기본 제공 마스크 중에서 선택하거나 SVG 저장이라는 무료 플러그인을 사용하여 사용자 정의 마스크를 업로드할 수 있는 드롭다운 상자가 추가됩니다.

이 탭은 또한 모듈을 채우고, 마스크의 세 가지 버전 중에서 선택하고, 원하는 크기로 크기를 조정하고, 회전하고, 수평 및 수직 위치를 조정하는 옵션을 추가합니다. 이 예에서 각각을 조정했습니다. 이것은 Splodge 마스크의 옵션 1입니다.

이것은 채우기 모듈이 활성화된 옵션 1입니다. 모듈에 할당된 공간을 늘리고 채웁니다.

이것은 Splodge 마스크의 옵션 2입니다. 그것은 몇 가지 흥미로운 얼룩 무늬를 만듭니다.

이것은 Splodge 마스크의 옵션 3입니다.

마스크 설정의 텍스트 탭은 각각에 대한 독립적인 사용자 정의와 함께 제목 및 내용에 대한 영역을 추가합니다.

제목 태그를 선택하고 배경색, 배경 너비, 가로 및 세로 위치, 회전을 조정합니다. 텍스트 조정은 디자인 탭에서 처리됩니다.

콘텐츠 영역에는 텍스트, 이미지, 미디어 등을 추가할 수 있는 완전한 편집기가 추가됩니다. 또한 색상, 너비, 수평 및 수직 위치에 대한 배경 조정도 포함됩니다. 이것은 회전을 포함하지 않습니다. 텍스트에 대한 조정은 디자인 탭에 있습니다.

디자인 탭에는 머리글, 본문 텍스트, 크기 조정, 간격, 테두리, 상자 그림자, 필터, 변환 및 애니메이션에 대해 예상되는 모든 설정이 포함됩니다.

고급 탭에는 제목 및 텍스트에 대한 CSS 영역이 포함되어 있습니다.

Divi 마스크 예제

이 예에서는 모듈을 채우기 위해 설정된 평행사변형 마스크를 사용하고 있습니다. 마스크의 크기를 조정하고 회전 및 정렬을 조정했습니다. 또한 마스크 설정의 이미지 탭에서 사용한 것과 똑같은 이미지의 배경과 그라디언트를 추가했습니다. 마스크는 이미지의 일부를 드러내고 배경 이미지가 배경을 통해 보이도록 합니다. 나중에 더 확실한 것을 사용하겠습니다.

이를 위해 Circle 마스크를 추가했습니다. 흰색 배경의 이미지 위에 헤더를 배치했습니다. 배경의 너비와 불투명도를 줄이고 텍스트에 그림자 효과를 추가했습니다. 콘텐츠를 이미지 아래로 이동하고 클릭 가능한 사진 세트를 추가했습니다. 콘텐츠 편집기를 사용하기 때문에 각 요소는 모듈의 링크와 별개로 다른 URL을 가질 수 있습니다. 물론 원하는 경우 이미지 위에 콘텐츠를 배치할 수 있습니다. 이것은 흥미로운 CTA가 될 것입니다.

이를 위해 배경을 어둡게 변경하고 이미지와 겹치도록 텍스트를 이동했습니다. 헤더와 내용 텍스트의 크기를 늘리고 흰색 배경을 주었습니다. 초점이 중앙 이미지에 있도록 이전 예제에서 축소판 이미지를 제거했습니다.

이 예에서는 Travel Agency 레이아웃 팩에서 중앙 이미지 모듈을 교체하고 Divi Mask 모듈에서 동일한 이미지를 추가했습니다. 이미지의 불투명도를 낮추고, 헤더 텍스트를 추가하고, 세로 위치 50%로 설정하고, 헤더 배경색을 변경하고, 불투명도를 낮췄습니다. 이것은 페이지, 프로젝트, 게시물에 대한 링크를 생성하거나 정보를 표시하는 쉬운 방법입니다.

이 예에서는 전체 너비 섹션을 만들고 섹션 분리와 혼합할 마스크를 추가합니다. 헤더와 콘텐츠 텍스트를 추가하고 색상과 크기를 변경하고 배경을 투명하게 만들고 이미지에서 원하는 위치에 배치했습니다.

삼각형 마스크를 추가하고 옵션 2를 선택했습니다. 크기를 조정하고 수평 설정을 조정했습니다. 또한 모듈에 그라데이션 배경을 추가했습니다. 이 동일한 그라디언트를 미러링하고 다음 섹션에 추가하여 서로 섞일 수 있습니다.

이것은 옵션 3입니다. 마스크를 반대쪽으로 뒤집습니다. 이미지를 더 많이 표시하기 위해 가로 위치를 이동하고 마스크와 겹치도록 머리글과 텍스트의 세로 위치를 조정했습니다. 텍스트가 자동으로 겹칩니다.

이것은 옵션 1의 화살표 마스크를 보여줍니다.

이것은 화살표 옵션 4입니다. 더 많은 것이 내 화면에 표시되도록 작은 행에 배치했습니다.

이것은 내 배경 그라디언트와 함께 기본 설정을 사용하는 부트 마스크입니다.

여기 멋진 나비 마스크가 있습니다.

다음은 하트 마스크입니다. 하트 테마에 맞게 배경 그라데이션을 변경했습니다.

이제 배경과 동일한 이미지를 추가하고 배경 이미지 위에 표시되도록 그라디언트를 설정했습니다. 이것은 마스크가 그라디언트의 일부를 잘라내는 효과를 줍니다.

물론 모든 이미지를 배경으로 사용할 수 있습니다. 이 예에서는 마스크의 이미지가 그 위에 표시되도록 배경 이미지를 교체했습니다. 또한 배경의 불투명도를 줄여서 더 많이 보여 효과를 더 두드러지게 했습니다.

이를 위해 마스크를 회전하고 오른쪽으로 이동했습니다. 배경의 그라디언트 불투명도를 조정했습니다. 여전히 마스크 이미지와 다른 배경 이미지가 표시됩니다. 또한 콘텐츠 텍스트를 추가하고 텍스트 크기, 콘텐츠의 세로 위치 및 너비를 조정했습니다. 이것은 정보에 대한 흥미로운 CTA 또는 안내문을 생성할 것입니다.

이것은 Speech 마스크를 사용합니다. 가로 위치를 조정하고 내용을 가운데로 옮겼습니다.

이것은 경계 마스크입니다. 액자를 만들어줍니다. 중앙에 배치하고 이미지에 맞게 크기를 조정하고 콘텐츠를 중앙에 배치했습니다.

이를 위해 스케일을 다시 기본값으로 설정하고 채우기 모듈을 선택했습니다. 경계는 여전히 존재하지만 보기 영역 밖에 있습니다.

이 경우 테두리를 표시하도록 눈금을 조정했습니다.

이것은 마름모 마스크를 사용합니다. 모퉁이를 돌린 사각형입니다. 확대해서 오른쪽으로 옮겼습니다. 콘텐츠를 중앙에 배치하고 콘텐츠에 배경이 보일 만큼 충분한 투명도를 부여했습니다. 헤더를 추가하고 옆에 표시하도록 배치했습니다. 투명감이 있는 배경도 주었습니다.

Divi 마스크 가격 및 문서

Divi Mask는 $12이며 6개월의 지원 및 평생 업데이트가 포함되어 있습니다. 무제한 웹사이트에서 사용할 수 있습니다. 개발자의 웹 사이트에서 Divi Mask를 구입할 수 있습니다.

개발자 웹 사이트에는 플러그인에 대한 자세한 설명도 포함되어 있습니다. 이것은 기본 사항을 보여주고 SVG 기능을 사용하여 자신의 사용자 지정 마스크를 만드는 방법을 포함합니다. 이 사이트에는 설치 프로세스를 단계별로 안내하는 짧은 FAQ도 포함되어 있습니다.

마무리 생각

Divi Mask가 흥미로운 모듈이라는 것을 알았습니다. 매우 직관적입니다. 나는 지침을 읽거나 비디오를 볼 필요가 없었지만 만일을 대비하여 사용할 수 있다는 것이 좋습니다. 내가 가장 좋아하는 사용 방법은 광고 문구 대신 CTA로 페이지나 제품에 연결하거나 이미지에 디자인 스타일을 추가하는 것입니다.

반응형이지만 원하는 만큼 반응하지 않는 디자인을 만들 수 있습니다. 이것은 내가 디자인할 때 염두에 두어야 할 것입니다. 물론 디자인의 태블릿 및 모바일 버전을 만들 수도 있고 Divi Builder에서 다양한 시각적 모드를 사용하여 디자인을 테스트할 수도 있습니다.

내장된 54개의 마스크가 마음에 듭니다. 그들은 흥미로운 시각 자료를 제공하고 컨트롤은 이를 더욱 확장합니다. SVG를 사용하여 자신만의 것을 만들 수 있다는 점도 마음에 듭니다. 이동할 수 있는 배경이 있는 별도의 헤더 및 콘텐츠 요소를 갖는 것도 흥미롭습니다.

Divi Mask는 이미지와 텍스트에 대한 많은 디자인 가능성을 열어줍니다. Divi에서 이미지에 컷아웃을 추가하는 데 관심이 있다면 Divi Mask를 살펴볼 가치가 있습니다.

우리는 당신의 의견을 듣고 싶습니다. 디비 마스크 써보셨나요? 아래 의견에서 그것에 대해 어떻게 생각하는지 알려주십시오.

Oleksandr Korchahin/Shutterstock.com을 통한 주요 이미지