Divi에서 사이드바 폭을 1/4에서 1/3로 변경하는 방법

Divi 테마의 사이드바 폭 변경하기

Elegant Themes의 Divi 테마에서 사이드바의 너비(폭)는 기본적으로 20.875% 이고 왼쪽의 콘텐츠 영역은 79.125%로 설정되어 있습니다.

페이지에서는 사이드바 모듈을 추가하여 1/3 또는 1/4 등의 폭으로 추가할 수 있지만, 기본 페이지/글의 사이드바는 기본값으로 고정되어 있습니다. 경우에 따라 기본 설정 폭이 너무 좁게 보일 수 있습니다.

이 경우 다음 CSS 코드를 추가하여 오른쪽 사이드바의 폭을 변경할 수 있습니다.

#left-area{width: 66.67%;}
#sidebar{width: 33.33%;}
.et_right_sidebar #main-content .container::before {
right: 33.33% !important;
}

Divi 테마에서 CSS 코드는 Divi > 테마 옵션 > 일반 > 사용자 맞춤 CSS에 추가할 수 있습니다. 또는 차일드 테마(자식 테마)를 만들어서 스타일시트 파일에 추가하는 것도 가능합니다.

이 블로그에서 사이드바의 너비가 너무 좁은 것 같아서 아예 없애버리고 Full width로 할까 생각하다가 위의 코드를 응용하여 너비를 조정했습니다.

Divi에서 전체 폭으로 글을 표시하려는 경우 다음과 같은 코드를 사용해볼 수 있습니다.

.single-post .container:before {
display: none!important;
}
.single-post #left-area {
width: 100% !important;
}

.single-post #sidebar {
display: none;
}

위의 코드는 테스트해보지 않았지만 별 문제 없이 작동할 것입니다. 사용자들이 컨텐츠에 집중할 수 있도록 전체 너비로 조정하는 것도 괜찮은 방법 같습니다.

Divi 테마는 심플하고 강력한 기능을 제공하고 속도면에서도 괜찮은 것 같습니다. (개인적인 경험상 테마포레스트의 워드프레스 테마의 경우 Enfold도 괜찮은 속도를 보여주었습니다. Enfold는 국내에서도 사용자가 많은 편입니다.)

Divi에서 사이드바 폭을 1/4에서 1/3로 변경하는 방법 2

참고:


댓글 남기기

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