Divi Call to Action 모듈의 스타일을 지정하는 방법(예제 3개!)

클릭 유도문안은 디지털 마케팅의 중요한 부분입니다. 랜딩 페이지, 블로그 게시물 또는 모바일 앱을 만들 때 온라인 어디에서나 클릭 유도 문안을 찾을 수 있습니다. 기본 Divi 모듈인 Call to Action Module을 사용하면 작업에 이 중요한 요소를 쉽게 추가할 수 있습니다. 제목, 본문 텍스트 및 버튼을 특징으로 하는 이 모듈은 브랜드에 맞는 디자인을 선택할 수 있는 충분한 스타일 옵션을 제공합니다. 무료 레이아웃 팩 3개를 기반으로 하는 Divi 콜투액션 스타일 예제를 제공합니다. 각 레이아웃 팩은 Divi 멤버십과 함께 제공되며 매주 새로운 레이아웃 팩을 출시합니다! 이 게시물에서 다시 만들 내용을 살펴보겠습니다.

Divi 클릭 유도문안 스타일 예시: Divi Whisky에서 영감을 받음

클릭 유도문안 스타일 예시 #2: Divi Bagel Shop에서 영감을 받음

스타일 예시 #3: Divi 가죽 제품에서 영감을 얻음

클릭 유도 문안 섹션 설정

시작하려면 스타일 예제의 기초를 만들어 봅시다.

섹션 추가

파란색 더하기 아이콘 을 클릭하여 페이지에 새 일반 섹션을 추가하십시오.

하나의 열 행 선택

섹션이 추가되면 1열 아이콘을 선택하여 섹션에 1열이 있는 행을 추가합니다.

클릭 유도 문안 모듈 선택

클릭 유도문안 아이콘을 클릭하여 행에 모듈을 추가합니다.

이제 모듈의 스타일을 지정할 준비가 되었습니다!

Divi 클릭 유도문안 모듈 스타일링: Divi Whisky Inspired

첫 번째 Divi 클릭 유도문안 스타일 예시는 Divi Whisky Layout Pack에서 영감을 받았습니다.

섹션에 배경 추가

배경의 경우 레이아웃 팩에 있는 이미지를 배경 디자인의 기반으로 업로드합니다. 배경 이미지 아이콘 을 클릭합니다 . 그런 다음 배경 이미지 추가 아이콘 을 클릭합니다 .

귀하의 사이트에 이미지를 업로드하십시오. 업데이트한 사진의 기본 배경 이미지 설정을 사용합니다.

배경 그라데이션 추가

다음으로 배경 이미지 위에 배경 그라데이션을 추가합니다. 다음 설정을 사용합니다.

배경 그라데이션 설정:

• 기울기 중지 1: rgba(0,0,0,0)(12%에서)
• 기울기 정지 2: #000000(100%에서)
• 그라데이션 유형: 선형
• 그라데이션 방향: 180deg
• 배경 이미지 위에 그라데이션 배치: 예

패딩 추가

배경 설정 후 디자인 탭 을 클릭합니다 . 먼저 간격 탭까지 아래로 스크롤합니다. 두 번째로 150px를 사용하여 섹션에 충분한 패딩을 추가합니다.

간격 설정:

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

섹션 설정 하단에 있는 녹색 확인 아이콘을 클릭하여 섹션 설정을 저장합니다.

클릭 유도 문안 모듈 스타일 지정

클릭 유도문안 모듈의 경우 기어 아이콘을 클릭하여 모듈 설정으로 들어갑니다.

콘텐츠 추가

시작하려면 모듈에 표시할 콘텐츠를 입력하세요. 콘텐츠 탭 을 클릭 하고 클릭 유도문안 모듈의 제목, 버튼 텍스트 및 본문 텍스트를 추가합니다.

입력 링크

모듈에서 버튼을 보려면 클릭 유도 문안 모듈에 대한 링크를 추가해야 합니다. 링크 URL을 추가합니다 .

스타일 콜투액션 배경

콘텐츠를 추가한 후에는 이제 모듈 자체의 배경 스타일을 지정할 것입니다.

배경색 추가

시작하려면 배경 탭까지 아래로 스크롤합니다. 다음으로 배경색을 추가합니다. 둘째, 배경색 사용 옵션을 예로 선택한 상태로 유지합니다.

배경 설정:

• 배경 색상: #e7e2bc
• 배경색 사용: 예

그런 다음 선택한 배경색 위에 배경 패턴을 추가합니다.

배경 패턴 추가

배경 패턴의 경우 배경 패턴 아이콘 을 클릭합니다 . 그런 다음 배경 패턴 추가 아이콘 을 클릭합니다 .

다음으로 배경 패턴 옵션에서 가리비 패턴을 선택합니다 . 패턴 색상을 기본값으로 유지합니다.

그런 다음 배경 패턴에 대한 설정을 지정해야 합니다. 다음 설정을 사용하여 배경 패턴을 미학적으로 보기 좋게 만듭니다.

배경 패턴 설정:

• 패턴 크기: 관례
• 패턴 너비: 25px
• 패턴 반복 원점: 왼쪽 상단
• 패턴 반복: 반복

제목 및 본문 텍스트 스타일링

배경이 설정되면 이제 제목 텍스트, 본문 텍스트 및 버튼의 스타일 지정으로 이동합니다. 시작하려면 디자인 탭을 클릭합니다 . 그런 다음 다음 설정으로 제목 텍스트의 스타일을 지정하는 것으로 시작합니다.

제목 텍스트 설정:

• 제목 글꼴: Italiana
• 제목 텍스트 색상: #a45137
• 제목 텍스트 글꼴 크기:
  • 데스크탑: 72px
  • 태블릿: 54px
  • 모바일: 48픽셀

본문 텍스트 스타일링

본문 텍스트의 경우 다음 설정을 사용하여 본문 텍스트의 스타일을 지정합니다.

본문 텍스트 설정:

• 바디 폰트: Marcellus
• 본문 텍스트 색상: #000000
• 본문 텍스트 크기:
  • 데스크톱: 21px
  • 태블릿: 18px
  • 모바일: 18픽셀
• 바디 라인 높이: 1.8em

버튼 스타일링

버튼에 사용자 지정 스타일을 사용합니다. 버튼의 배경에는 다음 설정을 사용합니다.

버튼 설정:

• 버튼 텍스트 크기: 18px
• 버튼 텍스트 색상: #ffffff
• 버튼 배경 색상: #a45137

버튼 글꼴의 경우 다음 설정을 사용합니다.

버튼 텍스트 설정:

• 버튼 레터링 간격: 1px
• 버튼 글꼴: 플레이페어 디스플레이
• 버튼 글꼴 두께: Bold
• 버튼 글꼴 스타일: 기울임꼴
• 버튼 패딩:
  • 상단 및 하단 패딩: 15px
  • 왼쪽 및 오른쪽 패딩: 25px

모듈 너비 변경

이 Divi 콜 투 액션 스타일 예제의 경우 모듈이 전체 너비가 되는 것을 원하지 않습니다. 따라서 모듈의 최대 너비를 변경합니다. 이렇게 하려면 모듈의 디자인 탭에서 크기 조정 탭까지 아래로 스크롤합니다 . 그런 다음 최대 너비를 75% 로 설정합니다 .

모듈이 왼쪽으로 기울어져 있습니다. 이 문제를 해결하기 위해 중앙 아이콘을 클릭하여 모듈 정렬을 중앙으로 변경합니다.

사용자 지정 CSS 추가

이 디자인을 마무리하기 위해 몇 줄의 사용자 정의 CSS를 추가할 것입니다. 고급 탭을 클릭합니다. 프로모션 설명 및 프로모션 제목에 CSS를 추가합니다.

프로모션 설명 맞춤 CSS:

padding-left: 55px;
padding-right: 55px;

태블릿과 모바일의 패딩을 변경하겠습니다.

프로모션 설명 맞춤 CSS(태블릿 및 모바일):

padding-left: 0px;
padding-right: 0px;

변경 사항을 저장하려면 녹색 확인 표시 를 클릭하십시오 . 이것이 우리의 마지막 작업입니다!

Divi Call to Action 스타일 예시 ft. Divi Bagel Shop

이 디자인의 경우 Divi Bagel Shop Layout Pack에서 영감을 얻습니다.

2열 행 추가

이 클릭 유도문안에서는 1열이 아닌 2열 행을 추가합니다. 이전과 마찬가지로 녹색 더하기 아이콘 버튼을 클릭하여 새로 만든 섹션에 새 행을 추가합니다. 다음으로 디자인을 위해 다음 두 열(1/3 + 2/3) 레이아웃을 선택합니다.

섹션에 배경 그라데이션 추가

행을 추가한 후 새로 생성된 섹션에 그라디언트를 추가합니다. 먼저 파란색 기어 아이콘을 클릭하여 섹션 설정을 입력합니다.

그런 다음 배경 탭까지 아래로 스크롤하고 그라데이션 아이콘을 클릭하여 그라데이션 설정 입력을 시작합니다.

배경 그라데이션 설정:

• 기울기 정지 1: rgba(218,170,32,0.2)(0%에서)
• 기울기 중지 2: (rgba(0,0,0,0)(40%에서)
• 그라데이션 유형: 원형
• 그라데이션 위치: 왼쪽 위

그라디언트 설정을 입력했으면 녹색 확인 표시 를 클릭하여 작업을 저장합니다.

이미지 추가

클릭 유도문안 모듈의 스타일을 지정하기 전에 행에 장식을 추가하겠습니다. 이를 위해 회색 더하기 아이콘을 클릭하여 이미지 모듈을 추가합니다.

다음으로 이미지 모듈을 클릭하여 행의 첫 번째 열에 추가합니다.

이 디자인은 Divi Bagel Shop Layout Pack에서 영감을 받았기 때문에 팩에서 편집한 이미지를 첫 번째 열에 사용하겠습니다. 이미지 모듈에 이미지를 업로드합니다.

클릭 유도 문안 모듈 추가

이제 Call to Action 모듈을 추가해 보겠습니다. 회색 더하기 아이콘을 클릭 하고 클릭 유도 문안 아이콘을 선택하여 행의 두 번째 열에 모듈을 추가합니다.

콘텐츠 추가

시작하려면 제목, 버튼 및 본문 텍스트에 콘텐츠를 추가해 보겠습니다.

버튼 링크 URL에 링크 추가

모듈 내에서 버튼을 표시하려면 버튼 링크 URL에 URL을 추가해야 합니다. 링크 탭까지 아래로 스크롤하고 링크를 추가합니다 .

배경색 비활성화

이 디자인에서는 모듈의 배경을 비활성화합니다. 섹션 내에 있는 그래디언트를 보고 싶습니다. 이를 위해 배경 탭까지 아래로 스크롤합니다. 그런 다음 배경색 사용 탭을 선택 취소합니다 .

클릭 유도 문안 모듈 스타일 지정

모듈 스타일 지정을 시작하려면 디자인 탭으로 이동합니다. 다음으로 제목 텍스트 탭까지 아래로 스크롤하고 다음 설정을 사용하여 제목 텍스트 스타일 지정을 시작합니다.

제목 텍스트 설정:

• 제목 글꼴: Montaga
• 제목 텍스트 정렬: 왼쪽
• 제목 텍스트 색상: #000000
• 제목 텍스트 크기:
  • 데스크탑: 72px
  • 태블릿: 63px
  • 모바일: 48픽셀

본문의 경우 본문 탭에 도달할 때까지 조금 더 아래로 스크롤합니다. 본문 텍스트에 대해 대부분의 기본 글꼴 설정을 사용하지만 제목 텍스트와 일치하도록 왼쪽 정렬을 사용하여 검은색으로 만들어 텍스트를 어둡게 할 것입니다.

본문 텍스트 설정:

• 본문 글꼴: Open Sans
• 본문 텍스트 정렬: 왼쪽
• 본문 텍스트 색상: #000000

클릭 유도 문안 버튼 스타일 지정

Divi Bagel Shop 레이아웃의 디자인 스타일에 따라 버튼으로 평평한 그림자 효과를 만들 것입니다. 이를 달성하기 위해 버튼의 다양한 측면에 대해 설정해야 할 몇 가지 설정이 있습니다.

먼저 버튼 탭으로 스크롤한 후 사용자 지정 버튼 스타일을 확인합니다 . 버튼의 배경색과 텍스트 색상을 설정하여 버튼 스타일 지정을 시작합니다.

버튼 텍스트 및 배경 설정:

• 버튼 텍스트 크기: 14px
• 버튼 텍스트 색상: #000000
• 버튼 배경 색상: #c59246

그런 다음 버튼 테두리의 스타일 지정과 일부 텍스트 스타일 지정 옵션을 시작합니다.

버튼 테두리 및 텍스트 설정:

• 버튼 테두리 너비: 2px
• 버튼 테두리 색상: #000000
• 버튼 테두리 반경: 0px
• 버튼 문자 간격: 0.2em
• 버튼 글꼴: Open Sans
• 버튼 글꼴 두께: Bold
• 버튼 글꼴 스타일: 모두 대문자
• 버튼 정렬: 왼쪽

버튼의 그림자에는 다음 설정을 사용합니다.

버튼 그림자 설정:

• 버튼 패딩:
  • 상단 및 하단 패딩: 15px
  • 왼쪽 및 오른쪽 패딩: 45px
• 버튼 상자 그림자: 스크린샷 참조
• 상자 그림자 가로 위치: 3px
• 상자 그림자 세로 위치: 3px
• 상자 그림자 블러 강도: 0px
• 그림자 색상: rgba(0,0,0,0.3)
• 상자 그림자 위치: 외부 그림자

모듈에 간격 추가

두 번째 Divi 클릭 유도문안 스타일 예시를 마무리하기 위해 모듈 오른쪽에 약간의 패딩을 추가하겠습니다. 이를 위해 먼저 간격 탭까지 아래로 스크롤하고 패딩에 대한 응답 모드를 활성화합니다. 사용자가 웹 페이지를 보는 데 사용할 장치에 따라 패딩이 변경되기를 원합니다.

패딩의 경우 데스크톱에서 큰 오른쪽 패딩으로 시작하고 모바일의 경우 오른쪽에서 패딩 없음으로 전환합니다.

패딩 설정:

• 패딩(오른쪽):
  • 데스크탑: 145px
  • 태블릿: 75px
  • 모바일: 0px

패딩이 적용된 상태에서 녹색 확인 표시 를 클릭하여 변경 사항을 저장하는 것을 잊지 마십시오. 다음은 Divi Bagel Shop에서 영감을 받은 마지막 행동 촉구입니다!

Divi Leather Goods Inspired Call to Action 모듈 스타일 예시

세 번째이자 최종 디자인은 Divi Leather Goods Layout Pack에서 영감을 받았습니다.

섹션 스타일링

모듈을 추가하기 전에 섹션의 스타일을 지정해 보겠습니다. 이 섹션에서는 배경 이미지와 그라데이션을 사용합니다. 먼저 배경 이미지 아이콘을 클릭 하고 자산 폴더에서 Divi Leather Goods 배경 이미지를 업로드합니다.

이미지가 업로드되면 이제 그 위에 그라디언트를 적용하여 섹션에 약간 희미한 효과를 줄 것입니다. 이를 위해 배경 그라디언트 아이콘을 클릭하고 다음 설정을 사용합니다.

배경 그라데이션 설정:

• 기울기 정지 1: rgba(28,13,1,0.48)(0%에서)
• 기울기 중지 2: rgba(28,13,1,0.48)
• 그라데이션 유형: 선형
• 기울기 방향: 110deg
• 기울기 단위: 퍼센트
• 배경 이미지 위에 그라데이션 배치: 예

이제 배경이 설정되었으므로 섹션에 패딩을 추가합니다. 이를 위해 섹션의 디자인 탭으로 이동합니다 . 그런 다음 간격 탭까지 아래로 스크롤합니다. 그런 다음 10vw 의 상단 및 하단 패딩을 입력합니다 .

패딩을 추가했으면 녹색 확인 표시를 클릭하여 변경 사항을 섹션에 저장합니다.

클릭 유도 문안 모듈 추가

섹션과 해당 스타일을 저장한 후 이제 Call to Action 모듈을 행에 추가하는 작업으로 이동합니다. 이를 위해 회색 더하기 아이콘 을 클릭 한 다음 클릭 유도문안 모듈 아이콘 을 클릭합니다 . 이렇게 하면 1열 행에 모듈이 추가됩니다.

버튼에 링크 추가

버튼을 표시하려면 링크 탭 내 모듈의 버튼 링크 URL 옵션에 대한 링크를 추가 해야 합니다.

클릭 유도 문안 모듈 스타일 지정

모듈 스타일을 지정하기 전에 콘텐츠를 추가해야 합니다.

콘텐츠 추가

Text 탭의 Title, Button, Body 섹션에 콘텐츠를 추가합니다.

배경을 바꾸다

이 디자인에서는 모듈이 있는 섹션의 배경을 사용하려고 합니다. 따라서 배경색 사용 옵션을 선택 취소하여 모듈 자체의 배경을 투명하게 만듭니다.

텍스트 색상 및 정렬 설정

이 디자인에서는 텍스트를 밝게 하고 텍스트를 가운데 정렬합니다. Design 탭을 클릭 한 후 이제 Text 탭을 클릭하여 Text Color를 Light로 설정하고 Text Alignment를 Center로 설정합니다.

스타일 제목 텍스트

텍스트 색상과 정렬을 설정한 후 제목 텍스트 탭으로 스크롤하여 클릭 유도문안의 제목 텍스트 스타일을 지정하기 시작합니다.

제목 텍스트 설정:

• 제목 글꼴: Alike
• 제목 텍스트 크기:
  • 데스크탑: 72px
  • 태블릿: 63px
  • 모바일: 54px
• 제목 줄 높이: 1.2em

본문 텍스트 스타일 지정

본문의 경우 기본 설정을 동일하게 유지합니다. Divi의 기본 글꼴인 Open Sans를 사용하겠습니다.

버튼 스타일 지정하기

버튼의 경우 다음 스타일을 사용합니다.

버튼 스타일링:

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 14px
• 버튼 텍스트 색상: #000000
• 버튼 배경: #d9b882

다음 설정으로 버튼의 스타일을 계속 지정합니다.

버튼 테두리 및 글꼴 설정:

• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 0px
• 버튼 글꼴: Inter
• 버튼 글꼴 두께: Bold
• 버튼 글꼴 스타일: 모두 대문자

사이징 추가

모듈을 시각적으로 더 매력적으로 만들기 위해 모듈의 왼쪽과 오른쪽에 약간의 패딩을 추가할 것입니다. 이를 위해 간격 탭까지 아래로 스크롤하고 최대 너비를 60%(데스크톱의 경우)로 설정하고 모듈 정렬은 Center로 설정 합니다.

사이징 설정:

• 최대 너비:
  • 데스크톱: 60%
  • 태블릿: 75%
  • 모바일: 100%
• 모듈 정렬: 센터

변경이 완료되면 이제 녹색 확인 표시를 클릭하여 아름다운 작업을 저장합니다!

결론적으로

레이아웃 팩을 디자인 참조로 사용하면 Divi에서 기본적으로 사용할 수 있는 Call to Action 모듈의 스타일을 지정하는 방법이 무궁무진하다는 것을 알 수 있습니다. 강력한 클릭 유도문안이 필요한 다음 마케팅 디자인 프로젝트에서 영감을 얻기 위해 이 예를 브레인 푸드로 사용하세요!