GeneratePress 마케터 테마의 화면은 ‘아카이브 페이지/글 본문’과 ‘오른쪽 사이드바’ 2개의 영역으로 단순하게 구성되어 있다. 이 2개 영역의 픽셀 사이즈를 설정해두면 나중에 각 영역에 추가 요소를 배치했을 때, 영역별 비율에 맞게 자동 조절된다.
2개 영역의 기본 비율은 각각 70%, 30%으로 설정 되어 있다. 기본 설정이 취향에 안 맞으면 전체 픽셀 사이즈나 요소별 퍼센트 비율을 조절할 수 있는데 이 블로그는 위처럼 사이즈와 비율을 설정하였다.
– 전체 콘텐츠 폭 : 1,200px
– 글 본문 폭 : 820px
– 글 본문 + 콘텐츠 여백 : 840px
– 사이드바 폭 : 360px
화면과 요소 폭 설정에 정답은 없겠지만, 전체 폭 1,200px에 요소 간격을 20px로 맞추면 무난한 느낌이 든다. 아래부터는 각 영역 설정 경로를 살펴보자.
대시보드 – Appearance – Customize – Layout – Container로 오면 화면 전체 폭과 요소 사이 간격을 설정할 수 있다. 원하는 값을 입력하면 위의 ‘발행’ 버튼을 클릭하면 된다.
그리고 조금 전 Layout에서 Sidebar로 오면 맨 아래 사이드바 비율을 설정할 수 있는데 전체 폭 1,200px의 30%가 기본 값이라서 사이즈는 360px로 자동 계산된다. 여기서 비율을 조정하면 조정한 만큼 본문과 사이드바 픽셀 값이 달라진다.
설정을 마치면 글 본문 영역은 잘 적용될 것이다. 그런데 만약 글 목록 아카이브 영역에 적용이 되지 않았거나, 기기별 특정 사이즈 설정이 필요하다면 추가 설정을 해야 한다.
Appearance – Elements에서 Blog/archive loop template의 Edit을 클릭하자.
화면이 열리면 먼저 글 목록 박스를 감싸고 있는 컨테이너를 선택해야 한다. (아이콘 옆 화살표를 클릭하면 하위 요소 열림)
이후 화면 오른쪽 설정 창을 열면(저장 버튼 왼쪽의 아이콘) Block 탭에 Sizing 목록이 있는데 이곳에서 원하는 값을 입력할 수 있다. (맨 위 왼쪽 네모 아이콘을 누르면 기기별 선택 가능)
추가로 아래 보이는 Spacing의 Padding은 상하좌우 기본 값이 50px으로 되어 있다. 아카이브 글 목록 박스 안의 이미지와 글 제목 테두리 여백이 너무 넓다고 느끼면 숫자를 낮추는 것도 좋다.
PC 설정을 마치면 타블렛과 모바일도 똑같이 설정되는데, 다른 값이 필요하다면 기기별 설정을 진행하면 된다.
워드프레스 마스터 가이드
GeneratePress 마케터 테마 선택 이유와 설치 방법
GP 마케터 테마 페이지 대표 이미지 중복 문제 해결 방법
Hello Dolly 플러그인 삭제해도 괜찮을까
워드프레스 방문자 통계 플러그인 추천 5가지
