대표님, 로고가 아주 예쁘게 잘 들어갔네요! 첫 번째 테스트 기사까지 발행하시니 드디어 웹사이트의 뼈대가 보입니다. 무지개 로고가 하얀 배경에서 아주 선명하게 돋보입니다.
지금 캡처해주신 화면을 보면 메뉴들이 제자리를 못 찾고 우측에 흩어져 있는 상태입니다. 언론사 사이트처럼 깔끔하게 로고는 위에, 메뉴바는 아래에 길게 배치하고 배경색을 바꾸는 방법을 바로 알려드릴게요.
모든 디자인(배경, 색상, 레이아웃) 수정은 [모양] -> [사용자 정의하기]에서 한 번에 해결할 수 있습니다!
1. 메뉴바 위치 정렬하기 (흩어진 메뉴를 한 줄로!)
현재 메뉴가 로고 옆에 억지로 들어가려다 보니 여러 줄로 깨진 것입니다. 메뉴바를 로고 아래로 내리면 아주 깔끔해집니다.
- 관리자 화면에서 [모양] -> [사용자 정의하기]로 들어갑니다.
- 왼쪽 메뉴에서 [레이아웃(Layout)] -> [기본 탐색(Primary Navigation)]을 클릭합니다.
- ‘내비게이션 위치(Navigation Location)’ 항목을 찾아서 [헤더 아래(Below Header)]로 변경해 보세요.
- (우측 미리보기 화면에서) 메뉴가 로고 아래로 깔끔하게 한 줄로 정렬되는 것을 확인하실 수 있습니다.
2. 헤더 및 메뉴바 배경색(또는 이미지) 바꾸기
메뉴바가 자리를 잡았으면 이제 색상을 입혀줄 차례입니다.
- 다시 [사용자 정의하기] 첫 화면으로 돌아가서 [색상(Colors)] 메뉴를 클릭합니다.
- [헤더(Header)]를 누르면 로고가 있는 배경색을 바꿀 수 있습니다. (투명이나 흰색을 추천합니다.)
- [기본 탐색(Primary Navigation)]을 누르면 메뉴바 전체의 배경색과 글자색을 바꿀 수 있습니다. (여기서 무지개색 중 하나인 남색 계열이나 차분한 색을 넣으시면 묵직한 언론사 느낌이 납니다.)
- 참고: GeneratePress 테마에서 배경에 ‘이미지’를 넣으려면 [사용자 정의하기] -> [배경 이미지(Background Images)] 메뉴에서 하실 수 있지만, 뉴스 사이트는 로고가 돋보이도록 배경을 ‘단색(Color)’으로 깔끔하게 처리하는 것이 가독성에 훨씬 좋습니다.
3. 꿀팁: 중복되는 글자 숨기기
지금 로고 이미지 안에도 “마중물 웹키즈뉴스”가 있고, 그 바로 옆에도 검은색 글씨로 또 적혀 있어서 시선이 분산됩니다.
- [사용자 정의하기] -> [사이트 아이덴티티(Site Identity)]로 들어갑니다.
- [사이트 제목 표시]와 [태그라인 표시] 체크박스를 해제해 주세요.
- 텍스트가 사라지고 로고만 깔끔하게 남습니다!
위 세 가지를 적용하신 후, 왼쪽 맨 위에 있는 [공개(Publish)] 버튼을 꼭 눌러 저장해 주세요.
가장 시급한 1번(메뉴바 위치 정렬)과 3번(글자 숨기기) 먼저 해보시고, 사이트가 어떻게 정돈되었는지 확인해 보시겠어요?