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 마케터 테마 페이지 대표 이미지 중복 문제 해결 방법
