Divi의 배경 패턴 및 마스크 옵션으로 고유한 CTA를 만드는 방법

Divi의 새로운 배경 패턴 및 마스크 옵션을 사용하면 웹사이트에서 시선을 사로잡는 독특한 클릭 유도문안(CTA) 섹션을 쉽게 만들 수 있습니다. 이미지, 그라디언트, 패턴 및 마스크를 다양한 사용자 정의 옵션과 결합하여 방문자의 관심을 끌 수 있는 독특한 배경 디자인을 만들 수 있습니다.

이 튜토리얼에서는 Divi의 새로운 배경 패턴 및 마스크 옵션을 사용하여 고유한 CTA 섹션을 만드는 방법을 보여줍니다.

시작하자!

엿보기

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

시작하는 데 필요한 것

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

뛰어들어봅시다.

Divi의 배경 패턴 및 마스크 옵션으로 고유한 CTA를 만드는 방법

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

튜토리얼에서는 Divi 라이브러리에서 미리 만들어진 레이아웃을 사용합니다. 이 디자인에서는 Ice Cream Shop 레이아웃 팩의 Ice Cream Shop 방문 페이지를 사용합니다.

새 페이지를 만들고 제목을 추가한 다음 Divi Builder 사용 옵션을 선택합니다.

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

아이스크림 가게 랜딩 페이지 레이아웃을 검색하여 선택합니다.

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

이제 디자인을 구축할 준비가 되었습니다.

배경 패턴 및 마스크 레이아웃 수정

이 레이아웃에서 월별 CTA 섹션의 풍미를 수정할 것입니다. 배경 패턴과 마스크 디자인에 대한 레이아웃을 약간 변경해 보겠습니다.

행 설정

행 설정을 연 다음 디자인을 선택합니다.

크기 조정에서 열 높이를 동일화합니다.

• 열 높이 균등화: 예

간격에서 상단 패딩을 제거하여 원뿔을 섹션 상단으로 가져옵니다.

• 상단 패딩: 0px

열 1 설정

행 설정의 콘텐츠 탭에서 열 1 설정을 선택합니다. 배경에서 주황색 배경을 삭제합니다.

2열 설정

이제 열 2 설정을 선택합니다. 원래 디자인에는 필요하지 않은 간격이 있으므로 제거합시다. 디자인에서 간격으로 이동하여 상단 패딩을 삭제합니다.

그런 다음 고급을 선택하고 "이달의 맛" 텍스트가 세로 중앙에 오도록 다음 사용자 정의 CSS를 기본 요소에 추가합니다.

margin:auto;

섹션 설정

섹션 설정을 엽니다. 디자인에서 패딩을 선택합니다. 상단 원뿔이 페이지의 맨 위에 정렬되도록 섹션 패딩을 조정합니다.

• 패딩: 0px

CTA 섹션에 배경 패턴 및 마스크 추가

이제 레이아웃이 수정되었으므로 배경 패턴과 마스크를 추가할 수 있습니다. Divi의 새로운 옵션에는 배경 패턴과 마스크에 대한 무한한 옵션이 있습니다. 즉, 몇 번의 클릭만으로 CTA 섹션에 대한 독특한 디자인을 만들 수 있습니다. 이 설정으로 눈길을 끄는 배경을 디자인하는 방법을 배우려면 따라오세요.

배경색, 패턴 및 마스크 설정

섹션 배경 설정으로 이동합니다.

색상 탭에서 주황색 배경 추가

• 색상: #FFA256

패턴 탭에서 패턴의 모양과 색상을 설정합니다.

• 모양: 색종이 조각
• 색상: #FF7D14

이제 마스크를 추가해 보겠습니다. 마스크 탭을 선택하고 다음과 같이 설정을 추가합니다.

• 모양: 모서리 얼룩
• 마스크 색상: #FFFFFF
• 마스크 변환: 수평
• 마스크 종횡비: 가로
• 마스크 크기: 커버

디자인 조정

이제 배경이 준비되었으므로 디자인을 최종 조정해 보겠습니다.

"구매" 버튼 설정을 열고 디자인 탭에서 정렬을 변경합니다.

• 버튼 정렬: 왼쪽

"구매" 버튼의 호버 상태 배경색을 주황색 배경과 눈에 띄도록 변경합니다.

• 마우스 오버 시 버튼 배경: #FF7D14

또한 주황색 배경과 오른쪽의 "이달의 맛" 섹션 사이에 공간을 더 추가하기 위해 행 레이아웃을 조정합니다. 레이아웃을 1:1에서 3:2로 변경합니다.

이제 데스크탑 디자인이 완료되었으며 Divi의 배경 패턴 및 마스크 옵션으로 고유한 CTA 섹션을 만드는 방법을 배웠습니다!

CTA 섹션을 반응형으로 만들기

CTA 섹션을 휴대폰이나 태블릿에서 볼 때 열 2의 콘텐츠가 열 1 아래에 쌓입니다. 이로 인해 디자인에 가독성 문제가 발생할 수 있습니다. Divi의 기본 제공 반응 설정을 사용하여 더 작은 화면에 맞게 콘텐츠와 디자인을 최적화하기 위해 몇 가지 조정을 해 보겠습니다.

텍스트가 버튼 앞에 오도록 하기 위해 "Highlight Flavor of the Month" 텍스트를 "July Orange Chocolate" 텍스트 모듈에 복사합니다. 이 텍스트를 휴대폰 및 태블릿 버전에만 추가하고 있는지 확인하십시오.

• "Orange Chocolate" 텍스트를 H3으로 변경합니다.

다음으로 이 배경에서 눈에 띄도록 텍스트를 약간 변경합니다. 디자인 탭으로 이동하여 다음과 같이 변경합니다.

• H2(전화 및 태블릿) 텍스트 색상: #000000
• H2(휴대전화 및 태블릿) 텍스트 크기: 30px
• H3(전화 및 태블릿) 텍스트 색상: #000000
• H4(전화 및 태블릿) 텍스트 색상: #000000

이제 원래 "Flavor of the Month" 텍스트 모듈의 설정으로 이동하여 데스크톱 장치에서만 볼 수 있도록 가시성을 변경합니다. 이렇게 하면 원본 텍스트 모듈이 더 작은 장치에서 숨겨집니다. 이달의 맛 텍스트는 페이지에 다른 텍스트와 함께 버튼 위에 나타납니다.

• 비활성화: 전화 및 태블릿

그런 다음 행 설정을 연 다음 열 1 설정을 엽니다. 오른쪽 및 왼쪽 패딩을 제거합니다.

• 오른쪽 패딩: 0px
• 왼쪽 패딩: 0px

섹션 설정으로 이동한 다음 배경으로 이동한 다음 마스크 설정을 편집합니다.

• 마스크 변환: 반전
• 마스크 종횡비: 세로

이제 Divi의 배경 패턴 및 마스크 옵션 덕분에 고유한 배경으로 완벽하게 반응하는 CTA 섹션을 만들었습니다.

최종 결과

최종 결과를 살펴보겠습니다.

마지막 생각들

Divi의 강력한 배경 패턴과 마스크 옵션 덕분에 독특하고 눈길을 끄는 클릭 유도문안 섹션을 디자인하는 것은 매우 쉽습니다. 다양한 색상, 패턴, 마스크 및 설정 조합을 실험하여 창의력을 발휘하십시오. 디자인하기 쉽고 몇 번의 클릭만으로 완벽한 모양을 찾을 때까지 설정을 조정할 수 있습니다. 가장 중요한 것은 Divi에 바로 내장되어 있다는 것입니다! 더 이상 다른 프로그램에서 배경 그래픽을 디자인할 필요가 없습니다. 더 독특한 디자인을 위해 배경 설정을 다른 섹션, 행 및 모듈에 적용할 수 있습니다. Divi의 배경 패턴 및 마스크 기능에 대해 자세히 알아보려면 배경 마스크 및 패턴이 있는 영웅 섹션에 대한 자습서를 확인하고 Divi의 그라디언트 빌더를 배경 마스크 및 패턴과 결합하는 방법을 배우십시오.

웹 사이트에서 Divi의 배경 패턴 및 마스크 옵션을 어떻게 사용했습니까? 아래 의견에 무엇을 만들었는지 알려주십시오!