버전 7.0의 스택형 색인 페이지에는 사용자 지정 코드 없이 앵커 링크(또는 "페이지 점프")를 생성할 수 있는 고유한 URL 구조가 있습니다. 이 앵커 링크를 사용하면 색인 페이지의 특정 위치로 바로 이동할 수 있습니다. 

예를 들어, Hayden 템플릿의 데모 사이트에서 작업 보기 버튼을 클릭하면 페이지가 아래로 스크롤되어 "Moreau" 섹션으로 이동합니다.

이 가이드는 버전 7.0의 색인 페이지를 위한 것입니다. 버전 7.1에서 앵커 링크를 추가하려면 앵커 링크 만들기를 참조하세요. 버전 7.0의 레이아웃 페이지에 앵커 링크를 추가하려면 버전 7.0에서 앵커 링크 수동 생성을 참조하세요.

지원되는 템플릿

색인 페이지 앵커 링크는 스택형 색인 페이지가 있는 템플릿에서 가장 잘 작동합니다. 이 템플릿 그룹에서는 앵커 링크를 클릭하면 해당 색인 페이지 섹션으로 스크롤됩니다.

• Bedford
• Brine - Ajax 로딩은 앵커 링크 동작과 충돌할 수 있습니다. 대안으로, 내장된 색인 탐색을 사용하세요.
• Pacific - 링크 끝에 -section을 추가해야 합니다. 자세한 내용은 아래의 3단계를 참조하세요.

팁: 일부 그리드 색인은 유사한 기능을 지원합니다. 또한 사용자 지정 코드를 사용해 모든 템플릿에 앵커 링크를 수동으로 추가할 수 있습니다.

1단계 - 슬러그 찾기

페이지 패널에서 연결하려는 색인 섹션 위에 커서를 올리세요. 를 클릭해 해당 섹션의 페이지 설정을 엽니다.

URL 슬러그 필드에서 슬러그를 복사하세요. 이 슬러그를 사용해 앵커 링크를 생성합니다.

팁: 방문자가 해당 섹션으로 이동하면 브라우저 주소창에 슬러그가 표시될 수 있습니다. 이 필드에 새 텍스트를 입력하여 슬러그를 변경할 수 있습니다.

2단계 - 링크 만들기

방문자가 클릭할 링크를 추가하세요. 모든 유형의 링크를 사용할 수 있지만, 여기서는 예시로 텍스트 링크를 사용합니다.

텍스트 블록에서 텍스트를 선택한 후 텍스트 블록 도구 모음에서 링크 아이콘을 클릭하세요.

팁: 템플릿마다 색인에 고유한 옵션이 있습니다. 자세한 내용은 사용 중인 템플릿 그룹의 가이드를 참조하세요(Bedford, Brine 또는 Pacific).

3단계 - 페이지 슬러그 추가

다음 단계를 따르세요.

1. URL 필드에 1단계에서 복사한 슬러그를 붙여넣으세요.
2. 슬러그 앞에 해시 기호(#)를 추가하여 링크를 완성하세요. 이 예시의 앵커 링크는 #hours-and-location입니다.
3. 새 탭에서 링크 열기 토글을 끄세요.
4. Pacific, Charlotte, Horizon, Naomi 템플릿에만 해당: 앵커 링크 끝에 -section을 추가하세요. 예: #hours-and-location-section
5. Enter 키를 누르세요.

4단계 - 색인 슬러그 추가

2단계에서 동일한 색인 페이지 내의 섹션에 링크를 만들었다면 이 단계는 건너뛸 수 있습니다.

탐색 링크나 다른 페이지의 링크처럼 그 외의 링크에는 앵커 링크 앞에 색인 페이지의 슬러그를 포함하세요. 이렇게 하면 다음 위치에서 링크가 정상 작동합니다.

• 다른 페이지입니다.
• 사이트 탐색입니다.
• 하위 페이지의 직접 URL

이를 추가하려면 다음 단계를 따르세요.

1. 페이지 설정에서 색인 페이지의 슬러그를 복사하세요.
2. 링크 에디터를 다시 여세요.
3. 페이지 슬러그를 앵커 링크 앞에 / 기호로 구분하여 추가하세요. 예:

/indexslug/#pageslug

4. Enter 키를 누르세요.

예시

여러 섹션에 앵커 링크를 추가해 방문자가 색인 페이지를 쉽게 탐색할 수 있도록 하세요. 이 예시는 Brine 템플릿과 세 가지 링크 유형(버튼 블록, 텍스트 링크, 이미지 클릭스루 URL)을 사용합니다.

앵커 링크를 나란히 배치하여 탐색 메뉴를 만드세요. 이 예시는 Bedford 템플릿과 텍스트 링크를 사용합니다.

그리드 색인 페이지와 앵커 링크

그리드 색인 페이지가 있는 템플릿 그룹은 유사한 내장 옵션을 지원합니다.

• Avenue
• Flatiron
• Montauk

다음 URL 형식을 사용하여 이러한 템플릿에서 색인 페이지 앵커 링크를 만들 수 있습니다.

/index-page-slug/#/page-slug

이는 사이트 탐색 또는 사이트 내 다른 페이지에서 색인 내 페이지로 연결할 때 좋은 방법입니다. 페이지는 색인의 대표 이미지를 클릭했을 때와 동일하게 색인 전용 서식이 적용된 상태로 열립니다.

이 예시는 Avenue 템플릿을 사용합니다.

문제 해결

앵커 링크가 작동하지 않는 경우 다음 팁이 도움이 될 수 있습니다.

• 필요한 경우, 4단계에서 설명한 대로 색인 페이지 슬러그를 추가했는지 확인하세요. 여기에는 두 개의 / 기호가 포함되어야 합니다. 이는 탐색 링크와 다른 페이지에서 오는 링크에 필수입니다.
• 모바일에서 문제가 발생하고 템플릿이 Brine 그룹에 속해 있다면 원인 확인을 위해 Ajax를 비활성화해 보세요.
• 색인 페이지 슬러그와 섹션 페이지 슬러그가 올바른지 확인하세요. 둘 중 하나를 변경한 경우, 앵커 링크를 수동으로 업데이트해야 합니다.