Divi에서 그라디언트 배경을 배경 이미지 마스크로 사용하는 방법

Photoshop과 같은 이미지 편집 소프트웨어에 익숙하다면 마스크에도 익숙할 것입니다. 마스크는 두 개의 레이어를 결합하고 독특한 결과를 만드는 데 도움이 됩니다. Divi를 사용하면 배경 이미지와 함께 그라데이션 배경을 사용하여 페이지 내부에 창의력을 발휘하고 고유한 종류의 마스크를 만들 수 있습니다. 이 튜토리얼에서는 작업 중인 모든 종류의 디자인에 대해 8가지 배경 마스크를 만드는 방법을 단계별로 보여줍니다. 이 튜토리얼은 이미지 편집 소프트웨어를 전혀 건드릴 필요 없이 페이지를 빠르게 디자인 조정할 수 있도록 도와줍니다.

가자!

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 간단히 살펴보겠습니다.

만들기 시작합시다!

YouTube 채널 구독

새 섹션 추가

간격

페이지에 새 섹션을 추가하고 섹션 설정을 열고 사용자 정의 상단 및 하단 패딩을 추가하십시오.

• 상단 패딩: 150px
• 하단 패딩: 150px

새 행 추가

열 구조

다음 열 구조를 사용하여 새 행을 계속 추가합니다.

#1에 Blurb 모듈 추가

콘텐츠 추가

모듈 추가를 시작할 시간입니다! 총 8개의 Blurb 모듈이 필요합니다. 첫 번째 것부터 시작하여 일반적인 변경을 수행하고 각 Blurb 모듈을 고유하게 변경하기 전에 7번 복제합니다. 첫 번째 열에 새 Blurb 모듈을 추가하고 선택한 콘텐츠를 추가합니다.

텍스트 설정

디자인 탭으로 이동하여 다음 텍스트 설정을 변경합니다.

• 텍스트 방향: 중앙
• 텍스트 색상: 어두운

제목 텍스트 설정

제목 텍스트 설정도 열고 주변을 변경하십시오.

• 제목 글꼴: Antic Didone
• 제목 텍스트 크기: 23px
• 제목 줄 높이: 1.5em

박스 섀도우

마지막으로 Blurb Module에도 미묘한 상자 그림자를 추가합니다.

• 상자 그림자 흐림 강도: 80px
• 상자 그림자 확산 강도: -10px
• 그림자 색상: rgba(0,0,0,0.3)

Blurb 모듈을 7번 복제하고 두 번째 열에 4개의 복제물 배치

전체 변경 사항을 모두 적용했으면 Blurb 모듈을 7번 복제할 수 있습니다. 행의 두 번째 열에 4개의 복제물을 배치하고 첫 번째 열에 3개를 남겨둡니다.

Blurb 모듈 #1 수정

그라데이션 배경

이제 Blurb 모듈 각각에 고유한 설정을 추가할 수 있습니다. 1열에서 첫 번째 Blurb 모듈을 열고 여기에 그라디언트 배경을 추가합니다.

• 색상 1: rgba(255,255,255,0)
• 색상 2: #ffffff
• 그라디언트 유형: 방사형
• 방사형 방향: 하단
• 시작 위치: 45%
• 최종 위치: 45%
• 배경 이미지 위에 그라디언트 배치: 예

배경 이미지

그라디언트 배경을 추가한 후에는 배경 이미지도 추가하고 다음 배경 설정과 결합할 수 있습니다.

• 배경 이미지 위치: 상단 중앙
• 배경 이미지 반복: 반복 없음

간격

마지막으로 모든 것이 제자리에 들어갈 수 있도록 사용자 지정 패딩을 추가합니다.

• 상단 패딩: 100px
• 하단 패딩: 350px
• 왼쪽 패딩: 50px
• 오른쪽 패딩: 50px

블러브 모듈 #2 수정

그라데이션 배경

다음 Blurb 모듈(두 번째 열의 첫 번째 모듈)로 이동하여 그라데이션 배경을 추가해 보겠습니다.

• 색상 1: rgba(255,255,255,0)
• 색상 2: #ffffff
• 그라디언트 유형: 방사형
• 방사형 방향: 오른쪽 상단
• 시작 위치: 45%
• 최종 위치: 45%
• 배경 이미지 위에 그라디언트 배치: 예

배경 이미지

아래 배경 설정과 결합된 배경 이미지를 추가하여 계속하십시오.

• 배경 이미지 위치: 오른쪽 상단
• 배경 이미지 반복: 반복 없음

간격

그리고 간격 설정에서 사용자 지정 패딩 값을 추가하여 디자인을 완성합니다.

• 상단 패딩: 350px
• 하단 패딩: 100px
• 왼쪽 패딩: 50px
• 오른쪽 패딩: 200px(데스크톱 및 태블릿), 50px(전화)

블러브 모듈 #3 수정

그라데이션 배경

세 번째 Blurb Module(첫 번째 열의 두 번째 Blurb 모듈)로 이동합니다. 설정을 열고 그라디언트 배경을 추가합니다.

• 색상 1: rgba(255,255,255,0)
• 색상 2: #ffffff
• 그라디언트 유형: 방사형
• 방사형 방향: 왼쪽 상단
• 시작 위치: 45%
• 최종 위치: 45%
• 배경 이미지 위에 그라디언트 배치: 예

배경 이미지

다음에 배경 이미지를 추가하여 계속하십시오.

• 배경 이미지 위치: 왼쪽 상단
• 배경 이미지 반복: 반복 없음

간격

그리고 모듈에 맞춤 패딩을 추가하여 모양을 취합니다.

• 상단 패딩: 350px
• 하단 패딩: 100px
• 왼쪽 패딩: 200px(데스크톱 및 태블릿), 50px(전화)
• 오른쪽 패딩: 50px

블러브 모듈 #4 수정

그라데이션 배경

두 번째 열의 두 번째 모듈로 이동합니다! Blurb 모듈의 설정을 열고 그라디언트 배경을 추가합니다.

• 색상 1: rgba(255,255,255,0)
• 색상 2: #ffffff
• 그라디언트 유형: 방사형
• 방사형 방향: 상단
• 시작 위치: 45%
• 최종 위치: 45%
• 배경 이미지 위에 그라디언트 배치: 예

배경 이미지

다음에 배경 이미지를 추가하여 계속하십시오.

• 배경 이미지 위치: 상단 중앙
• 배경 이미지 반복: 반복 없음

간격

그리고 간격 설정에서 사용자 지정 패딩 값을 추가하여 디자인을 완성합니다.

• 상단 패딩: 350px
• 하단 패딩: 100px
• 왼쪽 패딩: 50px
• 오른쪽 패딩: 50px

블러브 모듈 #5 수정

그라데이션 배경

첫 번째 열의 세 번째 모듈인 다음 모듈로 이동합니다. 모듈을 열고 그라데이션 배경을 추가합니다.

• 색상 1: rgba(255,255,255,0)
• 색상 2: #ffffff
• 그라디언트 유형: 방사형
• 방사형 방향: 왼쪽
• 시작 위치: 35%
• 최종 위치: 35%
• 배경 이미지 위에 그라디언트 배치: 예

배경 이미지

다음 배경 설정과 함께 배경 이미지를 추가하여 계속하십시오.

• 배경 이미지 위치: 왼쪽 상단
• 배경 이미지 반복: 반복 없음

간격

또한 간격 설정에서 사용자 지정 패딩 값을 추가합니다.

• 상단 패딩: 100px
• 하단 패딩: 100px
• 왼쪽 패딩: 240px(데스크톱 및 태블릿), 150px(전화)
• 오른쪽 패딩: 50px(데스크톱 및 태블릿), 20px(전화)

블러브 모듈 #6 수정

그라데이션 배경

두 번째 열의 세 번째 모듈로 이동합니다! 설정을 열고 그라디언트 배경을 추가합니다.

• 색상 1: rgba(255,255,255,0)
• 색상 2: #ffffff
• 그라디언트 유형: 선형
• 기울기 방향: 140deg
• 시작 위치: 60%
• 최종 위치: 60%
• 배경 이미지 위에 그라디언트 배치: 예

배경 이미지

다음에 일치하는 배경 설정으로 배경 이미지를 추가합니다.

• 배경 이미지 위치: 상단 중앙
• 배경 이미지 반복: 반복 없음

간격

그리고 간격 설정에서 몇 가지 사용자 정의 패딩 값을 사용하여 디자인을 완성합니다.

• 상단 패딩: 100px
• 하단 패딩: 350px
• 왼쪽 패딩: 50px
• 오른쪽 패딩: 200px(데스크톱 및 태블릿), 50px(태블릿)

블러브 모듈 #7 수정

그라데이션 배경

열 1의 다음 Blurb 모듈은 다음 그라데이션 배경을 사용합니다.

• 색상 1: rgba(255,255,255,0)
• 색상 2: #ffffff
• 그라디언트 유형: 선형
• 기울기 방향: 220deg
• 시작 위치: 60%
• 최종 위치: 60%
• 배경 이미지 위에 그라디언트 배치: 예

배경 이미지

배경 이미지도 추가하십시오.

• 배경 이미지 위치: 상단 중앙
• 배경 이미지 반복: 반복 없음

간격

그리고 간격 설정에서 필요한 사용자 지정 패딩 값을 추가합니다.

• 상단 패딩: 100px
• 하단 패딩: 350px
• 왼쪽 패딩: 200px(데스크톱 및 태블릿), 50px(전화)
• 오른쪽 패딩: 50px

블러브 모듈 #8 수정

그라데이션 배경

마지막 Blurb 모듈로! 설정을 열고 그라디언트 배경을 추가합니다.

• 색상 1: rgba(255,255,255,0)
• 색상 2: #ffffff
• 그라디언트 유형: 방사형
• 방사형 방향: 오른쪽
• 시작 위치: 35%
• 최종 위치: 35%
• 배경 이미지 위에 그라디언트 배치: 예

배경 이미지

다음에 배경 이미지를 업로드합니다.

• 배경 이미지 위치: 왼쪽 상단
• 배경 이미지 반복: 반복 없음

간격

그리고 모듈의 간격 설정에 사용자 정의 패딩을 추가하여 디자인과 튜토리얼을 마칩니다.

• 상단 패딩: 100px
• 하단 패딩: 100px
• 왼쪽 패딩: 50px(데스크톱 및 태블릿), 20px(전화)
• 오른쪽 패딩: 240px(데스크톱 및 태블릿), 170px(전화)

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에서 결과를 최종적으로 살펴보겠습니다.

마지막 생각들

이 튜토리얼에서는 Divi의 기본 제공 옵션으로 창의력을 발휘하는 방법을 보여주었습니다. 더 구체적으로 말하면 방사형 배경과 배경 이미지를 사용하여 배경 마스크를 만들었습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!