워드프레스 GeneratePress 테마 모바일 여백 조정하기

워드프레스 GeneratePress 테마를 사용하는 경우 모바일 버전에서 본문 양옆 여백이 넓게 표시될 수 있습니다. GeneratePress 유료 버전에서는 기기별 본문 컨텐이너 여백을 조정하는 옵션이 제공됩니다. 무료 버전을 사용한다면 CSS로 조정이 가능합니다.

워드프레스 GeneratePress 테마 모바일 여백 조정하기

네이버 카페에 GeneratePress 무료 버전을 사용하는 경우 모바일 기기에서 본문 양옆 여백이 너무 넓어서 조정하는 방법에 대한 질문이 올라와서 이 글에서 여백 조정 방법에 대하여 간단히 살펴보겠습니다.

PC 버전에서는 괜찮지만 모바일에서 본문 양옆의 여백이 넓어서 가독성이 좋지 않을 수 있습니다. 무료 버전의 경우 CSS를 사용하여 조정을 시도할 수 있습니다.

유료 버전에서 여백 조정하기

유료 버전을 사용한다면 사용자 정의하기에서 쉽게 조정이 가능합니다.

GeneratePress 유료 버전인 GP Premium이 설치되어 있다면 워드프레스 관리자 페이지 » 외모 » GeneratePress에서 Spacing(여백) 모듈을 활성화합니다.

이제 외모 » 사용자 정의하기 » Layout » Container로 이동한 다음, 하단의 모바일 기기 아이콘을 클릭하고 Content Padding에서 여백을 적절히 조정하도록 합니다.

Content Padding 값을 조정해도 미리 보기 화면에 실시간으로 반영이 안 될 수 있습니다. Right 값과 Left 값을 적절히 조정하고 저장한 후에 모바일 기기에서 실제 여백을 확인해보시기 바랍니다.

CSS로 조정하기

CSS로 여백 등을 자유롭게 변경할 수 있습니다. 다음과 같은 코드로 본문 콘테이너 여백이 조정되는지 확인해보시기 바랍니다.

/* GeneratePress 테마 콘텐츠 컨테이너 내부 여백 조정하기 */
@media (max-width: 768px) {
.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header {
padding: 10px;
}
}

Padding 값은 적절히 조정합니다.

위의 코드가 잘 작동하지 않으면 직접 요소 검사를 하여 해당 상황에 맞는 코드를 확인하시기 바랍니다. 기본적인 CSS는 익히는 데 그리 시간이 걸리지 않고 어렵지 않습니다. 다음 글을 참고해보세요:

워드프레스에 CSS를 적용하는 방법[기초] - 워드프레스 정보꾸러미

마치며

이상으로 GeneratePress 테마에서 모바일 콘텐츠 컨테이너 여백을 조정하는 방법에 대하여 살펴보았습니다. 유료 버전을 사용하면 편리하게 조정이 가능하고 CSS로도 쉽게 변경할 수 있습니다.

GeneratePress 테마는 가볍고 속도가 빠른 테마로 평가받고 있으며 특히 수익형 블로그에 많이 사용되고 있습니다.

워드프레스 GeneratePress 테마: 구글 페이지 스피드 인사이트 점수

참고

https://avada.tistory.com/2789

워드프레스 Divi 테마용 무료 웹 개발자 레이아웃 팩(Web Developer Layout Pack) 다운로드

https://avada.tistory.com/2794

엘리멘터: 페이지 전체 화면을 배경 이미지로 채우는 방법