Elementor 목차 위젯, 프로가 필요하지 않습니다
Elementor 의 자체 목차 위젯은 Elementor Pro 와 함께 제공됩니다. Master Addons 의 목차 위젯은 Pro 없이 Elementor 에서 실행됩니다. 게시물이나 페이지에 놓으면 거기에 있는 제목을 읽은 다음 제목 순서대로 연결된 목록을 작성합니다. 항목을 클릭하면 리더가 해당 섹션으로 스크롤됩니다. 포함할 제목 태그와 목록에 글머리 기호 또는 숫자가 표시되는지 여부를 선택합니다. 독자는 상자를 접을 수 있고 맨 위로 돌아가기 화살표는 다시 표시되며 짧은 CSS 규칙은 사이드바에서 상자를 계속 볼 수 있습니다.
Elementor에서 목차를 추가하는 방법
Elementor 와 Master Addon 이 필요합니다. Elementor Pro 는 필요하지 않습니다. 페이지에는 실제 제목 태그 (H2,H3 등) 도 필요합니다. 목록이 이들로 구성되기 때문입니다.
- 설치 및 활성화 WordPress.org 의 마스터 애드온그리고 마스터 애드온 대시보드에서 목차가 활성화되어 있는지 확인하세요.
- Elementor로 게시물이나 페이지를 열고 위젯 패널을 검색하세요 목차.
- 일반적으로 첫 번째 섹션 위나 사이드바 열에 목록이 있어야 하는 위치로 드래그합니다.
- 에서 콘텐츠제목을 설정하고 목록 스타일을 선택한 다음 포함할 제목 태그를 선택합니다.
- 오픈 접을 수 있는 그리고 스크롤 토글과 맨 위 화살표를 추가하려면.
- 스타일 탭에서 제목, 구분 기호 및 링크의 스타일을 지정한 다음 페이지를 미리 보고 몇 가지 항목을 클릭하여 점프를 테스트합니다.
모든 설정은 에서 다룹니다 목차 위젯 설정 가이드.
목차 한눈에 보기
위젯이 수행하는 작업은 Master Addon 3.2.3에서 읽어보세요.
| 항목 | 목차 위젯 |
|---|---|
| 제목을 찾는 곳 | .entry-content 를 먼저 입력한 다음.page-content 를 입력한 다음 Elementor 콘텐츠 영역 안쪽 |
| 제목 수준 | H1~H6 중 하나, 기본적으로 H2, H3, H4가 선택됩니다 |
| 한 제목을 빼고 | 해당 제목에 CSS 클래스 jltma-toc-hide-heading을 추가합니다 |
| 목록 스타일 | 기본값(마커 없음), 총알 또는 숫자 |
| 중첩 | 항상 제목 수준에 따라 중첩됩니다 |
| 접이식 상자 | 처음에 접힌 상태로 제목 옆으로 전환합니다 |
| 스크롤 | 제목 위에서 약 30px 정도 멈추는 부드러운 스크롤입니다 |
| 위로 돌아가기 | 스크롤 250px 후 오른쪽 하단에 화살표가 표시됩니다 |
| 활성 항목 | 독자가 마지막으로 클릭한 항목 (스크롤 스파이 없음) |
| 끈적끈적한 | 스위치 없음; 위치: 사용자 정의 CSS 또는 Elementor Pro 모션 효과를 통해 끈적끈적합니다 |
| 필요 | Elementor 및 Master Addons, Elementor Pro 없음 |
제목에서 목록을 작성합니다
레벨을 선택하세요 제목 태그. H2,H3 및 H4 는 기본적으로 선택되며 H1 에서 H6 중 하나를 추가 할 수 있습니다. 페이지가로드되면 위젯은 해당 제목을 찾고,아무것도없는 경우 각 제목에 ID 를 부여하고,제목 수준별로 목록을 중첩합니다. 제목 이름을 바꾸거나 추가하면 목록이 다음로드에서이를 선택하므로 손으로 유지할 수있는 앵커 링크가 없습니다.
- 목록 스타일: 기본값(마커 없음), 총알 또는 숫자.
- 제목 하나를 건너뛰세요: CSS 클래스를 추가합니다
jltma-toc-hide-heading해당 제목의 고급 탭에서. - 구분 기호 표시: 제목 아래에 고유한 스타일, 색상, 두께 및 간격을 갖춘 선택적 줄입니다.
- 제목 ID는 제목 텍스트로 만들어지므로 다른 곳의 섹션으로 바로 연결할 수도 있습니다.
사이드바 및 모바일용 접이식 상자
켜다 콘텐츠를 접을 수 있게 만듭니다 그리고 제목 옆에 토글 아이콘이 나타납니다. 독자들이 목록을 열거나 닫기 위해 클릭하고,점프하는 대신 미끄러집니다. 스위치 켜기 처음에는 붕괴된 상태를 유지하세요 긴 법적 페이지와 좁은 사이드바 열에 도움이 되는 제목만 표시하는 상자를 로드하려면.
- 토글의 아이콘 크기 및 아이콘 색상 컨트롤입니다.
- 구분 기호는 목록과 함께 접혀집니다.
- 위젯에는 자체적으로 끈적끈적한 스위치가 없습니다. 사람들이 읽는 동안 상자를 계속 보려면 아래의 목차를 끈적끈적하게 만들기 를 참조하십시오.
부드러운 점프와 맨 위로 돌아가기 화살표
항목을 클릭하면 페이지가 제목까지 부드럽게 스크롤되고 그 위에서 약 30px 가 멈추므로 제목이 화면 상단에 같은 높이로 위치하지 않습니다. 사이트에 키가 큰 고정 헤더가있는 경우 아래 FAQ 에는 제목을 명확하게 유지하는 두 줄의 CSS 수정이 있습니다.
- 위로 스크롤 방문자가 아래로 스크롤하면 표시되는 오른쪽 하단 모서리에 작은 화살표를 추가합니다.
- 화살표는 독자를 목차로 돌아가거나 스크롤에서 상단 오프셋으로 설정한 위치로 이동합니다.
- 화살표의 크기, 아이콘 색상 및 배경 색상 컨트롤.
- 리더가 클릭한 항목은 콘텐츠 스타일 섹션에서 활성 색상을 유지하므로 점프한 위치를 확인할 수 있습니다.
목차를 끈적하게 만드세요
위젯에는 그 자체로 끈적한 스위치가 없습니다. 사이드바 열 내부에 위젯을 끈적하게 만들어 고정시키면 Pro 가 없는 Elementor 가 Master Addon 을 통해 이를 수행할 수 있습니다 사용자 정의 CSS 확장.
- 기사와 목차를 한 행에 넣으십시오: 콘텐츠의 넓은 열과 목차 위젯의 좁은 열. 좁은 열을 기본 높이에 두어 행의 높이까지 늘어납니다.
- 목차 위젯을 선택하고 엽니다 고급, 그럼 마스터 애드온 사용자 정의 CSS 섹션, 및 붙여넣기
selector { position: sticky; top: 32px; } - 사이트에 고정 헤더가 있는 경우, 예를 들어 80px 헤더 아래에 110px가 있는 경우 최상위 값을 올립니다.
- 페이지를 미리 보고 스크롤합니다. 상자는 행의 끝까지 계속 보입니다.
Elementor Pro를 사용하면 사용할 수 있습니다 고급, 모션 효과, 끈적임: 상단 대신 Stay In Column이 켜져 있습니다.
두 가지 작업이 끈적거리는 것을 멈추게 합니다: 오버플로가 숨김으로 설정된 상위 컨테이너와 상자보다 높지 않은 사이드바 열. 휴대폰에서는 사이드바가 기사 아래로 떨어지므로 Make Content Collapsible there 를 켜거나 이 복사본을 모바일에서 숨기고 기사 위에 접힌 목차를 놓습니다.
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 끈적한 사이드바 데모 페이지의 중간쯤에 있습니다. 기사가 스크롤되는 동안 상자는 열의 맨 위에 있습니다.
위젯의 마스터 애드온 사용자 정의 CSS 섹션에 있는 고정 규칙입니다.
Elementor Pro 목차 대 마스터 애드온 목차
Elementor 의 목차 위젯에는 Elementor Pro 라이센스가 필요하며 스크롤하는 동안 어떤 제목이 표시되고 목록이 어떻게 동작하는지에 대한 더 많은 제어권을 제공합니다. Master Addon 은 Pro 없이 일상적인 작업을 처리하고 맨 위 화살표에 뒷면을 추가합니다.
| 특징 | 엘리멘터 프로 | 마스터 애드온 |
|---|---|---|
| 가격 | Elementor Pro가 필요합니다 | 마스터 애드온에 포함되어 있으며 Elementor Pro는 없습니다 |
| 어떤 제목 | 태그별 앵커(H1~H6)와 검색 영역을 제한하는 컨테이너 선택기 | 메인 게시물이나 페이지 콘텐츠의 제목 태그(H1~H6)입니다 |
| 제목을 남겨두세요 | 앵커 선택기별, 모든 CSS 선택기 | 각 제목에 CSS 클래스 jltma-toc-hide-heading이 있습니다 |
| 마커 | 선택한 아이콘이 있는 숫자 또는 글머리 기호입니다 | 기본값, 글머리 기호 또는 숫자 |
| 중첩 | 계층적 보기 하위 항목을 전환하고 축소합니다 | 항상 제목 수준에 따라 중첩됩니다 |
| 접기 | 확장 및 축소 아이콘과 시작하는 중단점이 최소화된 상자를 최소화합니다 | 콘텐츠를 접을 수 있게 만들고 처음에는 접힌 상태를 유지하세요 |
| 활성 항목 | 리더가 스크롤할 때 보이는 섹션을 따릅니다 | 독자가 클릭한 항목을 표시합니다 |
| 스크롤 설정 | 위젯에 속도 또는 오프셋 컨트롤이 없습니다 | 제목 위에서 약 30px 정도 멈추는 부드러운 스크롤입니다 |
| 끈적끈적한 | 위젯에 설정이 없습니다; 위젯이나 해당 열에 모션 효과 스티키를 사용하십시오 | 위젯에 설정 없음; 위치 추가: 사용자 정의 CSS로 끈적임 또는 Pro로 모션 효과 끈적임 사용 |
| 위로 가기 화살표 | 없음 | 크기 및 색상 컨트롤을 사용하여 맨 위로 스크롤합니다 |
Elementor Pro 에 대해 이미 비용을 지불하고 목록이 스크롤 할 때 리더를 추적하기를 원한다면 위젯을 사용하십시오. Elementor Pro 가없는 목차,접을 수있는 상자 및 맨 위로 돌아 가기 화살표를 원한다면이 것을 사용하십시오.
다음과 잘 짝을 이룹니다: 읽기 진행률 표시줄 사람들이 읽을 때 채워지는 바의 경우, 고급 아코디언 그리고 탭 긴 부분을 접으려면, 캔버스 외부 콘텐츠 (Pro) 슬라이드아웃 메뉴용, 그리고 블로그 게시물 목록에는 긴 기사가 포함되어 있습니다.
목차 플러그인 또는 Elementor 위젯?
워드 프레스는 목차의 두 종류가 있습니다: 게시물 콘텐츠에서 작동하는 플러그인,그리고 엘리멘터 편집기에 배치 위젯. 오른쪽은 페이지가 구축되는 방법에 따라 달라집니다.
| 옵션 | 작동하는 곳 | 위한 최고의 |
|---|---|---|
| 마스터 애드온 목차 | 템플릿을 포함하여 Elementor에 배치하는 모든 곳 | 디자인 스타일의 상자와 맨 위로 돌아가기 화살표를 원하는 요소 사이트입니다 |
| Elementor Pro 목차 | Elementor Pro 라이센스가 있는 Elementor의 어느 곳에서나 가능합니다 | 활성 항목이 스크롤을 따르기를 원하는 Pro에 이미 있는 사이트입니다 |
| 쉬운 목차, LuckyWP | 자동으로 삽입되거나 단축코드로 삽입된 콘텐츠를 게시합니다 | 블록 편집기 또는 클래식 편집기에 작성된 블로그입니다 |
| 순위 수학 목차 블록 | Rank Math 를 사용하는 사이트의 편집기 게시물 차단 | 일반 목록만 필요한 구텐베르크 게시물입니다 |
우리의 워드 프레스에 대한 내용 플러그인의 최고의 테이블의 라운드 업 설치 횟수, 단축 코드 및 고정 옵션을 사용하여 그 중 8개를 비교합니다.
목차 예
위젯으로 구축된 4 개의 라이브 데모. 하나를 연 다음 아래의 템플릿 뷰어에서 동일한 레이아웃을 가져옵니다.
- 끈끈한 사이드바: 기사가 스크롤되는 동안 계속 표시되는 좁은 열의 번호가 매겨진 목록, H3가 H2 아래에 중첩되어 있고 제목 하나가 jltma-toc-hide-heading으로 생략되어 있습니다.
- 목록 스타일: 기본값, 총알 및 숫자가 나란히 있으며 동일한 제목으로 제작되었습니다.
- 약관 페이지: 긴 법률 페이지의 모든 섹션을 나열하는 오른쪽 사이드바의 상자.
- 개인정보취급방침 페이지: 활성 색상으로 클릭된 항목이 있는 왼쪽 상자.
동일한 제목에 있는 세 가지 목록 스타일입니다.
목차에 대해 자주 묻는 질문
이 목차에 Elementor Pro 가 필요합니까?
아니요. 목차 위젯은 마스터 애드온의 일부이며 Pro 없이 Elementor 에서 실행됩니다. 이 페이지의 모든 설정이 포함되어 있습니다. Elementor 자체 목차 위젯은 Elementor Pro 가 필요한 위젯입니다.
목차에서 제목을 제외하려면 어떻게 해야 하나요?
전체 레벨을 드롭하려면,H4 와 같은 표제 태그에서 해당 태그를 제거합니다. 표제 하나를 숨기려면 Elementor 에서 선택하고 고급 탭을 열고 추가합니다 jltma-toc-hide-heading CSS Classes 필드로. 페이지에 남아 있지만 목록에서 제외됩니다.
리더가 스크롤됨에 따라 활성 항목이 변경됩니까?
아니요. 스타일의 활성 색상,콘텐츠는 리더가 클릭한 항목을 스타일링하고 다른 항목을 클릭하면 이동합니다. 목록은 스크롤하는 동안 화면의 섹션을 추적하지 않습니다. Elementor Pro 의 목차 위젯이 그렇게 합니다.
목차를 끈적하게 만들 수 있나요?
예, 위젯의 스위치에서는 아니지만 사이드바 열에 넣은 다음 추가합니다 selector { position: sticky; top: 32px; } 고급,사용자 정의 CSS 에서. Elementor Pro 를 사용하면 모션 이펙트,대신 Sticky 를 사용할 수 있습니다. 고정 헤더가 그 위에 있으면 최상위 값을 올립니다.
페이지가 로드될 때 목차를 확장하거나 축소하려면 어떻게 해야 합니까?
콘텐츠 접기 가능 만들기 켜기. 접기 유지 초기에는 상자가 열리고 판독기가 접을 수 있습니다. 켜져 있으면 상자에는 제목만 표시되도록 로드됩니다. 장치별 설정이 없으므로 휴대폰의 닫힌 상자와 데스크톱의 열린 상자의 경우 두 개의 복사본을 사용하고 고급,반응형에서 각 복사본을 숨깁니다.
모든 페이지에 맨 위로 스크롤 화살표가 표시됩니까?
위로 스크롤이 켜진 이 위젯이 포함된 페이지에만 해당됩니다. 화살표는 오른쪽 하단에 있으며 방문자가 페이지 아래로 약 250px 를 스크롤한 후 표시됩니다.
목록 마커에 사용자 정의 아이콘을 사용할 수 있습니까?
위젯 패널에서가 아닙니다. List Style 은 Default,Bullets and Numbers 를 제공하며 Content 스타일 섹션은 글꼴과 색상을 설정합니다. 사용자 지정 마커 아이콘은 자신의 CSS 가 필요합니다. Elementor Pro 의 위젯에는 총알 용 아이콘 선택기가 있습니다.
왜 내 목차가 비어 있거나 잘못된 제목을 나열합니까?
위젯은.entry-content 내부의 제목을 먼저 찾은 다음.page-content,Elementor 콘텐츠 영역,그리고 제목 태그에서 선택한 태그에 대해서만 찾습니다. 빈 상자에는 “목차 생성을 시작하기 위해 헤더 추가”가 표시되며 일반적으로 제목이 해당 영역 밖에서 선택하거나 앉지 않은 태그를 사용한다는 의미입니다. 캐싱 플러그인이 첫 번째 스크롤 또는 클릭까지 JavaScript 를 지연하면 목록은 그때까지 비어 있으므로 지연에서 Master Addons 스크립트를 제외합니다.
점프 후의 표제는 고정 헤더로 덮는데, 어떻게 고치나요?
점프는 머리글 위에서 약 30px 정도 멈추는데,높은 고정 헤더 아래에서는 충분하지 않습니다. Appearance,Customize, Additional CSS: 에서 이것을 추가하세요 .elementor-heading-title[id] { padding-top: 90px; margin-top: -90px; } 그런 다음 각 제목이 90 px 더 낮게 떨어지고 페이지에서 동일하게 보입니다. 헤더 높이와 약간의 공간을 사용하십시오.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
![Elementor용 마스터 애드온 게시물/페이지 복제기 확장: 랜딩 페이지를 생성하는 WordPress 페이지 목록의 MA 복제기 행 링크 - [복제된 #128] 초안](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
