이 글을 통해 얻게 되는 정보
- GeneratePress Premium 컬러 셋팅 절차와 방법
- GeneratePress Premium 컬러 섹션이 나타내는 부분 (사용자 정의 패널)
글의 순서
STEP 00 - GeneratePress Premium 컬러 셋팅
- 컬러 셋팅이 중요한가요?
- 컬러 마켓팅이라는 용어도 있을 정도로 매우 중요합니다.
- 네이버 = 초록색, 카카오 = 노란색, 유튜브 = 빨간색, 페이스북 = 보라색
- 자신만의 웹사이트 정체성을 나타내는 만큼 컬러 셋팅은 가장 중요한 부분 중 하나이고, 테마 꾸미기를 완료하고 나서 컬러 셋팅을 하는 이유이기도 합니다.
- 컬러 셋팅 팁 1 :
3~4가지 색상 내에서 조화가 되는 컬러 활용 - 컬러 셋팅 팁 2 :
가급적이면 3가지 색상이 좋습니다. (배경색, 글자색, 강조색)
아래의 예제 사이트는 3가지의 대표 컬러를 사용해서 제작하였습니다. 알록달록해서 정신이 산만해지는 것보다 3가지의 색상만 조합해서 웹 사이트를 표현해나가면 깔끔한 분위기의 웹사이트를 운영해나갈 수 있습니다.
#GeneratePress Premium 컬러 셋팅 #가탈작 가이드
STEP 01 - '사용자 정의' 패널의 Colors 섹션 알고가기
- Body : 헤더 부분과 푸터 부분을 제외한 사이트 전체 부분
테마의 ‘사용자 정의하기’ 패널의 Colors 섹션에 있는 Body 항목을 클릭하면 바디 부분의 배경 색상(Background), 글자 색상(Text), 링크 색상(Link), 후버 색상(Hover)을 지정할 수 있습니다.
- Header : 로고와 메뉴가 있는 부분
테마의 ‘사용자 정의하기’ 패널의 Colors 섹션에 있는 Header 항목을 클릭하면 헤더 부분의 배경 색상(Background), 글자 색상(Text), 링크 색상(Link), 후버 색상(Hover), Site Title 색상, Tagline 색상을 지정할 수 있습니다.
Site Title과 Tagline의 경우 헤더 부분에 로고 이미지를 사용할 경우 사용하지 않는 경우가 대부분입니다.
- Primary Navigation : 메뉴 부분
테마의 ‘사용자 정의하기’ 패널의 Colors 섹션에 있는 Primary Navigation 항목을 클릭하면 메뉴 부분의 배경 색상(Navigation Background), 글자 색상(Navigation Text), 메뉴를 클릭했을 때 하위메뉴가 나오는 부분의 배경 색상(Sub-Menu Background), 하위 메뉴의 글자 색상(Sub-Menu Text)을 지정할 수 있습니다.
- Off Canvas Panel : 모바일 모드에서 햄버거 토글(메뉴 토글)을 클릭했을 때 나타나는 부분
필요없는 부분이라 Off Canvas Panel에 해당하는 부분의 위젯을 삭제하는 경우가 대부분입니다. 따라서 별다른 색상지정은 하지 않는 영역입니다.
- Buttons : 웹사이트에 삽입되어 있는 모든 버튼
예를 들어 포스트 하나를 클릭하여 개별 글 페이지로 이동했을 때, 하단부에 댓글 부분이 있습니다. ㄱ거기에 ‘Post Comment’라는 버튼이 있습니다.
테마의 ‘사용자 정의하기’ 패널의 Colors 섹션에 있는 Buttons 항목을 클릭하면 버튼의 배경 색상(Background), 글자 색상(Text)을 지정할 수 있습니다.
- Content : Body 부분에 속한 내용이 들어있는 부분
테마의 ‘사용자 정의하기’ 패널의 Colors 섹션에 있는 Content 항목을 클릭하면 Content 부분의 배경 색상(Background), 글자 색상(Text), 링크 색상(Link), 링크 후버 색상(Hover), 포스트 제목 태그 색상(Content Title), 아카이브 페이지의 제목 태그 색상(Archive Content Title), 글 작성 날짜와 글쓴이 부분을 나타내는 색상(Entry Meta Text), 글 작성 날짜와 글쓴이 부분의 링크와 후버 부분을 나타내는 색상(Entry Meta Links), 글 컨텐츠 내부에서 단계별 제목 태그를 나타내는 색상(Heading H1~H6 Color)
- Forms : 댓글 입력 창과 같은 입력 폼 부분
테마의 ‘사용자 정의하기’ 패널의 Colors 섹션에 있는 Forms 항목을 클릭하면 입력 폼의 배경 색상(Background), 글자 색상(Text), 테두리 색상(Border)을 지정할 수 있습니다.
- Sidebar Widgets : 사이드바 위젯 부분
테마의 ‘사용자 정의하기’ 패널의 Color 섹션에 있는 Sidebar Widgets 항목을 클릭하면 사이드바 위젯의 배경 색상(Background), 글자 색상(Text), 링크 색상(Link), 후버 색상(Hover), 위젯 타이틀 색상(Widget Title)을 지정할 수 있습니다.
- Footer Widgets : 사이트 하단부에 있는 푸터 부분에 있는 Footer Widget 1 부분
테마의 ‘사용자 정의하기’ 패널의 Color 섹션에 있는 Footer Widgets 항목을 클릭하면 Footer Widget 1 부분의 배경 색상(Background), 글자 색상(Text), 링크 색상(Link), 후버 색상(Hover), 위젯 타이틀 색상(Widget Title)을 지정할 수 있습니다.
- Footer Bar : Footer Widget 1 아래에 있는 부분
테마의 ‘사용자 정의하기’ 패널의 Color 섹션에 있는 Footer Bar 항목을 클릭하면 Footer Bar 부분의 배경 색상(Background), 글자 색상(Text), 링크 색상(Link), 후버 색상(Hover)을 지정할 수 있습니다.
- Back to Top : 사이트 우측 하단에 활성화되어 있는 [ ∧ ]모양의 아이콘
테마의 ‘사용자 정의하기’ 패널의 Color 섹션에 있는 Back to Top 항목을 클릭하면 Back to Top 아이콘의 배경 색상(Background), 글자 색상(Text)을 지정할 수 있습니다.
#GeneratePress Premium 컬러 셋팅 #가탈작 가이드
STEP 02 - 중요한 부분 위주로 컬러 셋팅
STEP 02-1 : Body 부분 컬러 셋팅
Body 부분의 배경 색상, 글자 색상, 링크 색상을 웹사이트의 성격에 맞게 원하는색으로 지정해주세요.
STEP 02-2 : Header 부분 컬러 셋팅
Header 부분의 배경 색상, 글자 색상, 링크 색상을 웹사이트의 성격에 맞게 원하는색으로 지정해주세요.
STEP 02-3 : Primary Navigation 부분 컬러 셋팅
메뉴 부분의 배경 색상, 글자 색상, 링크 색상, 서브 메뉴 부분의 배경 색상, 글자 색상, 링크 색상을 웹사이트의 성격에 맞게 원하는색으로 지정해주세요.
STEP 02-4 : Buttons 부분 컬러 셋팅
버튼 부분의 배경 색상, 글자 색상을 웹사이트의 성격에 맞게 원하는색으로 지정해주세요.
STEP 02-5 : Content 부분 컬러 셋팅
Content 부분의 배경 색상, 글자 색상, 링크 색상, 제목 색상, 아카이브 페이지의 컨텐츠 제목 색상, 카테고리와 태그등의 아이콘을 나타내는 Entry Meta Text 색상, 카테고리와 태그 등의 링크 걸려있는 텍스트를 나타내는 Entry Meta Links 색상, 컨텐츠 단계별 제목 태그 색상을 웹사이트의 성격에 맞게 원하는색으로 지정해주세요.
STEP 02-6 : 나머지 부분은 개인 취향대로 셋팅
STEP 02 완료
#GeneratePress Premium 컬러 셋팅 #가탈작 가이드
완료
수고하셨습니다!
정보가 도움이 되셨나요?
가탈작 가이드 웹사이트는
자발적 정보 이용료로 운영됩니다.
인생은 GIVE & TAKE 라고 생각합니다.
물론, 이용료 지불은 당신의 자유의지 입니다.
감사합니다!
[함께 보면 좋은 정보]
[가탈작 가이드 추천]
#GeneratePress Premium 컬러 셋팅 #가탈작 가이드
#GeneratePress Premium 컬러 셋팅