워드프레스 뉴스페이퍼 테마 스크롤 시 메뉴 숨김(스마트 스냅) 옵션

일부 워드프레스 테마에서는 사용자가 아래로 마우스를 스크롤할 때 메뉴/헤더를 숨기고 위로 스크롤할 때 메뉴를 다시 표시하는 옵션을 제공하기도 합니다. 뉴스페이퍼 테마에서는 고정 메뉴(Sticky Menu) 옵션에서 스마트 스냅(Smart snap) 항목을 선택하면 마우스 스크롤 시 메뉴가 숨겨졌다가 위로 스크롤하면 메뉴가 나타납니다.

워드프레스 뉴스페이퍼 테마 스크롤 시 메뉴 숨김(스마트 스냅) 옵션

아래 영상과 같이 마우스를 아래로 스크롤할 때 메뉴를 숨기고, 위로 스크롤할 때 메뉴를 다시 표시하면 방문자들이 아래로 스크롤하면서 글을 읽을 때 상단 메뉴의 방해를 받지 않기 때문에 UX(사용자 경험) 향상에 도움이 됩니다.

예전에 미디엄에서 이와 비슷하게 작동했지만 오늘 확인해보니 미디엄(Medium)에서 더 이상 기능이 적용되지 않는 것 같습니다. 워드프레스 인기 테마 중 하나인 Divi에서 jQuery를 사용하여 이와 같이 메뉴/헤더가 작동하도록 할 수 있습니다.

워드프레스 Divi 메뉴가 미디엄처럼 작동하도록 만들기 - 워드프레스 정보꾸러미

뉴스페이퍼 테마의 스마트 스냅(Smart Snap) 기능

인기 매거진/블로그 테마인 뉴스페이퍼 테마에서는 메뉴를 고정하는 기능을 제공하며, 스마트 스냅(Smart Snap) 옵션을 선택하면 아래로 스크롤 시 메뉴가 사라지고, 다시 위로 스크롤 시 메뉴가 표시됩니다.

이 기능을 사용하려면 알림판 > Newspaper > Theme panel > Header에서 Cloud Library Template을 "No Template"을 선택해야 합니다.

그러면 Header Style 섹션이 표시됩니다. 원하는 헤더 스타일을 선택합니다.

그런 다음 Sticky Menu(고정 메뉴; 붙박이 메뉴) 섹션에서 메뉴 고정 옵션을 선택합니다.

다음과 같은 4가지 옵션 중에서 선택할 수 있습니다.

1. Normal menu - 일반적인 메뉴. 메뉴가 고정되지 않습니다.
2. Always stickey - 메뉴가 항상 페이지 상단에 고정됩니다.
3. Smart snap - (mobile) : 모바일에서 아래로 스크롤 시 메뉴가 표시되지 않고 위로 스크롤하면 메뉴가 표시됩니다.
4. Smart snap - (always) : PC와 모바일에서 아래로 스크롤 시 메뉴가 숨김 상태가 됩니다.

네 번째 옵션을 선택하면 위의 YouTube 영상에서와 같이 스크롤 시에 메뉴가 표시되지 않습니다. 모바일에서만 이 기능을 원하는 경우 3번째 옵션을 선택하도록 합니다.

GeneratePress 테마에서 스크롤 시 메뉴 숨기기 옵션 선택하기

GeneratePress 테마의 유료 버전(GP Premium)을 사용하는 경우 아래로 스크롤 시 메뉴를 숨기를 옵션이 제공됩니다. 워드프레스 관리자 페이지에서 외모 > 사용자 정의하기 > Layout > Sticky Navigaton에서 고정 내비게이션(메뉴)과 관련된 옵션을 지정할 수 있습니다.

Hide when scrolling down(아래로 스크롤 시 숨기기) 옵션을 체크하면 사용자가 페이를 아래로 스크롤 시 메뉴가 표시되지 않습니다.

플러그인을 사용하여 아래로 스크롤 시 헤더 숨기기

워드프레스에서는 많은 기능을 플러그인으로 구현이 가능합니다. 아래로 스크롤할 때 헤더를 숨기는 플러그인이 있을지 궁금하여 검색해보니 실제로 그런 플러그인이 있네요.

Hide and Seek Header라는 무료 플러그인을 사용하면 아래로 스크롤 시 헤더를 숨기고, 위로 스크롤하면 헤더를 표시할 수 있습니다.

하지만 이 플러그인은 100개 남짓한 워드프레스 사이트에 설치되어 그다지 인지도가 없는 상태입니다.

참고

https://avada.tistory.com/2376

아바다 테마 이미지 레이지 로딩(이미지 지연 로드) 설정

https://avada.tistory.com/2341

워드프레스 엔폴드 테마: 헤더 투명하게 설정하기 (투명 헤더 사용)