Divi에서 블로그 페이지 콘텐츠 구성을 위한 5가지 팁

블로그 페이지 콘텐츠는 다양한 방식으로 구성할 수 있습니다. 블로그 페이지이기 때문에 대부분의 콘텐츠는 최근 블로그 게시물의 피드로 구성됩니다. 이 콘텐츠를 구성하는 방법을 아는 것은 단조로움을 깨고 더 독특한 블로그 페이지 디자인을 위한 문을 여는 좋은 방법이 될 수 있습니다.

이 튜토리얼에서는 다음을 배우는 데 도움이 되는 Divi에서 블로그 페이지 콘텐츠를 구성하는 데 유용한 5가지 팁을 공유합니다.

1. 2열 레이아웃을 만드는 방법
2. 스티커 포스트 사용 방법
3. 포스트 오프셋을 사용하는 방법
4. 여러 블로그 모듈을 사용하여 블로그 게시물에 대한 사용자 정의 레이아웃을 만드는 방법
5. 카테고리별로 최근 게시물을 표시하는 방법

엿보기

다음은 Divi에서 블로그 페이지 콘텐츠를 구성하는 몇 가지 방법입니다.

2열 레이아웃 사용

메인 블로그 피드 위의 추천 게시물 섹션

메인 블로그 피드 위의 전각 포스트 슬라이더

고유한 레이아웃 및 디자인을 위해 여러 블로그 모듈 사용

카테고리별 최근 게시물 표시

시작하는 데 필요한 것

아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.

이 튜토리얼에서는 두 번째 테마 빌더 팩 카테고리 페이지 템플릿을 사용합니다. 따라하기 위해 사용하려면 팩을 다운로드하고 이식성 옵션을 사용하여 divi-theme-builder-pack-2-category-page-template.json 파일을 테마 빌더로 가져옵니다.

기본적으로 가져온 템플릿은 "모든 카테고리 페이지"에 할당됩니다. 템플릿 설정을 열고 블로그에 할당합니다.

이제 템플릿 내에서 블로그 페이지 콘텐츠를 구성하는 프로세스를 시작할 준비가 되었습니다. 시작하려면 템플릿의 본문 영역에 있는 편집 아이콘을 클릭하십시오.

이제 레이아웃 편집기를 사용하여 레이아웃을 수정할 수 있습니다.

Divi에서 블로그 페이지 템플릿을 구성하기 위한 5가지 팁

이 템플릿에는 현재 페이지의 게시물(데스크톱의 3개 열)을 표시하는 한 열 행에 있는 블로그 모듈이 있습니다. 이것은 블로그 및 아카이브 페이지 템플릿에 대한 표준 설정입니다. 그러나 게시물을 표시하기 위해 이 표준 레이아웃을 유지할 필요는 없습니다. 다음은 Divi에서 블로그 페이지 콘텐츠를 구성하는 데 유용한 몇 가지 팁입니다.

#1 2열 레이아웃 만들기

블로그 모듈(그리드 레이아웃으로 설정된 경우)은 모듈이 템플릿에서와 같이 1열 행에 추가되면 게시물을 3열 구조로 표시합니다.

게시물을 2열 레이아웃으로 표시하도록 레이아웃을 변경하려는 경우 다음과 같이 할 수 있습니다.

먼저 행의 열 레이아웃을 2/3의 1/3 레이아웃으로 변경합니다. 그러면 행의 왼쪽 열에 있는 두 개의 열에 블로그 게시물이 표시됩니다.

다음으로 열 1(블로그 모듈이 포함된 설정)에 대한 설정을 열고 다음 사용자 지정 CSS를 기본 요소에 추가합니다.

width: 100% !important;

이렇게 하면 열이 행의 전체 너비에 걸쳐 있게 됩니다.

이제 오른쪽 열을 숨기기만 하면 됩니다. 열 2(빈 항목)에 대한 설정을 열고 모든 장치에서 열의 가시성을 비활성화합니다.

이제 원하는 경우 데스크탑에서 3개의 열 대신 2개의 열로 블로그 페이지 콘텐츠를 구성할 수 있습니다.

#2 스티커 포스트 사용

WordPress에 대해 잘 알고 있다면 이미 이에 대해 알고 있을 것입니다. Divi(또는 WordPress)에서 생성된 각 게시물은 고정될 수 있습니다. 게시물을 고정하면 게시물이 가장 최근에 게시된 게시물보다 먼저 블로그 페이지의 블로그 피드 맨 앞에 자동으로 표시됩니다. 이것은 청중이 보고 싶어할(또는 필요로 하는) 게시물을 추천할 수 있는 좋은 방법입니다.

게시물을 고정하려면 Divi에서 게시물을 편집하고 오른쪽 사이드바에서 "블로그 상단에 고정" 옵션을 선택하기만 하면 됩니다.

스틱으로 만든 각 게시물은 백엔드의 모든 게시물을 볼 때 "고정"으로 레이블이 지정됩니다.

이제 블로그 페이지를 방문하면 고정 게시물이 블로그 게시물 피드의 맨 앞으로 이동한 것을 볼 수 있습니다.

참고: 블로그 모듈에서 포스트 오프셋을 사용할 때 고정 포스트가 예상대로 작동하지 않을 수 있습니다. 예를 들어 블로그 모듈이 포스트 오프셋이 3인 포스트 3개를 표시하도록 설정한 경우 고정 포스트는 계속해서 3개의 포스트 앞에 표시됩니다.

다음 팁으로 넘어가기 전에 끈적끈적한 게시물을 제거하는 것이 좋습니다.

#3 포스트 오프셋을 사용하여 블로그 페이지 콘텐츠를 별도의 섹션으로 구성

각 블로그 모듈에는 Post Offest Number를 입력하는 옵션이 있습니다. 이것은 블로그 모듈이 블로그 피드를 표시하기 전에 특정 수의 최근 블로그 게시물을 건너뛰도록 지시합니다. 이 옵션은 게시물을 표시하기 위해 여러 블로그 모듈을 사용하여 블로그 페이지의 레이아웃을 약간 뒤섞고 싶을 때 유용합니다. 이렇게 하면 각 블로그 모듈을 다르게 디자인할 수 있으므로 레이아웃 디자인에 더 많은 유연성을 제공합니다.

포스트 오프셋을 사용하여 별도의 블로그 모듈로 가장 최근 포스트 표시하기

템플릿 레이아웃에서 블로그 페이지 콘텐츠를 구성할 수 있는 한 가지 방법은 페이지 상단에 추천 블로그 게시물 섹션을 추가하는 것입니다. 이것은 독특한 방식으로 상위 3개의 최신 게시물을 강조 표시할 수 있는 방법입니다. 이제 할 일입니다.

레이아웃에 새 일반 섹션을 추가합니다.

그런 다음 1열 행을 추가합니다.

템플릿과 함께 제공된 블로그 모듈을 복사하여 새 행에 붙여넣습니다.

다음과 같이 블로그 설정을 업데이트합니다.

• 게시물 수: 3
• 더 읽기 버튼 표시: 아니요
• 카테고리 표시: 아니오
• 댓글 수 표시: 아니요
• 발췌 표시: 아니요
• 페이지 매김 표시: 아니요

페이지 상단 섹션에 가장 최근 게시물 3개가 표시됩니다.

이제 위에 이미 표시된 처음 세 개의 게시물을 건너뛸 수 있도록 원래 블로그 모듈에 게시물 오프셋 번호를 추가해야 합니다.

원래 블로그 모듈에 대한 블로그 설정을 열고 다음을 업데이트합니다.

• 포스트 오프셋 번호: 3

이제 블로그 피드는 게시물 #4로 시작됩니다.

페이지 상단의 추천 섹션을 돋보이게 하려면 배경 그라디언트를 추가할 수 있습니다.

다음은 그것이 어떻게 생겼는지에 대한 예입니다.

메인 블로그 피드 위에 전각 포스트 슬라이더 추가하기

위의 추천 섹션과 마찬가지로 블로그 페이지 상단에 전체 너비 게시물 슬라이더를 추가하여 블로그 게시물 콘텐츠를 구성할 수도 있습니다. 이것은 블로그 페이지에 대한 인기 있는 디자인이며 포스트 오프셋이 있는 블로그 모듈과 함께 사용할 수 있습니다.

방법은 다음과 같습니다.

먼저 레이아웃에 전체 너비 섹션을 추가합니다.

그런 다음 섹션에 전폭 포스트 슬라이더 모듈을 추가합니다.

그런 다음 다음 설정을 업데이트합니다.

• 현재 페이지에 대한 게시물: 예
• 게시물 수: 3

그런 다음 다음과 같이 레이아웃과 일치하도록 포스트 슬라이더의 디자인을 업데이트합니다.

• 제목 글꼴: Lato
• 제목 글꼴 두께: 굵게
• 제목 텍스트 크기: 40px
• 본문 텍스트 크기: 16px
• 버튼 텍스트 크기: 14px
• 버튼 텍스트 색상: #ff0071
• 버튼 배경색: #ffffff
• 버튼 테두리 너비: 0px
• 버튼 글꼴: Lato
• 버튼 글꼴 두께: 굵게
• 버튼 글꼴 스타일: TT

블로그 모듈 표시 메인 피드에 포스트 오프셋 번호가 포스트 슬라이더의 3개 포스트를 수용하기 위해 여전히 3으로 설정되어 있는지 확인하십시오.

그런 다음 결과를 확인하십시오.

지금까지 잘보고 있습니다.

이제 이 다음 팁을 통해 별도의 블로그 모듈을 사용하는 아이디어를 살펴보겠습니다.

#4 단일 게시물로 각각 여러 블로그 모듈 추가하기

템플릿 레이아웃에 하나의 추가 블로그 모듈을 추가하는 데 그치지 않아도 됩니다. 사실, 우리는 필요한 만큼 블로그 모듈을 사용할 수 있습니다. 단일 블로그 포스트 카드에 고유한 디자인을 부여하기 위해 블로그 모듈당 하나의 포스트만 표시하도록 선택할 수도 있습니다. 그런 다음 포스트 오프셋을 사용하여 동적으로 표시되는 블로그 포스트의 완전히 고유한 레이아웃을 만들 수 있습니다.

방법은 다음과 같습니다.

먼저 기본 블로그 모듈이 포함된 행 위에 1/2 열 행을 새로 추가합니다.

아래의 원본 블로그 모듈을 복사하여 새 행의 왼쪽 열에 붙여넣습니다. 그런 다음 다음을 업데이트합니다.

• 게시물 수: 1
• 포스트 오프셋 번호: 0
• 페이지 매김 표시: 아니요

그런 다음 방금 만든 블로그 모듈을 복사하여 복제본을 오른쪽 열에 붙여넣습니다.

그런 다음 다음을 업데이트합니다.

• 포스트 오프셋 번호: 1
• 추천 이미지 표시: 아니요
• 댓글 수 표시: 아니요
• 발췌 표시: 아니요

왼쪽 열의 첫 번째 항목을 건너뛰려면 포스트 오프셋 번호를 1로 설정해야 합니다.

이제 다른 블로그 모듈을 만들고 매번 포스트 오프셋 수를 1씩 늘려 이 프로세스를 계속합니다.

오른쪽 열에서 블로그 모듈을 복제합니다.

그런 다음 포스트 오프셋 번호를 2로 변경합니다.

블로그 모듈을 한 번 더 복제하고 포스트 오프셋 번호를 3으로 변경합니다.

이제 각 블로그 모듈의 디자인을 개별적으로 자유롭게 사용자 지정할 수 있습니다. 예를 들어 각각에 다른 배경색을 추가할 수 있습니다.

결과는 다음과 같습니다.

아래의 기본 블로그 피드를 유지하려는 경우 위의 행에 있는 4개의 게시물을 수용할 수 있도록 게시물 오프셋 번호를 4로 업데이트해야 합니다.

일부 테마 빌더 카테고리 페이지 템플릿에서도 이와 동일한 기술이 사용되는 것을 볼 수 있습니다. 동일한 개념을 사용하여 카테고리 페이지 템플릿을 만드는 방법에 대한 자습서를 확인하십시오.

#5 블로그 페이지에 카테고리별로 최근 게시물 표시

블로그 페이지 템플릿의 기본 블로그 피드 외에도 카테고리별로 최근 게시물을 표시할 수도 있습니다. 이것은 레이아웃을 약간 나누고 동시에 다른 카테고리를 강조하여 블로그 페이지 콘텐츠를 구성하는 좋은 방법입니다.

방법은 다음과 같습니다.

먼저 기본 블로그 모듈이 포함된 행 아래에 새 1열 행을 추가합니다.

그런 다음 다음과 같이 블로그 설정을 업데이트합니다.

• 현재 페이지에 대한 게시물: NO
• 게시물 유형: 게시물
• 게시물 수: 3
• 포함된 카테고리: 비즈니스(또는 자신의 것)

그러면 비즈니스 카테고리의 가장 최근 게시물 3개가 표시됩니다.

그런 다음 해당 카테고리 제목이 있는 블로그 모듈 위에 텍스트 모듈을 추가합니다.

그리고 블로그 페이지에 추천 카테고리 섹션이 있는 것처럼 블로그 페이지 콘텐츠를 구성하는 좋은 방법입니다!

각각 고유한 디자인을 가진 여러 추천 카테고리 섹션을 추가할 수도 있습니다.

이러한 추천 카테고리 섹션은 블로그 페이지 템플릿 하단에 잘 맞습니다.

마지막 생각들

이 팁은 모든 종류의 고유한 방식으로 블로그 페이지 콘텐츠를 구성하는 데 도움이 됩니다. 그리고 이러한 동일한 팁은 블로그 모듈을 사용하여 콘텐츠를 표시하는 많은 다른 유형의 템플릿(카테고리/아카이브 페이지 템플릿 등)에도 적용됩니다. 이 팁을 자유롭게 탐색하고 다음 프로젝트에서 사용하십시오.

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

건배!