Divi 테마의 전체 폭(Fullwith) 블로그 모듈에서 썸네일을 왼쪽으로 이동시키는 방법

Divi 테마에서는 두 가지 블로그 모듈을 제공합니다. 다소 단순한 면이 있지만, Elegant Themes에서 제공하는 레이아웃 팩에 포함된 블로그 페이지를 활용하면 선택이 폭이 조금 넓어질 것입니다.

이 글에서는 Fullwidth 블로그 모듈을 활용하여 썸네일(특성 이미지)을 왼쪽으로, 요약글을 오른쪽으로 배치하는 방법에 대해 살펴보겠습니다.

왼쪽에 썸네일, 오른쪽에 요약글이 표시되도록 Divi 블로그 모듈 수정하기

섹션과 컬럼을 적당히 만든 다음 Insert Module(s)를 클릭하여 Blog(블로그) 모듈을 추가합니다.

Divi 블로그 모듈 추가하기

그러면 Blog 모듈을 설정하는 화면이 표시됩니다.

Divi 블로그 모듈 수정하기

Content(컨텐츠) 탭에서 Show Excerpt(발췌본 보여주기)를 선택합니다. 메타 항목(날짜, 작성자, 카테고리 등) 중 하나 이상을 선택하도록 합니다.

Design(디자인) 탭을 클릭합니다.

Divi 테마 블로그 모듈 수정하기

레이아웃Fullwidth(꽉찬너비)를 선택합니다.

저장한 후에 워드프레스 알림판 > Divi > Theme Options(테마 옵션) > General(일반)으로 이동한 다음, 맨 아래 Custom CSS(사용자 맞춤 CSS)에 다음 코드를 추가합니다.

/*------------------------------------------------*/
/*-------- Place Thumbnail Left and Excerpt Right ------------*/
/*------------------------------------------------*/

.et_pb_posts .et_pb_post a img,
.archive .et_pb_post a img,
.search .et_pb_post a img {
max-width: 210px!important;
float: left;
padding-right: 20px;}

.et_pb_post .entry-featured-image-url {
margin-bottom: 0px !important;
}

@media only screen and ( max-width: 1180px ) {
.et_pb_posts article .post-content {
width: 445px;
float: right;
}}

@media only screen and (max-width: 980px) {
.et_pb_posts .et_pb_post a img,
.archive .et_pb_post a img,
.search .et_pb_post a img{
float:none;
max-width: 250px!important;}}

그런 다음 상단의 Integration(통합) 탭으로 이동한 다음 다음 jQuery 스크립트를 추가합니다.

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".et_pb_posts article").each(function(){
jQuery(">a:first-child", this).insertBefore(jQuery(".post-meta", this));
});
console.log("done");
});
</script>

저장한 후에 페이지를 살펴보면 다음 그림과 같이 썸네일이 왼쪽에 배치되고 요약글을 오른쪽에 배치되는 형식으로 변경됩니다.

Divi 블로그 모듈 수정하기

CSS를 이용하여 read more를 오른쪽으로 이동시킬 수 있습니다. 어색한 부분이 있으면 CSS나 jQuery를 사용하여 적절히 변경하도록 합니다.

Divi 테마의 전체 폭(Fullwith) 블로그 모듈에서 썸네일을 왼쪽으로 이동시키는 방법 2

참고:


댓글 남기기

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