#GeneratePress Premium 레이아웃 # 가탈작 가이드
이 글을 통해 얻게 되는 정보
- GeneratePress Premium 레이아웃 셋팅 방법 (기본적이고 러프한 초기 레이아웃)
글의 순서
STEP 00 - GeneratePress Premium 레이아웃 셋팅의 방향성
GeneratePress Premium 레이아웃 디자인 작업은 다음과 같습니다.
- STEP 01 - GP 테마에서 제공하는 '사용자 정의하기' 패널을 통해 사이트의 초기 레이아웃을 러프하게 셋팅해 놓습니다. (이 글의 목적)
- STEP 02 - 글 스타일(Typography), 컬러 등을 셋팅합니다.
- STEP 03 - Elements 요소를 통해 개별 글 페이지(Single Post 페이지)와 글 모음 페이지(Archive 페이지)를 정교하게 다듬어 나갑니다
이 글에서는 초기 레이아웃을 러프하게 셋팅해 놓는 과정으로 이해하면 되겠습니다. 이 글에서 제시하는 가이드라인을 마무리하게 되면 아래와 같은 기초적인 레이아웃이 잡히게 될 것입니다. 또한 정교한 레이아웃의 작업의 경우 GP 프리미엄에서 제공되는 템플릿과 Elements를 통해 별도로 작업을 해나가게 됩니다.
#GeneratePress Premium 레이아웃 # 가탈작 가이드
STEP 01 - Container 섹션 셋팅
[ 셋팅 절차 ]
> 테마의 ‘사용자 정의하기’ 패널 OPEN
> Layout 섹션 클릭
> Container 섹션 클릭
> 입력값 셋팅 (아래 보라색 박스 참고)
> 공개 버튼 클릭
[Container 섹션 입력값 예시]
Container Width : 1200 px
Separating Space : 0 px
Content Separator : 2 em
Content Layout : Separate Containers
Container Alignment : Boxes
Content Padding :
TOP 30 | RIGHT 10 | BOTTOM 30 | LEFT 10
#GeneratePress Premium 레이아웃 # 가탈작 가이드
STEP 02 - Header 섹션 셋팅
STEP 02-1 : Use Navigation as Header 체크 해제
[ 해제 절차 ]
> 테마의 ‘사용자 정의하기’ 패널
> Layout 섹션 클릭
> Header 섹션 클릭
> Use Navigation as Header 체크 해제
* 네비게이션 메뉴를 헤더로서 사용하지 않겠다는 의미
> 로고 크기가 비정상적으로 커지게 됨
STEP 02-2 : 로고 크기 셋팅
[ 셋팅 절차 ]
> 테마의 ‘사용자 정의하기’ 패널
> 사이트 아이덴티티 섹션 클릭
> Logo Width 250 px로 설정 (자신의 취향대로)
> 공개 버튼 클릭
STEP 02-3 : Header 너비를 Content 너비와 동일하게 셋팅
[ 셋팅 절차 ]
> 테마의 ‘사용자 정의하기’ 패널
> Layout 섹션 클릭
> Header 섹션 클릭
> 입력값 설정 (아래 보라색 박스 참고)
> 공개 버튼 클릭
[ Header 섹션 입력값 예시 ]
Header Presets : Current
Header Width : Full
Inner Header Width : Contained
Header Alignment : Left
Header Padding :
TOP 20 | RIGHT 40 | BOTTOM 20 | LFET 40
Use Navigation as Header : 체크 해제
Mobile Header : Off
STEP 02 완료
#GeneratePress Premium 레이아웃 # 가탈작 가이드
STEP 03 - Blog 섹션의 Archive 셋팅
Archive란 블로그 글들을 모아 놓은 페이지를 의미합니다.
STEP 03-1 : Columns 셋팅 (개인 취향)
[ 셋팅 절차 ]
> 테마의 ‘사용자 정의하기’ 패널
> Layout 섹션 클릭
> Blog 섹션 클릭
> 가장 아래에 Columns에 있는 Display posts in columns 옵션 체크
> Columns 설정 (예 : 2개로 설정)
STEP 03-2 : 날짜, 작성자, 요약글, 버튼 없애기 (깔끔한 레이아웃 / 개인 취향)
[ 요약글, 버튼 없애기 절차 ]
> 테마의 ‘사용자 정의하기’ 패널
> Layout 섹션 클릭
> Blog 섹션 클릭
> Content 섹션에 있는 Archives / Single 탭 중 Archives 선택
> 입력값 설정 (아래 보라색 박스 참고)
> 공개 버튼 클릭
[Content 섹션]
Content type : Full(전체) / Excerpt(요약) 중에서 Excerpt 선택
Excerpt word count : 0 (요약글 사라짐)
Read more label : 빈칸으로 두기
Display read more as button 옵션 체크 해제 (버튼 사라짐)
Display post date 옵션 체크 해제 (날짜 사라짐)
Display post author 옵션 체크 해제 (작성자 사라짐)
STEP 03-3 : 썸네일 이미지 사이에 간격 주기
[ 이미지 사이에 간격 주기 절차 ]
> 테마의 ‘사용자 정의하기’ 패널
> Layout 섹션 클릭
> Blog 섹션 클릭
> Featured Images 섹션에 있는 Display padding around images 옵션 체크
> 공개 버튼 클릭
STEP 03-4 : 썸네일과 타이틀의 위치 셋팅
[ 위치 셋팅 절차 ]
> 테마의 ‘사용자 정의하기’ 패널
> Layout 섹션 클릭
> Blog 섹션 클릭
> Featured Images 섹션에 있는 Location에서 Below Title / Above Title 중에서 선택
> 공개 버튼 클릭
STEP 03 완료
#GeneratePress Premium 레이아웃 # 가탈작 가이드
STEP 04 - Blog 섹션의 Single 셋팅
Single은 블로그에 있는 개별 글 페이지를 의미합니다.
STEP 04-1 : 개별 글 하나 클릭해서 개별 글 페이지로 이동해서 레이아웃 살피기
개별 글 페이지로 이동하는 이유는 글 페이지를 보면서 레이아웃을 수정해야하기 때문입니다.
STEP 04-2 : 날짜와 작성자 비활성화 (깔끔한 레이아웃 목적 / 개인취향)
[ 이미지 사이에 간격 주기 절차 ]
> 테마의 ‘사용자 정의하기’ 패널
> Layout 섹션 클릭
> Blog 섹션 클릭
> Content 섹션에 있는 Archives 탭과 Single 탭 중에서 Single 탭 클릭
> Display post date 체크 해제 (개별 글에서 날짜 비활성화)
> Display post author 체크 해제 (개별 글에서 작성자 비활성화)
> 공개 버튼 클릭
STEP 04-3 : 글 페이지 이미지에 패딩 값 적용 (삐져나온 부분 없도록 하기 위한 목적)
[ 이미지에 패딩값 적용 절차 ]
> 테마의 ‘사용자 정의하기’ 패널
> Layout 섹션 클릭
> Blog 섹션 클릭
> Featured Images 섹션에 있는 Archives탭 / Posts탭 / Pages탭 중에서 Posts탭 클릭
> Display padding around images 옵션에 체크
> 공개 버튼 클릭
STEP 04 완료
#GeneratePress Premium 레이아웃 # 가탈작 가이드
STEP 05 - Footer 섹션 셋팅
Footer는 사이트 가장 아래에 있는 부분을 의미합니다.
STEP 05-1 : Footer 위젯1 부분 셋팅
[ Footer Widget1 셋팅 ]
> 테마의 ‘사용자 정의하기’ 패널
> Layout 섹션 클릭
> Footer 섹션 클릭
> 입력값 설정 (아래 보라색 박스 참고)
> 공개 버튼 클릭
[Footer 섹션]
Footer Width : Full
Inner Footer Width : Contained
Footer Widgets : 0 (개인 취향)
Back to Top Button : Enable
(우측 하단에 마우스 클릭시 TOP으로 갈 수 있게 해주는 화살표 버튼이 생김)
[Footer 위젯 1 부분을 꾸미고 싶을 경우 ]
> 테마의 ‘사용자 정의하기’ 패널
> 위젯 섹션 클릭
> Footer Widget 1 섹션 클릭
> 취향대로 각 블록을 편집
> 공개 버튼 클릭
STEP 05-2 : Footer Bar 부분 셋팅
[ Footer 하단 부분 셋팅 ]
> WP 관리자 페이지 접속
> 좌측 메뉴탭에 있는 ‘외모’ 항목의 ‘GeneratePress’ 클릭
> Modules 섹션의 Copyright 항목 우측에 있는 Activate 버튼 클릭
> 테마의 ‘사용자 정의하기’ 패널 OPEN
> 웹사이트 가장 하단부에 있는 Copyright 부분의 편집 아이콘(연필 모양) 클릭
> Copyright 섹션이 활성화 되어있고, 여기에 정보를 입력
[Footer 하단 부분 Copyright 섹션 입력 예시]
ⓒ 2023 가탈작 가이드
STEP 05 완료
Footer 수정 작업이 끝나면 아래와 같이 깔끔하게 바뀝니다. 물론 개인 취향에 따라 푸터를 자유롭게 디자인할 수 있다는 점 알려드립니다.
#GeneratePress Premium 레이아웃 # 가탈작 가이드
완료
수고하셨습니다!
정보가 도움이 되셨나요?
가탈작 가이드 웹사이트는
자발적 정보 이용료로 운영됩니다.
인생은 GIVE & TAKE 라고 생각합니다.
물론, 이용료 지불은 당신의 자유의지 입니다.
감사합니다!
[함께 보면 좋은 정보]
[가탈작 가이드 추천]
#GeneratePress Premium 레이아웃 # 가탈작 가이드