워드프레스 Divi 블로그 모듈은 발행한 글을 페이지 안에 그리드·메이슨리·전폭(fullwidth) 형태로 끌어와 썸네일·요약·메타와 함께 보여 주는 Divi 빌더의 콘텐츠 모듈이다. 일반 글 목록(블로그 인덱스)이 테마 템플릿에 종속되는 것과 달리, Divi 블로그 모듈은 어떤 페이지에든 배치해 카테고리·개수·레이아웃을 직접 골라 글 목록을 구성할 수 있다. 이 글은 Divi 블로그 모듈이 무엇을 제어할 수 있는지 — 글을 어떻게 불러오고, 어떤 레이아웃으로 펼치며, 썸네일·요약·메타·페이지네이션을 어떻게 켜고 끄는지 — 를 개념 중심으로 정리한다. (예전 캡처 이미지는 모두 유실되어 텍스트만으로 다시 썼다.)
Divi 블로그 모듈이란
워드프레스에서 “블로그 페이지”를 만드는 방법은 크게 둘이다. 하나는 설정 → 읽기에서 글 목록을 특정 페이지(예: Blog)에 지정하고 테마 기본 템플릿이 글을 나열하게 두는 방식이고, 다른 하나는 빈 페이지에 Divi 블로그 모듈을 넣어 목록의 모양과 범위를 직접 설계하는 방식이다. 후자가 Divi를 쓰는 이유에 가깝다. 모듈 하나가 곧 글 쿼리이자 출력 레이아웃이라서, 테마 코드를 건드리지 않고도 “최근 글 6개를 3열 그리드로”, “특정 카테고리만 전폭으로” 같은 구성을 페이지 안에서 끝낼 수 있다.
모듈은 두 개의 역할을 동시에 한다. 첫째는 어떤 글을 가져올지(콘텐츠 소스) 결정하는 것이고, 둘째는 가져온 글을 어떻게 보일지(레이아웃·요소 표시) 결정하는 것이다. 아래에서 이 둘을 나눠 본다.
글을 불러오는 기준 — 콘텐츠 소스
블로그 모듈의 콘텐츠(Content) 설정은 “무엇을, 몇 개나, 어디서부터” 가져올지를 정한다. 핵심 항목은 다음과 같다.
- 표시 개수(Post Count) — 한 번에 보여 줄 글의 수. 비워 두면 기본 글 목록 개수를 따른다.
- 시작 오프셋(Post Offset Number) — 앞에서 몇 개를 건너뛸지. 첫 글을 다른 모듈로 따로 강조하고 나머지를 목록으로 뺄 때 유용하다.
- 포함 카테고리(Included Categories) — 특정 카테고리만 골라 목록을 좁힐 수 있다. 한 페이지에 카테고리별 블로그 모듈을 여러 개 두는 식의 구성이 가능하다.
- 요약/본문 선택(Content Length) — 카드에 요약(Excerpt)을 쓸지 본문(Content) 전체를 쓸지 고른다.
- 요약 길이(Excerpt Length) — 요약 글자 수를 조절한다(기본값 약 270자). 글에 수동 요약문이 있으면 그것을 우선 쓰도록 설정할 수도 있다.
즉 블로그 모듈은 코드 없이 “쿼리”를 만드는 도구에 가깝다. 카테고리·개수·오프셋만 조합해도 메인 페이지용 최신 글 섹션, 카테고리 랜딩, 관련 글 영역을 각각 다른 모듈로 구성할 수 있다.
레이아웃 — 전폭·그리드·메이슨리
가져온 글을 펼치는 방식이 레이아웃이다. Divi 블로그 모듈은 대표적으로 세 가지 형태를 지원한다.
| 레이아웃 | 모양 | 어울리는 상황 |
|---|---|---|
| 전폭(Fullwidth) | 글이 한 줄에 하나씩 위에서 아래로 쌓임 | 썸네일을 크게 보여 주는 매거진형 목록, 글이 적을 때 |
| 그리드(Grid) | 카드형으로 여러 열 배치(기본 3열) | 최신 글·카테고리 목록 등 정형화된 카드 목록 |
| 메이슨리(Masonry) | 카드 높이를 콘텐츠에 맞춰 벽돌처럼 채움 | 썸네일·요약 길이가 제각각인 글을 빈틈 없이 배치 |
전폭은 글 하나하나에 시선을 모으고, 그리드는 한 화면에 더 많은 글을 정돈해 보여 준다. 메이슨리는 그리드의 변형으로, 카드마다 높이가 다를 때 아래쪽 여백이 들쭉날쭉해 보이는 문제를 줄여 준다. 어떤 레이아웃이든 콘텐츠 소스 설정(카테고리·개수)은 그대로 적용되고, 모양만 달라진다.
카드에 표시할 요소 토글
각 글 카드에 어떤 정보를 노출할지는 켜고 끄는(toggle) 옵션으로 제어한다. 디자인 톤과 정보 밀도에 맞춰 필요한 것만 남기면 된다.
- 대표 이미지(Show Featured Image) — 썸네일 표시 여부. 그리드에서는 보통 켜 두고, 텍스트 중심 목록이면 끈다. 이미지 배치(상단·좌·우)도 고를 수 있다.
- 요약(Show Excerpt) — 제목 아래 요약문 노출 여부. 위의 요약 길이 설정과 연동된다.
- 메타 정보(Meta) — 작성자, 발행일, 카테고리, 댓글 수를 각각 켜고 끌 수 있다. 깔끔하게 보이려면 날짜·카테고리만 남기는 식으로 줄인다.
- 더 보기 버튼(Show Read More Button) — 요약 끝에 “Read More” 링크를 노출해 글 전문으로 이동시킨다.
- 페이지네이션(Show Pagination) — 표시 개수를 넘는 글이 있을 때 다음/이전 페이지 이동을 제공한다. 끄면 지정한 개수만 보여 주고 더 불러오지 않는다.
여기에 더해 대표 이미지 위에 마우스를 올렸을 때 오버레이 색·아이콘을 입히는 등 디자인 탭의 세부 컨트롤(타이포그래피, 색상, 테두리, 간격)로 카드 외형을 다듬을 수 있다. 다만 표시할 요소를 먼저 정한 뒤 디자인을 손대는 순서가 깔끔하다.
블로그 모듈을 구성하는 순서
실무에서 블로그 모듈을 배치할 때의 사고 순서는 대체로 이렇게 정리된다. 클릭 위치보다 “무엇을 정해야 하는가”가 핵심이다.
- 소스 정하기 — 어떤 카테고리의 글을 몇 개, 어디서부터 가져올지(카테고리·개수·오프셋).
- 레이아웃 고르기 — 전폭·그리드·메이슨리 중 페이지 성격에 맞는 형태 선택.
- 요소 토글 — 썸네일·요약·메타·더 보기·페이지네이션 중 필요한 것만 켜기.
- 디자인 다듬기 — 카드 간격·타이포·색상·오버레이로 외형 정리.
이 흐름을 따르면 “글 목록이 페이지에 안 뜬다”거나 “원하는 글만 안 나온다” 같은 문제 대부분이 소스 설정(카테고리·개수) 단계에서 정리된다. 레이아웃과 디자인은 그다음 문제다.
참고 — 누스쿨은 지금 Elementor를 쓴다
이 글은 Divi 테마를 쓰던 시기에 작성된 자료다. 현재 누스쿨은 Elementor 기반으로 운영되며, 위에서 설명한 Divi 블로그 모듈에 대응하는 도구는 Elementor의 Posts 위젯(또는 Pro의 Loop Grid / Loop 빌더)다. 이름과 화면은 다르지만 개념은 같다. 글을 카테고리·개수 기준으로 불러와 그리드·리스트 형태로 펼치고, 썸네일·요약·메타·페이지네이션을 토글로 제어한다는 구조가 동일하다. Elementor의 Loop 빌더는 카드 한 칸의 템플릿을 직접 디자인한 뒤 그 템플릿을 글 목록에 반복 적용한다는 점에서, Divi 블로그 모듈보다 카드 디자인 자유도가 한 단계 높은 정도의 차이가 있다.
따라서 Divi에서 Elementor로 옮겨 왔더라도 “어떤 글을, 어떤 레이아웃으로, 어떤 요소까지 보일지”라는 판단 틀은 그대로 가져갈 수 있다. 빌더가 바뀌어도 글 목록 설계의 본질은 변하지 않는다.
정리
Divi 블로그 모듈은 코드 없이 글 목록을 만드는 도구다. 콘텐츠 소스(카테고리·개수·오프셋·요약)로 무엇을 가져올지 정하고, 레이아웃(전폭·그리드·메이슨리)으로 어떻게 펼칠지 고른 뒤, 썸네일·요약·메타·더 보기·페이지네이션을 토글로 다듬는 세 단계가 전부다. 이 개념틀은 현재 누스쿨이 쓰는 Elementor의 Posts/Loop 위젯에도 그대로 적용된다. 빌더의 메뉴 위치를 외우기보다 “소스 → 레이아웃 → 요소 → 디자인” 순서로 접근하면, 어떤 워드프레스 빌더에서도 블로그 목록을 빠르게 구성할 수 있다.
💬 댓글 0