의 패턴 혼합 모드를 사용하여 독특한 배경 이미지를 만들고 싶습니까? Divi ?
내장된 배경 패턴 설정 Divi 눈길을 끄는 디자인을 만들고 배경 이미지에 스타일을 추가할 수 있습니다. 사이트 웹. 혼합 모드 설정을 사용하여 패턴이 배경 이미지와 혼합되는 방식을 미세 조정할 수 있습니다.
이 튜토리얼에서는 페이지의 배경 이미지에 패턴 혼합 모드를 추가하는 방법에 대한 몇 가지 예를 보여 드리겠습니다. 그들을 따라 이 룩을 직접 재현하거나 영감으로 사용하여 나만의 맞춤형 디자인을 만드십시오.
시작하자!
측량
다음은 이 튜토리얼에서 디자인할 내용의 미리보기입니다.
첫 번째 레이아웃
두 번째 레이아웃
세 번째 레이아웃
Divi 배경 이미지에서 패턴 혼합 모드를 사용하는 방법
미리 정의된 레이아웃으로 새 페이지 만들기
라이브러리에서 미리 정의된 레이아웃을 사용하여 시작하겠습니다. Divi. 이 디자인에서는 다음을 사용합니다. « 마리나 랜딩 페이지 부터 마리나 레이아웃 팩 .
귀하의 페이지에 새 페이지를 추가하십시오. 사이트 웹 제목을 지정한 다음 Divi Builder 사용 옵션을 선택하십시오.
이 예에서는 Divi 라이브러리에서 미리 만들어진 레이아웃을 사용하므로 다음을 선택합니다. 레이아웃 찾아보기.
레이아웃 찾기 및 선택 마리나 랜딩 페이지.
선택 이 레이아웃 사용 페이지에 레이아웃을 추가합니다.
이제 디자인할 준비가 되었습니다.
첫 번째 레이아웃
첫 번째 디자인의 경우 첫 번째 헤더 이미지에 갈매기 모양 패턴을 추가합니다. 이것은 헤더에 시각적인 흥미를 더할 것입니다.
우리가 적용할 블렌딩 모드로 인해 패턴이 더 미묘하고 배경 이미지를 볼 수 있습니다.
먼저 섹션 설정을 열고 섹션으로 이동하십시오. 배경. 탭을 클릭하십시오 배경 무늬 선택하고 배경 패턴 추가.
다음으로 패턴 유형을 선택합니다. 보시다시피 선택할 수 있는 다양한 템플릿이 있으며 아래 템플릿 설정을 통해 모두 추가로 사용자 지정할 수 있습니다.
- 패턴 종류: 거꾸로 된 헤링본 2
"패턴 혼합" 모드 추가
마지막으로 패턴의 혼합 모드를 설정합니다. 블렌딩 모드를 사용하겠습니다. 부드러운 빛 이 예의 경우. 이 혼합 모드는 패턴을 더 미묘하게 만들어 배경 이미지를 방해하지 않습니다.
- 패턴 혼합 모드: 소프트 라이트
결과
다음은 첫 번째 예제의 최종 디자인입니다.
다음은 모바일 버전입니다.
두 번째 레이아웃
두 번째 레이아웃의 경우 페이지의 해상 테마와 잘 어울리는 배경 이미지와 그라디언트 위에 물결 모양 패턴을 사용합니다.
먼저 섹션으로 이동합니다. "작동 방식" 섹션 설정을 엽니다.
설정 열기 배경을 탭한 다음 탭을 선택하십시오. 배경 무늬그리고 클릭 배경 패턴 추가.
이 디자인의 경우 패턴 유형을 사용합니다. 파도.
- 패턴 종류: 파도
그런 다음 패턴 색상을 흰색으로 변경합니다.
- 패턴 색상: #FFFFFF
패턴 혼합 모드 추가
이제 패턴에 혼합 모드를 추가할 수 있습니다. 패턴 혼합 모드를 다음으로 설정합니다. 오버레이.
발견 : Divi: "전각 메뉴" 모듈의 바구니 및 검색 아이콘을 사용자 정의하는 방법
이 혼합 모드는 배경 이미지의 어두운 색상을 어둡게 하고 밝은 색상을 밝게 합니다.
- 패턴 혼합 모드: 오버레이
결과
섹션에 적용된 두 번째 예제의 최종 결과는 다음과 같습니다. "작동 방식".
그리고 여기 모바일 버전이 있습니다.
세 번째 레이아웃
세 번째 레이아웃을 시작하겠습니다.
이 레이아웃의 경우 " 클릭 유도 문안 (call to action)".
섹션 설정을 열고 섹션으로 이동하여 시작합니다. 배경. 탭을 클릭하십시오 배경 무늬을 선택한 다음 배경 패턴 추가.
패턴 선택 대각선 줄무늬.
다음으로 패턴 색상을 설정합니다.
- 패턴 색상: rgba(255,255,255,0.25)
변형 패턴 설정을 사용하여 패턴을 수평으로 뒤집습니다. 이것은 패턴을 원하는 대로 미세 조정하는 데 도움이 되는 또 다른 매개변수입니다.
- 패턴 변환: 수평
패턴 혼합 모드 추가
마지막으로 패턴의 혼합 모드를 설정합니다. 이 디자인에서는 혼합 모드를 사용할 것입니다. 밝기.
다음에 대한 가이드를 읽어보십시오. Divi: "그라디언트 빌더"를 사용하여 이미지를 아름답게 하는 방법
이것은 우리의 패턴 색상과 결합되어 사진이 비쳐 보이도록 하면서 이미지에 밝은 화면을 추가합니다. 이 디자인에서는 패턴이 독특한 대비를 추가하여 배의 이미지가 배경에서 더 두드러집니다.
- 패턴 혼합 모드: 광도
결과
이 섹션의 최종 디자인은 다음과 같습니다.
그리고 여기 모바일 버전이 있습니다.
최종 결과
이제 패턴 혼합 모드를 사용하여 전체 페이지 디자인을 살펴보겠습니다.
지금 DIVI를 다운로드하세요!!!
결론
패턴을 추가하면 배경 이미지에 시각적인 흥미를 더하는 좋은 방법이 될 수 있지만 때로는 패턴이 배경 이미지를 압도할 수 있습니다. 다행히 Divi에는 다양한 혼합 모드가 있으므로 원하는 만큼 패턴을 사용자 지정할 수 있습니다.
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.
주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
