Divi 배경 이미지에서 패턴 혼합 모드를 사용하는 방법

Divi의 내장 배경 패턴 설정을 사용하면 시선을 사로잡는 디자인을 만들고 웹사이트의 배경 이미지에 약간의 감각을 더할 수 있습니다. 혼합 모드 설정을 사용하여 패턴이 배경 이미지와 혼합되는 방식을 미세 조정할 수 있습니다. 배경 이미지, 패턴 및 혼합 모드를 결합하여 레이아웃에 대한 고유한 배경 및 디자인 요소를 만듭니다. 선택할 수 있는 24개의 패턴과 16개의 블렌드 모드, 패턴의 모양을 미세 조정하는 데 사용할 수 있는 다른 모든 설정은 말할 것도 없고 하늘이 배경 디자인의 한계입니다!

이 자습서에서는 페이지의 배경 이미지에 패턴 혼합 모드를 추가하는 방법에 대한 몇 가지 예를 보여줍니다. 따라하면서 이러한 룩을 직접 재현하거나 영감을 받아 나만의 맞춤 디자인을 만들 수 있습니다.

시작하자!

엿보기

다음은 이 튜토리얼에서 디자인할 내용의 미리보기입니다.

첫 번째 레이아웃

두 번째 레이아웃

세 번째 레이아웃

시작하는 데 필요한 것

시작하기 전에 Divi 테마를 설치 및 활성화하고 웹사이트에 최신 버전의 Divi가 있는지 확인하세요.

자, 시작하겠습니다!

Divi 배경 이미지에서 패턴 혼합 모드를 사용하는 방법

미리 만들어진 레이아웃으로 새 페이지 만들기

Divi 라이브러리에서 미리 만들어진 레이아웃을 사용하여 시작하겠습니다. 이 디자인에서는 Marina Layout Pack의 Marina 방문 페이지를 사용합니다.

웹사이트에 새 페이지를 추가하고 제목을 지정한 다음 Divi Builder 사용 옵션을 선택합니다.

이 예에서는 Divi 라이브러리에서 미리 만들어진 레이아웃을 사용하므로 레이아웃 찾아보기를 선택합니다.

마리나 랜딩 페이지 레이아웃을 검색하여 선택합니다.

이 레이아웃 사용을 선택하여 페이지에 레이아웃을 추가합니다.

이제 디자인을 만들 준비가 되었습니다.

첫 번째 레이아웃

첫 번째 디자인의 경우 첫 번째 헤더 이미지에 갈매기 모양 패턴을 추가합니다. 이것은 헤더에 시각적인 흥미를 더할 것입니다. 우리가 적용할 블렌드 모드 때문에 패턴이 더 미묘하고 여전히 배경 이미지를 볼 수 있습니다.

먼저 섹션 설정을 열고 배경 섹션으로 이동합니다. 패턴 탭을 클릭하고 배경 패턴 추가를 선택합니다.

다음으로 패턴 유형을 선택합니다. 보시다시피 선택할 수 있는 다양한 패턴이 있으며 아래 패턴 설정으로 모두 추가로 사용자 지정할 수 있습니다.

• 패턴 유형: 거꾸로 된 갈매기 모양 2

패턴 혼합 모드 추가

마지막으로 패턴 혼합 모드를 설정합니다. 이 헤더에는 Soft Light 혼합 모드를 사용합니다. 이 혼합 모드는 패턴을 더 미묘하게 만들어 배경 이미지에 방해가 되지 않습니다.

• 패턴 혼합 모드: 소프트 라이트

최종 디자인

다음은 첫 번째 레이아웃의 최종 디자인입니다.

다음은 이 디자인의 모바일 보기입니다.

두 번째 레이아웃

두 번째 레이아웃의 경우 Marina 랜딩 페이지 레이아웃의 작동 방식 섹션에 패턴을 추가합니다. 페이지의 해상 테마와 잘 어울리는 배경 이미지와 그라디언트에 웨이브 패턴을 겹쳐 사용합니다. 시작하자.

먼저 작동 방식 섹션으로 이동하여 섹션 설정을 엽니다. 배경 설정을 열고 패턴 탭을 선택한 다음 배경 패턴 추가를 클릭합니다.

이 디자인에서는 Waves 패턴 유형을 사용합니다.

• 패턴 종류: 파도

그런 다음 패턴 색상을 흰색으로 변경합니다.

• 패턴 색상: #FFFFFF

패턴 혼합 모드 추가

이제 패턴에 혼합 모드를 추가할 수 있습니다. 패턴 혼합 모드를 오버레이로 설정합니다. 이 혼합 모드는 배경 이미지의 어두운 색상을 더 어둡게 만들고 밝은 색상을 더 밝게 만듭니다. 이 섹션에 블렌드 모드를 추가하면 흰색 물결 패턴이 파란색 음영으로 변하여 이 페이지의 디자인과 잘 어울리는 흥미로운 패턴 효과를 만듭니다.

• 패턴 혼합 모드: 오버레이

최종 디자인

작동 방식 섹션의 최종 디자인은 다음과 같습니다.

그리고 여기 모바일 디자인이 있습니다.

세 번째 레이아웃

세 번째 레이아웃을 시작하겠습니다. 이 레이아웃의 경우 "최고 수준의 보안 및 수리" 섹션의 배경에 불투명한 대각선 줄무늬를 추가합니다.

섹션 설정을 열고 배경 섹션으로 이동하여 시작합니다. 패턴 탭을 클릭한 다음 배경 패턴 추가를 선택합니다.

대각선 줄무늬 패턴을 선택합니다.

다음으로 패턴 색상을 설정합니다.

• 패턴 색상: rgba(255,255,255,0.25)

패턴 변환 설정을 사용하여 패턴을 수평으로 뒤집습니다. 이것은 패턴을 원하는 대로 미세 조정하는 데 도움이 되는 또 다른 설정입니다.

• 패턴 변환: 수평

패턴 혼합 모드 추가

마지막으로 패턴 혼합 모드를 설정합니다. 이 디자인에서는 광도 혼합 모드를 사용합니다. 이것은 패턴 색상과 결합하여 이미지에 밝은 화면을 추가하지만 여전히 사진을 통해 볼 수 있습니다. 이 디자인에서는 패턴이 독특한 대비를 추가하여 배의 이미지가 배경에서 더 두드러집니다.

• 패턴 혼합 모드: 광도

최종 디자인

다음은 이 섹션의 최종 디자인입니다.

그리고 여기 이 섹션의 모바일 디자인이 있습니다.

최종 결과

이제 패턴 혼합 모드를 사용하여 페이지의 전체 디자인을 살펴보겠습니다.

마지막 생각들

패턴을 추가하면 배경 이미지에 시각적인 흥미를 더하는 좋은 방법이 될 수 있지만 때로는 패턴이 배경 이미지를 압도할 수 있습니다. 또는 패턴 색상이 뒤에 있는 이미지에 따라 변경되기를 원할 수도 있습니다. 고맙게도 Divi에는 다양한 혼합 모드가 있어 원하는 만큼 패턴을 사용자 지정할 수 있습니다. 다양한 패턴 조합, 혼합 모드, 패턴 색상, 패턴 크기 및 더 많은 Divi 설정을 사용하여 배경 이미지를 위한 완전히 독특한 디자인을 만들 수 있습니다.

이 튜토리얼을 통해 웹사이트 디자인에 몇 가지 패턴을 통합하고 혼합 모드를 사용할 수 있기를 바랍니다! 패턴을 사용하는 다른 디자인 자습서의 경우 이 자습서를 확인하여 미묘한 배경 패턴 마스크를 만드는 방법을 배우십시오. Divi와 함께 사용할 수 있는 다양한 필터, 효과 및 혼합 모드에 대한 개요는 다음 문서를 참조하십시오. 1부 및 2부. 이전에 배경 이미지에 Divi의 패턴 및 혼합 모드를 사용한 적이 있습니까? 댓글로 알려주세요!