투명한 헤더(메뉴)를 만들고 상단에 고정하기(create a sticky transparent Header)

워드프레스에서 상단에 고정된(떠있는) 스티키 메뉴(플로팅 메뉴)를 만들어보자.

검색해보니 메뉴가 상단에 떠 있다고 floating, 상단에 붙어있다고 sticky라고 표현하더라...

필요한 플러그인은 Elementor, ElementorKit 라이트, Sticky Header Effects for Elementor 3개이다.

여담이지만 엘리멘터의 컨테이너(플렉스박스)에 익숙해지니까 기존의 섹션과 내부섹션의 방식이 오히려 조금 불편하게 느껴진다. 한동안(?) 잊고 지냈던 섹션방식을 elementorKIT에서 템플릿이나 페이지, 섹션등을 불러오면서 다시 접하게 되었는데....확실히 플렉스박스가 훨씬 강력하고, 사용하기에도 편리한 방식이라고 느껴진다. 두어달 전만해도 플렉스박스가 적응이 안된다고 투덜거렸는데....-_-;

먼저 스티키 헤더를 만들기 위해서 아스트라(ASTRA)테마를 선택했다. 아스트라가 기본으로 투명헤더를 지원하는 것이 이 테마를 사용하게 된 첫 번째 이유이다. 물론 투명헤더를 지원하지 않는 다른 테마를 사용하더라도 위의 플러그인 3개만 설치한다면 투명한 스티키 헤더를 만들 수 있다. 테마에 연연할 필요가 없다는 얘기다...

일단 기본적인 페이지는 모두 아래와 같이 '사이드바 없는 전체폭으로 설정'했으며 각 페이지별로 '투명헤더 기능을 활성화'하였다.

설치한 플러그인은 아래와 같다.

그리고 테스트를 위한 모든 페이지를 아래와 같이 완성했다. 페이지의 내용은 없다.

이제 메뉴를 새로 생성해야 한다. 아래와 같이 메뉴를 만들었다. (외모->메뉴였는데 워드프레스 6.5부터 '외모'가 '디자인'으로 바뀌었다. 이건 괜찮다고 느껴지기는 하는데 한글번역이 오히려 어색한 경우도 많다. 특히 'footer'.....)

배경과 메뉴 모두 흰색이어서 메뉴가 안보일 수 있다. 아래와 같이 첫 페이지에 이미지를 넣어보고, 화면을 아래로 스크롤 할 수 있을 정도로 내용을 채워보자.

여기서 화면을 아래로 스크롤 하면 메뉴는 시야에서 사라진다. 이제 메뉴를 상단의 현재 위치에 고정시켜 보자. 그리고 이미지나 다른 컨텐츠와 겹쳐져서 메뉴가 명확하게 안보이는 경우를 대비해서 상단의 메뉴(헤더)의 배경을 적당히 투명하게 변경시킬 것이다.

---

워드프레스의 관리자 모드에서 ElementsKit의 '머리글 바닥글'을 선택하자. 그리고 상단의 '새로운 걸 더하다'를 선택하여 헤더를 추가할 것이다.

제목(헤더 템플릿의 이름)은 적당히 지어주고, 유형은 머리글, 정황(?)은 적용대상(범위)를 설정하는 듯하다. 무료버전에서는 '전체 사이트'에 적용되는 것 하나 뿐이다. 여기서 변경사항을 저장하고 웹브라우저로 사이트를 접속해보면 모든 메뉴가 사라져있음을 확인할 수 있을 것이다. 테마마다 다르겠지만 각각의 페이지마다 헤더 푸터 영역을 비활성화 할 수 있다. ElementKit으로 새로운 헤더를 만들게 되면 테마의 설정과는 무관하게 테마의 기본헤더가 비활성화(invisible) 된다. 테마의 기본 헤더가 invisible 상태이고, 새로 작성한 헤더는 내용이 없으니 헤더가 안보일 것이다.

이제 콘텐츠 편집을 선택하여 새로운 헤더를 만들어보자. elementor를 사용하며 작성할 때와 동일한 화면이 열린다. 아래와 같이 1행, 2열 구조의 플렉스박스를 구성하였다.

왼쪽의 박스에는 로고와 사이트의 제목을 넣을 것이고, 오른쪽의 박스에는 메뉴를 넣을 생각이다. 또한 화면 하단 중앙의 빨간색 원(Add ElementorsKit Template)를 선택하면 헤더나 푸터를 포함한 여러가지 템플릿을 불러와서 사용할 수 있다. 그리고 내가 만든 헤더나 푸터, 페이지 전체나 혹은 일부분(하나의 플렉스박스나 하나의 섹션 등)을 별도로 저장하였다가 필요한 경우에 불러올 수 있다. (내pc로 다운받았다가 다른 사이트를 만들 때에 사용할 수 있다)

메뉴부분에서 살짝 고민되는 부분이 있지만 일단 아래와 같이 ElementsKit의 ElementKit 탐색 메뉴 위젯을 사용하자.

위젯을 추가한 후에 위의 그림과 같이 먼저 만들어 두었던 메뉴를 선택하면 된다. 개인적으로 모바일 메뉴를 그리 좋아하지 않기에 위에서 처럼 메뉴가 많지 않다면, 탐색메뉴 위젯을 사용하지 않고 일반 텍스트나 다른 위젯으로 메뉴를 구성할 수 도 있다. 물론 조금 번거롭기는 하다. 하위메뉴가 있다면 탐색 메뉴 위젯을 사용하거나 메가메뉴 등 다른 메뉴 플러그인의 도움을 받도록 하자.

이제 저장 후에 브라우저에서 사이트에 접속해보면 아래와 같이 보인다. 그리고 화면이 스크롤 됨에 따라 메뉴는 시야에서 사라진다.

다시 ElementsKit의 헤더 편집모드로 들어가보자.아래와 같이 헤더 컨테이너를 선택 한 후 컨테이너 편집에서 '고급-Sticky Header Effects'를 선택하자

Sticky Header Effects를 선택했다면 가장위의 Enable을 on으로 설정하면 된다. 이로써 기본 Sticky 헤더는 설정이 되었다. 웹브라우저에서 사이트에 접속해보면 100% 투명한 스티키헤더가 작동하는 것을 볼 수 있다.

여기서 조금 아쉬운 부분은 모두 해결 할 수 있다.

1. 사이트가 처음 열릴 때 부터 메뉴가 배경이미지에 올라오도록 설정해보자.

2. 메뉴가 다른 컨텐츠(특히 이미지) 위에 있을 때 이미지의 색상에 따라서 잘 안보일 수 있다. 헤더의 배경색을 약간 뿌옇게 바꿔보자. 그리고 헤더에 마우스 포인터가 올라왔을 때(hover) 전체 헤더의 배경을 살짝 변경하여 메뉴를 더욱 강조할 수 있다.

3. 처음 스크롤을 내려서 메뉴가 사라지기 직전의 시점과, 스크롤을 최상으로 올리는 시점에서 메뉴가 잠깐 사라졌다가 다시 보이는 느낌이다. 이것을 자연스럽게 고쳐보자.

 

1. 헤더(메뉴)가 이미지 위에 올라와 있는 것이 투명헤더이다. 아스트라 테마에서는 이 기능을 기본으로 지원하고 있으며 앞서 페이지를 만들 때 부터 투명헤더를 활성화 시켰었다. 테마의 기본 헤더를 사용했다면 이부분은 자동으로 해결되겠지만 그렇게하면 sticky기능을 사용할 수 없다...

헤더 편집모드에서 Sticky Header Effects를 선택하면 아래와 같이 Transparent Header 설정부분이 있다. 이 기능을 활성화(on)하자.

이제 브라우저를 통해서 사이트에 접속해 보면 아래와 같이 이미지 위에 헤더가 올라온 것을 볼 수 있다. 물론 헤더는 고정이 되어 화면의 스크롤에 상관없이 항상 원래 위치에 있을 것이다.

2. 메뉴를 포함한 헤더가 100% 투명하다보니 배경의 컨텐츠 위에 헤더가 노출되는 경우에는 가시성이 떨어지게 된다. 아래와 같이 헤더의 배경이미지를 살짝 반투명하게 만들어보자.

헤더 전체의 배경을 #FFFFFF5E 정도의 색상으로 변경했다. 그 아래의 불투명 값은 1로 설정하자. 호버(hover)일 경우 조금더 진하게 #FFFFBB로 설정해봤다.

헤더에 마우스 포인터가 올라왔을 때의 모습은 아래와 같다.

헤더의 기본 배경은 FFFF5E이며,호버(hover)일 때 FFFFBB로 배경이 조금 짙어지게 설정한 것이다. 이러한 값은 컨텐츠에 따라서 테스트하여 적당한 값으로 설정하면 될 것이다.

3. 최상단에서 아래로 스크로을 내릴 때와... 밑에서 최상단으로 스크롤을 올릴 때 헤더 전체가 깜빡이는 듯한 느낌이 있다. 이것을 해결하려면 다시 Sticky Header Effects의 설정화면으로 돌아가서 Transparent Header기능을 off시키자. 그리고 아래와 같이 위치를 '고정'으로 변경하자.

 

 

이제 사이트에 접속해보면 그냥저냥(?) 원하는대로 스티키 메뉴가 작동한다. 참고로 배경색을 컨테이터 편집 메뉴에서 '스타일-배경' 이 아닌 '배경 오버레이'를 선택한 이유는 Sticky Header Effects의 Background Color기능 때문이다. Background Color기능은 화면 스크롤이 발생할 때에만 헤더의 배경색이 바뀐다. 이 옵션을 사용하면 컨테이너 편집메뉴의 '스타일-배경'의 설정은 완전히 무시되기 때문에 배경 오버레이를 사용한 것이다. 흥미로운 옵션이 몇 개 더 있는데...기능이 그리 많지 않으니 하나하나 설정을 바꿔가면서 변화를 관찰하는 것도 재미있을 것이다. 아니면 플러그인의 홈페이지에서 설정에 대한 자세한 정보를 얻을 수도 있다. 이 방법은 무료 플러그인으로 투명한 스티키(플로팅) 메뉴를 만드는 다양한 방법중에 하나일 것이다.

투명헤더를 지원하지 않는 테마라면 첫 번째 섹션(플렉스박스)의 여백을 헤더의 높이만큼 마이너스(-)값으로 설정하자.