긴 포스트는 방문자가 전체 모양을 앞에서 볼 수 있고 원하는 부분으로 바로 이동할 수 있을 때 읽기 쉽습니다. The 목차 위젯 인 Elementor용 마스터 애드온 페이지의 제목을 읽고 연결된 색인으로 바꿉니다. 빌드할 수동 목록이 없고 나중에 동기화할 목록이 없습니다.
위젯을 드롭 인하고 포함할 제목 수준을 선택하면 그 자체로 채워집니다. 거기에서 접을 수 있게 만들고,스크롤에서 상단으로 버튼을 추가하고,모든 것을 스타일링할 수 있습니다. 이 가이드는 위젯의 모든 설정을 다룹니다.
목차 위젯이 하는 일 #
위젯은 페이지에서 제목을 검색하고 그로부터 중첩된 링크 목록을 작성합니다. 각 항목은 해당 제목을 가리키므로 클릭하면 해당 섹션으로 이동합니다. 나중에 제목을 추가하고 목록이 가장 많은 시간을 절약하는 부분 인 자체에서 선택합니다.
두 개의 탭이 실행됩니다. 콘텐츠 제목, 제목 수준, 접을 수 있는 옵션 및 스크롤 동작을 보유합니다. 스타일 컨테이너,제목, 목록 항목 및 인덱스 마커를 제어합니다. 일반적인 Elementor Advanced 옵션이 옆에 있습니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- 위젯이 읽을 수 있는 실제 제목(H2, H3 등)이 포함된 페이지 또는 게시물입니다.
목차 위젯을 추가하는 방법 #
Elementor 편집기에서 을 엽니다 요소 패널 및 검색 목차또는 마스터 애드온 섹션으로 스크롤합니다 (위젯에는 보라색 MA 배지가 있음). 콘텐츠 상단으로 드래그하거나 사이드바로 드래그하면 페이지 제목에서 바로 채워집니다.
제목과 포함할 제목을 설정합니다 #
열다 콘텐츠 탭과 목차 섹션. 상자 이름을 지정하고 목록 스타일을 선택하고 표시되는 제목 수준을 선택하는 곳입니다.
- 제목 텍스트 입력: 목차나 TOC와 같은 목록 위의 제목입니다.
- 목록 스타일: 항목에 대한 없음, 총알 또는 숫자.
- 포함/제외: 표시할 제목 태그를 나열하거나 건너뛸 제목 태그를 나열하는 사이를 전환합니다.
- 제목 태그: h2 및 H3 와 같이 끌어올 레벨을 선택합니다. 태그를 추가하거나 제거하여 목록의 깊이를 제어합니다.
단일 제목을 건너뛰시겠습니까? Add the ignore-this-tag CSS Classes 필드에 있는 해당 표제의 고급 탭으로 클래스를 지정하고 위젯이 이를 생략합니다. 한 섹션 표제가 목록을 어지럽힐 때 편리합니다.
목록을 접을 수 있게 만듭니다 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 접을 수 있는 옵션을 사용하면 방문자가 목록을 제목만으로 접을 수 있습니다. 이는 모바일이나 공간이 좁은 사이드바에서 도움이 됩니다.
- 콘텐츠를 접을 수 있게 만들기: 목록이 열리고 닫히도록 토글을 추가합니다.
- 처음에 붕괴된 상태를 유지하세요: 클릭할 때까지만 제목을 표시하도록 닫힌 상태로 로드합니다.
- 아이콘 크기 및 색상: 접기 토글의 모습.
스크롤 동작을 설정합니다 #
열다 스크롤 누군가가 인덱스를 사용할 때 페이지가 어떻게 움직이는지에 대한 섹션. 뒤로 가기 버튼을 추가하고 부드러운 스크롤을 켤 수 있습니다.
- 맨 위로 스크롤: 페이지 하단에 다시 위로 점프하는 화살표를 추가합니다.
- 맨 위로 스크롤 오프셋: 얼마나 멀리 페이지 아래 화살표가 나타납니다.
- 부드러운 스크롤 및 지연: 점프 대신 목표물에 활공, 그리고 속도를 설정.
컨테이너와 제목을 스타일링합니다 #
열다 스타일 탭. 그만큼 컨테이너 섹션에서는 전체 상자 주위에 패딩, 배경 및 테두리를 설정합니다 제목 섹션은 목록 위의 제목을 스타일링합니다.
- 컨테이너: 상자의 패딩, 배경, 테두리 및 반경.
- 제목: 제목의 색상, 타이포그래피 및 간격입니다.
- 인덱스 및 버튼: 각 항목 앞의 마커와 스크롤에서 상단까지 버튼.
목록 항목의 스타일을 지정합니다 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 콘텐츠 스타일 탭의 섹션은 링크 자체를 처리합니다. 타이포그래피,항목 사이의 간격,일반, 호버 및 활성 상태에 대한 별도의 색상을 얻을 수 있습니다.
- 타이포그래피 및 간격: 글꼴과 행 사이의 간격입니다.
- 일반 / 호버 / 활성: 각 상태에 대한 색상이므로 현재 섹션이 눈에 띌 수 있습니다.
- 텍스트 색상: 선택한 상태의 링크 색상입니다.
일반적인 사용 사례 #
- 긴 튜토리얼과 가이드 독자들에게 지도와 빠른 점프를 제공합니다.
- 문서 페이지 모든 제목이 사람들이 검색하는 섹션인 경우.
- 사이드바 기사 뒤에 접을 수 있는 색인이 있습니다.
- 검거 및 목록 따라서 방문자는 원하는 항목으로 건너뛸 수 있습니다.
- 법률 및 정책 페이지 각 조항에 대한 명확한 앵커가 필요합니다.
목차 위젯 작업 팁 #
- 깨끗한 표제 구조를 사용하십시오. 목록은 H2 및 H3 만큼만 좋으므로 스스로 잘 읽는 제목을 작성하십시오.
- 단지 두 가지 레벨을 포함하십시오. H2 와 H3 는 보통 깔끔한 색인을 만듭니다. H4 와 그 너머로 당기면 시끄러워지기 시작합니다.
- 모바일에서 접어. Keep Collapsed 처음에는 작은 화면에서 스크롤을 많이 절약합니다.
- 부드러운 스크롤을 켭니다. 섹션으로 활공하면 하드 점프보다 더 잘 읽혀지며 오프셋은 제목에 끈적한 헤더가 없도록 유지합니다.
- 길 잃은 제목 건너뛰기. CTA나 사이드바 제목과 같이 목록에서 원하지 않는 제목에 ignore-this-tag 클래스를 사용합니다.
자주 묻는 질문 #
마스터 애드온의 목차 위젯은 무엇입니까?
페이지의 제목을 읽고 자동으로 링크된 인덱스를 구축하는 Elementor 위젯입니다. 각 항목은 클릭 시 해당 섹션으로 점프하고 Elementor 패널에서 나타나는 제목 수준,목록 축소 여부,표시 방식을 모두 제어합니다.
위젯은 어떤 제목을 나열할지 어떻게 알 수 있나요?
H2 및 H3 와 같은 콘텐츠 탭에서 제목 태그를 선택하고 위젯은 페이지에서 일치하는 모든 제목을 나열합니다. 제외 탭으로 전환하여 대신 레벨을 건너뜁니다. 특정 제목 하나를 삭제하려면 고급 탭에서 무시-이-태그 클래스를 추가합니다.
목차를 접을 수 있게 만들 수 있나요?
예. 접을 수 있는 옵션은 방문자가 목록만 제목에 접을 수 있도록 토글을 추가합니다. 접힌 상태를 유지 초기에는 닫힌 상태로 로드하도록 설정하면 사이드바 또는 모바일에서 수직 공간을 절약하려는 위치에서 잘 작동합니다.
새 제목을 추가하면 업데이트되나요?
예. 목록은 페이지의 제목에서 생성되므로 제목을 추가,제거 또는 이름을 변경하면 목차에 변경 사항이 반영됩니다. 동기화 상태로 유지할 수동 목록이 없으므로 손으로 만든 위젯 위에 위젯을 사용하는 주된 이유입니다.
부드러운 스크롤과 맨 위로 가기 버튼을 추가할 수 있나요?
예. 스크롤 섹션에는 대상 섹션으로 미끄러지는 부드러운 스크롤 토글이 있으며 지연을 설정할 수 있습니다. 또한 페이지 하단에 자체 오프셋,크기 및 색상과 함께 맨 위 화살표를 추가하는 맨 위로 스크롤 옵션이 있습니다.
감싸는 #
목차 위젯은 수동 유지 관리 없이 제목을 연결된 인덱스로 바꿉니다: 드롭인하고, 제목 수준을 선택하고, 접을 수 있게 만들고, 스크롤 동작을 설정한 다음, 일치하도록 스타일을 지정합니다. 관련 위젯은 다음을 참조하세요 타임라인 위젯 그리고 the 탐색 메뉴 위젯, 전체를 찾아보세요 마스터 애드온 위젯 및 확장, 그리고 확인해 보세요 가격 페이지 각 계획에 포함된 내용입니다.
