Gutenberg 포스트 전체에 Divi-Built Highlighted Quotes를 추가하는 방법

블로그 게시물을 작성할 때 누군가를 인용하거나 일반 단락에 사용된 문장을 강조하고 싶은 경우가 종종 있습니다. 이제 구텐베르크 편집기 내에서 즉시 인용 블록을 추가할 수 있지만 잠재적으로 원하는 만큼 많은 디자인 자유를 제공하지 않습니다. Divi의 레이아웃 블록을 사용하면 더 이상 문제가 되지 않습니다. 다른 곳에서 구텐베르크 환경을 유지하면서 Divi로 특정 블록을 쉽게 구축할 수 있습니다. 이 튜토리얼에서는 Divi를 사용하여 블로그 게시물에 강조 표시된 인라인 인용문을 추가하는 방법을 보여줍니다. JSON 파일도 무료로 다운로드할 수 있습니다!

시작하겠습니다.

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에 따른 결과를 간단히 살펴보겠습니다.

예 #1

데스크탑

이동하는

예 #2

데스크탑

이동하는

무료로 Divi-Built 하이라이트 인용문 레이아웃을 다운로드하십시오

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

파일 다운로드

무료로 다운로드

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

다운로드

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

https://youtu.be/zScpa4-I7-8

YouTube 채널 구독

레이아웃 블록 JSON 가져오기

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

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

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

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

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

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

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

일반 단계

간단하고 UX 친화적인 블로그 게시물 템플릿 사용

템플릿 다운로드

이 튜토리얼의 스타일을 정의하기 위해 이전 게시물의 게시물 템플릿을 사용합니다. 해당 게시물로 이동하여 템플릿을 다운로드합니다.

Divi 테마 빌더로 이동

그런 다음 Divi 테마 빌더로 이동합니다.

게시물 템플릿 업로드

오른쪽 상단 모서리에 있는 아이콘을 클릭하고 가져오기 탭으로 이동하여 이 튜토리얼의 첫 번째 단계에서 다운로드한 게시물 템플릿을 가져옵니다.

기존 구텐베르크 포스트 열기 또는 새로 만들기

게시물 템플릿을 설정하면 새 Gutenberg 게시물을 만들거나 기존 게시물을 열 수 있습니다.

새 인라인 Divi 블록 추가

게시물 내부 어딘가에 새 Divi 블록을 추가하십시오.

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

블록을 추가하면 두 가지 옵션이 제공됩니다. '새 레이아웃 빌드'라고 표시된 것을 선택하십시오.

예제 #1 다시 만들기

섹션 설정

간격

Divi 레이아웃 블록 편집기에 들어가면 섹션이 표시됩니다. 첫 번째 예제 디자인을 다시 만들려면 섹션 설정을 열고 그에 따라 여백 값을 수정합니다.

• 상단 여백: 50px
• 하단 여백: 50px
• 왼쪽 여백: -5%
• 오른쪽 여백: -5%

국경

다음 섹션에 왼쪽 테두리를 추가합니다.

• 왼쪽 테두리 너비: 2px
• 왼쪽 테두리 색상: #000000

생기

다음 애니메이션 설정을 사용합니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 아래로
• 애니메이션 지속 시간: 1500ms
• 애니메이션 강도: 200%
• 애니메이션 시작 불투명도: 100%
• 애니메이션 속도 곡선: Ease-In-Out

새 행 추가

열 구조

다음 열 구조를 사용하여 섹션에 새 행을 계속 추가합니다.

사이징

행 설정을 열고 그에 따라 크기 설정을 변경합니다.

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

생기

다음과 같이 애니메이션 설정을 변경하여 행 설정을 완료합니다.

• 애니메이션 스타일: 페이드
• 애니메이션 지연: 1500ms
• 애니메이션 속도 곡선: Ease-In-Out

열에 텍스트 모듈 추가

H3 콘텐츠 삽입

우리에게 필요한 유일한 모듈은 텍스트 모듈입니다. H3 강조 표시된 인용 내용을 삽입합니다.

H3 텍스트 설정

다음과 같이 H3 텍스트 설정을 수정하여 모듈 설정을 완료합니다.

• H3 글꼴 스타일: 기울임꼴
• H3 텍스트 크기: 2.1rem(데스크톱), 1.5rem(태블릿), 1.3rem(전화)
• H3 라인 높이: 1.5em

예제 #2 다시 만들기

섹션 설정

간격

대신 두 번째 디자인 예제를 다시 만들고 싶습니까? 섹션 설정을 열고 다음과 같이 간격 값을 수정합니다.

• 상단 여백: 50px
• 하단 여백: 50px
• 왼쪽 여백: -5%
• 오른쪽 여백: -5%
• 상단 패딩: 0px
• 하단 패딩: 0px

새 행 추가

열 구조

그런 다음 다음 열 구조를 사용하여 새 행을 추가합니다.

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 행이 전체 섹션 컨테이너의 너비를 차지하도록 허용합니다.

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

열에 텍스트 모듈 #1 추가

콘텐츠 추가

첫 번째 텍스트 모듈부터 시작하여 모듈을 추가할 시간입니다. 내용 상자에 견적을 추가합니다.

텍스트 설정

디자인 탭으로 이동하여 다음과 같이 텍스트 설정을 변경합니다.

• 텍스트 글꼴: Playfair 디스플레이
• 텍스트 색상: #eaeaea
• 텍스트 크기: 500px
• 텍스트 줄 높이: 0em

간격

상단 여백도 추가하고 있습니다.

• 상단 여백: 150px

생기

그런 다음 애니메이션 설정을 변경합니다.

• 애니메이션 스타일: 뒤집기
• 애니메이션 방향: 중앙
• 애니메이션 지연: 500ms
• 애니메이션 강도: 200%
• 애니메이션 속도 곡선: Ease-In-Out

위치

위치 설정도 수정하여 따옴표가 행 컨테이너의 왼쪽 상단 모서리에 배치되었는지 확인합니다.

• 위치: 절대
• 위치: 왼쪽 상단

열에 텍스트 모듈 #2 추가

H3 콘텐츠 추가

다음 텍스트 모듈로 넘어갑니다. H3 강조표시된 인용문 내용을 내용 상자에 추가합니다.

H3 텍스트 설정

모듈의 디자인 탭으로 이동하여 H3 텍스트 설정을 다음과 같이 변경합니다.

• 제목 3 글꼴 스타일: 기울임꼴
• 제목 3 텍스트 크기: 2.6rem(데스크톱), 1.7rem(태블릿), 1.3rem(전화)
• 제목 3 줄 높이: 1.4em

간격

다양한 화면 크기에서도 사용자 정의 여백 값을 추가하십시오.

• 상단 여백: 150px
• 하단 여백: 150px
• 왼쪽 여백: 150px(데스크톱), 70px(태블릿), 30px(휴대폰)
• 오른쪽 여백: 150px(데스크톱), 70px(태블릿), 30px(휴대폰)

생기

그리고 다음과 같이 애니메이션 설정을 변경하여 모듈 설정을 완료합니다.

• 애니메이션 스타일: 페이드
• 애니메이션 지연: 2000ms
• 애니메이션 속도 곡선: Ease-In-Out

열에 텍스트 모듈 #3 추가

콘텐츠 추가

또 다른 텍스트 모듈인 다음이자 마지막 모듈로 넘어갑니다. 내용 상자에 따옴표 기호를 추가합니다.

텍스트 설정

모듈의 디자인 탭으로 이동하여 텍스트 설정을 변경합니다.

• 텍스트 글꼴: Playfair 디스플레이
• 텍스트 색상: #eaeaea
• 텍스트 크기: 500px
• 텍스트 줄 높이: 0em
• 텍스트 정렬: 오른쪽

생기

다음에 다음 애니메이션 설정을 사용합니다.

• 애니메이션 스타일: 뒤집기
• 애니메이션 방향: 중앙
• 애니메이션 지연: 1000ms
• 애니메이션 강도: 200%
• 애니메이션 속도 곡선: Ease-In-Out

위치

그리고 따옴표가 행 컨테이너의 오른쪽 하단 모서리에 있는지 확인하십시오.

• 위치: 절대
• 위치: 오른쪽 하단

재사용을 위해 견적 레이아웃을 Divi 라이브러리에 저장

원하는 견적 레이아웃을 완성한 후에는 Divi 라이브러리에 저장하여 향후 게시물에도 사용할 수 있도록 하세요!

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.

예 #1

데스크탑

이동하는

예 #2

데스크탑

이동하는

마지막 생각들

이 게시물에서 우리는 Divi의 레이아웃 블록으로 창의력을 발휘하는 방법을 보여주었습니다. 보다 구체적으로, 우리는 Gutenberg 블로그 게시물 전체에 애니메이션으로 강조 표시된 인용문을 추가하는 방법을 보여주었습니다. 디자인 가능성은 무한하지만 시작할 수 있는 두 가지 예를 제공했습니다. JSON 파일도 무료로 다운로드할 수 있었습니다! 질문이나 제안 사항이 있으면 아래의 댓글 섹션에 자유롭게 의견을 남겨주세요.

Divi에 대해 자세히 알아보고 더 많은 무료 Divi를 받고 싶다면 이메일 뉴스레터와 YouTube 채널을 구독하세요. 그러면 항상 이 무료 콘텐츠를 가장 먼저 알고 혜택을 받을 수 있습니다.