Divi 테마 빌더를 사용하여 블로그 카테고리 페이지 템플릿을 만드는 방법

카테고리 페이지는 사용자에게 관심(또는 검색)으로 가득 찬 전체 페이지를 제공함으로써 사용자에게 매우 도움이 될 수 있습니다. 그러나 여러 번 카테고리 페이지는 디자인과 관련하여 어려움을 겪을 수 있습니다. Divi 테마 빌더 이전에는 개발자가 카테고리 페이지 템플릿 테마 파일의 php 코드를 수동으로 사용자 정의한 다음 순전히 외부 CSS로 페이지 템플릿의 스타일을 지정하는 데 의존해야 했습니다. 그러나 이제 Divi Theme Builder를 사용하면 이 과정이 쉽고 즐거워집니다!

이 튜토리얼에서는 Divi 테마 빌더를 사용하여 블로그의 카테고리 페이지 템플릿을 처음부터 완전히 만드는 방법을 보여줍니다. 게시물 카테고리에 할당된 새 템플릿을 빠르게 설정하는 방법과 Divi Builder를 사용하여 적절한 모듈과 동적 콘텐츠를 사용하여 템플릿을 디자인하는 방법을 보여드리겠습니다.

시작하자!

엿보기

다음은 이 튜토리얼에서 함께 디자인할 카테고리 페이지 템플릿에 대한 간략한 설명입니다. 이 이미지에서는 "비즈니스" 카테고리의 모든 게시물을 표시하는 데 사용됩니다.

무료로 레이아웃 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

템플릿 레이아웃을 웹사이트로 가져오려면 Divi 테마 빌더로 이동하여 이식성 옵션을 사용하여 .json 파일을 테마 빌더로 가져와야 합니다.

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 설치된 Divi 테마(또는 Divi 테마를 사용하지 않는 경우 Divi Builder 플러그인)를 설치하고 활성화하십시오.
2. 블로그 게시물에 대한 카테고리 페이지 템플릿을 만들 것이므로 카테고리가 할당된 게시물이 웹사이트에 이미 생성되어 있어야 합니다.

그 후, 당신은 갈 준비가되었습니다.

카테고리 페이지 템플릿에 사용할 수 있는 모듈 및 동적 콘텐츠

Divi 블로그용 카테고리 페이지 템플릿을 구축할 때 올바른 정보를 동적으로 표시하는 템플릿을 효과적으로 구축할 수 있도록 어떤 도구를 사용할 수 있는지 이해하는 것이 중요합니다. 블로그 게시물용 카테고리 페이지 템플릿의 경우 사용자가 카테고리 페이지를 방문할 때마다 현재 카테고리별로 게시물을 표시하는 데 가장 관심이 있습니다. 예를 들어 사용자가 "비즈니스" 카테고리 링크를 클릭하면 카테고리가 "비즈니스"인 모든 게시물을 표시하는 아카이브 페이지가 표시되어야 합니다. 일부 Divi 모듈에는 템플릿에 동적 콘텐츠를 매우 쉽게 표시할 수 있는 옵션이 내장되어 있습니다.

블로그 모듈

블로그 모듈은 카테고리 페이지 템플릿을 표시하는 데 사용해야 하는 기본 모듈입니다. 현재 페이지에 대한 게시물을 표시하는 옵션이 내장되어 있기 때문입니다.

이것은 기본적으로 사용자가 페이지를 방문할 때마다 일반적으로 생성되는 게시물을 표시하도록 Divi에 지시합니다. 따라서 "현재 페이지에 대한 게시물"을 표시하도록 옵션을 설정하면 사용자는 카테고리 페이지를 볼 수 있고 카테고리별 게시물이 올바르게 표시되도록 할 수 있습니다.

게시물 슬라이더 모듈 및 게시물 제목 모듈

게시물 슬라이더 모듈을 사용하여 현재 페이지의 게시물을 표시할 수도 있습니다. 이것은 블로그 모듈이 할 수 있는 것과 마찬가지로 카테고리 페이지를 방문할 때 생성된 게시물을 표시하는 동적 게시물 슬라이더를 만드는 데 유용합니다.

게시물 제목 모듈도 사용할 수 있지만 페이지 제목을 동적으로 표시하는 기능으로 거의 제한됩니다. 게시물 제목 모듈 내에서 사용할 수 있는 대부분의 다른 요소는 아카이브 페이지에 적용할 수 없으며 특정 게시물 템플릿에만 적용됩니다.

게시물/보관 제목(동적 콘텐츠)

게시/보관 페이지 제목을 표시하는 더 쉬운 방법은 일반 Divi 모듈을 사용한 다음 모든 Divi 모듈 내에서 사용 가능한 동적 콘텐츠 기능을 사용하여 게시/보관 페이지 제목을 가져오는 것입니다.

예를 들어 텍스트 모듈을 사용한 다음 게시물/보관 페이지 제목을 본문 콘텐츠에 동적 콘텐츠로 추가할 수 있습니다. 그런 다음 원하는 대로 제목에 스타일을 지정할 수 있습니다.

카테고리 페이지 템플릿을 만드는 데 필요한 도구를 이해했으므로 이제 함께 템플릿을 만들어 보겠습니다.

블로그에 대한 카테고리 페이지 템플릿을 만드는 방법

이 카테고리 페이지 템플릿의 목표는 Divi의 블로그 게시물에 대한 모든 카테고리 페이지에 할당되는 템플릿의 사용자 정의 본문 영역을 만드는 것입니다. 이 템플릿에 대한 사용자 정의 머리글 또는 바닥글 영역을 만들지 않을 것입니다. 그러나 자신의 머리글과 바닥글이 있는 웹사이트에서 이 템플릿을 쉽게 사용할 수 있습니다.

게시물 카테고리에 대한 사용자 정의 템플릿 생성 및 할당

시작하려면 WordPress 대시보드로 이동하여 Divi > 테마 빌더로 이동합니다. 그런 다음 빈 회색 상자 영역을 클릭하여 새 템플릿을 추가합니다.

그런 다음 템플릿을 모든 범주 페이지에 할당합니다.

템플릿에 새 사용자 정의 신체 영역 추가

템플릿에 대한 사용자 정의 본문을 작성하려면 사용자 정의 본문 추가 영역을 클릭한 다음 "사용자 정의 본문 작성"을 선택하십시오.

그런 다음 "처음부터 만들기" 옵션을 선택합니다.

동적 아카이브 제목 추가

템플릿 레이아웃 편집기에서 일반 섹션 내부에 새 1열 행을 만듭니다.

그런 다음 행에 텍스트 모듈을 추가합니다.

기본 본문 콘텐츠를 삭제하고 "동적 콘텐츠 사용" 아이콘을 클릭하고 "게시/아카이브 제목" 옵션을 선택합니다.

게시물/아카이브 제목 요소가 제자리에 있으면 톱니바퀴 아이콘을 클릭하여 설정을 엽니다.

그런 다음 Before 및 After 입력 영역을 업데이트하여 콘텐츠를 H1 태그로 래핑하고 다음과 같이 동적 제목 뒤에 정적 콘텐츠를 추가합니다.

전에:

<h1>

후에:

 Articles</h1>

SEO를 위해 제목을 H1 태그로 래핑해야 합니다. 사용자가 "비즈니스" 카테고리 페이지를 방문하면 제목이 "비즈니스 기사"로 표시되도록 정적 단어 "기사"가 제목 뒤에 추가됩니다.

스타일 동적 아카이브 제목

동적 콘텐츠가 준비되면 다음을 사용하여 스타일을 지정할 수 있습니다.

• 제목 글꼴: Ubuntu
• 제목 글꼴: 두께: 굵게
• 제목 텍스트 색상: #192231
• 제목 텍스트 크기: 48px(데스크톱), 38px(태블릿), 28px(전화)
• 제목 줄 높이: 1.2em

블로그 모듈을 사용하여 현재 카테고리의 게시물을 동적으로 표시

동적 카테고리 페이지 제목이 있는 상태에서 현재 카테고리 페이지의 게시물을 표시하는 블로그 모듈을 추가해야 합니다.

새 행 추가

현재 맨 위 행 아래에 새 1열 행을 추가합니다.

블로그 모듈 추가

그런 다음 행에 블로그 모듈을 추가합니다.

다음과 같이 콘텐츠 옵션을 업데이트합니다.

• 현재 페이지에 대한 게시물: 예
• 게시물 수: 9
• 더 읽기 버튼 표시: 예

올바른 게시물 아카이브를 가져오려면 카테고리 페이지에 대해 현재 페이지에 대한 게시물이 활성화되어 있는지 확인해야 합니다.

디자인 블로그 모듈

콘텐츠 설정이 완료되면 다음과 같이 디자인을 변경해 보겠습니다.

• 레이아웃: 그리드

• 제목 글꼴: Ubuntu
• 제목 글꼴 두께: 굵게
• 제목 텍스트 색상: #192231
• 메타 글꼴: 우분투
• 메타 텍스트 색상: #985e6d
• 메타 텍스트 크기: 13px

• 더 읽기 글꼴: Ubuntu
• 더 읽기 글꼴 두께: 굵게
• 더 읽기 글꼴 스타일: 밑줄
• 더 읽어보기 텍스트 색상: #985e6d
• 페이지 매김 글꼴: Ubuntu
• 페이지 매김 텍스트 색상: #985e6d
• 페이지 매김 텍스트 크기: 18px
• 페이지 매김 줄 높이: 2em

• 그리드 레이아웃 테두리 너비: 0px
• 박스 섀도우: 스크린샷 참조
• 상자 그림자 흐림 강도: 70px
• 상자 그림자 확산 강도: -10px
• 그림자 색상: rgba(25,34,49,0.3)

이 시점에서 우리는 현재 카테고리 페이지에 따라 올바르게 표시될 페이지 제목과 블로그 게시물과 함께 기본 카테고리 페이지를 실행하고 있습니다. 그러나 게시물을 독창적인 방식으로 표시하는 추가 모듈을 추가하여 더 창의적으로 만들 수 있습니다.

게시물 슬라이더를 만들어 현재 카테고리의 가장 최근 게시물 4개를 가져옵니다.

게시물 슬라이더 모듈을 사용하여 카테고리 페이지 게시물도 동적으로 표시할 수 있습니다. 방법은 다음과 같습니다.

새 행 추가

먼저 맨 위 행 아래에 1/3 2/3 열 레이아웃으로 새 행을 추가합니다.

포스트 슬라이더 모듈 추가

왼쪽 열에 포스트 슬라이더 모듈을 추가합니다.

그런 다음 게시물 슬라이더 콘텐츠 옵션을 다음과 같이 업데이트합니다.

• 현재 페이지에 대한 게시물: 예
• 게시물 수: 4
• 게시물 메타 표시: 아니요

디자인 포스트 슬라이더 모듈

이제 포스트 슬라이더 콘텐츠가 준비되었으므로 다음과 같이 디자인 설정을 업데이트합니다.

• 텍스트 정렬: 왼쪽
• 제목 글꼴: Ubuntu
• 제목 줄 높이: 1.3em
• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 16px
• 버튼 배경색: #985e6d
• 버튼 테두리 너비: 0px
• 버튼 글꼴: 우분투

• 박스 섀도우: 스크린샷 참조
• 상자 그림자 흐림 강도: 70px
• 상자 그림자 확산 강도: -10px
• 그림자 색상: rgba(25,34,49,0.3)

전체 너비 레이아웃으로 블로그 모듈 만들기

오른쪽 열에서 그리드 레이아웃 대신 전체 너비 레이아웃으로 다른 블로그 모듈을 추가할 수 있습니다. 이를 통해 카테고리 게시물에 또 다른 고유한 표시 영역을 제공할 수 있습니다.

블로그 모듈 추가

시간을 절약하기 위해 하단 행의 기존 블로그 모듈을 복사하여 게시물 슬라이더 옆의 오른쪽 열에 붙여넣습니다.

중복 블로그 모듈 설정 업데이트

복제된 블로그 모듈 설정을 열고 다음을 업데이트합니다.

• 현재 페이지에 대한 게시물: 예
• 게시물 수: 3
• 발췌 길이: 120
• 추천 이미지 표시: 아니요(적어도 현재로서는)
• 페이지 매김 표시: 아니요

• 레이아웃: 전체 너비:
• 상자 그림자: 없음

지금까지의 결과

지금까지 결과는 세 개의 블로그 게시물이 최소한으로 표시되었습니다.

그러나 한 단계 더 나아가 각 게시물 발췌 부분의 왼쪽에 작은 특징 이미지를 추가할 수 있습니다.

맞춤 CSS를 사용하여 게시물 발췌 콘텐츠 왼쪽에 떠 있는 더 작은 추천 이미지를 만듭니다.

블로그 게시물 발췌 부분의 왼쪽에 작은 추천 이미지를 추가하려면 사용자 정의 CSS를 추가해야 합니다.

블로그 모듈에 사용자 정의 CSS 클래스 제공

우선 블로그 모듈에 사용자 정의 CSS 클래스를 추가해야 합니다. 블로그 설정을 열고 고급 탭에서 다음을 입력합니다.

• CSS 클래스: 왼쪽 블로그 이미지

코드 모듈로 CSS 코드 추가

이 템플릿에 작은 CSS 스니펫을 추가하기만 하면 코드 모듈을 사용할 수 있습니다. 블로그 모듈 아래에 코드 모듈을 추가합니다.

CSS 코드 삽입

그런 다음 코드 콘텐츠 영역에 다음 CSS를 입력합니다.

<style>
@media (min-width: 981px) {
.left-blog-image .et_pb_post .entry-featured-image-url {
float: left;
width: 100%;
max-width: 150px;
margin: 0 20px 30px 0;
}
.left-blog-image .et_pb_post {
margin-bottom: 20px !important;
}
}
</style>

추천 이미지를 포함하도록 블로그 모듈 설정 업데이트

이제 CSS 스니펫 덕분에 왼쪽의 새 위치에 표시되도록 추천 이미지를 다시 추가할 수 있습니다.

템플릿에 추가 스타일링

마무리하기 전에 디자인에 약간의 수정을 가해 보겠습니다.

아카이브 제목 아래에 구분선 추가 및 스타일 지정

템플릿 상단의 아카이브 페이지 제목 바로 아래에 구분선 모듈을 추가합니다.

그런 다음 다음과 같이 구분선 설정을 업데이트합니다.

• 선 색상: #985e6d
• 디바이더 무게: 3px
• 최대 너비: 200px

레이아웃에 섹션 구분선 추가

섹션 설정을 열고 다음과 같이 섹션 구분선을 추가합니다.

• 상단 구분선 스타일: 스크린샷 참조
• 상단 디바이더 색상: rgba(73,78,107,0.07)
• 디바이더 높이: 90vw
• 디바이더 플립: 수평 및 수직

중복 포스트 디스플레이를 피하기 위해 각 모듈에 포스트 오프셋 번호를 사용하십시오.

현재 모든 모듈은 현재 카테고리 페이지에 대해 동일한 게시물 콘텐츠를 가져오고 있습니다. 해당 모듈이 중복을 표시하지 않도록 하기 위해 포스트 오프셋 번호 옵션을 사용하여 포스트 피드를 표시하는 특정 수의 포스트를 "건너뛰기"할 수 있습니다.

전폭 블로그 모듈 포스트 오프셋

게시물 슬라이더는 이미 현재 카테고리 페이지에 대한 첫 번째(가장 최근) 게시물을 표시하고 있으므로 인접한 블로그 모듈에서 이 게시물을 오프셋할 수 있습니다. 게시물 슬라이더 오른쪽에 있는 블로그 모듈에 대한 설정을 열고 다음과 같이 게시물 오프셋 번호를 업데이트합니다.

• 포스트 오프셋 번호: 1

이제 모듈은 현재 카테고리 페이지에 대한 두 번째 가장 최근 게시물로 시작됩니다.

그리드 블로그 모듈 포스트 오프셋

첫 번째 블로그 모듈 포스트 오프셋이 설정되면 템플릿 맨 아래에 있는 기본 블로그 모듈의 포스트를 오프셋해야 합니다. 해당 블로그 모듈을 열고 다음과 같이 포스트 오프셋 번호를 업데이트합니다.

• 포스트 오프셋 번호: 4

위에 이미 표시된 4개의 게시물을 설명하려면 오프셋 번호를 4로 설정해야 합니다. 모듈은 이제 다른 모듈이 중단된 부분을 선택하고 가장 최근의 다섯 번째 게시물부터 시작합니다.

최종 결과

최종 결과를 보려면 WordPress 대시보드로 이동하여 게시물 > 카테고리로 이동합니다. 그런 다음 클릭하여 기존 범주 중 하나를 봅니다.

다음은 최종 결과입니다.

그리고 여기 태블릿과 전화 디스플레이에 있습니다.

마지막 생각들

이 게시물이 웹사이트의 카테고리 페이지 디자인을 만드는 데 어려움을 겪을 때 조금 더 쉽게 호흡하는 데 도움이 되기를 바랍니다. Divi 테마 빌더를 사용하면 특히 현재 페이지의 게시물을 표시할 수 있는 옵션이 있는 블로그 모듈을 사용하여 매우 쉽게 작업할 수 있습니다. 또한 포스트 오프셋 옵션을 사용하면 디스플레이에 중복 포스트가 표시되지 않고 여러 블로그 모듈(또는 포스트 슬라이더 모듈)을 결합할 수 있습니다.

Divi 테마 빌더가 카테고리 페이지를 구축하는 데 어떻게 도움이 되었나요?

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

건배!