Divi 레이아웃 블록으로 블로그 게시물의 클릭 가능한 목차를 만드는 방법

블로그 게시물에 클릭 가능한 목차를 추가하는 것은 사용자 경험을 개선하는 좋은 방법입니다. 많은 경우 블로그 게시물 목차는 앵커 링크를 사용하여 사용자가 콘텐츠를 탐색하는 데 도움이 됩니다. 그리고 목차(앵커 링크 포함)는 기본 HTML을 사용하여 구축하는 것이 정말 간단합니다. 그러나 사용자 지정 디자인/CSS를 추가하여 사용자 지정하는 것은 어려울 수 있습니다. 여기에서 Divi 레이아웃 블록이 유용합니다.

이 자습서에서는 앵커 링크를 사용하여 사용자를 게시물 전체의 지정된 제목으로 안내하는 단일 블로그 게시물(구텐부르크)에 대해 클릭 가능한 목차를 디자인할 것입니다. 이를 위해 Divi 레이아웃 블록을 사용하여 원하는 대로 사용할 수 있는 Divi 빌더의 모든 강력한 디자인 도구로 목차를 만들 것입니다.

시작하자!

엿보기

재사용 가능한 목차 레이아웃 블록을 무료로 다운로드하십시오

이 튜토리얼의 목차 레이아웃 블록을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

다운로드를 사용하여 사이트에서 이 레이아웃 블록을 가져오는 방법

이러한 재사용 가능한 Divi 이미지 레이아웃 블록을 사이트로 가져오려면 먼저 다운로드 파일의 압축을 풀어야 합니다. 거기에서 사이트로 가져와야 하는 세 개의 JSON 파일을 찾을 수 있습니다.

기본 편집기(Gutenberg)를 사용하여 게시물 편집으로 이동합니다. 페이지 오른쪽 상단의 "추가 도구 및 옵션" 메뉴를 열고 "모든 재사용 가능한 블록 관리"를 선택합니다.

그런 다음 JSON에서 가져오기 버튼을 클릭합니다. 다운로드 폴더에서 JSON 파일 중 하나를 선택하고 가져오기 버튼을 클릭합니다.

완료되면 Gutenberg 내에서 새 블록을 추가하십시오. 재사용 가능 옵션 토글 아래에서 가져온 재사용 가능 레이아웃 블록을 찾을 수 있습니다. "목차"라는 이름을 클릭하여 게시물에 추가하기만 하면 됩니다.

그게 다야!

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
2. WordPress에서 새 게시물을 만들고 기본 편집기(Gutenberg)를 사용하여 일부 모의 콘텐츠(제목, 제목, 단락, 추천 이미지 등)를 추가합니다. 각각 아래에 내용이 있는 제목 블록을 3개 이상 만들어야 합니다. 목차에 앵커 링크를 추가할 것이므로 게시물 아래로 연결하려면 세 개의 제목이 필요합니다.

그 후에 시작할 준비가 되었습니다.

Divi 레이아웃 블록을 사용하여 블로그 게시물에 대한 클릭 가능한 목차 만들기

Divi 레이아웃 블록 추가

먼저 블로그 게시물 콘텐츠 상단에 새로운 Divi 레이아웃 블록을 추가합니다.

그런 다음 새 레이아웃 만들기 버튼을 클릭합니다. 그러면 레이아웃 블록의 Divi 빌더인 레이아웃 편집기가 배포됩니다.

행 추가

레이아웃 편집기에서 1열 행을 추가하여 디자인을 시작합니다.

상단 구분선 추가

열 내부에 구분선 모듈을 추가합니다. 이것은 목차를 구성하는 데 사용할 두 개의 구분선 중 하나입니다.

디바이더 설정

다음으로 구분선 설정을 다음과 같이 업데이트합니다.

• 선 색상: #eeeeee
• 라인 위치: 수직 중앙
• 디바이더 무게: 3px
• 폭: 25%
• 패딩: 상단 30px, 하단 30px

하단 구분선 추가

두 번째 구분선을 만들려면 이전 구분선을 복제합니다.

Blurb 모듈로 목차 표제 만들기

구분선이 배치되면 목차에 대한 머리글을 만들어 보겠습니다.

두 디바이더 사이에 새로운 블러브 모듈을 추가합니다.

광고 콘텐츠

광고 설정을 열고 다음과 같이 콘텐츠를 업데이트합니다.

• 제목: "목차"
• 아이콘 사용: 예
• 아이콘: 스크린샷 참조

블러브 디자인 설정

디자인 탭에서 다음을 업데이트합니다.

• 아이콘 색상: #eeeeee
• 이미지/아이콘 배치: 왼쪽
• 아이콘 글꼴 크기 사용: 예
• 아이콘 글꼴 크기: 100px
• 제목 제목 수준: H2
• 콘텐츠 너비: 100%
• 높이: 38px

광고 문구의 높이는 아이콘의 높이보다 작습니다. 이렇게 하면 다음에 추가할 광고 항목 옆에 아이콘이 아래쪽으로 확장됩니다.

제목 광고가 준비되면 목차를 구성하는 클릭 가능한 항목/광고를 추가할 준비가 되었습니다. 이를 위해 우리는 또한 블러브 모듈을 사용할 것입니다.

항목 #1 광고문안 추가

제목 광고 문구 아래에 새 광고 문구 모듈을 추가합니다.

광고 콘텐츠

광고 설정을 열고 제목만 보이도록 기본 본문 내용을 제거합니다. 제목은 게시물 아래에 링크하려는 섹션/제목에 해당하는 텍스트 블록을 추가하는 곳입니다.

그런 다음 바탕 화면의 오른쪽 화살표 아이콘으로 콘텐츠를 업데이트합니다.

아이콘에 대한 호버 옵션을 배포하고 호버 시 아이콘을 아래쪽 화살표로 변경합니다. 이것은 링크가 게시물 아래의 위치로 스크롤된다는 것을 강조하는 멋진 마이크로 인터랙션이 될 것입니다.

광고 디자인

이제 우리는 우리가 원하는 대로 blurb 모듈을 디자인할 수 있습니다. 이 예에서는 다음과 같이 광고 문구 설정을 업데이트해 보겠습니다.

• 아이콘 색상: #b856c7
• 원 아이콘: 예
• 원 색상: #ffffff
• 원 테두리 표시: 예
• 원 테두리 색상: #b856c7
• 이미지/아이콘 배치: 왼쪽
• 아이콘 글꼴 크기 사용: 예
• 아이콘 글꼴 크기: 16px
• 텍스트 텍스트 크기: 16px
• 제목 줄 높이: 2em
• 콘텐츠 너비: 100%
• 여백: 118px 왼쪽
• 패딩: 10px 상단
• 패딩(마우스오버): 10px 왼쪽

더 많은 항목에 대한 복제 광고

이제 첫 번째 광고 항목이 완료되었으므로 게시물에 포함하려는 클릭 가능한 링크 수에 따라 필요한 만큼 복제할 수 있습니다. 지금은 목차에 대해 총 3개의 항목을 만들기 위해 두 번 복제해 보겠습니다.

앵커 링크 URL 추가

지금은 광고 항목을 클릭할 수 없으므로 필요한 앵커 링크 URL을 각각에 추가해야 합니다. 앵커 링크 URL은 항상 해시태그(#)로 시작하고 그 뒤에 포함하려는 ID가 옵니다.

앵커 링크 #1

단순화를 위해 목록의 첫 번째 광고 문구에 앵커 링크 "#one"을 추가합니다. 이렇게 하려면 목록(제목 광고가 아님)에서 첫 번째 광고 모듈에 대한 설정을 열고 다음을 업데이트합니다.

• 모듈 링크 URL: #one

앵커 링크 #2

그런 다음 두 번째 광고 항목의 설정을 열고 다음 링크를 추가합니다.

• 모듈 링크 URL: #two

앵커 링크 #3

마지막으로 세 번째 광고 항목에 다음 링크를 추가합니다.

• 모듈 링크 URL: #three

간격 좁히기

행 설정

현재 행의 요소 사이에 공간이 너무 많습니다. 이 문제를 해결하려면 행 설정을 열고 여백 너비와 패딩을 다음과 같이 업데이트합니다.

• 거터 폭: 1
• 폭: 100%
• 패딩: 0px 상단, 0px 하단

섹션 설정

섹션의 패딩도 제거합시다. 섹션 설정을 열고 다음을 업데이트합니다.

• 패딩: 0px 상단, 0px 하단

레이아웃 저장

목차 디자인이 끝났습니다. 레이아웃 편집기를 저장하고 종료했는지 확인하십시오.

이제 기본 블록 편집기 안에 새 목차가 표시되어야 합니다.

게시물 제목에 HTML 앵커 추가

목차 항목을 구성하는 각 광고 문구에 앵커 링크 URL을 추가했습니다. 이제 해당 CSS ID(또는 HTML 앵커)를 게시물 아래의 표제 블록에 추가해야 합니다.

HTML 앵커 1

링크/점프하려는 첫 번째 헤더가 포함된 블록을 클릭합니다. 그런 다음 해당 블록에 대한 설정을 엽니다. 고급 옵션 토글에서 HTML 앵커 입력 상자에 "하나"를 추가합니다.

HTML 앵커: 하나

첫 번째 광고 항목에는 이 항목으로 연결되는 URL "#one"이 있습니다. 그러나 이 HTML 앵커에 해시태그를 추가하지 마십시오. 필요하지 않습니다.)

HTML 앵커 2

다음으로 두 번째 제목 블록을 선택하고 다음을 업데이트합니다.

• HTML 앵커: 2

HTML 앵커 3

마지막으로 세 번째 제목 블록을 선택하고 다음과 같이 HTML 앵커를 추가합니다.

• HTML 앵커: 3

최종 결과

라이브 포스트에서 최종 결과를 보자.

앵커 링크가 작동하는 방식은 다음과 같습니다. 아이콘의 호버 효과와 링크가 페이지 아래의 해당 앵커로 부드럽게 스크롤되는 방식을 확인하십시오.

재사용 가능한 레이아웃 블록으로 목차 추가하기

이 레이아웃 블록을 향후 포스트의 템플릿으로 계속 사용하려면 레이아웃 블록을 재사용 가능한 레이아웃 블록으로 저장하는 것이 좋습니다. 이렇게 하면 기본 제공 블록 목록에서 "목차" 블록을 쉽게 추가할 수 있습니다.

이렇게 하려면 목차가 포함된 Divi 레이아웃 블록을 클릭하고 추가 설정 메뉴를 엽니다. 그런 다음 "재사용 가능한 레이아웃 블록에 추가"를 선택합니다.

재사용 가능한 블록의 이름("목차")을 입력하고 저장을 클릭합니다.

이제 게시물에 새 블록을 추가할 때 재사용 가능한 블록 목록에서 블록을 사용할 수 있습니다.

이제 레이아웃 블록은 게시물의 목차를 작성하기 위한 편리한 템플릿 역할을 합니다. 특정 게시물에 대해 사용자 정의하기 전에 블록을 일반 레이아웃 블록으로 변환하는 것을 잊지 마십시오. 재사용 가능한 레이아웃 블록을 변경하고 싶지 않습니다.

이렇게 하려면 재사용 가능한 레이아웃 블록의 추가 설정 메뉴를 열고 "일반 블록으로 변환"을 선택합니다.

마지막 생각들

이 목차 Divi 레이아웃 블록이 필요할 정도로 긴 게시물에 도움이 되기를 바랍니다. 이 작업을 동적으로 수행하는 데 관심이 있는 경우(예: 게시물 제목을 기반으로 자동으로 목차를 작성하는 경우), 이러한 종류의 작업을 수행하는 Table of Contents Plus와 같은 플러그인이 있습니다. 이 게시물은 Divi로 디자인하는 것을 좋아하고 게시물별로 목차를 작성하는 것을 꺼려하지 않는 사람들을 위한 것입니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!