Word Cracker의 잡다한 정보 모음

Divi 테마에서 블로그 모듈 레이아웃 변경하기

13

Divi 블로그 모듈

Elegant Themes의 Divi 빌더에서는 다양한 모듈을 제공하여 쉽게 레이아웃 작업을 할 수 있도록 지원합니다. 하지만 블로그 모듈의 경우 Full-Width(꽉찬 너비)와 Grid(그리드) 두 가지 레이아웃만 제공되어 조금 아쉬운 감이 있습니다.

그리드 레이아웃의 경우 이 블로그의 전면 페이지에 사용되고 있습니다. 맨 아래의 “Recent Posts” 섹션이 블로그 모듈의 Grid 레이아웃으로 되어 있습니다.

Divi 블로그 모듈

Full-width는 블로그 글이 특성 이미지가 위에 나오고 제목과 요약글이 아래에 나오는 형식으로 되어 있는 일반적인 블로그 레이아웃입니다.

기본적으로 제공되는 블로그 모듈을 변경하고 싶은 경우 직접 커스터마이징을 하거나 Portfolio Posts Pro와 같은 플러그인을 사용할 수 있습니다. Portfolio Posts Pro를 사용하면 여러 가지 포트폴리오 형식으로 블로그 글을 나열할 수 있습니다.

Divi 포트폴리오 레이아웃

또 다른 플러그인으로 Divi Custom Blog Modules이라는 Divi 전용 플러그인도 있습니다.

Divi Custom Blog Modules

블로그 모듈 레이아웃 변경하기

직접 블로그 모듈의 레이아웃을 커스터마이징하는 것도 가능합니다. 아래 그림은 “꽉찬너비” 레이아웃을 조금 변경하여 왼쪽에 썸네일(특성 이미지)이 표시되고 오른쪽에 제목과 요약글이 표시되도록 한 것입니다. (즉, 위쪽에 있던 썸네일을 왼쪽으로 이동시킨 것입니다.)

Divi Custom Blog Module

이런 형식의 블로그 레이아웃을 추가하는 방법이 Divi 포럼에 나와 있습니다. 하지만 설명이 부족하여 적용하는 데 조금 애를 먹었습니다. 요약하자면 다음과 같은 방법으로 레이아웃을 추가할 수 있습니다.

작업을 시작하기 전에 먼저 차일드 테마를 만드시기 바랍니다. 저는 귀찮아서 주로 플러그인을 사용하여 차일드 테마를 만듭니다(“원클릭으로 간편하게 차일드 테마 만들기” 참고).

여기에서 cbm,zip 파일을 다운로드받고 압축을 풉니다. 압축을 푼 cbm.php 파일을 FTP를 통해 /wp-content/themes/DiviChild/custom-modules 폴더로 업로드합니다. FTP 사용 방법은 여기를 참고하시기 바랍니다.

이제 Divi 차일드 테마의 함수 파일(functions.php)에 다음 코드를 추가합니다.

/*============================================
Loading the Custom Module into child theme
=============================================*/
function divi_child_theme_setup() {
if ( class_exists('ET_Builder_Module')) {
get_template_part( 'custom-modules/cbm' );
$cbm = new WPC_ET_Builder_Module_Blog();
remove_shortcode( 'et_pb_blog' );
add_shortcode( 'et_pb_blog', array($cbm, '_shortcode_callback') );
}
}
add_action('wp', 'divi_child_theme_setup', 9999);

마지막으로 다음 CSS 코드를 워드프레스 대시보드에서 Divi > 테마 옵션 > 일반 > 사용자 맞춤 CSS에 추가합니다.

.wpc-bm-iltr article .wpc-article-featured {
width: 45%;
float: left;
}
.wpc-bm-iltr article .wpc-article-content {
width: 50%;
float: right;
}
.wpc-bm-iltr article .wpc-article-content .entry-title {
margin-top: 0;
}

이제 블로그 모듈을 추가하고 레이아웃을 “꽉찬너비“로 지정한 다음, “블로그 모듈 설정“의 고급에서 CSS 클래스 란에 wpc-bm-iltr를 추가하면 왼쪽에는 썸네일이 오른쪽에는 글 제목과 요약문 등이 표시됩니다. 위의 CSS 코드는 적절히 변경하여 원하는 비율로 수정이 가능합니다.

Divi 블로그 모듈 CSS 클래스

블로그 모듈에서 썸네일 이미지의 높이가 너무 크다고 생각되면 다음과 비슷한 CSS 코드를 사용할 수 있습니다. (테스트는 해보지 않았지만 문제 없이 적용될 것 같습니다.)

.et_post_meta_wrapper > img {height: 250px; width: auto;}

높이를 150px에서 250px 사이트로 조정하면 적절할 것입니다.

참고:

Related Posts

Comments