Elementor의 블로그 게시물에 목차를 추가하는 방법

긴 형식의 블로그 컨텐츠를 만드는 것은 SEO에게는 좋지만 게시물을 느끼게 할 수도 있습니다. 당신이 어디에 있는지 또는 남은 양을 모르고 대규모 기사를 스크롤하면 독자에게는 실망 스러울 수 있습니다. 그곳에서 목차 (TOC)가 편리한 곳입니다.

목차 (TOC)는지도처럼 행동하여 독자가 필요한 것을 빨리 찾아 내고 섹션으로 점프하며 콘텐츠 구조에 대한 더 나은 감각을 얻도록 도와줍니다. 또한 검색 결과에서 풍부한 스 니펫을 활성화하여 SEO를 향상시킬 수 있습니다.

Elementor를 사용하여 사이트 및 블로그 게시물을 설계하는 경우 특히 PowerPack Addons 플러그인을 사용할 때는 목차를 추가하는 것이 매우 간단합니다.

이 안내서에서는 HTML 코드 또는 CSS를 추가하지 않고 요소의 블로그 게시물에 목차를 추가하는 방법을 보여줍니다.

목차를 추가 해야하는 이유

방법으로 뛰어 들기 전에 TOC가 블로그 게시물에 스마트 한 이유에 대해 빠르게 이야기합시다.

• 사용자 경험을 향상시킵니다 : 독자는 즉시 관심있는 섹션으로 뛰어들 수 있습니다.
• SEO 부스트 : 검색 엔진은 종종 TOC 링크를 SiteLinks로 표시하여 클릭률을 향상시킬 수 있습니다.
• 더 긴 참여를 장려합니다.
• 바운스 속도 감소 : 방문자는 쉽게 훑어 볼 수있을 때 긴 내용에 압도 당하지 않습니다.

이제 Elementor에 완벽하고 세련된 TOC를 추가 할 수있는 방법을 알려 드리겠습니다.

Elementor의 블로그 게시물에 목차를 추가하는 방법

1 단계 : Elementor의 PowerPack Addons를 설치하십시오

진행하기 전에 웹 사이트에 요소를위한 PowerPack 애드온을 설치하고 활성화해야합니다. 자세한 내용은 PowerPack Addons Pro를 설치하고 활성화하는 방법에 대한 가이드를 확인하십시오.

2 단계 : 목차 위젯을 활성화합니다

플러그인이 활성화되면 TOC 위젯이 실제로 활성화되어 있는지 확인하는 것이 좋습니다.

이렇게하려면 WordPress 대시 보드의 Elementor >> PowerPack >> 요소 로 이동하십시오. 거기에서 "목차"위젯을 찾아 옆의 전환이 켜져 있는지 확인하십시오 (파란색).

이제 요소에서 사용할 준비가되었습니다.

3 단계 : 요소에서 단일 게시물 템플릿을 만듭니다

모든 블로그 게시물에서 목차를 일관되게 적용하려면 단일 게시물 템플릿 내에 추가하는 것이 가장 좋습니다.

방법은 다음과 같습니다.

• 템플릿으로 이동 >> 새 추가.
• 드롭 다운 메뉴에서 단일 게시물을 선택하십시오.
• 템플릿에 " 블로그 레이아웃 "또는 " Post Template "와 같은 이름을 제공 한 다음 " 템플릿 작성 "을 클릭하십시오.

Elementor는 이제 빈 캔버스에서 시작하거나 사전 제작 된 레이아웃을 사용하고 싶은지 묻습니다.

4 단계 : 사전 디자인 된 포스트 템플릿 사용 (선택 사항)

레이아웃을 처음부터 구축하지 않으려면 Elementor를 사용하면 기성품 템플릿을 쉽게 삽입 할 수 있습니다. 사전 디자인 된 옵션 중 하나를 선택하십시오. 일반적으로 게시물 제목, 주요 이미지, 저자 상자 및 게시물 컨텐츠와 같은 필수 요소가 포함됩니다.

나중에 블로그의 디자인에 더 잘 맞도록 나중에 수정할 수 있습니다.

5 단계 : 템플릿에 목차 위젯을 추가합니다.

다음으로 목차 위젯을 추가해야합니다.

요소 패널에서 "목차"를 검색하십시오. 위젯이 나타나면 (코너에서 PP 아이콘을 찾으십시오) 레이아웃에 드래그하여 떨어 뜨립니다.

목차 (TOC)를 배치 할 수있는 일반적인 장소는 게시물 제목 또는 주요 이미지 바로 아래에 있지만 콘텐츠에 적합한 곳에 위치 할 수 있습니다.

위젯을 추가하면 게시물에서 모든 제목 (예 : H2 및 H3S)을 자동으로 감지하고 표시합니다.

6 단계 : 컨텐츠 설정을 사용자 정의합니다

페이지에 위젯이 있으면 게시물 컨텐츠의 모든 제목 목록이 표시됩니다. 이제 목차를 개인화합시다.

컨텐츠 탭에는 여러 설정이 있습니다.

목차 (TOC)의 제목을 "빠른 탐색"또는 "이 페이지에서"와 같은 것으로 변경할 수 있습니다. SEO 및 접근성에 대해 생각하고 있다면 제목의 HTML 태그를 조정하여 계층 구조에 적합한 방법에 따라 H2 또는 H3으로 설정할 수도 있습니다.

그런 다음 특정 제목 수준을 포함하거나 제외 할 설정이 있습니다. 예를 들어, H2와 H3S 만 표시하고 H4S 이하를 건너 뛰어야합니다. 또한 목록 스타일을 선택하거나 구조화 된 단계별 느낌을 받거나 총알을 더 최소한으로 보이게 할 수 있습니다.

7 단계 : 추가 기능 탐색 (선택 사항이지만 유용함)

Powerpack Contents 위젯에는 유용성과 디자인을 모두 향상시키는 기능이 포함되어 있습니다.

모바일 사용자에게 적합하거나 레이아웃을 깨끗하게 유지하려는 경우 목차 (TOC)가 접을 수있게 만들 수 있습니다. 확장/붕괴를위한 아이콘을 추가하고 위젯이 모바일, 태블릿, 데스크탑 또는 모든 장치에서 붕괴되어야하는시기를 지정하십시오.

계층 적보기 옵션도 있습니다. 이것은 부모 제목 아래에서 하위 머리를 들여 쓰기함으로써 H2S, H3 및 H4S의 관계를 보여줍니다. 자세한 게시물이있는 경우 Contents (TOC)를 작성하면 더 정리하고 스캔하기가 더 쉽습니다.

더 긴 게시물의 경우 스크롤에서 스티커 TOC를 활성화하는 것이 매우 도움이됩니다. 사용자가 스크롤하여 언제든지 섹션 사이를 점프 할 수 있도록 TOC가 보이게 유지합니다. 위젯 바로 내에서 스크롤에 상단 버튼을 추가하여 사용자가 게시물 시작 부분으로 빠르게 돌아갈 수 있도록 도와줍니다.

사이트에 끈적 끈적한 헤더가있는 경우 사용자가 TOC 링크를 클릭 할 때 제목이 숨겨져 있지 않도록 스크롤 오프 스크롤 조정을 고려하십시오.

8 단계 : 사이트와 일치하도록 TOC를 스타일링하십시오

기능이 설정되었으므로 위젯이 멋지게 보이도록하겠습니다. 스타일 탭에는 전체 사용자 정의 옵션이 있습니다.

• 박스 스타일 : TOC의 배경색, 테두리 유형 및 테두리 반경을 조정하고 상자 그림자를 추가하여 눈에 띄게 만들 수도 있습니다. 깨끗한 레이아웃을 원한다면 미묘한 테두리와 가벼운 배경이 아름답게 작동합니다.
• 헤더 스타일링 : TOC 제목을 사용자 정의하고 싶으십니까? 텍스트 정렬을 설정하고 패딩을 변경하며 색상, 타이포그래피 및 아이콘을 조정할 수 있습니다. 분리기 라인을 추가하고 너비와 색상을 사용자 정의 할 수도 있습니다.
• 목록 스타일 : 섹션 링크 실제 TOC 항목을 사용자 정의하는 곳입니다. 패딩을 조정하고, 텍스트 및 제목 타이포그래피를 변경하고, 소제목을위한 압입을 선택하고, 마커 스타일 (예 : 총알 색상 및 크기)을 개인화하십시오.

이러한 스타일링 옵션을 사용하면 TOC가 방금 떨어진 것 대신 웹 사이트의 자연스러운 확장처럼 느껴질 수 있습니다.

9 단계 : 조건을 게시하고 설정합니다

모든 것이 원하는 방식으로 보이면 계속해서 출판을 치십시오. 그런 다음 Elementor는이 템플릿을 어디에 표시할지 묻습니다.

'포함 >> 모든 게시물' 조건을 선택하여 사이트의 모든 블로그 게시물에 템플릿 (및 내부의 TOC)이 적용되도록하십시오.

Save & Clos E를 클릭하면 완료되었습니다!

Powerpack 목차 위젯의 주요 하이라이트

PowerPack Contents 위젯에는 읽기 경험을 향상시킬뿐만 아니라 목차 테이블이 나타나고 웹 사이트에서 기능을 완전히 제어 할 수있는 유용한 기능이 있습니다.

테이블 제목을 쉽게 사용자 정의합니다

목차의 제목을 개인화하여 게시물의 톤이나 목적에 더 잘 맞도록 할 수 있습니다. PowerPack Toc 위젯을 사용하면 "빠른 탐색", "내용"또는 "점프"라는 이름을 지정하려면 몇 번의 클릭만으로 업데이트 할 수 있습니다.

제목을 포함하거나 제외합니다

이 위젯의 ​​눈에 띄는 기능 중 하나는 제목 수준을 관리 할 때 제공하는 유연성입니다. TOC에 어떤 제목 태그 (H1, H2, H3 등)를 선택할 수 있습니다. 더 좋은 점은 내장 CSS 선택기 기능을 사용하여 테이블에서 특정 섹션 또는 제목을 구체적으로 포함하거나 제외하여 나타나는 내용을 완전히 제어 할 수 있습니다.

선호하는 목록 스타일을 선택하십시오

컨텐츠를 깨끗하고 미니멀리스트 목록으로 제시하거나보다 구조적이고 번호가 매겨진 형식으로 가고 싶습니까? 옵션이 있습니다. 위젯을 사용하면 디자인 선호도에 따라 목록 스타일을 '없음', '총알'또는 '숫자'로 설정할 수 있습니다.

긴 제목? 괜찮아요

제목이 긴 경향이 있다면 걱정하지 마십시오. 단어 랩 옵션을 활성화하여 텍스트가 깔끔하게 끊어지고 목차 (TOC)가 깨끗하고 정렬 상태를 유지할 수 있습니다.

장치 유형에 따라 TOC를 붕괴시킵니다

장치 유형에 따라 모바일, 태블릿 또는 데스크탑에 따라 기본적으로 목차를 붕괴하도록 선택할 수 있습니다. 이것은 작은 화면에서 물건을 단정하게 유지하는 데 도움이됩니다. 또한 계층 적 뷰를 활성화하여 중첩 된 제목 (예 : H2S의 H3S)을 명확하게 들여 쓰기 및 구성 할 수 있습니다.

긴 게시물을위한 끈적 끈적한 목차

긴 형식의 컨텐츠의 경우 사용자와 스크롤하는 목차 (TOC)가있는 것은 게임 체인저입니다. 스티커 TOC 기능을 사용하면 사이트 방문자가 페이지 아래로 스크롤함에 따라 내용 목록이 표시 될 수 있습니다. 이를 통해 상단으로 다시 스크롤하지 않고도 언제든지 섹션을 쉽게 뛰어 넘을 수 있습니다.

블로그 게시물에서 목차 사용을위한 모범 사례

TOC를 최대한 활용하려면이 팁을 명심하십시오.

• 적절한 제목 구조 사용 : 주요 섹션의 경우 H2S로 시작하고 필요에 따라 H3 및 H4S로 시작하십시오. 독자와 목차 (TOC) 자체를 혼동 할 수 있으므로 H2에서 H4로 이동하는 것과 같은 수준을 건너 뛰지 마십시오.
• 제목을 명확하고 간결하게 유지하십시오. 독자는 이것을 사용하여 게시물을 탐색 할 것입니다. 목차 (TOC)를 짧고 접을 수 있도록 유지하십시오. 특히 모바일 사용자의 경우 붕괴를 활성화하면 레이아웃을 깨끗하게 유지할 수 있습니다.
• 모든 장치에서 미리보기 : 목차 (TOC)가 올바르게 나타나고 데스크탑, 태블릿 및 휴대 전화에서 올바르게 기능하는지 확인하십시오.

자주 묻는 질문

퀴즈. 모바일 장치에서 목차 (TOC)를 숨길 수 있습니까?

Ans. 예, "붕괴"설정을 사용하여 모바일 또는 태블릿에서 기본적으로 TOC를 최소화 할 수 있습니다.

퀴즈. 내 게시물에 새 섹션을 추가하면 자동 업데이트됩니까?

Ans. 예! 위젯은 콘텐츠에서 제목 태그를 동적으로 가져 오므로 자동으로 업데이트됩니다.

퀴즈. 이 위젯 외부 블로그 게시물을 사용할 수 있습니까?

Ans. 전적으로. 픽업 할 제목 태그가있는 한 모든 요소 레이아웃 페이지, 사용자 정의 게시물 유형 또는 제품 설명에 추가 할 수 있습니다.

마무리!

목차는 단순한 디자인 기능이 아닙니다. 독자의 경험을 향상시키고 SEO를 높이고 콘텐츠를 더 매력적으로 만들 수있는 유용성 업그레이드입니다.

Elementor 및 PowerPack Addons를 사용하면 Contents (TOC)를 추가하고 사용자 정의하는 것은 놀랍게도 쉽습니다. 한 줄의 코드를 작성하지 않고도 모양과 행동 방식을 완전히 제어 할 수 있습니다.

Elementor의 Powerpack 애드온으로 더 많은 일을 할 수 있습니다. Elementor 페이지를 사용자 정의하는 데 사용할 수있는 70 개 이상의 창의적인 위젯이 있습니다. Elementor의 Powerpack Addon에 대해 자세히 알아 보려면 여기를 확인하십시오.