블로그 게시물을 작성하는 방법을 간소화하면 사이트 웹, 기사 어딘가에 매력적인 CTA를 포함하고 싶을 가능성이 높습니다. 이제 Divi의 새로운 Gutenberg Layout Block 통합을 사용하면 Gutenberg 블로그 게시물 어디에든 새로운 Divi 내장 블록을 쉽게 추가할 수 있습니다. 이를 통해 다음을 유지할 수 있습니다. 내용 Divi-s 내장 옵션을 사용하여 맞춤형 Divi CTA를 계속 생성하는 동시에 Gutenberg 환경의 전체 블로그 게시물을 작성합니다. 두 세계의 최고! 이 튜토리얼에서는 Gutenberg 게시물에 인라인 애니메이션 Divi CTA 레이아웃 블록을 추가하는 방법을 보여줍니다. Divi CTA 레이아웃 블록 JSON 파일도 무료로 공유해 드립니다!
가자.
가능한 결과
튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 살펴 보겠습니다.
JSON 레이아웃 블록 가져 오기
Divi 라이브러리에서 레이아웃 다운로드
위에서 다운로드 할 수있는 JSON 파일을 가져 오려면 WordPress 대시 보드의 백엔드에있는 Divi 라이브러리로 이동하여 '가져 오기 및 내보내기'를 클릭합니다.
그런 다음 다운로드 폴더에서 JSON 파일을 선택하고 "Import Divi Builder Layouts"를 클릭하십시오.
구텐베르크 내부에 새 Divi 블록 추가
레이아웃을 가져 오면 Gutenberg 메시지에 액세스하여 새로운 Divi 레이아웃 블록을 추가 할 수 있습니다.
저장된 프리젠 테이션에서 JSON 파일 가져 오기
그런 다음 "라이브러리에서로드"를 클릭하고 "저장된 레이아웃"으로 이동 한 다음 레이아웃을 선택하여 Divi CTA 레이아웃 블록을 블로그 게시물로 가져옵니다. 그게 다야!
재현을 시작합시다!
세 번째 테마 팩에 게시 템플릿 사용
세 번째 테마 작성기 팩 사용
처음부터 제작을 시작할 시간입니다! 우선 우리가 재창조하고있는 디자인은 Divi 블로그에 게시 된 세 번째 테마 생성 팩에 해당합니다. 기사로 이동 이 테마 작성 팩에 대한 JSON 파일을 다운로드하십시오.
Divi Theme Builder로 이동
세 번째 테마 작성 팩을 다운로드하면 Divi Theme Builder에 액세스 할 수 있습니다.
출판 템플릿 다운로드
오른쪽 상단에있는 아이콘을 클릭하여 Theme Builder Pack 게시물 템플릿을 다운로드하십시오.
그런 다음 포스트 템플릿을 선택하고 "Import Divi Theme Builder templates"를 클릭합니다. 테마 빌더에도 변경 사항을 저장하십시오. 이 시점에서 우리는 테마 빌딩 팩의 블로그 게시물 템플릿을 모든 게시물에 할당했습니다.
기존 구텐베르크 출판물을 열거 나 새로 출판하십시오.
다음 단계는 Gutenberg 게시물에 Divi CTA 레이아웃 블록을 추가하는 것입니다. 이렇게하려면 기존 기사를 열거 나 새 기사를 작성하십시오.
온라인으로 새로운 Divi 블록 추가
메시지 안에 새 Divi 레이아웃 블록을 추가 할 수 있습니다.
Divi 블록 내부에 새 레이아웃 만들기
그러면 두 가지 옵션이 있습니다. "새 레이아웃 만들기"옵션을 선택합니다.
섹션 설정
간격
Divi 레이아웃 블록 편집기에 들어가면 섹션이 있습니다. 이 섹션을 열고 사용자 지정 여백 값을 추가하여 섹션 컨테이너 주위에 공간을 만듭니다.
- 상단 여백 : 50px
- 아래쪽 여백 : 50px
- 왼쪽 여백 : -10 %
- 오른쪽 마진 : -10 %
라인 # 1 추가
기둥 구조
다음 열 구조를 사용하여 새 행을 계속 추가하십시오.
크기 조정
더 많은 모듈을 추가하지 않고 라인 매개 변수를 열고 너비와 최대 너비를 늘리십시오.
- 너비 : 100 %
- 최대 폭 : 100 %
컬럼에 구분 기호 # 1 추가
시계
분리 모듈부터 시작하여 모듈을 추가 할 때입니다. "분리기 표시"옵션이 활성화되어 있는지 확인하십시오.
- 구분 기호 표시 : 예
라인
모듈 디자인 탭으로 전환하고 다음과 같이 행 설정을 변경합니다.
- 선 색상 : # fc526e
- 선 스타일 : 솔리드
- 라인 위치 : 높음
크기 조정
크기 조정 매개 변수도 변경하십시오.
- 분배기 무게 : 3px
- 너비 : 30 %
- 모듈 정렬 : 오른쪽
- 높이 : 3px
애니메이션
그에 따라 애니메이션 설정을 변경합니다.
- 애니메이션 스타일 : 슬라이드
- 애니메이션 방향 : 왼쪽
- 애니메이션 기간 : 2000ms
- 애니메이션 지연 : 500ms
- 애니메이션 강도 : 100 %
- 애니메이션 시작 불투명도 : 0 %
열에 구분선 # 2 추가
시계
다음 분리 모듈로 이동하겠습니다. 다시 한 번 "분리기 표시"옵션이 켜져 있는지 확인합니다.
- 구분 기호 표시 : 예
라인
그런 다음 모듈 디자인 탭으로 이동하여 다음과 같이 행 설정을 변경합니다.
- 선 색상 : # e1e3e8
- 선 스타일 : 솔리드
- 라인 위치 : 높음
크기 조정
그런 다음 모듈 크기 조정 매개 변수를 수정하십시오.
- 분배기 무게 : 3px
- 높이 : 3px
간격
또한 사용자 지정 간격 값을 추가합니다.
- 왼쪽 여백 : 10 %
- 오른쪽 마진 : -20 %
애니메이션
그리고 다음과 같이 애니메이션 매개 변수를 변경하여 모듈 매개 변수를 완료합니다.
- 애니메이션 스타일 : 슬라이드
- 애니메이션 방향 : 왼쪽
- 애니메이션 기간 : 2000ms
- 애니메이션 지연 : 500ms
- 애니메이션 강도 : 100 %
- 애니메이션 시작 불투명도 : 100 %
애니메이션을 조정하려는만큼 많은 구분 기호를 추가 할 수 있습니다.
2 번 줄 추가
기둥 구조
다음 열 구조를 사용하여 섹션에 다른 행을 추가하십시오.
크기 조정
더 많은 모듈을 추가하지 않고 다음과 같이 라인 매개 변수를 열고 크기 조정 매개 변수를 수정하십시오.
- 사용자 정의 거터 너비를 사용하십시오. 예
- 거터 폭 : 1
- 너비 : 70 %
- 선 정렬 : 중심
열에 텍스트 모듈 # 1 추가
H2 콘텐츠 추가
다음으로, 행 열에 첫 번째 텍스트 모듈을 추가합니다. 내용 당신이 선택한 H2.
H2 텍스트 설정
디자인 탭으로 전환하고 그에 따라 H2 텍스트 설정을 변경합니다.
- 항목 2의 텍스트 색상 : # fc526e
- 헤더 2 텍스트 크기 : 28px
간격
그런 다음 사용자 정의 채우기 값을 추가하십시오.
- 상단 패딩 : 50px
- 하단 패딩 : 50px
- 왼쪽 패딩 : 50px
경계
왼쪽 테두리도 사용합니다.
- 왼쪽 테두리 너비 : 2px
- 왼쪽 테두리 색상 : # fc526e
애니메이션
맞춤 애니메이션을 추가하여 모듈 매개 변수를 완성하십시오.
- 애니메이션 스타일 : 뒤집기
- 애니메이션 방향 : 중앙
- 애니메이션 지연 : 1500ms
열에 텍스트 모듈 # 2 추가
콘텐츠 추가
다음을 사용하여 이전 모듈 바로 아래에 다른 텍스트 모듈을 추가하십시오. 내용 드 votre choix.
간격
모듈 디자인 탭으로 이동하여 그에 따라 패딩 값을 변경합니다.
- 상단 패딩 : 50px
- 하단 패딩 : 50px
- 오른쪽 패딩 : 50px
경계
그런 다음 상단 및 오른쪽 테두리를 추가하십시오.
- 위쪽 및 오른쪽 테두리 : 2 픽셀
- 오른쪽 및 오른쪽 테두리 색상 : # fc526e
애니메이션
그리고 다음과 같이 애니메이션 매개 변수를 변경하여 모듈 매개 변수를 완료합니다.
- 애니메이션 스타일 : 뒤집기
- 애니메이션 방향 : 중앙
- 애니메이션 지연 : 1700ms
열에 버튼 모듈 추가
복사본 추가
이 행에서 필요한 다음 마지막 모듈은 버튼 모듈입니다. 선택한 사본을 추가하십시오.
버튼 설정
모듈 디자인 탭으로 전환하고 다음과 같이 버튼 설정을 변경합니다.
- 버튼에 사용자 정의 스타일 사용 : 예
- 버튼 텍스트 크기 : 13px
- 버튼 텍스트 색상 : #ffffff
- 색 그라데이션 1 : # ff5b84
- 색상 그라디언트 2 : # f94857
- 그라디언트 유형 : 선형
- 그라데이션 방향 : 165deg
- 버튼 테두리 너비 : 0px
- 버튼 테두리 반경 : 0px
- 버튼 문자 간격 : 1px
- 버튼 글꼴 : 몬세 라트
- 버튼 글꼴 무게 : 반 굵은 체
- 버튼 글꼴 스타일 : 대문자
간격
그런 다음 사용자 정의 상단 및 하단 패딩을 추가하십시오.
- 상단 패딩 : 16px
- 하단 패딩 : 16px
애니메이션
그리고 다음 애니메이션을 추가하여 모듈 매개 변수를 완료합니다.
- 애니메이션 스타일 : 뒤집기
- 애니메이션 지연 : 1900ms
1 번 라인을 복제하여 섹션 하단에 배치
첫 번째와 두 번째 행을 완료하면 첫 번째 행을 복제하고 섹션 하단에 복제본을 배치 할 수 있습니다.
구분 기호 순서 변경
첫 번째 및 마지막 분리 모듈의 위치를 변경하십시오.
마지막 생각
이 기사에서는 Divi의 새로운 Gutenberg 통합을 활용하고 Gutenberg 블로그 게시물에 인라인 애니메이션 Divi CTA 피치 블록을 추가하는 방법을 보여주었습니다. 이것은 선택한 클릭 유도 문안을 강조하는 좋은 방법입니다. 방문자 블로그 게시물의 내용을 읽으십시오.
