긴 게시물은 방문자가 전체 모양을 앞에서 볼 수 있고 원하는 부분으로 바로 이동할 수 있을 때 읽기 쉽습니다. 무료 목차 위젯 에서 Elementor용 마스터 애드온 페이지의 제목을 읽고 연결된 색인으로 바꿉니다. 빌드할 수동 목록이 없고 나중에 동기화할 목록이 없습니다.
위젯을 드롭 인하고 포함할 제목 수준을 선택하면 그 자체로 채워집니다. 거기에서 접을 수 있게 만들고,스크롤에서 상단으로 버튼을 추가하고,모든 것을 스타일링할 수 있습니다. 이 가이드는 위젯의 모든 설정을 다룹니다.
목차 위젯이 하는 일 #
위젯은 페이지에서 제목을 검색하고 그로부터 중첩된 링크 목록을 작성합니다. 각 항목은 해당 제목을 가리키므로 클릭하면 해당 섹션으로 이동합니다. 나중에 제목을 추가하고 목록이 가장 많은 시간을 절약하는 부분 인 자체에서 선택합니다.
두 개의 탭이 실행됩니다. 콘텐츠 제목, 제목 수준, 접을 수 있는 옵션 및 스크롤 동작을 보유합니다. 스타일 컨테이너 패딩,제목, 구분 기호 및 목록 항목을 제어합니다. 일반적인 Elementor Advanced 옵션은 옆에 있습니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- 위젯이 읽을 수 있는 실제 제목(H2, H3 등)이 포함된 페이지 또는 게시물입니다.
목차 위젯을 추가하는 방법 #
Elementor 편집기에서 을 엽니다 요소 패널 및 검색 목차또는 마스터 애드온 섹션으로 스크롤합니다 (위젯에는 보라색 MA 배지가 있음). 콘텐츠 상단으로 드래그하거나 사이드바로 드래그하면 페이지 제목에서 바로 채워집니다.
제목과 포함할 제목을 설정합니다 #
열다 콘텐츠 탭과 목차 섹션. 상자 이름을 지정하고 목록 스타일을 선택하고 표시되는 제목 수준을 선택하는 곳입니다.
- 제목 텍스트 입력: 목차나 TOC와 같은 목록 위의 제목입니다.
- 목록 스타일: 기본값(마커 없음), 총알 또는 숫자.
- 포함/제외: 포함 탭에는 제목 태그가 있고 제외 탭에는 단일 제목을 제외하는 방법이 설명되어 있습니다.
- 제목 태그: h2 및 H3 와 같이 끌어올 레벨을 선택합니다. 태그를 추가하거나 제거하여 목록의 깊이를 제어합니다.
단일 제목을 건너뛰시겠습니까? Add the jltma-toc-hide-heading 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 접을 수 있는 옵션을 사용하면 방문자가 목록을 제목만으로 접을 수 있습니다. 이는 모바일이나 공간이 좁은 사이드바에서 도움이 됩니다.
- 콘텐츠를 접을 수 있게 만들기: 목록이 열리고 닫히도록 토글을 추가합니다.
- 처음에 붕괴된 상태를 유지하세요: 클릭할 때까지만 제목을 표시하도록 닫힌 상태로 로드합니다.
- 아이콘 크기 및 색상: 접기 토글의 모습.
스크롤 동작을 설정합니다 #
열다 스크롤 누군가가 인덱스를 사용할 때 페이지가 어떻게 움직이는지에 대한 섹션. 뒤로 가기 버튼을 추가하고 부드러운 스크롤을 켤 수 있습니다.
- 맨 위로 스크롤: 오른쪽 하단에 고정 화살표를 추가합니다. 방문자가 아래로 스크롤하여 목차로 다시 가져가면 나타납니다.
- 맨 위로 스크롤 오프셋: 목차 대신 독자를 보내는 스크롤 위치입니다.
- 스크롤 애니메이션 지연 및 부드러운 스크롤: 지연은 스크롤이 걸리는 시간을 설정합니다 (기본적으로 500ms). Smooth Scroll 을 켜면 Smooth Scroll Offset (px) 이 추가되어 제목에 미치지 못하므로 고정 헤더가 다루지 않습니다.
컨테이너와 제목을 스타일링합니다 #
열다 스타일 탭. 그만큼 컨테이너 섹션에서는 전체 상자 주위에 패딩을 설정합니다 제목 섹션은 목록 위의 제목을 스타일링합니다.
- 컨테이너: 상자에 대한 패딩. 고급 탭에서 배경,테두리 또는 반지름을 추가합니다.
- 제목: 제목의 정렬, 색상, 타이포그래피 및 하단 간격.
- 분리기: 제목 아래 줄의 스타일,색상, 두께 및 하단 간격. 스크롤에서 상단 화살표로 스크롤 섹션의 스타일이 지정됩니다.
목록 항목의 스타일을 지정합니다 #
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나 사이드바 제목과 같이 목록에서 원하지 않는 제목에 jltma-toc-hide-heading 클래스를 사용합니다.
자주 묻는 질문 #
마스터 애드온의 목차 위젯은 무엇입니까?
페이지의 제목을 읽고 자동으로 링크된 인덱스를 구축하는 무료 Elementor 위젯입니다. 각 항목은 클릭 시 해당 섹션으로 점프하고 Elementor 패널에서 나타나는 제목 수준,목록 축소 여부,표시 방식을 모두 제어합니다.
위젯은 어떤 제목을 나열할지 어떻게 알 수 있나요?
H2 및 H3 와 같은 콘텐츠 탭에서 제목 태그를 선택하고 위젯은 페이지에서 일치하는 모든 제목을 나열합니다. 전체 레벨을 건너뛰려면 해당 태그를 제외합니다. 특정 제목 하나를 삭제하려면 고급 탭에서 jltma-toc-hide-heading 클래스를 추가합니다.
목차를 접을 수 있게 만들 수 있나요?
예. 접을 수 있는 옵션은 방문자가 목록만 제목에 접을 수 있도록 토글을 추가합니다. 접힌 상태를 유지 초기에는 닫힌 상태로 로드하도록 설정하면 사이드바 또는 모바일에서 수직 공간을 절약하려는 위치에서 잘 작동합니다.
새 제목을 추가하면 업데이트되나요?
예. 목록은 페이지의 제목에서 생성되므로 제목을 추가,제거 또는 이름을 변경하면 목차에 변경 사항이 반영됩니다. 동기화 상태로 유지할 수동 목록이 없으므로 손으로 만든 위젯 위에 위젯을 사용하는 주된 이유입니다.
부드러운 스크롤과 맨 위로 가기 버튼을 추가할 수 있나요?
예. 항목을 클릭하면 해당 섹션으로 스크롤되고 스크롤 애니메이션 지연은 소요 시간을 설정합니다. 부드러운 스크롤은 고정 헤더에 대한 오프셋을 추가합니다. 맨 위로 스크롤은 자체 오프셋,크기 및 색상으로 오른쪽 하단에 화살표를 추가합니다.
감싸는 #
목차 위젯은 수동 유지 관리 없이 제목을 연결된 인덱스로 바꿉니다: 드롭인하고, 제목 수준을 선택하고, 접을 수 있게 만들고, 스크롤 동작을 설정한 다음, 일치하도록 스타일을 지정합니다. Elementor Pro와의 개요 및 비교는 다음을 참조하세요 Elementor 목차 위젯 페이지. 관련된 위젯은 을 참조하십시오 타임라인 그리고 Nav 메뉴, 전체를 찾아보세요 마스터 애드온 위젯 및 확장, 그리고 확인해 보세요 가격 페이지 각 계획에 포함된 내용입니다.
