Divi의 이메일 옵트인 모듈로 만들 수 있는 5가지 이메일 옵트인 디자인
게시 됨: 2019-01-14우리 모두는 우리 이메일 목록의 새로운 구독자를 사랑합니다. 새로운 구독자를 확보하는 주요 방법 중 하나는 방문자에게 잘 설계된 이메일 수신 동의 양식을 제공하는 것입니다. 그렇기 때문에 이 튜토리얼에서는 Divi 이메일 수신 동의 모듈로 5가지 다른 디자인을 달성하는 방법을 보여주고 이 강력하고 유연한 모듈로 가능한 것에 대한 상상력을 불러일으킵니다.
엿보기
다음은 오늘 다룰 5가지 Divi 이메일 수신 동의 모듈 디자인의 미리보기입니다.
#1 섀도우 스택 옵트인
디자인 시작 #1
#2 크고 최소한의 옵트인
디자인 시작 #2
#3 스키니 옵트인
디자인 시작 #3
#4 도서 제안 옵트인
디자인 시작 #4
#5 컷아웃 프레임 옵트인
디자인 시작 #5
시작하는 데 필요한 것
YouTube 채널 구독
이 튜토리얼에서는 Divi만 있으면 됩니다. 우리는 미리 만들어진 레이아웃이 필요하지 않도록 처음부터 각각을 구축할 것입니다. 그러나 일부 레이아웃 팩에서 몇 가지 이미지를 사용할 것이지만 원하는 경우 자신의 이미지를 사용할 수 있습니다.
또한 이메일 옵트인 모듈에 이메일 공급자/목록을 할당할 때까지 라이브 사이트에서 옵트인 양식 필드를 볼 수 없다는 점을 아는 것이 중요합니다. 이메일 계정의 이메일 선택 설정에서 이 작업을 수행할 수 있습니다.
이제 그 디자인으로 가자!
#1 섀도우 스택 옵트인
이 디자인은 Divi 이메일 수신 동의 모듈에 두 개의 상자 그림자를 추가하여 양식을 돋보이게 하는 독특한 스태킹 효과를 제공합니다. 첫 번째 상자 그림자는 이메일 수신 동의 모듈에 추가되고 두 번째 상자 그림자는 작동하도록 사용자 정의 크기와 테두리가 있는 행에 추가됩니다.
완료 방법은 다음과 같습니다.
먼저 1열 행으로 새 섹션을 만들고 행에 이메일 수신 동의 모듈을 추가합니다.
이메일 수신 동의 설정을 열고 다음을 업데이트하십시오.
배경색: #1a0a38
레이아웃: 상단에 본체, 하단에 양식
모서리가 둥근 필드: 0px
텍스트 방향: 중앙
제목 글꼴 두께: Light
제목 텍스트 크기: 36px
버튼 텍스트 색상: #ffffff
버튼 배경색: #00ac69
버튼 테두리 너비: 0px
버튼 테두리 반경: 0px
맞춤 패딩: 상단 3vw, 하단 3vw, 왼쪽 5vw, 오른쪽 5vw
이제 이메일 수신 동의 모듈 뒤에 첫 번째 상자 그림자 레이어를 추가해 보겠습니다.
박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: 25px
상자 그림자 수직 위치: -25px
그림자 색상: rgba(26,10,56,0.82)
이제 기본적으로 양식에 추가되는 왼쪽 패딩을 제거하기 위해 사용자 정의 CSS의 작은 스니펫을 추가해 보겠습니다. 고급 탭으로 이동하여 옵트인 양식 아래에 다음 CSS를 추가합니다.
padding-left: 0px !important;
이는 이메일 수신 동의 모듈 설정을 처리합니다. 이제 행을 편집해 보겠습니다. 행 설정을 열고 다음을 업데이트합니다.
맞춤 너비: 600px
맞춤 패딩: 위쪽 25px, 아래쪽 0px, 오른쪽 25px
하단 테두리 너비: 25px
하단 테두리 색상: rgba(0,0,0,0)
왼쪽 테두리 너비: 25px
왼쪽 테두리 색상: rgba(0,0,0,0)
이제 행에 상자 그림자를 추가할 수 있습니다.
박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: 50px
상자 그림자 수직 위치: -50px
상자 그림자 확산 강도: -25px
그림자 색상: rgba(26,10,56,0.55)
이제 최종 디자인을 확인해 보겠습니다.
#2 크고 최소한의 옵트인
이 이메일 수신 동의 디자인은 미니멀하고 깨끗하며 큽니다. 양식 필드는 브라우저의 크기에 따라 조정되므로 모든 장치에서 멋지게 보입니다. 그리고 사용자가 스크롤해야 할 정도로 크지 않습니다.
방법은 다음과 같습니다.
먼저 1열 행으로 새 섹션을 만들고 행에 이메일 수신 동의 모듈을 추가합니다.
이메일 수신 동의 설정을 열고 제목 및 바닥글 텍스트를 포함하도록 콘텐츠를 업데이트합니다.
그런 다음 배경을 어두운 색상이나 이미지로 업데이트합니다.
배경색: #121212
배경 이미지: 선택 사항입니다. Podcast 레이아웃 팩에서 하나를 사용하고 있습니다.
더 많은 사용자 지정을 위해 디자인 탭으로 이동하기 전에 추가할 큰 양식 요소를 위한 공간을 만들어야 합니다. 이렇게 하려면 행 설정으로 이동하여 다음을 업데이트하십시오.
사용자 정의 너비: 100%
팁: 100% 사용자 정의 너비를 사용하는 것은 모바일에서 디자인에 오른쪽 또는 왼쪽 여백이 생기지 않도록 하는 좋은 방법입니다. "전체 너비로 만들기" 옵션을 사용하면 최대 너비가 89%가 되므로 모바일에서도 여백이 남습니다.
이제 이메일 수신 동의 모듈 설정으로 돌아가서 다음 디자인을 업데이트하십시오.
레이아웃: 상단에 본체, 하단에 양식
양식 필드 배경색: rgba(0,0,0,0)
모서리가 둥근 필드: 0px
필드 하단 테두리 너비: 2px
필드 하단 테두리 색상: #ffffff
텍스트 방향: 중앙
제목 글꼴: Lato
제목 글꼴 두께: Light
제목 글꼴 스타일: TT
제목 텍스트 크기: 4vw
제목 줄 높이: 1em
필드 텍스트 색상: #ffffff
필드 글꼴: Lato
필드 글꼴 두께: Light
필드 텍스트 크기: 3.5vw
필드 문자 간격: 0.1em
필드 라인 높이: 1.3em
본문 문자 간격: 0.5em
버튼 텍스트 크기: 4vw
버튼 테두리 반경: 0px
버튼 문자 간격: 0.1em
버튼 글꼴: Lato
글꼴 두께: 가벼움
맞춤 패딩: 상단 10vw, 하단 10vw, 왼쪽 10vw, 오른쪽 10vw
줄 높이 및 문자 간격에 대한 em 길이 단위와 결합된 글꼴 크기에 대한 vw 길이 단위의 사용에 주목하십시오. 이렇게 하면 브라우저를 조정할 때 텍스트와 디자인의 크기를 원활하게 조정할 수 있습니다.
마지막 단계는 디자인을 다듬기 위한 몇 가지 사용자 정의 CSS 스니펫을 포함합니다. 고급 탭으로 이동하여 옵트인 양식 필드 아래에 다음 사용자 정의 CSS를 추가하십시오.
font-size: 3.5vw;
이렇게 하면 양식 필드의 자리 표시자 텍스트와 일치하도록 입력할 때 텍스트 크기가 허용됩니다.
그런 다음 버튼 위에 약간의 숨을 쉴 수 있는 공간을 제공하기 위해 사용자 지정 여백을 추가해 보겠습니다. 구독 버튼 아래에 다음을 추가합니다.
margin-top: 3.5vw;
이제 최종 디자인을 확인해 보겠습니다.
#3 스키니 옵트인
이 다음 디자인은 게시물이나 랜딩 페이지의 수직 공간을 절약하려는 회사와 블로그에게 인기 있는 솔루션이 될 것입니다. Divi의 Email Opt-in 모듈이 보다 전통적인 수직 양식에 가장 적합하지만, CSS의 작은 스니펫으로 실제로 양식을 마른 수평 양식으로 변환할 수 있습니다.
방법은 다음과 같습니다.
1열 행으로 새 섹션을 만들고 행에 이메일 수신 동의 모듈을 추가합니다.
이메일 수신 동의 설정을 열고 제목만 포함하도록 콘텐츠를 업데이트합니다.
그런 다음 다음과 같이 배경과 버튼 색상으로 디자인을 업데이트합니다.
배경색: #54677d
레이아웃: 상단에 본체, 하단에 양식
텍스트 방향: 중앙
버튼 배경색: #b0c94f
버튼 테두리 너비: 0px
이제 사용자 정의 CSS를 사용할 차례입니다. 우리는 모바일이 아닌 데스크탑에서만 얇은 양식 디자인을 원하기 때문에 양식 스타일을 대상으로 하는 사용자 정의 CSS ID를 사용하여 페이지(페이지 설정 아래)에 CSS를 추가할 것입니다.
이렇게 하려면 고급 탭으로 이동하여 옵트인 모듈에 사용자 지정 CSS ID를 지정합니다.
CSS ID: 스키니
이것은 페이지에 추가할 외부 CSS로 이 양식을 대상으로 지정하는 데 사용됩니다.
이제 Divi Builder 페이지 설정을 열고 고급 탭에서 다음 CSS를 추가하십시오.
@media (min-width: 980px){
#skinny.et_pb_newsletter .et_pb_newsletter_fields {
flex-wrap: nowrap !important;
}
#skinny.et_pb_newsletter .et_pb_newsletter_fields>* {
flex-basis: 23%;
}
}
#skinny .et_pb_newsletter_form {
padding-left: 0px;
}
Divi는 이미 flex를 사용하여 백엔드에서 양식의 스타일을 지정하기 때문에 이 CSS는 양식 필드를 세로로 정렬하도록 하는 flex-wrap 속성을 제거합니다. 결과는 양식 필드의 가로 레이아웃입니다. flex-basis 속성을 23%로 조정하면 기본적으로 각 양식 필드의 너비가 설정됩니다. 그리고 미디어 쿼리 내부에 CSS를 추가했기 때문에 디자인은 모바일에 표시되는 양식의 기본 레이아웃으로 데스크톱에서만 발생합니다.
다음은 최종 디자인입니다.
#4 도서 제안 옵트인
이 디자인은 가입을 위한 무료 도서 제안을 홍보할 목적으로 이메일 수신 동의 모듈 내에 몇 개의 이미지를 통합합니다. 이렇게 하려면 설명 및 바닥글 콘텐츠를 추가하기 위해 내장된 wysiwyg 편집기를 사용하여 이미지를 추가하기만 하면 됩니다. 이메일 수신 동의 모듈을 다른 모듈과 2열 행으로 결합하여 동일한 디자인을 달성할 수 있는 것은 사실이지만, 동일한 모듈에서 모든 작업을 수행하는 방법을 보여 주는 것이 도움이 될 것이라고 생각했습니다.
방법은 다음과 같습니다.
1열 행으로 새 섹션을 만들고 행에 이메일 수신 동의 모듈을 추가합니다.
이메일 수신 동의 설정을 열고 콘텐츠 탭을 유지합니다.
설명에서 기본 텍스트를 몇 문장으로 줄이십시오. 그런 다음 미디어 추가 버튼을 클릭하여 미디어 라이브러리에서 이미지를 추가합니다.
이미지 너비가 약 200px 이하인지 확인하고 싶습니다. 이 예에서는 중간 크기의 이미지를 사용하고 있습니다.
바닥글 아래에서 바닥글 텍스트 콘텐츠에 대한 몇 개의 문장을 추가한 다음 미디어 추가 버튼을 클릭하여 텍스트 아래에 로고 이미지를 추가합니다(물론 선택 사항임).
이미지가 중앙에 오도록 하려면 미디어 라이브러리에서 이미지를 추가할 때 정렬 옵션을 가운데로 설정하십시오.
이제 나머지 디자인을 업데이트할 준비가 되었습니다. 모듈에 배경 이미지와 이미지 위의 배경 그라디언트를 제공하여 텍스트를 더 읽기 쉽게 만드는 것으로 시작합니다.
배경 이미지: [이미지 추가]
배경 그라데이션 왼쪽 색상: rgba(0,0,0,0.5)
배경 그라데이션 오른쪽 색상: rgba(0,0,0,0.5)
배경 이미지 위에 그라디언트 배치: 예
그런 다음 나머지 디자인을 다음과 같이 업데이트합니다.
버튼 텍스트 색상: #333333
버튼 배경색: #ffcb7a
버튼 테두리 너비: 0px
버튼 문자 간격: 5px
글꼴 두께: 매우 굵게
글꼴 스타일: TT
너비: 700px
모듈 정렬: 중앙
맞춤 패딩: 상단 3vw, 하단 3vw, 왼쪽 3vw, 오른쪽 3vw
다음은 최종 디자인입니다.
#5 컷아웃 프레임 옵트인
이 단순한 디자인 기술은 이메일 수신 동의에 독특한 모양을 부여하는 좋은 방법입니다. 트릭은 섹션 배경과 동일한 색상을 가진 섹션 구분선을 사용하는 것입니다. 그런 다음 구분선의 높이를 조정하여 멋진 프레이밍 효과를 위해 독특한 방식으로 가장자리를 잘라내기 위해 이메일 수신 동의 양식을 겹칠 수 있습니다.
방법은 다음과 같습니다.
1열 행으로 새 섹션을 만들고 행에 이메일 수신 동의 모듈을 추가합니다.
이메일 수신 동의 설정을 열고 모듈에 배경 그라데이션을 제공합니다.
배경 그라데이션 왼쪽 색상: #8300e9
배경 그라데이션 오른쪽 색상: #06c8ff
그라디언트 유형: 방사형
방사형 방향: 왼쪽 상단
그런 다음 나머지 디자인을 다음과 같이 업데이트합니다.
제목 글꼴 두께: 굵게
제목 텍스트 크기: 36px
너비: 70%(데스크톱), 100%(태블릿 및 스마트폰)
모듈 정렬: 중앙
맞춤 패딩: 상단 6vw, 하단 6vw, 왼쪽 6vw, 오른쪽 6vw
둥근 모서리: 왼쪽 상단 50px, 오른쪽 상단 0px, 오른쪽 하단 50px, 왼쪽 하단 0px
설정을 저장합니다.
그런 다음 사용자 정의 너비로 행 설정을 업데이트하십시오.
사용자 정의 너비: 100%
이제 섹션 설정을 사용자 정의하여 해당 섹션 구분선으로 컷아웃 프레임 효과를 추가할 준비가 되었습니다.
섹션 설정을 열고 다음을 업데이트합니다.
배경색: #222222
상단 구분선 스타일: 스크린샷 참조
상단 구분선 색상: #222222(섹션 배경색과 일치하는지 확인)
상단 디바이더 높이: 12vw(데스크톱), 150px(태블릿 및 스마트폰)
상단 구분선 배열: 섹션 콘텐츠 상단
하단 구분선 스타일: 스크린샷 참조
하단 구분선 색상: #222222(섹션 배경색과 일치하는지 확인)
하단 디바이더 높이: 12vw(데스크톱), 150px(태블릿 및 스마트폰)
하단 디바이더 수평 반복: 0.8x
하단 디바이더 플립: 수직 및 수평
하단 구분선 배열: 섹션 콘텐츠 상단
이제 최종 디자인을 확인해 보겠습니다.
이 디자인 기법에 대한 자세한 내용은 독특한 프레임 디자인 만들기에 대한 게시물을 확인하세요.
마지막 생각들
이러한 이메일 수신 동의 디자인은 Divi 내에서 사용할 수 있는 모든 스타일 옵션을 생각할 때 빙산의 일각에 불과합니다. 나는 의도적으로 당신이 할 수 있는 일에 대한 광범위한 스트로크를 제공할 만큼 충분히 단순하게 디자인을 유지했습니다. 새로운 글꼴, 색상 및 호버 효과를 추가하여 더 세련된 디자인을 자유롭게 탐색하십시오. 그리고 그 과정에서 즐거운 시간을 보내는 것을 잊지 마십시오.
댓글로 여러분의 의견을 기다리겠습니다.
건배!