Divi Layout Block은 Divi Builder의 강력한 디자인 기능을 WordPress의 기본 블록 편집기(Gutenberg)와 통합하는 여러 가지 편리한 방법을 제공합니다. 이를 통해 대부분의 내용을 작성할 수 있습니다. 내용 익숙한 Gutenberg 블록 인터페이스를 사용하여 블로그 게시물을 작성한 다음 맞춤 디자인이나 기능이 필요한 곳에 Divi 레이아웃을 삽입하세요. Divi 레이아웃 블록에는 Divi Builder에서 생성할 수 있는 모든 것이 포함될 수 있지만, 다음과 같이 간단하고 필수적인 것을 포함하는 데에도 좋습니다. 형태 구독의.

이 자습서에서는 형태 Divi 레이아웃 블록을 사용하여 구텐베르크 블로그 게시물 구독.

가능한 결과

최종 결과 divi

JSON 레이아웃 블록 가져 오기

Divi 라이브러리에서 레이아웃 다운로드

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

Divi 가져 오기

그런 다음 다운로드 폴더에서 JSON 파일을 선택하고 "Import Divi Builder Layouts"를 클릭하십시오.

json divi 1 가져 오기

구텐베르크 게시물에 새 Divi 블록 추가

레이아웃을 가져 오면 Gutenberg 메시지에 액세스하여 새로운 Divi 레이아웃 블록을 추가 할 수 있습니다.

Divi 디자인

저장된 프리젠 테이션에서 JSON 파일 가져 오기

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

구텐베르크에 양식 삽입
Divi 레이아웃 이메일 구독

그리고 그게 전부입니다!

divi 양식 모듈 삽입

튜토리얼로 넘어 갑시다, 알았죠?

Gutenberg 블로그 게시물에 Optin 이메일 모듈 추가

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

시작하려면 새 블로그 게시물을 만들거나 기존 게시물을 편집해야 합니다. 이 예에서는 다음을 추가해 보겠습니다. 내용 몇 개의 머리글과 단락 블록을 사용하여 기사의 제목과 본문을 더미로 만듭니다. 다음으로 추천 이미지를 추가하고 Divi 페이지 설정에서 레이아웃에 대해 “사이드바 없음”을 선택하세요.

아이템 디자인

온라인으로 Divi 레이아웃 블록 추가

대부분의 게시물이 생성되면 게시물 영역의 원하는 위치에 새로운 Divi 레이아웃 블록을 추가하기만 하면 됩니다. 내용 출판의. 메시지 내용에 분명히 관심이 있는 자격을 갖춘 리드를 포착하기 위해 메시지 끝 부분에 이를 추가할 수도 있습니다.

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

디비 디자인 블록 추가

Divi 레이아웃 블록에서 새 레이아웃 생성

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

새로운 divi 디자인 디자인

섹션 디자인

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

시작하려면 이미 기본 섹션의 섹션 설정을여십시오.

레이아웃의 경우 XNUMX 열 레이아웃을 선택합니다.

divi 레이아웃 선택

그런 다음 열 중 하나에 Email Optin 모듈을 추가하고 열 선택은 귀하에게 맡깁니다.

Optin divi 이메일 모듈

다음으로 섹션의 배경을 사용자 지정합니다. 항상 값을 변경하여 디자인을 독특하게 만들 수 있습니다. 그러나 다음 값을 사용했습니다.

  • 배경 : # ff6100
  • Top & Bottom Separator : 위에서부터 세는 13 번째.
Divi 모듈 분리기
  • 구분선 요소 너비 : 40px (상단 및 하단).

이제 반대쪽 열에 텍스트를 추가하겠습니다. 여기서는 인센티브 텍스트를 사용하여 방문객 구독하기.

Divi 텍스트 모듈

그런 다음 다른 수정을해야합니다.

  • 폰트 텍스트 : Montserrat
  • 글꼴 색상 : #FFF
  • 텍스트 글꼴 자막 H2 : Montserrat
  • 텍스트 자막 H2 크기 : 2.5em
  • 텍스트 자막 H2 색상 : #FFF
Divi 타이틀 개인화

사용할 이메일 시스템을 구성해야합니다. 구텐베르크가 다음과 호환된다는 것을 알아야합니다. MailChimp.

마지막 생각

Divi 레이아웃 블록을 사용하면 Gutenberg 메시지에 optin 이메일을 추가하는 것이 매우 쉬워졌습니다. 몇 초 만에 완전히 작동하는 (사용하기 쉬운) 이메일 옵션을 추가 할 수있을뿐만 아니라 Divi Builder를 사용하여 맞춤형 디자인, 호버 효과 및 애니메이션을 추가 할 수도 있습니다. 이 모든 것이 플러그인을 사용하지 않고도 가능합니다!