관심을 끄는 Divi에서 고정 이메일 Optin을 만드는 방법
게시 됨: 2020-09-30Divi의 고정 위치 옵션을 사용하면 페이지의 모든 요소를 고정할 수 있습니다. 이렇게 하면 사용자가 페이지를 아래로 스크롤할 때 특정 간격으로 페이지의 요소를 수정하여 더 오래 표시되도록 할 수 있습니다. 그리고 그곳에 있는 블로거에게는 미묘하면서도 효과적인 게시물 템플릿에 고정 이메일 수신 동의를 추가하여 중요한 양식을 최전선에 유지하는 것이 좋습니다.
이 튜토리얼에서는 Divi 블로그 게시물 템플릿에 고정 이메일 옵트인을 추가하여 더 많은 관심을 끌고 더 많은 리드를 확보하는 방법을 보여 드리겠습니다. 고정 이메일 옵트인에 팝업 호버 효과를 추가하는 방법도 보여드리겠습니다!
시작하자!
엿보기
다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.
스티커 이메일 Optin 포스트 템플릿을 무료로 다운로드하십시오
이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
귀하의 사이트에 고정 이메일 옵틴이 있는 게시물 템플릿을 업로드하는 방법
템플릿을 업로드하려면 WordPress 웹사이트의 백엔드에서 Divi Theme Builder로 이동하십시오.
그런 다음 오른쪽 상단에 두 개의 화살표가 있는 아이콘이 표시됩니다. 아이콘을 클릭합니다.
가져오기 탭으로 이동하여 이 게시물에서 다운로드할 수 있었던 JSON 파일을 업로드하고 'Divi 테마 빌더 템플릿 가져오기'를 클릭합니다.
파일을 업로드하면 모든 게시물에 할당된 새 본문 영역이 있는 새 템플릿을 볼 수 있습니다. 템플릿을 활성화하는 즉시 Divi Theme Builder 변경 사항을 저장하십시오.
튜토리얼로 들어가 볼까요?
1부: 미리 만들어진 블로그 게시물 템플릿 가져오기
이 튜토리얼에서는 이 블로그 게시물에서 다운로드할 수 있는 Divi의 비즈니스 컨설턴트 레이아웃 팩용 블로그 게시물 템플릿을 사용할 것입니다.
zip 파일을 다운로드한 후에는 압축을 풀고 파일을 Divi 테마 빌더로 가져와야 합니다.
방법은 다음과 같습니다.
- Divi > 테마 빌더로 이동합니다.
- 오른쪽 상단의 이식성 아이콘을 클릭합니다.
- 이식성 팝업에서 가져오기 탭을 선택합니다.
- 다운로드한 파일에서 json 파일을 선택합니다.
- 가져오기 버튼을 클릭합니다.
파트 2: 템플릿에 고정 이메일 옵션 추가
JSON 파일을 가져온 후 편집 아이콘을 클릭하여 사용자 정의 본문 템플릿 레이아웃을 편집하십시오.
게시물 템플릿 레이아웃의 맨 아래에는 고정 이메일 수신 동의에 사용할 이메일 수신 동의 양식 섹션이 있습니다.
이 예에서는 사용자가 고정 이메일 옵트인이 있는 섹션으로 스크롤할 때까지 이메일 옵트인을 볼 수 없도록 섹션에 대한 이메일 옵트인의 고정 위치를 원합니다. 그러나 이메일 옵트인은 자체 섹션에 있기 때문에 이메일 옵트인은 이동할 공간이 충분하지 않습니다. 따라서 이메일 수신 동의가 원래 위치에 머물기 전에 해당 섹션 위로 마우스를 가져갈 수 있도록 댓글 섹션이 포함된 위의 섹션으로 가져와야 합니다.
위 섹션에 새 행 추가
이렇게 하려면 주석 모듈이 포함된 행 바로 아래에 새 1열 행을 만듭니다.
행 스타일 추가
그런 다음 새 행의 설정을 열고 다음과 같이 배경색을 추가합니다.
- 배경색: #282828
디자인 탭에서 행의 다음 크기와 간격을 업데이트합니다.
- 폭: 100%
- 최대 너비: 100%
- 여백: 15vw 상단
- 패딩: 0px 상단, 0px 하단
이메일 수신 동의를 새 행으로 이동
행 스타일 지정이 완료되면 하단 섹션의 이메일 수신 동의를 방금 생성한 새 행으로 이동합니다.
하단 섹션을 삭제합니다(더 이상 필요하지 않음).
고정 위치로 이메일 수신 동의 업데이트
그런 다음 이제 새 행 내에서 이메일 수신 동의 설정을 열고 다음과 같이 스틱 위치 옵션을 업데이트합니다.
- 고정 위치: 바닥에 고정
- 상단 고정 제한: 섹션
이렇게 하면 해당 섹션을 스크롤할 때 이메일 옵트인이 브라우저 창 하단에 고정되어 상위 행에 놓이게 됩니다.
이메일 수신 동의 스타일 업데이트
디자인 탭에서 다음과 같이 이메일 수신 동의 레이아웃을 업데이트합니다.
- 레이아웃: 상단에 본체, 하단에 양식
그런 다음 다음 스타일을 업데이트합니다.
- 제목 텍스트 크기: 32px
- 최대 너비: 600px
- 모듈 정렬: 중앙
그런 다음 애니메이션 스타일을 없음으로 설정합니다.
결과
이때 다른 브라우저 창에서 게시물을 확인하여 결과를 확인할 수 있습니다.
고정 위치 스타일링 추가
이메일 옵트인이 고정 위치에 있으면 고정 상태에만 적용되는 특정 스타일을 모듈에 추가할 수 있습니다. 이를 통해 흰색 배경을 오프셋하여 좀 더 돋보이게 하는 다양한 색 구성표를 추가할 수 있습니다.
고정 상태에 대해 다른 배경색을 추가하려면 이메일 수신 동의 설정을 열고 배경 옵션 옆에 있는 축소판 아이콘(고정 아이콘)을 선택합니다. 그런 다음 고정 탭을 클릭하고 다음 배경색을 추가합니다.
- 배경색(끈적임): #282828
이 동일한 프로세스를 계속하여 디자인 탭 아래의 다음 옵션에 고정 스타일을 추가합니다.
- 제목 텍스트 색상(고정): #ffffff
- 본문 텍스트 색상(고정): #ffffff
- 최대 너비(고정): 500px
- 패딩(고정): 상단 18픽셀, 하단 30픽셀, 왼쪽 30픽셀, 오른쪽 30픽셀
결과
이제 라이브 포스트에서 결과를 확인해보자.
고정 이메일 수신 동의에 호버 팝업 효과 추가
고정 이메일 옵트인에 호버 팝업 효과를 추가하려면 이메일 옵트인 설정을 열고 다음과 같이 스틱 변환 번역을 업데이트합니다.
- Y축 변환(고정): 85%
이렇게 하면 이메일 옵트인이 자체 높이의 85%만큼 아래쪽(표시 영역 외부)으로 이동하여 사용자가 제목 위로 마우스를 이동할 수 있도록 이메일 옵트인이 충분히 노출됩니다.
그런 다음 변환 옵션에 호버 상태를 추가하여 변환 변환 위치가 호버링 시 원래 위치로 돌아오도록 합니다.
- 변환 Y축 변환(마우스 오버): 0%
결과
다음은 최종 결과입니다.
최종 결과
다음은 우리가 구축한 스티키 헤더의 세 가지 버전입니다.
마지막 생각들
고맙게도 Divi를 사용하면 사이트에 고정 이메일 수신 동의를 쉽게 추가할 수 있습니다. 이렇게 하면 양식을 보다 독특한 방식으로 표시하기 위해 고정 요소의 디자인을 조정하는 데 더 많은 시간을 할애할 수 있습니다. 바라건대, 이 기술은 향후 블로그 프로젝트에 도움이 됩니다.
댓글로 여러분의 의견을 기다리겠습니다.
건배!