Divi의 블로그 모듈에서 컬럼 수를 늘리는 방법

Elegant Themes의 Divi 테마에서 제공하는 블로그 모듈을 "그리드"로 설정할 경우 기본적으로 3개 열로 글이 표시됩니다.

이 컬럼 개수를 4개나 5개로 늘리고 싶은 경우 간단한 방법으로 열 개수를 늘릴 수 있습니다.

다음은 블로그 모듈의 그리드 열 개수를 5개로 늘리는 방법입니다. 4개로 늘리는 것도 비슷한 방법으로 가능합니다.

먼저 페이지를 새로 만들거나 기존 페이지에서 섹션을 추가한 다음 섹션 설정에서 CSS ID를 추가하도록 합니다.

Divi의 블로그 모듈에서 컬럼 수를 늘리는 방법 5

표시되는 섹션 설정에서 고급으로 이동하여 CSS ID를 지정합니다.

Divi의 블로그 모듈에서 컬럼 수를 늘리는 방법 6

CSS ID는 원하는 ID로 지정하면 됩니다. 여기서는 customblog라는 ID를 지정합니다.

이제 행을 추가하고 열을 지정합니다. 열은 1/4과 3/4을 각각 선택합니다.

Divi의 블로그 모듈에서 컬럼 수를 늘리는 방법 7

1/4 열 영역에 블로그 모듈을 추가합니다. 그리고 3/4열 영역은 비워둡니다.

마지막으로 다음 CSS 코드를 Divi > 테마 옵션의 "사용자 맞춤 CSS" 부분에 추가합니다.

/* Increase Columns in Divi Blog Module Grid */
#customblog .et_pb_column.et_pb_column_1_4 {
width: 100%;
}
#customblog .et_pb_blog_grid .et_pb_post {
float: left;
margin-right: 1%;
max-width: 19%;
margin-bottom: 10px;
}
#customblog .et_pb_blog_grid .et_pb_post:nth-child(5n+1) {
clear: both !important;
}
// Reference: Elegant Enthusiast

이제 Divi Blog Module Grid가 5열로 표시됩니다.

실제 작동은 다음 페이지에서 확인할 수 있습니다.

4열로 표시하는 방법은 위의 방법을 약간 응용하면 됩니다. 이 부분은 어렵지 않으므로 조금 생각해보시기 바랍니다.ㅎㅎ

참고로 모바일에 대응하기 위해 미디어쿼리를 위에 제시된 코드에 적용하면 더 좋은 효과를 얻을 수 있습니다.

* 이 글은 임하늘님의 요청에 따라 작성되었습니다.

Divi의 블로그 모듈에서 컬럼 수를 늘리는 방법 8

참고:


2개 댓글

    1. 안녕하세요?

      Layout을 Grid로 설정하시고 Custom CSS에서 Gallery Item에 다음 코드를 넣으면 5열로 바뀔 것입니다.

      margin: 0 !important;
      width: 20% !important;
      clear: none !important;

      비슷한 방식으로 폭을 바꾸면 열 개수가 달라질 것입니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.