헤더 탐색 메뉴에 버튼 추가
게시 됨: 2021-06-22헤더 탐색 메뉴는 WordPress가 웹 사이트 부동산에서 종종 활용되지 않는 부분입니다. 대부분의 웹 관리자는 탐색용으로만 사용하지만 검색 표시줄이나 프로모션 콘텐츠를 추가할 수도 있습니다. 그러나 이를 효과적으로 수행 하려면 헤더 탐색 메뉴에 버튼을 추가하는 것을 고려해야 합니다 . 이 기사에서는 그렇게 하는 것이 유익한 이유와 올바르게 하는 방법에 대해 자세히 설명합니다.
헤더 탐색 메뉴에 버튼을 추가할 때의 이점
헤더 탐색 메뉴에 버튼이 있는 것은 사소한 일처럼 보일 수 있습니다. 결국 표준 하이퍼링크와 버튼 사이에는 큰 차이가 없어 보입니다. 사실, 일반 텍스트 대신 버튼을 사용하면 놀라운 결과를 얻을 수 있습니다 . 이것은 주로 사람의 주의가 작동하는 방식과 버튼이 얼마나 주목할만한지 때문입니다.
사람들이 일반적으로 헤더 탐색 메뉴를 경험하는 방식
헤더 탐색 메뉴는 일반적으로 사람들이 두 번째로 주목하는 것입니다. 웹사이트를 잘 디자인하고 탐색 메뉴를 제대로 추가했다면 게시물 제목이 가장 먼저 보는 사람의 시선을 사로잡아야 합니다. 그러나 그 후에는 사용 가능한 항목을 확인하기 위해 자연스럽게 탐색 메뉴로 시선이 향해야 합니다. 그들이 현재 페이지에 머물기로 결정했다면 그렇게 하십시오. 그러나 웹사이트에 다른 관심 지점이 있는 경우 헤더 탐색 메뉴에 명확하게 표시되어야 합니다.
결국, 귀하의 목표는 귀하의 웹사이트에서 가능한 한 오랫동안 사람들을 유지하는 것이어야 합니다 . 그리고 알기 쉬운 메뉴가 있으면 큰 도움이 됩니다. 그렇다면 이 모든 것에서 버튼은 어디에서 오는 것일까요?
버튼 추가의 이점
버튼을 추가하는 주요 아이디어는 중요한 것을 강조하는 것입니다. 헤더 메뉴에는 흥미로운 링크가 포함되어 있지만 모든 링크의 중요성이 같지는 않습니다. 일부는 읽기에 도움이 되는 간단한 탐색 도구입니다. 그리고 다른 것들은 독자들을 전환으로 안내하는 역할을 하는 보다 직접적인 홍보 콘텐츠입니다. 글쎄요, 후자의 콘텐츠에 관해서는 버튼이 당신의 선택이 되어야 합니다 . 원하는 대로 변경할 수 있으므로 자연스럽게 눈에 띄고 주의를 끌 것입니다. 따라서 웹사이트를 통한 고객의 여정을 이해한다면 버튼을 사용하여 쉽게 소셜 미디어로 유도하거나 성공적인 전환을 유도할 수 있습니다.
커스터마이징 팁
적절한 효과를 내기 위해 버튼을 사용자 정의하는 것은 약간 까다로울 수 있습니다. 한편으로는 웹 페이지의 모양을 망칠 수 있으므로 너무 많이 튀어나오지 않도록 해야 합니다. 그러나 관심을 끌지 못할 것이기 때문에 너무 많이 섞이는 것도 원하지 않습니다. 그래서, 당신이 찾아야 할 것은 중간 지점이며, 이는 말보다 쉽습니다. 우리의 조언은 헤더 탐색 메뉴에서 버튼을 성공적으로 사용하는 웹사이트를 찾아 색상을 활용하는 방법을 확인하는 것입니다. 버튼의 모양, 윤곽선, 글꼴 및 색상을 변경할 수 있음을 기억하십시오. 따라서이 다양성을 사용자 정의에 사용하십시오. 이상적으로 는 웹사이트의 전반적인 미학과 잘 어울리는 스타일을 찾을 수 있습니다 . 주목을 받으면서도.
헤더 탐색 메뉴에 버튼을 추가하는 방법
다행히 WordPress 헤더 탐색 메뉴에 버튼을 추가하는 것은 놀라울 정도로 간단합니다. 먼저 탐색 메뉴로 이동하여 버튼으로 변환하려는 링크를 추가해야 합니다. 외모 -> 메뉴 페이지 에서 이 작업을 수행할 수 있습니다. 완료되면 상단 근처에 있는 화면 옵션 버튼을 클릭합니다. 이렇게 하면 몇 가지 옵션이 있는 플라이다운 메뉴가 표시됩니다. 이 경우 'CSS Classes' 옵션만 선택하면 됩니다.
이 과정을 마치면 아래로 스크롤하여 버튼으로 변환하려는 메뉴 항목 확장을 클릭하십시오. 항목 설정에서 새로운 CSS 클래스 옵션을 얻을 수 있습니다. 그 안에 클래스 이름을 입력할 수 있습니다. 이론적으로 클래스 이름은 원하는 대로 지정할 수 있습니다. 다만, 이 글에서는 이해를 돕기 위해 클래스명 을 "menu-button" 으로 하겠다. 이름을 입력했으면 '메뉴 저장' 버튼을 클릭하는 것을 잊지 마십시오.
CSS 코드 추가
사용자 정의 CSS 클래스를 추가한 후 CSS 코드 추가를 진행할 수 있습니다. 여기에서 모양 -> 사용자 지정 으로 이동하여 WordPress 테마 사용자 지정 프로그램을 실행해야 합니다. 이렇게 하면 웹사이트의 미리보기와 테마 설정 목록이 표시됩니다. 추가 CSS 탭을 클릭하고 확장해야 합니다. 여기에 사용자 정의 CSS 코드를 추가할 수 있는 상자가 표시됩니다. 우선 다음 코드를 붙여넣는 것이 좋습니다.
.메뉴 버튼 {
배경색:#eb5e28;
테두리:1px;
테두리 반경: 3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
상자 그림자:1px 1px 0px 0px #2f2f2f;
}
.menu-button a, .menu-button a:hover, .menu-button a:active {
색상:#fff !중요;
}
CSS 코드를 추가하면 테마 커스터마이저가 이를 웹사이트 미리보기에 적용합니다. 이렇게 하면 변경한 내용을 볼 수 있습니다. 변경 사항은 영구적이지 않으므로 걱정하지 마십시오. 필요성을 느끼면 CSS로 실험하고 무엇을 할 수 있는지 확인하십시오. 변경 사항을 저장하려면 게시 버튼을 클릭하십시오.
이것으로 헤더 탐색 메뉴에 버튼 추가가 완료되었습니다.
마지막 생각들
모든 것을 고려할 때 버튼은 헤더 메뉴에 대한 훌륭한 애드온이 될 수 있습니다. 그러나 올바른 디자인을 찾는 것이 가장 중요합니다 . 사실 사람들이 버튼 추가를 꺼리는 주된 이유 중 하나는 버튼을 웹사이트 디자인에 맞출 수 없기 때문입니다. 막히면 전문 그래픽 디자이너와 상의하고 그들의 의견을 소중히 여길 것을 강력히 제안합니다. 보시다시피 디자인을 파악한 후에는 버튼을 추가하는 데 많은 시간이 걸리지 않습니다.