Divi 테마 빌더에서 포스트 콘텐츠 모듈을 사용하는 방법

포스트 콘텐츠 모듈은 Divi 테마 빌더에서 템플릿에 대한 바디 영역 레이아웃을 생성할 때 사용할 수 있는 특수 모듈입니다. 포스트 콘텐츠 모듈이 무엇이고 어떻게 사용하는지 이해하면 Divi 테마 빌더로 사용자 정의 템플릿을 디자인할 때 매우 도움이 될 것입니다.

이 튜토리얼에서는 Post Content Module의 작동 방식과 Divi에서 템플릿을 디자인할 때 가장 잘 사용하는 방법을 살펴보겠습니다.

뛰어들자!

YouTube 채널 구독

Divi의 포스트 콘텐츠 모듈 정보

게시물 콘텐츠 모듈의 주요 기능은 주어진 게시물 또는 페이지 템플릿 내에서 게시물 또는 페이지 콘텐츠를 표시(및 스타일 지정)하는 것입니다. 이 모듈은 테마 빌더와 함께 작동하도록 독점적으로 설계되었으므로 Divi 빌더를 사용하여 일반 페이지나 게시물을 편집하는 데 사용할 수 없습니다.

테마 빌더에서 포스트 콘텐츠 모듈은 테마 빌더 템플릿의 본문 영역 내에서 사용할 Divi 빌더용 영역을 생성합니다. 또한 기본 WordPress 편집기를 사용하여 만든 게시물 또는 페이지 콘텐츠를 표시하고 스타일을 지정하는 데 사용할 수도 있습니다. 따라서 블로그 게시물 템플릿을 만드는 데 특히 유용합니다.

모듈은 Divi에서 새 모듈을 추가하는 일반적인 프로세스를 사용하여 템플릿의 본문 영역 레이아웃에 추가할 수 있습니다. 모듈 추가 아이콘을 클릭하고 목록에서 게시물 콘텐츠 모듈을 선택하기만 하면 됩니다.

그러면 템플릿에 할당된 게시물 또는 페이지에서 상속할 기본 스타일 요소를 추가하는 데 사용할 수 있는 모든 디자인 옵션이 포함된 게시물 콘텐츠 설정 모달이 나타납니다.

모의 콘텐츠는 이러한 요소가 라이브 페이지나 게시물에서 어떻게 보이는지 보여주는 유용한 시각적 정보를 제공합니다.

이제 게시물 콘텐츠 모듈에 대한 간략한 소개가 있으므로 자체 Divi 사이트에서 이 모듈을 사용하는 방법을 살펴보겠습니다.

포스트 템플릿에 포스트 콘텐츠 모듈 사용하기

게시물 콘텐츠 모듈을 사용하여 클래식 또는 기본 편집기(Divi 아님)로 만든 게시물 콘텐츠 표시

게시물 콘텐츠 모듈의 매우 실용적인 응용 프로그램은 모듈을 사용하여 템플릿에 콘텐츠를 게시하는 스타일을 추가하여 WordPress의 기본 게시물 편집기(Divi Builder를 사용하지 않고)로 생성된 콘텐츠를 게시하는 것입니다.

예를 들어 Divi 사이트의 모든 게시물에 할당된 새 템플릿을 만들 수 있습니다.

그런 다음 템플릿 레이아웃 편집기를 사용하여 정적 디자인 요소와 동적 콘텐츠를 사용하여 블로그 게시물 템플릿을 디자인합니다.

단일 게시물의 실제 게시물 콘텐츠를 표시할 템플릿 영역을 식별합니다. 그런 다음 Post Content 모듈을 템플릿 레이아웃에 추가합니다.

그런 다음 게시물 콘텐츠 모듈 설정을 열어 사이트의 새 게시물 또는 기존 게시물에 추가된 게시물 콘텐츠에 적용하려는 스타일을 추가합니다. 포스트 콘텐츠 모듈에는 스타일을 지정할 수 있는 다양한 요소가 포함된 모의 콘텐츠가 내장되어 있습니다. 이 모의 콘텐츠는 웹사이트에서 게시물을 볼 때 실제 게시물 콘텐츠로 대체됩니다.

게시물 모듈 설정에 스타일이 추가된 템플릿에 게시물 콘텐츠 모듈이 추가되면 게시 템플릿은 라이브 사이트의 블로그 게시물에서 사용할 수 있습니다.

WordPress의 기본 편집기 또는 클래식 편집기를 사용하여 새 게시물을 만들거나 기존 게시물과 기존 게시물을 편집할 수 있습니다.

클래식 편집기를 사용하는 경우 wysiwyg 편집기를 사용하여 컨텐츠 상자에 추가된 모든 컨텐츠는 Post Content Module에 의해 스타일이 지정된 템플릿 영역을 채웁니다.

기본 WordPress 편집기(또는 블록 편집기)를 사용하는 경우 블록 편집기로 빌드한 모든 콘텐츠는 템플릿의 포스트 콘텐츠 모듈 영역을 채우고 스타일을 상속합니다.

기본/클래식 편집기를 선호하는 블로거는 템플릿의 게시물 콘텐츠 모듈에 설정된 스타일을 상속하므로 콘텐츠 스타일에 대해 걱정할 필요가 없습니다. 따라서 작가는 실제 내용에 더 집중할 수 있습니다. 또한 게시물 템플릿은 게시물의 전체 디자인을 완성하기 위해 게시물 콘텐츠를 둘러싼 추가 디자인과 동적 콘텐츠를 갖게 됩니다.

다음은 기본/클래식 편집기로 빌드된 모의 게시물의 백엔드를 살펴보겠습니다.

다음은 프론트 엔드에서 볼 때 동일한 게시물입니다.

템플릿에 존재하는 디자인과 다이내믹한 콘텐츠 외에도 템플릿을 활용한 포스트 콘텐츠의 스타일링을 주목하세요.

포스트 콘텐츠 모듈을 사용하여 Divi로 빌드된 포스트 콘텐츠를 표시합니다.

블로그 게시물에 대한 게시물 템플릿을 사용할 때 기본 편집기를 사용하는 대신 Divi 빌더를 사용하여 하나 이상의 블로그 게시물을 디자인하기로 결정할 수 있습니다. 이것은 템플릿 내에서 단순히 기본 편집기 및 게시물 콘텐츠 모듈 스타일에 의존하는 것과는 대조적으로 게시물 콘텐츠의 모든 요소 디자인에 대한 더 큰 제어를 제공합니다.

Divi Builder를 사용하여 게시물을 디자인하더라도 게시물 콘텐츠 디자인의 전체 공간은 게시물 템플릿 내 게시물 콘텐츠 모듈에서 지정한 영역 내에 포함됩니다.

자세한 내용은 사이트 전체 블로그 게시물 템플릿을 구축하는 방법에 대한 설명서를 확인하세요.

페이지 템플릿에 포스트 콘텐츠 모듈 사용

이름에도 불구하고 게시물 콘텐츠 모듈은 게시물과 페이지에 모두 사용할 수 있습니다. 따라서 웹 사이트에서 하나 이상의 페이지에 대한 본문 템플릿을 만들려면 게시 콘텐츠 모듈을 사용하여 페이지 콘텐츠가 표시되는지 확인해야 합니다.

대부분의 경우 각 페이지는 일반적으로 페이지별로 빌드되는 고유한 정적 콘텐츠로 구성되므로 하나 이상의 페이지에 대한 본문 템플릿을 만들 필요가 없습니다. 그러나 본문 템플릿이 페이지에도 유용할 때가 있었습니다. 페이지에 자동으로 표시하려는 템플릿 수준 디자인 및 콘텐츠를 추가하는 데 도움이 될 수 있습니다.

예를 들어 사이트 전체의 모든 페이지에 동일한 페이지 제목 디자인을 포함할 수 있습니다. 또는 모든(또는 일부) 페이지 하단에 Email Optin과 같은 CTA를 포함할 수 있습니다.

다음은 이것이 웹사이트에서 어떻게 작동하는지에 대한 예입니다.

먼저 Divi Theme Builder로 이동하여 새 템플릿을 만듭니다. 그런 다음 모든 페이지에 템플릿을 할당하고 템플릿에 사용자 정의 본문 영역을 추가합니다. 그런 다음 클릭하여 사용자 정의 본문 영역을 편집하십시오.

템플릿 레이아웃 편집기에서 Divi Builder를 사용하여 동적 콘텐츠를 사용하여 페이지 제목 섹션을 디자인합니다. 텍스트 모듈을 사용하고 텍스트 모듈의 본문 콘텐츠에 대해 Post/Archive Title 동적 콘텐츠 요소를 가져오는 것이 좋습니다. 게시물/보관 제목에는 페이지 제목도 표시됩니다.

그런 다음 게시물 콘텐츠 모듈에 대한 새 섹션을 만듭니다. 다시 말하지만 포스트 콘텐츠 모듈이 없으면 템플릿에 개별 페이지 콘텐츠나 디자인이 표시되지 않기 때문에 이 작업이 필요합니다.

이 게시물 콘텐츠 모듈은 페이지 콘텐츠의 상위 컨테이너가 되므로 게시물 콘텐츠 모듈이 페이지의 전체 너비에 걸쳐 있도록 허용하는 것이 좋습니다. Divi Builder를 사용할 때 개별 페이지 콘텐츠를 디자인할 때 항상 간격을 조정할 수 있습니다.

다음으로 템플릿 하단에 모든 페이지에 표시될 섹션을 추가할 수 있습니다. 콘텐츠가 실제 게시물/페이지 콘텐츠 아래에 표시되기를 원하므로 게시물 콘텐츠 모듈이 포함된 섹션 아래에 콘텐츠를 추가해야 합니다.

다음은 소셜 아이콘과 이메일 옵션이 포함된 게시물 콘텐츠 아래에 생성된 섹션의 예입니다.

참고: Divi Builder를 사용하여 Divi에서 실제 페이지를 디자인할 것이기 때문에 포스트 콘텐츠 모듈에 스타일을 추가할 필요가 없습니다.

이제 페이지 템플릿이 준비되었으므로 페이지 > 새로 추가로 이동하여 Divi에서 새 페이지를 만들 수 있습니다. 그런 다음 제목을 추가하고 Divi Builder를 배포합니다.

그런 다음 클릭하여 프런트 엔드에서 빌드합니다.

Divi를 사용하여 프런트 엔드에서 페이지 콘텐츠를 디자인할 수 있습니다. 그러나 프론트 엔드(시각적) 빌더가 페이지에 할당된 페이지 템플릿의 게시물 콘텐츠 모듈 영역에 어떻게 포함되는지 확인하십시오. Divi Builder에서 게시물 또는 페이지를 편집할 때 전체 Divi Builder UI가 게시물 콘텐츠 모듈이 있는 열에 표시됩니다. 이 모듈 외부의 다른 모든 항목은 정적이며 Theme Builder 외부에서 수정할 수 없습니다.

따라서 이 예의 경우 페이지는 다음 영역으로 구성됩니다.

1. 글로벌 헤더(페이지 템플릿의 사용자 정의 헤더 영역에 추가됨)
2. 제목 섹션(페이지 콘텐츠 위 페이지 템플릿의 사용자 정의 본문 영역 레이아웃에 추가됨)
3. 게시물 콘텐츠 섹션(페이지 템플릿의 사용자 정의 본문 영역 레이아웃에 추가됨, Divi Builder의 건물 공간을 결정하는 게시물 콘텐츠 모듈로 구성됨)
4. CTA 섹션(페이지 콘텐츠 아래에 있는 페이지 템플릿의 사용자 정의 본문 영역 레이아웃에 추가됨)
5. 전역 바닥글(페이지 템플릿의 사용자 지정 바닥글 영역에 추가됨)

Divi Builder로 프론트 엔드에서 페이지를 편집할 때의 모습입니다.

Post Content Module은 Shortcodes로 생성된 WooCommerce 페이지를 디자인하는 데 적합합니다.

Post Content Module은 WooCommerce 페이지용 페이지 템플릿을 구축할 때마다 유용합니다. WooCommerce 페이지는 단축 코드를 사용하여 페이지 콘텐츠를 생성합니다. 이러한 단축 코드는 WooCommerce 페이지의 콘텐츠 상자에 있습니다.

Divi에서 페이지를 편집할 때 기본적으로 계정 페이지가 어떻게 보이는지 다음과 같습니다.

이 WooCommerce 페이지의 템플릿을 디자인하기 위해 페이지 편집기에 Divi Builder를 배포할 필요가 없습니다. Divi 테마 빌더에서 템플릿을 만들고 포스트 콘텐츠 모듈을 사용하여 단축 코드(적어도 일부)로 생성된 페이지 콘텐츠의 디자인을 대상으로 지정할 수 있습니다.

템플릿을 생성할 때 WooCommerce 페이지에 템플릿을 할당해야 합니다.

중요: 게시물 콘텐츠 모듈은 아카이브/카테고리 페이지의 콘텐츠를 표시하지 않습니다. 콘텐츠를 표시하기 위해 게시물 콘텐츠 모듈에 의존하는 템플릿에 쇼핑 페이지를 할당하지 않았는지 확인하십시오. 상점 페이지에는 콘텐츠가 표시되지 않습니다. 따라서 템플릿에서 콘텐츠 게시 모듈을 사용할 계획이므로 장바구니, 결제 또는 내 계정 페이지만 포함하도록 템플릿 할당을 제한해야 합니다.

이제 템플릿에 사용자 정의 본문 영역을 추가하고 템플릿 레이아웃 편집기를 사용하여 빌드할 수 있습니다.

그런 다음 Divi Builder를 사용하여 페이지 템플릿을 사용자 정의합니다. 포스트 콘텐츠 모듈을 추가할 때 숏코드에 의해 생성된 WooCommerce 페이지 요소의 디자인을 대상으로 하기 위해 디자인 설정을 업데이트해야 합니다.

게시물 콘텐츠 모듈 스타일이 적용된 프런트 엔드의 내 계정 페이지는 다음과 같습니다.

불행히도 게시물 콘텐츠 모듈은 WooCommerce 페이지 생성 콘텐츠의 모든 요소에 직접 스타일을 지정할 수 없습니다. 그러나 이것은 우커머스 페이지 템플릿을 디자인할 때 좋은 보너스를 제공할 것입니다.

인덱스/아카이브/카테고리 페이지 템플릿용 아님

포스트 콘텐츠 모듈은 특정 페이지나 Divi에서 생성된 포스트의 콘텐츠를 표시하도록 설계되었기 때문에 인덱스(아카이브) 페이지 템플릿에서는 작동하지 않습니다. 템플릿이 인덱스(아카이브) 페이지에서 사용되는 경우 모듈은 프런트 엔드에서 렌더링되지 않으므로 콘텐츠가 표시되지 않습니다.

이 모듈이 본문 영역에 있지만 게시물 콘텐츠가 없는 경우(또는 템플릿이 인덱스(아카이브) 페이지에서 사용되는 경우) 모듈은 프런트 엔드에서 렌더링되지 않습니다.

즉, 검색 결과 페이지 및 404 페이지를 포함하여 아카이브 페이지의 콘텐츠를 표시하기 위해 게시물 모듈 콘텐츠를 사용하지 마십시오.

아카이브 페이지 템플릿에 블로그 모듈을 사용하십시오.

아카이브 페이지용 템플릿을 구축하려는 경우 Divi의 블로그 모듈에는 현재 페이지의 내용을 표시하는 옵션이 포함되어 있습니다. 그러면 카테고리 또는 아카이브 페이지와 연결된 콘텐츠가 생성됩니다.

자세한 내용은 블로그의 카테고리 페이지 템플릿을 만드는 방법에 대한 이 게시물을 확인하세요.

제품 페이지 템플릿용 아님

Divi에서 WooCommerce 제품에 대한 제품 페이지 템플릿을 구축할 때 템플릿의 본문 영역에 제품 정보를 표시하기 위해 게시물 콘텐츠 모듈에 의존하지 않는 것이 가장 좋습니다. Divi에는 템플릿 수준에서 제품 정보를 동적으로 가져오는 데 필요한 모든 Woo 모듈이 있습니다. 제품 페이지에 할당된 템플릿에서 포스트 콘텐츠 모듈을 사용하면 콘텐츠 상자에 포함된 콘텐츠만 표시됩니다(기본적으로 제품 설명만 있음).

자세한 내용은 제품 페이지 템플릿을 만드는 방법을 확인하세요.

게시물 콘텐츠 모듈이 누락된 경우 경고

게시물 콘텐츠 모듈이 테마 빌더 템플릿의 본문에 포함되어 있지 않고 해당 템플릿을 사용하여 게시물을 편집하기 위해 "Divi 빌더 사용"을 선택하면 누락되었다는 경고 팝업 상자가 표시됩니다. 사용 중인 템플릿의 게시물 콘텐츠 모듈입니다. 템플릿에 필요한 변경을 수행하기 위해 테마 빌더로 직접 이동하는 버튼도 있습니다.

마지막 생각들

Divi 사이트에 대한 새 템플릿을 디자인할 때 포스트 콘텐츠 모듈을 사용하는 방법을 이해하는 것이 중요합니다. 모듈은 블로그 게시물용 템플릿을 생성하기 위해 동적 콘텐츠 요소와 함께 사용하는 것이 가장 좋습니다. 이 템플릿은 Divi Builder를 배포하지 않고도 블로그 게시물을 생성하는 생성 워크플로를 간소화할 수 있습니다. 그러나 포스트 콘텐츠 모듈은 WooCommerce 페이지와 같은 페이지 템플릿에도 유용할 수 있습니다.

지금까지 포스트 콘텐츠 모듈을 사용해 본 경험은 무엇입니까?

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

건배!