Gutenberg 블로그 게시물을 위한 재사용 가능한 Divi 레이아웃 블록을 만드는 방법

Divi 레이아웃 블록은 계속해서 Divi 테마로의 유용한 업그레이드를 제공하므로 Gutenberg 편집기 내에서 블로그 게시물에 모든 Divi 레이아웃을 추가할 수 있습니다. 다른 WordPress 블록과 마찬가지로 Divi 레이아웃 블록을 Gutenberg에서 재사용 가능한 블록으로 변환할 수도 있습니다. 이렇게 하면 유용한 Divi 레이아웃 디자인을 Gutenberg에서 게시물을 작성하는 일반적인 흐름으로 간소화할 수 있는 문이 열립니다.

이 자습서에서는 Gutenberg 블로그 게시물에 재사용 가능한 Divi 레이아웃 블록을 만드는 방법을 보여줍니다. 이를 설명하기 위해 이 게시물의 재사용 가능한 Divi 레이아웃 블록 예제에 대한 섹션 구분선을 만들 것입니다. 그러나 이 동일한 기술을 쉽게 적용하여 Divi 빌더의 거의 모든 것에 대해 재사용 가능한 Divi 레이아웃 블록을 생성할 수 있습니다.

시작하자.

Gutenberg 블로그 게시물을 위한 Divi 레이아웃 블록 만들기

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

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

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

대량의 게시물이 생성되면 게시물 콘텐츠 영역 내에서 원하는 곳에 새 Divi 레이아웃 블록을 추가하기만 하면 됩니다.

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

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

Divi 레이아웃 블록이 선택되면 "새 레이아웃 빌드" 또는 "라이브러리에서 로드" 옵션이 제공됩니다. 이 예에서는 새 구분선을 만들어야 하므로 "새 레이아웃 만들기" 옵션을 선택합니다.

Divi 레이아웃 블록 편집기를 사용하여 레이아웃 디자인

Build New Layout 버튼을 선택하면 레이아웃 블록 편집기 내에서 Divi 레이아웃을 디자인할 수 있습니다.

이 예에서는 Divi의 섹션 모양 구분선과 그라데이션 배경을 사용하여 사용자 지정 구분선 또는 구분선을 만듭니다. 이것은 구텐베르크 포스트 내에 섹션 구분선을 추가하는 편리한 방법을 위해 재사용 가능한 레이아웃 블록으로 바꿀 수 있는 디자인 요소입니다.

섹션 구분선 디자인을 만들려면 섹션 설정을 열고 다음을 업데이트하세요.

• 그라데이션 배경 왼쪽 색상: #ddd6f3
• 그라데이션 배경 오른쪽 색상: #faaca8
• 기울기 방향: 90deg
• 시작 위치: 30%

• 상단 구분선 스타일: 스크린샷 참조
• 상단 구분선 색상: #ffffff
• 상단 디바이더 높이: 50px

• 하단 구분선 스타일: 스크린샷 참조
• 하단 구분선 색상: #ffffff
• 하단 디바이더 높이: 50px
• 하단 디바이더 플립: 수평

• 높이: 100px
• 패딩: 0px 상단, 0px 하단

디자인이 완료되면 Divi 레이아웃 블록을 저장해야 합니다.

이제 Divi 레이아웃 블록 섹션 구분선이 WordPress 게시물 편집기 내부에 표시됩니다.

레이아웃 블록의 Divi 레이아웃 위와 아래의 간격은 프런트엔드보다 백엔드에서 더 크게 나타날 수 있습니다.

이제 이 Divi 레이아웃 블록을 재사용 가능한 레이아웃 블록으로 변환하여 향후 게시물에서 동일한 섹션 구분선을 쉽게 추가할 준비가 되었습니다.

그러나 그 전에 WordPress에서 재사용 가능한 블록이 무엇인지 아는 것이 도움이 될 수 있습니다.

재사용 가능한 레이아웃 블록이란

WordPress의 기본 블록 편집기(Gutenberg)의 재사용 가능한 레이아웃 블록은 Divi의 전역 요소와 매우 유사합니다. 블록은 여러 번 사용할 수 있지만 내용과 모양은 모든 인스턴스에서 정확히 동일하게 유지됩니다. 그리고 재사용 가능한 레이아웃 블록을 편집할 때 변경 사항은 사이트 전체의 레이아웃 블록의 모든 인스턴스에 적용됩니다. WordPress에서 레이아웃 블록을 재사용할 수 있게 되면 게시물을 작성할 때 블록 목록에서 해당 블록을 사용할 수 있습니다. 이렇게 하면 여러 블로그 게시물에 동일한 레이아웃 블록을 여러 번 추가하는 것이 매우 편리합니다.

Divi 레이아웃 블록을 재사용 가능한 레이아웃 블록으로 바꾸기

Divi 레이아웃 블록을 재사용 가능한 블록으로 만들려면 레이아웃 블록 위에 마우스를 놓고 점 3개 아이콘을 클릭하여 설정 메뉴를 엽니다. 그런 다음 목록에서 "재사용 가능한 블록에 추가" 옵션을 선택합니다.

그런 다음 재사용 가능한 블록에 이름을 지정하고 저장 버튼을 클릭하여 블록을 재사용 가능한 블록으로 저장합니다.

이제 블로그 게시물에 새 블록을 추가하면 목록에서 재사용 가능한 새 레이아웃 블록을 찾을 수 있습니다(재사용 가능 카테고리 토글 아래). 재사용 가능한 레이아웃 블록을 클릭하기만 하면 게시물에 추가됩니다.

이제 라이브 게시물을 보면 정확히 동일한 섹션 구분선의 두 인스턴스를 볼 수 있습니다.

게시물 또는 사이트 전체에서 재사용 가능한 블록을 여러 번 사용하면 재사용 가능한 레이아웃 블록의 인스턴스 중 하나를 편집할 수 있으며 이러한 변경 사항은 사이트 전체의 블록의 모든 인스턴스에 적용됩니다.

재사용 가능한 레이아웃 블록을 편집하려면 블록 위에 마우스를 놓고 블록 오른쪽 상단의 편집 버튼을 클릭합니다.

그런 다음 재사용 가능한 블록 내의 레이아웃을 선택(클릭)하고 나타나는 상단 메뉴에서 편집 아이콘을 클릭합니다. 오른쪽 사이드바의 블록 탭 아래에 있는 레이아웃 편집 링크를 클릭할 수도 있습니다.

그런 다음 레이아웃의 디자인을 원하는 대로 변경합니다. 이 예에서는 그라데이션 배경에 사용되는 색상을 변경할 수 있습니다.

레이아웃을 저장한 후 재사용 가능한 레이아웃 블록의 오른쪽 상단에 있는 저장 버튼을 클릭해야 합니다. 그런 다음 게시물을 업데이트하고 라이브 사이트에서 변경 사항을 확인하십시오.

재사용 가능한 레이아웃의 모든 인스턴스에 대해 디자인 변경 사항이 업데이트되었음을 ​​알 수 있습니다.

팁: 재사용 가능한 레이아웃 블록을 템플릿으로 사용하기

포스트에서 재사용 가능한 레이아웃 블록의 수정된 버전을 사용하고 싶을 때가 있습니다. 이를 통해 재사용 가능한 레이아웃 블록을 포스트에 시작 템플릿으로 추가할 수 있으므로 사이트 전체에서 재사용 가능한 블록에 영향을 미치지 않고 특정 인스턴스에 대한 레이아웃 블록을 사용자 정의할 수 있습니다.

재사용 가능한 레이아웃 블록을 템플릿으로 사용하려면 먼저 재사용 가능한 블록을 게시물에 추가하세요.

그런 다음 블록 메뉴를 열고 "일반 블록으로 변환" 옵션을 선택합니다.

이제 다른 재사용 가능한 블록에 영향을 주지 않고 이 인스턴스의 특정 디자인에 대한 레이아웃을 편집할 수 있습니다.

마지막 생각들

재사용 가능한 Divi 레이아웃 블록을 만드는 것은 특히 섹션 구분선과 같은 Divi 디자인 요소에 유용할 수 있습니다. 이를 통해 게시물 전체에서 구분선을 반복적으로 사용할 수 있습니다. 게시물 작성 프로세스를 간소화할 뿐만 아니라 사이트 전체에서 블록 디자인을 훨씬 쉽게 업데이트할 수 있는 기능을 제공합니다. 이 게시물에서 섹션 구분선을 재사용 가능한 블록으로 추가하는 방법을 보여 주었지만, 이 동일한 기술을 사용하여 다른 수많은 이유로 무한한 재사용 가능한 Divi 레이아웃 블록을 생성할 수 있습니다.

재사용 가능한 Divi 레이아웃 블록을 자신의 블로그 게시물에 통합하는 유용한 방법을 식별할 수 있습니까?

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

건배!