Gutenberg 블로그 게시물에 Divi 이메일 Optin을 추가하는 방법

Divi 레이아웃 블록은 Divi Builder의 강력한 디자인 기능을 WordPress의 기본 블록 편집기(Gutenberg)로 가져오는 여러 편리한 방법을 제공합니다. 이를 통해 친숙한 Gutenberg 블록 인터페이스를 사용하여 블로그 게시물 콘텐츠의 대부분을 작성한 다음 사용자 정의 디자인 또는 기능이 필요한 곳에 Divi 레이아웃을 삽입할 수 있습니다. Divi 레이아웃 블록은 Divi Builder 내에서 구축할 수 있는 모든 것을 포함할 수 있지만 Email Optin과 같이 간단하고 필수적인 것을 포함하는 데도 좋습니다.

이 튜토리얼에서는 Divi 레이아웃 블록을 사용하여 Gutenberg 블로그 게시물에 아름다운 Divi 이메일 Optin을 추가하는 방법을 다룹니다.

시작하자!

엿보기

무료로 레이아웃 다운로드

이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

레이아웃 블록 JSON 가져오기

Divi 라이브러리에 레이아웃 업로드

위에서 다운로드할 수 있었던 JSON 파일을 가져오려면 WordPress 대시보드의 백엔드에서 Divi 라이브러리로 이동하여 '가져오기 및 내보내기'를 클릭합니다.

그런 다음 다운로드 폴더에서 JSON 파일을 선택하고 'Divi Builder 레이아웃 가져오기'를 클릭합니다.

Gutenberg Post 내부에 새로운 Divi 블록 블록 추가

레이아웃을 가져오면 Gutenberg 게시물로 이동하여 새 Divi 레이아웃 블록을 추가할 수 있습니다.

저장된 레이아웃에서 JSON 파일 가져오기

그런 다음 '라이브러리에서 로드'를 클릭하고 '저장된 레이아웃'으로 이동한 다음 레이아웃을 선택하여 Divi CTA 레이아웃 블록을 블로그 게시물로 가져옵니다. 그게 다야!

그리고 그게 다야!

튜토리얼로 들어가 볼까요?

Gutenberg 블로그 게시물에 Divi 이메일 Optin 추가하기

블로그 게시물 작성 또는 편집

시작하려면 새 블로그 게시물을 만들거나 기존 게시물을 편집해야 합니다. 이 예에서는 몇 가지 제목 및 단락 블록을 사용하여 게시물 제목과 본문에 모의 콘텐츠를 추가해 보겠습니다. 그런 다음 추천 이미지를 추가하고 Divi 페이지 설정에서 페이지 레이아웃에 대해 "사이드바 없음"을 선택합니다.

인라인 Divi 레이아웃 블록 추가

대량의 게시물이 생성되면 게시물 콘텐츠 영역 내에서 원하는 곳에 새로운 Divi 레이아웃 블록을 추가하기만 하면 됩니다. 게시물의 내용에 분명히 관심이 있는 자격 있는 리드를 캡처하기 위해 게시물의 끝 부분에 더 가까운 위치에 추가할 수 있습니다.

추가하려면 이메일 옵션을 추가할 영역 위로 마우스를 가져간 다음 파란색 더하기 아이콘을 클릭하여 새 블록을 추가합니다. 팝업 블록 목록에서 Divi 레이아웃 블록을 선택합니다.

Divi 레이아웃 블록 내에서 새 레이아웃 구축

Divi 레이아웃 블록이 선택되면 "새 레이아웃 빌드" 또는 "라이브러리에서 로드" 옵션이 제공됩니다. 이메일 옵션을 처음부터 작성해야 하므로 "새 레이아웃 작성" 옵션을 선택합니다.

섹션 디자인

레이아웃 블록 편집기 내에서 게시물에 포함될 이메일 옵션 디자인을 시작할 수 있습니다. 이 편집기에서 디자인한 모든 것은 게시물의 Divi 레이아웃 블록 영역에 표시됩니다.

시작하려면 이미 있는 기본 섹션의 섹션 설정을 엽니다.

배경 그라데이션

그런 다음 다음과 같이 배경 그라디언트를 추가합니다.

• 배경 그라데이션 왼쪽 색상: #ff9945
• 배경 그라디언트 오른쪽 색상: #f86a4c

분할기

그런 다음 다음과 같이 디자인 탭과 상단 및 하단 섹션 구분선으로 이동합니다.

• 상단 구분선 스타일: 스크린샷 참조
• 상단 구분선 색상: #f86a4c
• 상단 디바이더 수평 반복: 0.8x

• 하단 구분선 스타일: 스크린샷 참조
• 하단 디바이더 색상: #ff9945
• 하단 디바이더 수평 반복: 0.8x
• 하단 디바이더 플립: 수평 및 수직

여백 및 테두리

구분선을 배치한 후 섹션의 위와 아래에 약간의 여백을 주고 다음과 같이 테두리와 애니메이션으로 마무리합니다.

• 여백: 상단 20px, 하단 20px
• 둥근 모서리: 30px
• 테두리 너비: 2px
• 테두리 색상: #ff9945
• 애니메이션 스타일: 뒤집기

열 추가 및 행 너비 설정

섹션이 완료되었으므로 행에 1열 구조를 추가합니다.

그런 다음 다음과 같이 행 설정을 업데이트합니다.

• 폭: 100%
• 최대 너비: 100%

이메일 옵틴 구축

이메일 옵틴 모듈 추가

다음으로 행에 이메일 옵틴 모듈을 추가합니다.

이메일 옵틴 콘텐츠

이메일 수신 동의 콘텐츠 설정의 경우 다음을 업데이트하십시오.

• 제목: "매주 무료 팁을 받으세요!"
• 본문: [기본 모의 콘텐츠 유지]
• Mailchimp 목록: [목록 추가]
• 단일 이름 필드 사용: 예
• 배경색 사용: 아니요

이메일 옵틴 디자인

필드

디자인 탭으로 이동하고 다음을 업데이트하여 이메일 선택 필드를 디자인합니다.

• 레이아웃: 오른쪽 바디, 왼쪽 폼
• 필드 배경색: #f86a4c
• 필드 텍스트 색상: #ffffff
• 필드 글꼴: IBM Plex Sans
• 필드 텍스트 크기: 18px
• 필드 문자 간격: 2px
• 필드 줄 높이: 2em

제목

다음과 같이 제목 텍스트 설정을 업데이트합니다.

• 제목 글꼴: IBM Plex Sans Condensed
• 제목 글꼴 두께: 반 굵게
• 제목 텍스트 색상: #ffffff
• 제목 텍스트 크기: 60px(데스크톱), 30px(전화)
• 제목 줄 높이: 1.2em(데스크톱), 1.6(전화)

단추

버튼의 경우 다음을 업데이트합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 색상: #ff9945
• 버튼 배경 그라데이션 왼쪽 색상: #ff9945
• 버튼 배경 그라데이션 오른쪽 색상: #ffffff
• 기울기 방향: 90deg
• 최종 위치: 34%
• 버튼 테두리 너비: 0px
• 버튼 문자 간격: 2px
• 버튼 글꼴: IBM Plex Sans
• 버튼 글꼴 두께: 굵게
• 버튼 글꼴 스타일: TT
• 버튼 패딩: 상단 15px, 하단 15px

심

마지막으로 다음 패딩을 추가합니다.

• 패딩: 왼쪽 5%, 오른쪽 5%

최종 결과

Divi 레이아웃 편집기 내에서 레이아웃 디자인을 마치면 레이아웃을 확인하고 저장합니다. 그런 다음 게시물을 저장하여 라이브 페이지에서 이메일 옵트인의 미리보기를 볼 수 있습니다. 다음은 어떻게 생겼는지입니다.

다음은 게시물을 아래로 스크롤할 때 이메일 선택의 약간의 애니메이션입니다.

마지막 생각들

Divi 레이아웃 블록을 사용하면 Gutenberg 게시물에 이메일 옵션을 추가하는 것이 놀라울 정도로 간단해졌습니다. 완전한 기능을 갖춘(사용하기 쉬운) 이메일 옵션을 몇 초 만에 추가할 수 있을 뿐만 아니라 Divi Builder를 사용하여 사용자 지정 디자인, 호버 효과 및 애니메이션을 추가할 수도 있습니다. 플러그인을 사용하지 않고도 이 모든 것이 가능합니다!

댓글로 여러분의 의견을 기다리겠습니다.

건배!