아바다, 엔폴드 등 일부 테마에서는 헤더 위치를 상단 대신 왼쪽 또는 오른쪽에 배치할 수 있는 옵션을 제공합니다. Divi 테마에서도 헤더를 왼쪽 또는 오른쪽에 표시할 수 있는 수직 내비게이션 기능을 제공합니다.
헤더와 메뉴 내비게이션 레이아웃
헤더 위치를 상단에 배치하고 로고와 메뉴 내비게이션을 표시하는 것이 요즘의 일반적인 웹사이트 구조입니다. 하지만 20여 년 전에는 헤더에 로고가 위치하고 왼쪽 사이드바에 메뉴가 배치되는 형식이 많았습니다.
아래는 약 20년 전에 제가 준전문가에게 의뢰하여 만든 홈페이지입니다. 당시에는 아래와 같은 헤더와 메뉴 구조가 일반적이었습니다.
하지만 워드프레스가 등장하면서 현재와 같은 레이아웃 구조가 일반화되기 시작했습니다.
이와 같은 구조가 SEO에 유리한 것으로 알려져 있습니다.
헤더를 사이드바에 배치하기 [수직 내비게이션]
헤더는 부부분 상단에 배치되는 것이 일반적입니다. 일부 테마는 헤더가 왼쪽에 기본적으로 배치되어 나오기도 합니다. 일부 테마에서는 헤더를 인쪽 또는 오른쪽에 표시하는 수직 내비게이션 옵션을 제공합니다.
예를 들어, Enfold 테마의 경우 Enfold > General Layhout의 Logo and Main Menu 섹션에서 헤더 위치를 Top Header, Left Sidebar, Right Sidebar 위치 중에서 선택할 수 있습니다.
Divi 테마에서 헤더 위치 변경하기 [수직 내비게이션]
워드프레스 인기 테마 중 하나인 Divi 테마에서는 테마 디자인 > 사용자 정의하기 > Header & Navigation > Header Format으로 이동하여 수직 내비게이션 옵션을 설정할 수 있습니다.
Enable Vertical Navigation (수직 내비게이션 활성화) 옵션을 체크하면 Vertical Menu Orientation (수직 메뉴 방향) 옵션이 표시됩니다. Right 또는 Left를 선택하면 헤더가 오른쪽 또는 왼쪽에 표시됩니다.
이외에도 Divi 헤더 및 메뉴 내비게이션과 관련하여 다음 글을 참고해보시기 바랍니다.
워드프레스 Divi 테마의 헤더 스타일 변경하기
Elegant Themes의 Divi에서는 헤더를 좌우 사이드에 배치하거나 보통의 경우처럼 상단에 배치할 수 있는 옵션을 제공합니다. 그리고 여러 가지 추가 옵션을 제공하여 다양하게 헤더를 구성할 수 있도
www.thewordcracker.com
Divi 테마에서 스크롤할 때 헤더가 줄어들지 않도록 하는 방법 - 워드프레스 정보꾸러미
Elegant Themes의 Divi 테마에서 페이지를 아래로 스크롤하면 헤더가 살짝 줄어드는 효과가 적용됩니다. 이런 효과는 다른 테마에서도 흔히 적용되는 것을 목격합니다.
www.thewordcracker.com
Divi 테마 메뉴 배경색을 투명하게 설정하고 페이지마다 다른 메뉴 배경색을 적용하는 방법
이 글에서는 Elegant Themes의 Divi 테마의 메뉴 배경색을 투명하게 설정하는 방법에 대해 자세히 살펴보고, 스크롤 시 메뉴 배경색을 변경하는 방법도 살펴봅니다. 그리고 페이지마다 다른 배경색을
www.thewordcracker.com
[워드프레스] Divi 메뉴가 미디엄처럼 작동하도록 만들기 - 워드프레스 정보꾸러미
미디엄(Medium)에서 글을 읽을 때 아래로 스크롤할 때에는 상단의 메뉴(헤더) 부분이 표시되지 않다가 마우스를 위로 스크롤하면 메뉴 부분이 표시됩니다.
www.thewordcracker.com
참고
워드프레스 Salient 테마 헤더 위치 설정하기 [수직 내비게이션]
워드프레스에서 헤더는 보통 상단에 배치됩니다. 드물지만 헤더를 왼쪽에 배치하기를 원하는 분들이 있습니다. 하지만 왼쪽에 배치할 경우 오른손잡이 사용자들 입장에서 마우스 조작이 자연
avada.tistory.com
[워드프레스] 아바다 테마에서 헤더 위치 변경하기 - 워드프레스 정보꾸러미
아바다(Avada)는 테마포레스트(Themeforest)에서 오랫동안 판매 1위를 유지하고 있는 인기 유료 테마입니다. 다목적 테마(Multipurpose Theme)인 아바다는 특히 많은 테마 옵션을 제공하므로 별다른 코딩
www.thewordcracker.com