Divi로 모든 종류의 웹사이트에 매력적인 구독 섹션을 디자인하는 방법

사람들이 웹사이트를 만드는 주된 이유 중 하나는 타겟 고객에게 접근할 수 있는 새로운 방법을 찾는 것입니다. 첫 번째 단계를 수행하고 웹사이트 구축을 시작하면 잠재 고객과 정확히 어떻게 연락할 수 있을지 궁금해지기 시작합니다. 많은 웹사이트 소유자에게 도움이 되는 것으로 입증된 것 중 하나는 목록 작성입니다. 방문자로부터 이메일 주소를 수집하여 이메일 마케팅을 통해 리드(결국 고객)로 전환하는 것이 전부입니다.

목록 작성을 통해 웹사이트에 매력적인 구독 섹션을 만들 수 있습니다. 구독 섹션이 눈길을 끌기를 원하고 더 중요한 것은 구독 섹션이 전환되기를 원합니다. 이 튜토리얼에서는 방문자의 관심을 확실히 끌 수 있는 멋진 구독 섹션을 만들었습니다. 우리는 매끄러운 디자인을 이메일 목록에 등록해야 하는 이유에 대한 주장과 결합하고 있습니다. 또한 디자인을 만드는 동안 선택할 수 있는 세 가지 색상 팔레트도 공유합니다.

가자!

YouTube 채널 구독

시사

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

컬러 팔레트 #1

• 색상 #1: rgba(79,35,255,0.88)
• 색상 #2: #e09900
• 색상 #3: #4f23ff

컬러 팔레트 #2

• 색상 #1: rgba(255,35,97,0.75)
• 색상 #2: #e09900
• 색상 #3: #d80e00

컬러 팔레트 #3

• 색상 #1: rgba(41,17,147,0.75)
• 색상 #2: #00ffd8
• 색상 #3: #291193

접근하다

위의 색상 팔레트 중 하나를 선택하고(또는 나만의 팔레트를 만들고) 튜토리얼 전체에서 이 색상을 사용합니다. 설정에서 색상을 사용할 때 색상 #1, #2 또는 #3을 참조합니다. 또한 구독 모듈을 두 개의 열과 겹치게 만들고 이메일 목록에 등록할 때의 이점을 강조하고 있습니다.

구독 섹션 다시 만들기

새 섹션 추가

탑 디바이더

구독 섹션을 추가하려는 페이지를 열고 새 표준 섹션을 추가합니다. 섹션의 설정을 즉시 열고 다음 상단 구분선을 추가하십시오.

• 구분선 스타일: 목록에서 찾기
• 디바이더 색상: #FFFFFF
• 디바이더 높이: 200px
• 디바이더 플립: 수직

하단 디바이더

섹션 하단에 동일한 종류의 구분선을 추가합니다.

• 구분선 스타일: 목록에서 찾기
• 디바이더 색상: #FFFFFF
• 디바이더 높이: 200px
• 디바이더 플립: 수직

간격

다음으로 간격 설정을 열고 상단 및 하단 패딩에 '0px'를 추가하여 섹션의 모든 기본 패딩을 제거합니다.

새 행 추가

열 구조

이제 모든 섹션 설정이 완료되었으므로 새 행을 추가할 수 있습니다. 다음 열 구조를 선택하십시오.

그라데이션 배경

행 설정을 열고 다음 그라데이션 배경을 추가하여 계속하십시오.

• 첫 번째 그라디언트 색상: 색상 #1
• 두 번째 그라디언트 색상: 색상 #2
• 기울기 방향: 123deg
• 배경 이미지 위에 그라디언트 배치: 예

배경 이미지

선택한 배경 이미지를 추가하여 계속합니다. 이 배경 이미지는 약간만 표시됩니다. 배경 이미지 크기로도 '표지'를 선택합니다.

2열 배경색

다음으로 2열 배경색으로 'rgba(255,255,255,0.87)'를 추가합니다.

사이징

또한 다음 크기 조정 설정을 적용하여 두 열 사이의 공간을 줄이고 행이 화면의 전체 너비를 차지하도록 할 것입니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 열 높이 균등화: 예

간격

행 설정 내에서 마지막으로 해야 할 일은 사용자 정의 패딩을 추가하는 것입니다.

• 상단 및 하단 패딩: 0px
• 열 1 상단 패딩: 200px
• 열 1 하단 패딩: 100px
• 2열 상단 패딩: 300px(데스크톱) 50px(태블릿 및 휴대전화)
• 2열 하단 패딩: 100px(태블릿 및 휴대전화)
• 열 2 왼쪽 및 오른쪽 패딩: 50px

열 1에 Blurb 모듈 #1 추가

광고 제목 추가

이제 모듈 추가를 시작하겠습니다! Blurb 모듈을 추가하여 첫 번째 열부터 시작하겠습니다. 해당 Blurb 모듈 수정이 완료되면 다른 두 모듈에 대해서도 해당 설정을 다시 사용합니다. Blurb 모듈을 추가한 후 제목을 지정하십시오.

광고 아이콘 추가

다음에 Blurb 모듈에 아이콘을 추가하십시오. 첫 번째 모듈에 다음 아이콘을 사용했습니다.

아이콘 설정

다음 설정을 추가하여 아이콘의 모양을 변경합니다.

• 아이콘 색상: #FFFFFF
• 아이콘 배치: 상단
• 아이콘 글꼴 크기 사용: 예
• 아이콘 글꼴 크기: 43px

제목 텍스트 설정

우리는 광고 제목만 사용하고 있습니다. 그렇기 때문에 H4의 텍스트 설정만 수정해야 합니다.

• 제목 글꼴: Yeseva One
• 제목 텍스트 정렬: 가운데
• 제목 텍스트 색상: #FFFFFF
• 제목 문자 간격: -1px

사이징

또한 다양한 화면 크기에 따라 Blurb 모듈의 너비를 수정할 것입니다.

• 콘텐츠 너비: 150px
• 너비: 33%(데스크탑), 40%(태블릿), 60%(휴대폰)
• 모듈 정렬: 중앙

간격

마지막으로 Blurb 모듈에도 다음 사용자 지정 패딩을 추가합니다.

• 상단 및 하단 패딩: 50px

Blurb 모듈 두 번 복제 및 주요 Blurb 모듈 수정

아이콘 및 콘텐츠 변경

이제 Blurb 모듈을 두 번 복제할 수 있습니다. 첫 번째 열에 모두 보관하십시오. 새로운 Blurb 모듈 각각에 대해 아이콘과 제목을 변경하여 보내려는 메시지와 일치하도록 합니다.

배경색 추가

중간 Blurb 모듈을 강조 표시할 것입니다. 이를 위해 흰색 배경색을 추가하는 것으로 시작하겠습니다.

아이콘 및 제목 텍스트 색상 변경

또한 아이콘의 색상과 H4 제목을 '#000000'으로 변경합니다.

둥근 모서리 추가

다음으로 테두리 설정의 각 모서리에 '5px'를 추가합니다.

박스 섀도우

마지막으로 첫 번째 상자 그림자 옵션을 사용하여 약간의 깊이를 추가합니다.

열 2에 텍스트 모듈 #1 추가

텍스트 설정

두 번째 칼럼으로 넘어가겠습니다! 우리가 필요로 하는 첫 번째 모듈은 텍스트 모듈입니다. 콘텐츠를 추가한 후 다음 텍스트 설정을 콘텐츠에 적용합니다.

• 텍스트 글꼴: Yeseva One
• 텍스트 색상: #000000
• 텍스트 크기: 54px
• 텍스트 줄 높이: 1em

열 2에 텍스트 모듈 #2 추가

간격

해당 텍스트 모듈 바로 아래에 설명을 위해 다른 텍스트 모듈을 추가할 것입니다. 콘텐츠를 추가한 후 상단 여백에 '20px'를 추가합니다.

2열에 이메일 Optin 모듈 추가

배경색

다음으로 추가해야 할 모듈은 이메일 Optin 모듈입니다. 추가했으면 배경색을 'rgba(255,255,255,0)'로 변경합니다.

이메일 계정

선택한 서비스 제공업체를 선택한 다음 이메일 계정을 추가합니다.

필드

계속해서 필드 설정을 열고 이름 및 성 필드를 비활성화합니다.

필드 설정

필드 설정도 수정합니다. 각 모서리에 '0px'를 추가하여 둥근 모서리를 제거합니다. 첫 번째 상자 그림자 옵션도 추가하십시오.

버튼 설정

다음으로 버튼의 모양을 변경합니다.

• 버튼 텍스트 색상: #FFFFFF
• 버튼 배경색: 색상 #3
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 0px
• 버튼 글꼴: Yeseva One
• 버튼 아이콘 표시: 예
• 버튼 아이콘 색상: #FFFFFF
• 버튼 아이콘 배치: 왼쪽
• 버튼에 대한 호버에 아이콘만 표시: 아니오
• 상자 그림자: 첫 번째 옵션을 선택합니다.

간격

마지막으로 다음 간격 설정을 사용하여 구독 모듈이 두 열과 겹치도록 만듭니다.

• 상단 여백: 20px(데스크톱), 0px(태블릿 및 휴대폰)
• 왼쪽 여백: -60%(데스크톱 및 태블릿), 0px(전화)
• 오른쪽 여백: 60%(데스크톱), 50%(태블릿), 0px(전화)

열 2에 소셜 미디어 팔로우 모듈 추가

원하는 만큼 소셜 네트워크 추가

마지막으로 소셜 미디어 팔로우 모듈을 추가합니다. 계속해서 표시하려는 소셜 네트워크를 추가하십시오.

둥근 모서리

모든 소셜 네트워크를 추가했으면 테두리 설정의 각 모서리에 '50px'를 추가하십시오.

간격

또한 상단 여백에 '50px'를 추가하여 모듈을 아래로 내립니다.

각 소셜 네트워크의 배경색을 개별적으로 변경

마지막으로 각 소셜 네트워크의 배경색을 개별적으로 '#000000'으로 변경합니다.

시사

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

마지막 생각들

구독 섹션은 웹사이트의 중요한 부분입니다. 이메일 목록을 작성하고 이메일 마케팅을 활성화하며 리드를 단시간에 방문자로 전환하는 데 도움이 됩니다. 이 게시물에서는 모든 유형의 웹사이트와 일치하는 멋진 구독 섹션을 만드는 방법을 보여 드렸습니다. 멋진 디자인과 가입 혜택을 결합했습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!