페이지의 메인 탐색과 섹션 링크하는 방법
페이지의 상단 탐색 메뉴를 페이지의 섹션에 링크하고 싶을 때가 있습니다. 오늘은 시작하기 전에 최근에 작업한 클라이언트 사이트의 예를 보여 드리겠습니다. 뉴욕의 동영상 제작 회사인 Paper Plane Video의 웹 사이트입니다. 메인 홈 페이지에 있고 상단 탐색 메뉴에는 홈 및 우리의 작업이라는 네 개의 링크가 있습니다. 그러나 우리에 대해서와 연락처는 실제로 홈 페이지의 섹션에 대한 링크입니다. 따라서 이러한 두 섹션을 보여 드리겠습니다. 페이지 하단에 위치한 우리에 대해서와 연락처입니다. 따라서 두 개의 독립된 페이지처럼 보이지만 실제로는 홈 페이지의 섹션으로 이동하는 링크입니다.
또 다른 예는 최근에 고객을 위해 디자인한 dogs welcome.net 이라는 사이트입니다. 상단 탐색 메뉴에서 다른 페이지를 볼 수 있지만 검색 버튼도 있습니다. 이 사이트는 실제로 사람들에게 미국과 캐나다의 견종 친화적인 휴가 렌탈 숙박을 찾는 데 도움이되는 사이트입니다. 우리는 몇 가지 플러그인을 사용하여 필터 시스템을 생성했습니다. 해당 페이지에 착지하는 모든 사람이 매번 아래로 스크롤하지 않아도 되도록 이렇게 구현했습니다. 검색을 클릭하면 검색 부분으로 바로 이동하여 휴가 숙박 장소를 검색할 수 있습니다. 이렇게 Anchor 링크를 만드는 방법을 보여 드리겠습니다. 두 가지 다른 방법이 있습니다. 코드 블록을 사용한 방법과 해시 태그와 번호를 사용한 방법입니다. 이들은 동일한 결과를 얻는 다른 방식입니다. 먼저, 제 웹 사이트 millionairewebdesigner.com에 이것을 어떻게 구축했는지 보여 드리겠습니다. 이 사이트에는 웹 디자이너, 그래픽 디자이너, 문구 작성자 및 기타 디렉토리가 있습니다. 디렉토리 페이지, 즉 제 홈 페이지이며 현재 상단 탐색 메뉴에는 홈 페이지와 디렉토리 페이지 두 가지만 있는 사용 가능한 페이지입니다. 이제 상단 탐색 메뉴에 섹션으로 이동하는 링크를 만드는 방법을 보여 드리겠습니다. 가장 아래쪽에 약간의 설명이 된 코드가 있는 부분인 디렉토리 페이지 편집에서 섹션을 클릭하면 코드 블록을 추가할 수 있습니다. 여기에 정확히 이 코드를 추가한 다음 사용자 정의합니다. 여기에는 제목을 입력하는 부분이 있습니다. 이는 이름 아무거나 상관 없고 상단 탐색 메뉴에서 정확히 이 제목을 사용하는 것이 가장 중요합니다. 항목 추가, 코드 추가 후에 등록을 클릭합니다. 메인 탐색 메뉴에서 링크를 만들기 위해 왼쪽에 있는 홈 페이지에 링크를 만들기 위해 추가 아이콘을 클릭하고 링크를 추가합니다. 링크를 페이지로 걸 것인지 아니면 외부 사이트로 걸 것인지 선택합니다. 누르면 링크를 추가할 수 있습니다. 와 같이 사용합니다. 이제 제목인 강조 부분에는 링크입니다. 링크를 편집하여 저의 웹 사이트에 이 코드를 추가하였습니다. 저장을 누릅니다. 이제 홈 페이지에서 확인할 수 있습니다. 클릭하면 해당 부분으로 이동하는 링크가 생성됩니다. 이것이 페이지의 섹션으로 이동하는 링크를 상단 탐색 메뉴에 만드는 첫 번째 방법입니다. 또한, 동일한 결과를 얻기 위해 페이지 섹션을 찾는 두 번째 방법도 있습니다. Yoast SEO 플러그인을 사용하여 페이지 섹션을 찾을 수 있습니다. 해당 페이지에서 슬러그 변경을 클릭하면 URL 슬러그가 표시됩니다. 이 URL 슬러그를 링크에 추가하여 모든 페이지에서 정상적으로 작동하도록 할 수 있습니다.
💡 페이지 상단 탐색 메뉴에 섹션으로 이동하는 링크 만들기
- 첫 번째 방법: 코드 블록 사용
- 두 번째 방법: 페이지 섹션 및 URL 슬러그 사용
이렇게 두 가지 다른 방법으로 동일한 결과를 얻을 수 있습니다. 단일 페이지만 있는 경우에는 잘 작동하지만, 다른 페이지에서는 작동하지 않을 수 있습니다. 이 경우 URL 슬러그를 링크에 추가하여 해결할 수 있습니다.
페이지 섹션에 대한 링크를 생성하는 방법을 소개했습니다. 추가 설명이 필요한 사항이 있거나 궁금한 점이 있다면 댓글에서 알려주세요. 또한 Squarespace나 ConvertKit과 같은 다른 앱에 대해 알고 싶은 내용이 있으면 구체적인 질문을 남겨주세요. 새로운 비디오를 만드는 중이므로 구독을 고려해 주시고 다음 영상에서 뵙겠습니다. 감사합니다.
(Note: This is a translated version of the original text. Please note that due to translation limitations, some nuances of the original content may be lost.)