Divi Theme – 단일 페이지 웹사이트 만들기

Divi Theme – 단일 페이지 웹사이트 만들기

Divi의 단일 페이지 사이드바 내비게이션을 통해 간편하게

새 페이지를 만들 때 Divi의 단일 페이지 내비게이션 옵션을 활성화하여 방문자에게 페이지에서 진행 상황을 시각적으로 보여주고 클릭할 수 있습니다. 또한 사용자 지정 앵커 링크 및 섹션 ID를 사용하여 전체 한 페이지 패키지에 대한 단일 페이지 메뉴를 만들 수 있습니다.

docs image
단일 페이지 내비게이션 옵션

단일 페이지 내비게이션 활성화

단일 페이지 내비게이션 활성화하는 것은 쉽고, 페이지 단위로 수행할 수 있습니다. 페이지를 만들거나 편집할 때마다 텍스트 편집기 오른쪽에 있는 “Divi 설정” 상자를 찾습니다. 이 상자 안에 닷 내비게이션 옵션이 표시됩니다. 드롭 다운 메뉴에서 “켜기”를 선택한 다음 페이지를 저장합니다. 이제 페이지 오른쪽에 플로팅 내비게이션 바가 추가되었음을 알 수 있습니다.

닷 내비게이션바는 페이지의 각 섹션에 클릭 가능한 링크를 자동으로 추가합니다. 새 섹션을 추가하면 새 원 링크 (또는 점)가 플로팅 사이드 탐색에 자동으로 추가됩니다. 사용자는 점을 클릭하여 페이지의 다른 섹션으로 건너 뛸 수 있습니다. 또한 방문자가 페이지에서 어디에 있는지 쉽게 식별 할 수 있으므로 긴 형식의 페이지를 더 쉽게 이해하고 탐색 할 수 있습니다.

닷 내비게이션

단일 페이지 웹사이트용 사용자 지정 메뉴 링크 만들기

사이드 내비게이션 외에도 기본 헤더 내비게이션을 단일 페이지 내비게이션으로 변환 할 수 있습니다. 단일 페이지 웹 사이트를 만드는 경우 메뉴 링크가 별도의 페이지를 가리키지 않도록 해야 합니다. 대신 이러한 링크는 동일한 페이지의 관련 섹션을 가리킬 수 있습니다. 클릭하면 부드러운 스크롤 효과를 사용하여 페이지의 관련 섹션으로 이동할 수 있습니다.

이는 맞춤 ID를 사용하여 수행할 수 있습니다. 빌더로 만들어진 페이지의 모든 요소에 ID를 지정할 수 있습니다. 섹션 설정 아이콘을 클릭하고 “CSS ID” 설정을 찾아 섹션에 ID를 할당할 수 있습니다. ID가 할당되면 내비게이션 메뉴에서 연결할 수 있습니다. 예를 들어 “회사 소개”라는 섹션이 있고 회사를 설명하는 페이지 부분으로 연결되기를 원한다고 가정해 보겠습니다. About Us 콘텐츠가 포함된 섹션을 편집하고 “CSS ID” 필드에 “aboutus”를 입력하고 “저장”을 클릭합니다. 이제 ID가 할당되었으므로 링크를 가리킬 수 있습니다.

CSS ID 설정

메뉴 링크를 ID로 가리 키기

사용자 지정 메뉴 링크를 만들려면 워드프레스 대시보드의 “테마 디자인 > 메뉴” 탭을 사용하여 메뉴에 새 링크를 추가해야 합니다. 메뉴 시스템에 익숙하지 않은 경우 이 훌륭한 튜토리얼을(영어) 확인하십시오.

새 메뉴를 만들고 기본 탐색 위치에 할당했으면 헤더에 링크를 추가할 수 있습니다. 이 경우 페이지 왼쪽에 있는 “사용자 정의 링크”탭을 클릭하여 만듭니다. 클릭하면 두 개의 필드 (URL 및 링크 텍스트)가 제공됩니다. “링크 텍스트”의 경우 메뉴에 표시 할 텍스트 (예 : “회사 소개”)를 입력하면 됩니다. URL의 경우 이전 섹션에 할당 한 ID에 연결해야 합니다. 이 경우 아이디 “aboutus”를 추가했지만 원하는 아이디 이름을 추가할 수 있습니다. ID “aboutus”를 사용 했으므로 “/ # aboutus”를 가리키는 URL을 만들어 해당 ID에 연결할 수 있습니다.

이 동일한 방법을 사용하여 원하는 만큼 많은 사용자 지정 링크를 만들 수 있습니다. “/ #” URL과 타겟팅 할 ID를 입력하면 됩니다.

메뉴 링크 ID 가리키기

원문: https://www.elegantthemes.com/documentation/divi/one-page-website/

코멘트 제출