Divi의 배경 마스크 및 패턴 변환 설정을 사용하는 방법

배경 패턴은 웹사이트에 시각적 감각을 부여하고 군중에서 눈에 띄는 좋은 방법입니다. Divi의 새로운 배경 마스크 및 패턴 변형 설정은 다양한 방법으로 결합하여 이러한 배경 패턴을 생성할 수 있습니다. 이 게시물에서는 Divi의 배경 마스크 및 패턴 변환 설정을 사용하여 Divi 레이아웃에 대한 흥미로운 배경을 만드는 방법을 살펴보겠습니다.

시작하자.

시사

먼저 데스크톱, 전화 및 각각에 대한 대체 옵션이 있는 각 예를 살펴보겠습니다.

예 1 결과

일반 버전 데스크탑

일반 버전 전화

대체 버전 데스크탑

대체 버전 전화

예 2 결과

일반 버전 데스크탑

일반 버전 전화

대체 버전 데스크탑

대체 버전 전화

예 3 결과

일반 버전 데스크탑

일반 버전 전화

대체 버전 데스크탑

대체 버전 전화

Divi 배경 마스크 및 패턴 변환 옵션

Divi의 새로운 배경 마스크 및 패턴 기능에는 이를 조정할 수 있는 몇 가지 옵션이 있습니다. 조정에는 수평 및 수직 뒤집기, 회전 및 반전이 포함됩니다. 옵션을 보려면 섹션 또는 행의 배경 설정으로 이동하여 배경 패턴 또는 배경 마스크 탭을 선택합니다.

패턴이나 마스크를 추가하면 변형 설정이 나타납니다. 사용하려는 옵션을 클릭하기만 하면 됩니다. 함께 사용할 수 있고 원하는 조합으로 사용할 수 있습니다.

Divi의 마스크 및 패턴 변환 설정 작동 방식

아래 패턴은 기본 설정의 지그재그입니다.

아래 이미지에 레이어 블로그 마스크를 추가했습니다. 이것들을 사용하여 배경 마스크 및 패턴 변환 설정이 작동하는 방식을 보여줍시다.

수평 뒤집기

수평 뒤집기입니다. 패턴과 마스크 모두에 변형 설정을 적용했습니다.

수직 뒤집기

이것은 패턴과 마스크에 대한 수직 뒤집기입니다.

회전

이것은 패턴과 마스크에 대한 회전을 보여줍니다.

반전

이 예는 패턴과 마스크에 대한 반전을 보여줍니다.

배경 마스크 및 패턴 변환 조합

물론 변형 설정을 다양한 조합으로 사용할 수도 있습니다. 다음은 몇 가지 예입니다.

이것은 패턴을 회전시키고 마스크를 반전시킵니다.

이 예에서는 배경 패턴에 수직 뒤집기, 회전 및 반전을 사용합니다. 배경 마스크는 수평 뒤집기, 수직 뒤집기 및 회전을 사용합니다.

이 예에서는 배경 패턴에 수평 뒤집기 및 회전을 사용하고 배경 마스크에 수직 뒤집기 및 회전을 사용했습니다.

배경 마스크 및 패턴 변환 설정 예

다음으로 이러한 설정을 Divi 레이아웃과 함께 사용하는 방법을 살펴보겠습니다. 섹션을 시작점으로 사용하고 세 가지 예를 만듭니다. 스타일을 지정한 다음 변환 설정을 사용하여 각 예제에 대해 변경합니다.

내 예에서는 Divi 내에서 사용할 수 있는 Estate Planning 랜딩 페이지에서 영웅 섹션의 수정된 버전을 사용하고 있습니다. 여기 내 섹션이 있습니다. 수정은 우리의 필요에 따라 영웅 섹션을 단순화합니다. 배경색 배경: #92a5ab를 사용합니다.

• 배경: #92a5ab

배경 마스크 및 패턴 변환 설정 예제 1

첫 번째 예는 화면 중앙에 수직으로 위치한 아치를 제공합니다. 화면의 한 면에는 터프드 패턴이 있습니다. 그런 다음 아치가 다른 방향을 향하는 대체 버전을 만듭니다.

배경 패턴

섹션 설정을 열고 배경 까지 아래로 스크롤한 다음 배경 패턴 탭을 선택합니다. 배경 패턴으로 Tufted를 선택하고 Pattern Transform에 대해 Inverting을 선택합니다.

• 배경 패턴: 터프트
• 패턴 변환: 반전

배경 마스크

배경 마스크 탭을 선택하고 배경 마스크로 아치를 선택합니다. 마스크 색상을 #616d72로 변경하고 마스크 변환을 반전으로 설정합니다. 이것으로 첫 번째 버전의 아치가 술로 완성됩니다.

• 배경 마스크: 아치
• 색상: #616d72
• 마스크 변환: 반전

예 1 변형

다음으로 디자인의 변형을 만들어 보겠습니다. 배경 패턴의 마스크 변환 을 수평 뒤집기 및 수직 뒤집기로 변경하기만 하면 됩니다. 이것은 아치가 다른 방향을 향하도록 변경하고 패턴을 이동하므로 거울 이미지처럼 보이지 않습니다.

• 마스크 변환: 수평 뒤집기, 수직 뒤집기

배경 마스크 및 패턴 변환 설정 예제 2

두 번째 예에서는 타원 내부에 패턴이 있는 화면 중앙에 타원을 만듭니다. 그런 다음 패턴의 위치를 ​​변경합니다. 또한 다른 화면 크기에 맞게 이것을 수정할 것입니다.

배경 패턴

배경 설정에서 배경 패턴 탭을 선택하고 패턴에 대해 Shippo를 선택합니다. 패턴 변환을 반전으로 설정합니다.

• 배경 무늬: 칠보
• 패턴 변환: 반전

배경 마스크

그런 다음 배경 마스크 탭을 선택합니다. 배경 마스크로 Eclipse를 선택하고 배경 옵션 위로 마우스를 가져갑니다. 표시되는 태블릿 아이콘을 선택합니다. 그러면 장치 설정이 열립니다. 바탕 화면 설정의 경우 색상을 #758489로 설정합니다. 마스크 변형에서 수평 뒤집기 및 회전을 선택합니다. 이것으로 데스크탑 버전이 완료됩니다. 모바일 버전으로 변경해 보겠습니다.

• 배경 마스크: 이클립스
• 색상: #758489
• 마스크 변환: 수평 뒤집기, 회전

태블릿 및 전화

태블릿과 휴대폰은 모두 동일한 설정을 사용하므로 태블릿 설정만 변경하면 됩니다. 타블렛 탭 을 선택하고 마스크 변환 을 수평 뒤집기로 변경하십시오.

• 마스크 변환: 수평 뒤집기, 반전

예제 2 변형

다음으로 두 번째 예에 대한 변형을 생성합니다. 먼저 배경 패턴 탭을 선택하고 패턴 색상을 rgba(0,0,0,0.06)로 설정합니다.

• 패턴 색상: rgba(0,0,0,0.06)

그런 다음 배경 마스크 탭을 선택하고 마스크 변환에 대해 수평 뒤집기, 회전 및 반전을 선택합니다.

• 마스크 변환: 수평 뒤집기, 회전, 반전

태블릿 및 전화

태블릿 및 전화 옵션의 경우 태블릿 아이콘을 선택합니다. 마스크 변환 을 수평 뒤집기 및 반전으로 변경합니다. 이제 예제 2의 대체 버전이 완성되었습니다.

• 마스크 변환: 수평 뒤집기, 반전

배경 마스크 및 패턴 변환 설정 예 3

세 번째 마스크 및 패턴 변환 설정 예제에서는 페인트 마스크와 함께 벌집 패턴을 사용합니다. 우리는 또한 이것을 위한 모바일 버전을 만들 것입니다.

배경 패턴

먼저 장치 설정 탭을 선택하고 바탕 화면 아이콘을 선택합니다. 배경 패턴 탭을 선택하고 배경 패턴으로 Honeycomb을 선택합니다. 색상을 rgba(0,0,0,0.42)로 변경합니다. 이 경우 패턴 변환 옵션을 비활성화된 상태로 둡니다. 대체 버전용으로 추가하겠습니다.

• 배경 패턴: 벌집
• 패턴 색상: rgba(0,0,0,0.42)
• 패턴 변환: 없음

배경 마스크

그런 다음 배경 마스크 탭을 선택합니다. 배경 마스크로 페인트를 선택합니다. 색상을 #697b82로 변경합니다. 마스크 변환에 대해 수직 뒤집기를 선택합니다.

• 배경 마스크: 페인트
• 색상: #697b82
• 마스크 변환: 수직 뒤집기

그런 다음 크기로 표지를 선택합니다. 그러면 몇 가지 옵션이 더 열립니다. 위치에 대해 오른쪽 하단을 선택합니다. 데스크탑 버전의 경우입니다. 다음으로 모바일 버전을 생성하겠습니다.

• 크기: 덮개
• 위치: 오른쪽 하단

태블릿 및 전화

그런 다음 태블릿 탭을 선택하고 배경 마스크 변환 을 수직 뒤집기 및 회전으로 변경합니다. 이것으로 세 번째 예제의 스타일 지정이 완료되었습니다. 다음으로 대체 버전을 생성하겠습니다.

• 배경 마스크 변환: 수직 뒤집기, 회전

예 3 변형

이 예제의 대체 버전에서는 배경 패턴과 배경 마스크를 모두 조정할 것입니다.

배경 패턴

배경 패턴 의 경우 패턴 색상을 rgba(0,0,0,0.11)로 변경합니다. 패턴 변환을 수평 뒤집기, 수직 뒤집기 및 회전으로 변경합니다.

• 패턴 색상: rgba(0,0,0,0.11)
• 패턴 변환: 수평 뒤집기, 수직 뒤집기, 회전

배경 마스크

그런 다음 배경 마스크 탭을 선택합니다. 색상을 흰색으로 변경하고 마스크 변환을 수평 뒤집기, 수직 뒤집기 및 반전으로 변경합니다.

• 색상: #ffffff
• 마스크 변환: 수평 뒤집기, 수직 뒤집기, 반전

그런 다음 Mask Size를 Cover로 변경한 다음 Mask Position으로 Center를 선택합니다.

• 마스크 크기: 커버
• 마스크 위치: 중앙

태블릿 및 전화

마지막으로 태블릿 탭을 선택하여 모바일 버전을 만듭니다. 배경 마스크 탭을 선택하고 마스크 변환에 대한 네 가지 옵션을 모두 선택합니다. 이로써 세 번째 예의 대체 버전이 완료되었습니다.

• 배경 마스크 변환: 수평 뒤집기, 수직 뒤집기, 회전, 반전

결과

다음은 데스크탑, 전화 및 각각에 대한 대체 옵션이 있는 각 예를 살펴보겠습니다.

예 1 결과

일반 버전 데스크탑

일반 버전 전화

대체 버전 데스크탑

대체 버전 전화

예 2 결과

일반 버전 데스크탑

일반 버전 전화

대체 버전 데스크탑

대체 버전 전화

예 3 결과

일반 버전 데스크탑

일반 버전 전화

대체 버전 데스크탑

대체 버전 전화

마무리 생각

지금까지 Divi의 배경 마스크 및 패턴 변환 설정을 사용하여 흥미로운 배경 디자인을 많이 만드는 방법을 살펴보았습니다. 패턴과 마스크를 함께 사용할 수 있으므로 변환 설정도 함께 사용할 수 있습니다. 이것은 많은 디자인 옵션을 열어 Divi 배경에 우아함을 더할 수 있는 더 많은 도구를 제공합니다. 그것들을 사용하는 법을 배우는 가장 좋은 방법은 조정을 가지고 놀고 당신이 만들 수 있는 것을 보는 것입니다.

우리는 당신의 의견을 듣고 싶습니다. Divi 레이아웃에서 Divi의 배경 마스크 및 패턴 변환 설정을 사용해 보셨습니까? 의견에 대해 알려주십시오.