반응형 Show
1. 메뉴이름 페이지 제작  2. 메뉴 등록하기 (appearance - menues) 생성한 해당 페이지이름을 검색하여 체크박스를 활성화 시키고 추가 그럼 아래와 같이 왼쪽에 3개의 메뉴가 추가된다. 니 2개의 메뉴를 Instance화 (인스턴스화) 시켜 이 "여러메뉴"를 지정하면 해당 메뉴가 등록이 된다. (결과) (다른 메뉴 instance를 만들어 적용할때 주의점) 다른메뉴를 만들어서 적용하려할 때, 해당 위치는 아래 "메뉴설정"에서 하면 된다. 그러나 이미 다른 메뉴( 이전에 사용중인 메뉴) 가 있으면 우측처럼 "현재설정 : ~~ " 이 뜬다. 이 위에 덮어씌우면 해당 메뉴가 변경된다. 반응형 저작자표시비영리 '웹페이지 관련' 카테고리의 다른 글
워드프레스 > 화면 구성하기 > 메뉴바 만들기 5단계로 정리하는 워드프레스 메뉴바의 모든 것 (2021)오늘은 최적의 워드프레스 메뉴바(header) 만드는 방법에 대해서 다뤄보았습니다. 메뉴바는 웹 사이트의 중요한 페이지로 연결해주는 링크를 찾을 수 있는 곳인데요. 때문에 좋은 메뉴바는 더 많은 방문자수와 전환을 유도하고, 브랜드에 대한 좋은 인식을 심어줄 수 있습니다. 이번 ‘메뉴바 만들기’ 포스팅에서는 다른 웹 사이트들이 메뉴바를 어떻게 운영하는지 분석하고, 워드프레스 메뉴바 만드는 과정을 직접 보여드리려고 합니다. 바로 시작하겠습니다! 메뉴바(header)란?메뉴바(Header)란, 웹 사이트에서 로고와 중요 페이지 링크가 있는 부분으로, 보통 상단부에 존재합니다. 웹 사이트의 어느 페이지에 들어가나, 가장 먼저 보이는 영역이기 때문에 잘 디자인하는 것이 정말 중요한데요. 좋은 메뉴바는 더 많은 방문자수와 전환을 유도하고 브랜드에 대한 좋은 인식을 심어줄 수 있습니다.
메뉴바는 내비게이션 바(navigation bar), 헤더바 등으로 다양하게 불리는데요. 메뉴바는 보통 웹 페이지 상단부에 존재하지만, 꼭 그럴 필요는 없습니다. 웹 사이트를 보다보면, 화면 좌측에 존재하는 메뉴바도 있는데요. 메뉴바의 역할메뉴바의 역할은크게 3가지로 나뉘는데요.
Elementor Pro를 활용하시면, 쉽게 메뉴바를 만들고 상단부 헤더에 설정할 수 있습니다. 제가 본 포스팅에서 알려드리는 방법은 Elementor Pro를 이용한다는 가정 하에 진행되고 있습니다. 참고해서 봐주세요! 1. Elementor 테마 빌더에서 헤더 템플릿 만들기워드프레스 대시보드에서 Elementor 파트에 {템플릿}-{Theme Builder}로 이동해주세요. 여러 섹션이 있을텐데요. {Header}를 클릭해주세요. 처음 만드시는 경우 초록색 {새 Footer 추가}라는 버튼이 보이실 것입니다. 클릭하세요. 클릭하신 후 템플릿 이름을 입력하시면, Elementor가 미리 만들어둔 데모를 고를 수 있는 페이지로 이동할 것입니다.
2. 맘에 드는 템플릿 고르기Elementor Pro는 여러분이 삽입할 수 있는 header 데모(메뉴바) 33가지를 제공합니다. 여러분은 그저 맘에 드는 템플릿을 선택하기만 하면 되죠.
Elementor Pro가 제공하는 템플릿은 크게 2종류로 나뉘는데요. 1가지는 옵티머 메뉴바처럼 페이지와 링크가 나열되어 있는 메뉴바이고,
후자의 경우, 워드프레스 Elementor 설정에서 Popup을 추가하신 후에 이용하시면 됩니다. 맘에 드는 데모를 고르신 후, {삽입} 버튼을 클릭하시면 됩니다. 3. 브랜드에 맞게 템플릿 고치기
위에 보시는 스크린샷이 템플릿을 적용하고 난 후에 바로 볼 수 있는 사진인데요. 아마 로고와 메뉴는 워드프레스에 설정해둔대로 적용이 될 것입니다. 워드프레스 메뉴는 워드프레스 로고는 여러분의 편의와 브랜드 아이덴티티에 맞게 메뉴바를 수정해보세요. 참고로 메뉴바에 사용할만한 Elementor 위젯들을 밑에서 소개해드리겠습니다. 저도 수정을 통해서 지금의 메뉴바를 만들었습니다. Site Logo – 로고 Nav Menu – 페이지 링크 Search Form, Search Icon, Ajax Search – 검색창 4. 모바일 반응형 확인하기메뉴바의 경우, 모바일 버전으로 화면이 줄어들었을 때 페이지 링크가 모두 사라지고 대신 아이콘이 생기는데요. 이런 변화가 있는만큼 모바일에서 어떻게 보이는지 꼭 확인해보셔야 합니다. 화면 왼쪽 아래 ‘반응형 화면’ 버튼을 클릭하신 후 모바일 버전을 확인하시면서 메뉴바를 수정해보세요! 5. header tag와 nav tag 넣기마지막으로 메뉴바에 header 태그를 넣어주어야 하는데요. 이 태그를 넣지 않아도 사람들이 보는 데에는 아무런 문제가 없지만, 검색 엔진과 같은 로봇이 페이지 상단부에 메뉴가 있다는 것을 인지할 수 있게 해야 합니다.
화면 왼쪽 가장 밑에 톱니바퀴 모양의 {설정}을 클릭해주세요. HTML tag에 ‘header’를 클릭해주시면 됩니다. 그 후, Nav Menu에는 ‘nav’ 태그를 설정해주세요. 저장하실 때, ‘Condition’을 ‘Entire Site’으로 설정하시면 웹 사이트 모든 페이지에서 만드신 메뉴바가 보이실 것입니다. 홈페이지로 이동하셔서, 잘 작동하는지 확인해보세요. 메뉴바 상단 고정하는 2가지 방법사람들이 화면을 스크롤하더라도, 계속해서 메뉴바를 볼 수 있게끔 화면 상단부에 고정해놓는 웹 사이트가 가끔 있습니다. 이렇게 고정된 메뉴바 만들기는 크게 2가지 방법으로 구현이 가능합니다. 1. Elementor에서 {고급}-{모션 효과}를 이용하기
좌측 대시보드에서 {고급}-{모션 효과} 섹션에 ‘Sticky’라는 부분이 보이실텐데요. 이 부분이 바로 해당 섹션이나 요소를 상단부 혹은 하단부에 고정할 수 있는 기능을 담당하는 곳입니다. 2. Ocean Sticky Header를 이용하기5가지 퍼스널 브랜드 웹 사이트 메뉴바 분석좋은 메뉴바가 무엇인지 알아보기 위해서는 다른 퍼스널 브랜드 웹 사이트 메뉴바를 살펴보면 되겠죠? 이번 챕터에서는 5가지 퍼스널 브랜드 웹 사이트의 메뉴바는 어떻게 구성되어 있는지 다뤄보았습니다. (밑에서 말하는 계층형 페이지 링크(megamenu)란, 메뉴바에 있는 텍스트를 클릭하거나 마우스를 위에 올려두었을 때, 하위에 있는 여러 페이지 링크가 나타나는 것을 말합니다. 옵티머 메뉴바의 경우 ‘SERM cycle’ 항목이 계층형 페이지 링크입니다.) 1. Gary Vaynerchuk순서 – 로고 / 중요 페이지 링크 / 검색창 메뉴바 상단 고정 여부 – O 계층형 페이지 링크 – X 특이점 – 방문자가 처음 방문했다면, 로고 옆에 ‘First Time Here’가 있고, 그 이후에 방문자가 웹 페이지를 돌아다니면 로고 옆에 ‘Text me’가 있다. 이는사용자의 쿠키를 이용해서 구현한 것 같다. Top bar(header 윗부분)에 팟캐스트 구독 버튼이 존재함. 2. Tony Robbins순서 – 로고 / 중요 페이지 링크 / 검색창 메뉴바 상단 고정 여부 – O 계층형 페이지 링크 – O 특이점 – top bar에 sns 링크와 전화번호, 로그인창 존재함. 3. Backlinko순서 – 로고 / 중요 페이지 링크 / 검색창 메뉴바 상단 고정 여부 – O 계층형 페이지 링크 – O 특이점 – top bar에 sns 링크와 전화번호, 로그인창 존재함. 4. Marie Forleo순서 – 로고 / 중요 페이지 링크 / 검색창 메뉴바 상단 고정 여부 – X 계층형 페이지 링크 – X 특이점 – 오른쪽에 서브 메뉴 아이콘이 존재함. 서브 메뉴 아이콘을 클릭하면 우측 메뉴바가 하나 생겨남. 상단에 있는 메뉴바는 심플하지만, 우측 메뉴바는 정말 링크가 많음. 로고(자신의 이름)에 마우스를 올려놓으면 자신의 조언이 애니메이션 형태로 나옴. 메뉴바가 투명(transparent)해서 배경사진이 뒤로 보임. 5. Abby Lawson순서 – 중요 페이지 링크 / 로고 (밑에) 메뉴바 상단 고정 여부 – X 계층형 페이지 링크 – O 특이점 – 없음 메뉴바나 탑바 삭제하기
좋은 메뉴바 디자인을 위한 3가지 팁퍼스널 브랜드 웹 사이트들의 메뉴바를 분석한 내용을 바탕으로 어떻게 메뉴바를 디자인해야 하는지 이번 챕터에서 다뤄보았습니다. 1.로고/중요 페이지 링크 / 검색창 순으로배경 부분과 색을 달리 하든, 테두리를 긋든 메인 콘텐츠 부분과는 확실하게 다른 영역이라는 것을 알려주어야 한다. 메인 콘텐츠가 끝난 후에, 푸터에 있는 정보를 찾는 경우도 있는데, 이를 보지 못하고 그냥 페이지를 나가버릴 수 있다. 확실하게 다른 영역이라는 것을 알려주어서, 관심이 들게끔 해야 한다. 2. 중요 페이지 링크는 5개를 넘지 않도록 하자메뉴바에 표면적으로 보이는 텍스트는 5개를 넘기지 마세요. 메뉴바에 너무 많은 텍스트를 두면, 복잡해져서 오히려 방문자들이 메뉴바를 보기 꺼려할 수 있습니다. 메뉴바에 담고 싶은 내용이 너무 많더라도, 중요 링크는 5개 이내로 유지하는 것이 좋습니다. 만약 정말 넣고 싶은 링크가 많다면, megamenu를 사용하여 계층형 링크를 만드세요. Tony Robbinson의 경우, 페이지 링크를 모두 계층형으로 만들어 30개가 넘는 링크를 메뉴바에 두었는데요. 개인적으로는 너무 많다는 생각이 들지만, 링크를 넣고 싶다면 이렇게 계층형으로 넣으시면 됩니다. 3. minimal 형식의 메뉴바를 만들자메뉴바는 여러 종류가 있는데요. 제가 사용하고 있는 상단부 minimal 메뉴바도 있고, 좌측에 두는 메뉴바도 있고,투명한(transparent) 메뉴바도 있는데요. 가장 많이 사용하면서, 가독성이 좋은 메뉴바는 상단부에 있으면서, 배경색을 가지는 minimal 형태였습니다. 마치면서지금까지 ‘워드프레스 메뉴바 만들기’ 가이드였습니다. 이제는 여러분께 듣고 싶은데요. 여러분이 개인적으로 선호하시는 스타일이 있으신가요? 더 많은 방문자들에게 도움이 될 수 있는 메뉴바 구조가 있나요? 밑에 댓글로 남겨주세요! 항상 수정하고 피드백을 반영해서 더 완벽한 가이드가 되도록 노력하겠습니다! 감사합니다. |
워드프레스 상단 메뉴 만들기 - wodeupeuleseu sangdan menyu mandeulgi
저작권 © 2024 ko.wiewird Inc.
