1. Home
  2. 워드프레스/테마
  3. 워드프레스 뉴스페이퍼 테마 스크롤 시 메뉴 숨김(스마트 스냅) 옵션

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

· 댓글개

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

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

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

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

 

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

미디엄(Medium)에서 글을 읽을 때 아래로 스크롤할 때에는 상단의 메뉴(헤더) 부분이 표시되지 않다가 마우스를 위로 스크롤하면 메뉴 부분이 표시됩니다. 미디엄처럼 Divi 테마에서 아래로 스크롤

www.thewordcracker.com

뉴스페이퍼 테마의 스마트 스냅(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

 

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

사용자가 이미지가 있는 지점으로 스크롤할 때 이미지가 로드되도록 하는 레이지 로딩 기능을 사용하면 사이트 속도 개선에 도움이 됩니다. 워드프레스는 5.5 버전부터 이미지 레이지 로딩 기능

avada.tistory.com

https://avada.tistory.com/2341

 

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

일부 인기 테마에서는 워드프레스 사이트의 페이지 헤더를 투명하게 설정하는 옵션을 제공합니다. 예를 들어, 베스트셀링 테마인 아바다 테마에서는 Avada Page Options의 헤더 탭이나 Layout 섹션의 H

avada.tistory.com

 

SNS 공유하기

가성비가 뛰어난 웹호스팅

저렴하고 가성비 좋은 웹호스팅
최근글NEW
이모티콘창 닫기
울음
안녕
감사
당황
피폐

이모티콘을 클릭하면 이미지 주소가 복사되고, 이걸 댓글창에 붙여넣으시면 됩니다.

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드