배경 마스크 설정과 패턴 변형 옵션을 결합하시겠습니까? Divi 독특한 배경을 만들려면?
배경 디자인은 사이트 웹 시각적 감각과 군중에서 눈에.니다. 의 새로운 배경 마스크 및 패턴 변형 설정 Divi 다양한 방법으로 결합하여 이러한 배경 패턴을 만들 수 있습니다.
이 기사에서는 배경 마스크 및 패턴 변환 설정을 사용하는 방법을 볼 것입니다. Divi 레이아웃에 대한 흥미로운 배경을 만들려면 Divi.
시작하자.
측량
먼저 다양한 화면 크기(휴대폰 및 데스크톱)에서 각 예의 미리보기가 있습니다.
예 1
데스크탑 버전 1
전화 버전 1
지금 DIVI를 다운로드하세요!!!
데스크탑 버전 2
전화 버전 2
예 2
데스크탑 버전 1
전화 버전 1
지금 DIVI를 다운로드하세요!!!
데스크탑 버전 2
전화 버전 2
예 3
데스크탑 버전 1
전화 버전 1
지금 DIVI를 다운로드하세요!!!
데스크탑 버전 2
전화 버전 2
Divi 배경 마스크 및 패턴 변환 옵션
Divi의 새로운 마스크 및 배경 패턴 기능에는 이를 조정할 수 있는 몇 가지 옵션이 있습니다. 조정에는 수평 및 수직 뒤집기, 회전 및 반전이 포함됩니다. 옵션을 보려면 섹션 또는 라인의 배경 설정으로 이동하여 배경 패턴 또는 배경 마스크 탭을 선택하세요.
패턴이나 마스크를 추가하면 변형 설정이 나타납니다. 사용하려는 옵션을 클릭하기만 하면 됩니다. 함께 사용할 수 있고 원하는 조합으로 사용할 수 있습니다.
Divi의 마스크 및 패턴 변환 설정 작동 방식
아래 패턴은 기본 설정의 지그재그입니다.
아래 이미지에 레이어 블로그 마스크를 추가합니다. 이를 사용하여 배경 마스크 및 패턴 변환 설정이 작동하는 방식을 보여 드리겠습니다.
수평 뒤집기
수평반전입니다. 패턴과 마스크 모두에 변형 설정을 적용했습니다.
수직 뒤집기
이것은 패턴과 마스크의 수직 반전입니다.
회전
이것은 패턴과 마스크에 대한 회전을 보여줍니다.
역전
이 예는 패턴 및 마스크에 대한 반전을 보여줍니다.
배경 마스크 및 패턴 변환 조합
물론 다양한 조합으로 변형 매개변수를 사용할 수도 있습니다. 여기 몇 가지 예가 있어요.
그러면 패턴이 회전하고 마스크가 반전됩니다.
이 예에서는 배경 패턴에 수직 뒤집기, 회전 및 반전을 사용합니다. 배경 마스크는 수평 뒤집기, 수직 뒤집기 및 회전을 사용합니다.
이 예에서는 배경 패턴에 수평 뒤집기 및 회전을 사용하고 배경 마스크에 수직 뒤집기 및 회전을 사용했습니다.
배경 마스크 및 패턴 변환 설정의 예
다음으로 이러한 설정을 Divi 레이아웃과 함께 사용하는 방법을 살펴보겠습니다. 한 섹션을 시작점으로 사용하고 세 가지 예를 만듭니다. 이를 사용자 정의한 다음 변환 설정을 사용하여 각 예제에 대해 수정합니다.
우리의 예에서는 레이아웃 랜딩 페이지의 영웅 섹션의 수정된 버전을 사용하고 있습니다. 부동산 기획 디비에서 사용 가능합니다.
다음은 해당 섹션의 개요입니다. 배경색을 사용합니다: #92a5ab.
- 배경: #92a5ab
배경 마스크 및 패턴 변환 매개변수 예 1
첫 번째 예는 화면 중앙에 수직으로 위치한 아치를 제공합니다. 화면의 한 면에는 터프드 패턴이 있습니다. 다음으로 호가 다른 방향을 향하는 대체 버전을 생성합니다.
배경 무늬
섹션 설정을 열고 아래로 스크롤하여 배경 탭을 선택하고 배경 패턴입니다. 배경 패턴으로 Tufted를 선택하고 Pattern Transform에 대해 Inverting을 선택합니다.
- 배경 패턴: 터프티드
- 패턴 변환: 반전
배경 마스크
탭 선택 배경 마스크 선택하고 아치 배경 마스크의 경우. 마스크 색상을 #616d72로 변경하고 마스크 변환을 반전으로 설정합니다. 이것으로 술이 있는 활의 첫 번째 버전이 완성됩니다.
- 배경 마스크: 아치
- 마스크 색상: #616d72
- 마스크 변환: 반전
실시예 1 버전 2
다음으로 디자인의 변형을 만들어 보겠습니다. 수정하면 됩니다 마스크 변환 수평 뒤집기 및 수직 뒤집기의 배경 패턴용. 이렇게 하면 아치가 다른 방향을 향하도록 변경되고 패턴이 오프셋되어 거울 이미지처럼 보이지 않습니다.
- 마스크 변환: 수평 뒤집기, 수직 뒤집기
배경 마스크 및 패턴 변환 매개변수 예 2
두 번째 예에서는 타원 내부에 패턴이 있는 화면 중앙에 타원을 만듭니다. 다음으로 패턴의 위치를 변경합니다. 우리는 또한 다른 화면 크기에 대해 이것을 수정할 것입니다.
배경 무늬
배경 설정에서 탭을 선택하십시오. 배경 무늬 선택하고 시포 동기를 위해. 패턴 변환을 반전으로 설정합니다.
- 패턴 배경: 칠보
- 패턴 변환: 반전
배경 마스크
그런 다음 탭을 선택하십시오. 배경 마스크 다음 설정을 변경합니다.
- 배경 마스크: 타원
- 색상: #758489
- 마스크 변환: 수평 뒤집기, 회전
태블릿 및 전화
태블릿과 휴대폰 모두 동일한 설정을 사용하므로 태블릿 설정만 변경하면 됩니다. 선택 태블릿 탭 그리고 수정 마스크 변형 수평 반전에서.
- 마스크 변환: 수평 뒤집기, 반전
실시예 2 버전 2
다음으로 두 번째 예에 대한 변형을 생성합니다. 먼저 탭을 선택하십시오. 배경 무늬 패턴 색상을 rgba(0,0,0,0.06)로 설정합니다.
- 패턴 색상: rgba(0,0,0,0.06)
그런 다음 탭을 선택하십시오. 배경 마스크 마스크 변환에 대해 Flip Horizontal, Rotate 및 Invert를 선택합니다.
- 마스크 변환: 수평 뒤집기, 회전, 반전
태블릿 및 전화
태블릿 및 전화 옵션의 경우 아이콘을 선택합니다. 태블릿 . 수정 마스크 변형 수평 반전 및 반전. 예제 XNUMX의 대체 버전이 이제 완성되었습니다.
- 마스크 변환: 수평 뒤집기, 반전
배경 마스크 및 패턴 변환 매개변수 예 3
마스크 및 패턴 변환 설정의 세 번째 예에서는 페인트 마스크와 함께 벌집 패턴을 사용합니다. 우리는 또한 이것을 위한 모바일 버전을 만들 것입니다.
배경 무늬
먼저 장치 설정 탭을 선택하고 장치 아이콘을 선택합니다. 사무실. 탭 선택 배경 무늬 배경 패턴으로 Honeycomb를 선택합니다. 색상을 rgba(0,0,0,0.42)로 변경합니다. 이것을 위해 우리는 옵션을 떠날 것입니다 패턴 변환 비활성화되었습니다. 우리는 그것들을 대체 버전에 추가할 것입니다.
- 배경 패턴: 벌집
- 패턴 색상: rgba(0,0,0,0.42)
- 패턴 변환: 없음
배경 마스크
그런 다음 탭을 선택하십시오. 배경 마스크. 선택 페인트 배경 마스크의 경우. 색상을 #697b82로 변경합니다. 마스크 변환에 대해 수직 뒤집기를 선택합니다.
- 배경 마스크: 페인트
- 마스크 색상: #697b82
- 마스크 변환: 수직 뒤집기
그런 다음 덮개 크기를 위해. 이것은 몇 가지 더 많은 옵션을 엽니다. 선택하다 오른쪽 아래 위치를 위해. 데스크탑 버전의 경우입니다. 다음으로 모바일 버전을 만들어 보겠습니다.
- 마스크 크기: 커버
- 마스크 위치: 오른쪽 하단
태블릿 및 전화
그런 다음 탭을 선택하십시오. 태블릿의 변형을 수정합니다. 마스크 수직 플립 및 회전의 배경입니다. 이로써 세 번째 예의 스타일이 완성되었습니다. 다음으로 대체 버전을 생성하겠습니다.
- 마스크 변환: 수직 뒤집기, 회전
실시예 3 버전 2
이 예제의 대체 버전에서는 배경 패턴과 배경 마스크를 모두 조정할 것입니다.
배경 무늬
배경 패턴의 경우 패턴 색상을 rgba(0,0,0,0.11)로 변경합니다. 패턴 변환을 가로 뒤집기, 세로 뒤집기, 회전으로 변경합니다.
- 마스크 색상: rgba(0,0,0,0.11)
- 마스크 변환: 수평 뒤집기, 수직 뒤집기, 회전
배경 마스크
그런 다음 탭을 선택하십시오. 배경 마스크. 색상을 흰색으로 변경하고 마스크를 수평 뒤집기, 수직 뒤집기 및 반전으로 변환합니다.
- 마스크 색상: #ffffff
- 마스크 변환: 수평 뒤집기, 수직 뒤집기, 반전
그런 다음 덮을 마스크의 크기를 변경한 다음 마스크의 위치로 가운데를 선택합니다.
- 마스크 크기: 커버
- 마스크 위치: 중앙
태블릿 및 전화
마지막으로 탭 선택 했던 Tablette 모바일 버전을 생성합니다. 탭 선택 배경 마스크 XNUMX개의 마스크 변형 옵션을 선택합니다. 이로써 세 번째 예의 대체 버전이 완료되었습니다.
- 마스크 변환: 수평 뒤집기, 수직 뒤집기, 회전, 반전
최종 결과
다음은 다양한 화면 크기(데스크톱 및 전화)에 대한 각 예의 개요입니다.
예 1
데스크탑 버전 1
전화 버전 1
데스크탑 버전 2
전화 버전 2
예 2
데스크탑 버전 1
전화 버전 1
데스크탑 버전 2
전화 버전 2
예 3
데스크탑 버전 1
전화 버전 1
데스크탑 버전 2
전화 버전 2
지금 DIVI를 다운로드하세요!!!
또한보십시오: Divi: 팀원 섹션을 캐러셀로 만드는 방법
결론
이것은 Divi의 배경 마스크 및 패턴 변환 설정을 사용하여 많은 흥미로운 배경 패턴을 만드는 방법을 살펴봅니다.
패턴과 마스크를 함께 사용할 수 있으므로 변환 설정도 함께 사용할 수 있습니다. 이것은 많은 디자인 옵션을 열어 더 많은 것을 제공합니다.도구 Divi 배경에 우아함을 더합니다.
그것들을 사용하는 방법을 배우는 가장 좋은 방법은 조정을 가지고 놀고 당신이 만들 수 있는 것을 보는 것입니다.
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
