Divi 블로그 게시물 템플릿에 대한 동적 게시물 정보 표시줄을 만드는 방법

블로그 게시물 템플릿에 동적 콘텐츠를 추가하는 것은 게시물 제목, 메타데이터, 추천 이미지 등과 같은 것을 제공하는 데 필수적입니다. 일반적으로 이러한 동적 요소는 레이아웃 디자인 내에서 일반적인 정적 요소로 배치됩니다. 그러나 독자를 위해 이러한 동적 요소 중 일부를 최전선에 두는 것이 도움이 될 수 있습니다. 여기에서 동적 게시물 정보 표시줄이 유용합니다. 동적 게시물 정보 표시줄은 브라우저 상단에 고정된 상태로 유지되며(고정 헤더처럼) 유용한 동적 콘텐츠 및 기타 CTA를 포함합니다. 예를 들어, 이 막대를 사용하여 독자에게 현재 읽고 있는 게시물, 댓글을 남기는 링크 또는 관련 카테고리에 대한 링크를 상기시킬 수 있습니다.

이 자습서에서는 Divi 테마 빌더를 사용하여 동적 게시물 정보 표시줄을 만들고 블로그 게시물 템플릿에 추가하는 방법을 보여줍니다. 완료되면 이 막대는 사이트 전체의 모든 블로그 게시물에 대해 원활하게 작동합니다.

시작하자!

엿보기

다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다. 앵커 링크("댓글 남기기" 및 "구독하기")가 사용자를 게시물의 해당 영역으로 보내는 방법에 주목하세요.

무료로 레이아웃 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

섹션 레이아웃을 Divi 테마 빌더로 가져오려면 Divi 테마 빌더로 이동하십시오.

이식성 아이콘을 클릭합니다.

이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.

그런 다음 가져오기 버튼을 클릭합니다.

완료되면 섹션 템플릿이 Divi 테마 빌더에 나타납니다.

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

1부: 미리 만들어진 템플릿 가져오기

이 튜토리얼에서는 여섯 번째 테마 빌더 팩에서 미리 만들어진 몇 가지 템플릿을 사용할 것입니다. 게시물 정보 표시줄을 추가할 작업 전역 헤더를 제공하는 기본 웹사이트 템플릿을 가져올 것입니다. 그리고 블로그 게시물 템플릿을 가져와서 라이브 게시물에서 결과를 테스트할 것입니다.

중요: 라이브 사이트를 엉망으로 만들지 않도록 테스트 사이트에서 이러한 템플릿을 가져오는 것이 가장 좋습니다.

기본 웹 사이트 템플릿 가져오기

먼저 Divi용 여섯 번째 무료 테마 빌더 팩을 다운로드해야 합니다. 그런 다음 파일의 압축을 풉니다.

WordPress 대시보드에서 Divi > 테마 빌더로 이동합니다. 그런 다음 오른쪽 상단의 이식성 아이콘을 클릭합니다. 이식성 팝업에서 가져오기 탭을 선택합니다. 그런 다음 다운로드한 폴더에서 기본 웹 사이트 템플릿 json 파일을 선택하고 가져오기 버튼을 클릭합니다. 그러면 전체 머리글과 바닥글이 있는 새 기본 웹사이트 템플릿을 가져옵니다.

게시물 템플릿 가져오기

이 과정을 반복하여 다운로드한 동일한 폴더에서 게시물 템플릿을 가져옵니다. 이식성 팝업을 열고 포스트 템플릿 json 파일을 선택하고 가져오기 버튼을 클릭합니다. 이렇게 하면 기본 머리글 바닥글과 함께 사이트 전체의 모든 게시물에 할당된 게시물 템플릿이 제공됩니다.

게시물 템플릿 헤더에서 전역 비활성화

게시물 템플릿의 헤더에 동적 게시물 정보 표시줄을 추가할 것입니다. 그러나 우리는 게시물 템플릿에만 게시물 정보 표시줄을 원하기 때문에 표시줄이 사이트 전체의 모든 헤더에 추가되지 않도록 헤더에서 전역을 비활성화해야 합니다. 전역 헤더에서 전역을 비활성화하려면 전역 헤더에서 설정 메뉴를 열고 "전역 비활성화"를 선택합니다.

이제 헤더는 "Custom Header"라는 레이블이 있는 회색이어야 합니다. 준비가 되면 편집 아이콘을 클릭하여 헤더 레이아웃 템플릿을 편집합니다.

동적 게시물 정보 표시줄 만들기

섹션 및 행 추가

헤더 레이아웃 편집기 내에서 헤더가 있는 현재 섹션 아래에 새 일반 섹션을 만듭니다.

그런 다음 섹션에 1/4 1/4 열 행을 추가합니다.

섹션 설정

섹션 설정을 열고 다음을 업데이트합니다.

• 배경색: #eceff
• 패딩: 상단 10px, 하단 10px

행 설정

섹션 설정이 추가된 후 행에 대한 설정을 열고 다음을 업데이트합니다.

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

고급 탭에서 다음 사용자 지정 CSS를 기본 요소에 추가합니다.

display:flex !important;
flex-wrap: nowrap;
align-items: center;

이렇게 하면 모바일에서 아래로 열이 쌓입니다.

게시물 제목 동적 콘텐츠 추가

막대에 추가할 동적 콘텐츠의 첫 번째 부분은 게시물 제목입니다. 이것은 독자가 현재 읽고 있는 게시물 제목에 대한 유용한 알림 역할을 합니다.

텍스트 모듈 추가

게시물 제목을 동적 콘텐츠로 만들려면 맨 왼쪽 열 안에 새 텍스트 모듈을 만듭니다.

게시물/보관 제목을 동적 콘텐츠로 추가

그런 다음 텍스트 설정의 본문 영역 위에 마우스를 올려 놓은 상태에서 "동적 콘텐츠 사용" 아이콘을 클릭합니다. 목록에서 "게시물/아카이브 제목"을 선택합니다.

게시물/보관 제목에 대한 동적 콘텐츠 설정을 열고 입력 전 상자에 다음을 추가합니다.

You're Reading: 

그런 다음 변경 사항을 저장합니다.

디자인 설정

디자인 탭에서 다음과 같이 동적 제목의 스타일을 사용자 지정합니다.

• 텍스트 글꼴: Ubuntu
• 텍스트 글꼴 두께: 중간
• 텍스트 텍스트 색상: #121212
• 텍스트 텍스트 크기: 14px(데스크톱), 12px(태블릿), 11px(휴대폰)

동적 게시물 카테고리 정보 추가

게시물 카테고리 정보를 생성하려면 게시물 제목을 포함하는 텍스트 모듈을 복제하십시오.

그런 다음 복제 텍스트 모듈의 설정을 열고 게시물 카테고리를 동적 콘텐츠로 본문에 추가합니다.

게시물 카테고리 동적 콘텐츠 설정을 열고 다음을 업데이트합니다.

• 이전: 에
• 카테고리 구분 기호: &

링크 색상 업데이트

디자인 탭에서 다음과 같이 링크 색상을 업데이트합니다.

• 링크 텍스트 색상: #4160fd

동적 댓글 수 정보 추가

게시물 정보 표시줄에 추가할 또 다른 유용한 정보는 사용자가 원하는 경우 자신의 댓글에 참여하도록 상기시키는 댓글 수입니다. 댓글 수에는 게시물 댓글에 대한 링크도 포함됩니다.

동적 댓글 수 정보를 생성하려면 카테고리와 함께 텍스트 모듈을 복제하고 중간 열로 드래그합니다.

그런 다음 게시물 댓글 수를 텍스트 본문에 동적 콘텐츠로 추가합니다.

게시물 댓글 수 설정을 열고 다음을 추가합니다.

• 이후: 댓글

"댓글 남기기" 클릭 유도문안 추가

댓글 수 외에도 댓글을 남길 수 있는 간단한 클릭 유도문안을 추가할 예정입니다. 링크는 게시물 하단의 댓글 섹션으로 스크롤되는 앵커 링크가 됩니다.

CTA를 생성하려면 댓글 수를 포함하는 2열의 텍스트 모듈을 복제합니다.

그런 다음 복제본에 대한 텍스트 설정을 열고 본문에 다음 링크 html을 추가합니다.

<a href="#respond">Leave a Comment</a>

구독 버튼 추가

게시물 정보 표시줄에 마지막으로 추가할 것은 구독 버튼입니다. 이것은 또한 사용자를 이메일 수신 동의 양식이 포함된 게시물 템플릿 섹션으로 연결하는 앵커 링크가 됩니다.

이렇게 하려면 맨 오른쪽 열에 버튼 모듈을 추가합니다.

디자인 탭에서 다음과 같이 버튼 스타일을 업데이트합니다.

• 버튼 텍스트 크기: 14px(데스크톱), 12px(태블릿), 11px(휴대폰)
• 버튼 텍스트 색상: #ffffff
• 버튼 배경 그라데이션 왼쪽 색상: #7e5ce6
• 버튼 배경 그라데이션 오른쪽 색상: #25b8ee
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 100px
• 버튼 문자 간격 : 2px
• 버튼 글꼴: 우분투
• 버튼 글꼴 두께: 굵게
• 버튼 글꼴 스타일: TT
• 패딩(데스크톱): 위쪽 10px, 아래쪽 10px, 왼쪽 20px, 오른쪽 20px
• 패딩(태블릿): 위쪽 6px, 아래쪽 6px, 왼쪽 14px, 오른쪽 14px

버튼에 앵커 링크를 추가하려면 콘텐츠 탭으로 이동하여 다음 버튼 링크 URL을 추가하세요.

• 버튼 링크 URL: #subscribe

이 링크는 게시물 템플릿 본문의 이메일 수신 동의 양식이 있는 섹션에 해당 CSS ID를 추가할 때까지 작동하지 않습니다.

모바일에서 열 1 비활성화

고정 바를 위한 모바일 공간이 너무 많습니다. 그렇기 때문에 어떤 정보를 포함할지 결정해야 합니다. 이 예에서는 모바일에서 CTA가 있는 두 개의 열을 그대로 두고 게시물 제목과 카테고리가 있는 열을 비활성화할 것입니다.

이렇게 하려면 열 1에 대한 설정을 엽니다. 고급 탭에서 휴대폰 및 태블릿의 가시성을 비활성화합니다.

섹션에 고정 위치 및 높은 Z 인덱스 제공

디자인이 완료되면 이제 섹션에 고정 위치를 지정할 수 있습니다. 아이디어는 처음에 머리글이 있는 섹션 뒤에 막대를 숨기는 것입니다. 그런 다음 사용자가 스크롤하면 고정된 게시물 정보 표시줄이 헤더 아래에서 표시됩니다.

섹션 설정을 열고 다음을 업데이트합니다.

• 위치: 고정
• Z 인덱스: 998

z 인덱스는 998입니다. 고정 막대가 게시물의 나머지 콘텐츠 위에 있기를 원하기 때문입니다.

섹션 헤더 Z 인덱스 업데이트

게시물 정보 표시줄 섹션은 z 인덱스가 더 높기 때문에 헤더가 있는 섹션 위에 표시됩니다. 이 문제를 해결하려면 헤더가 있는 섹션에 대한 섹션 설정을 열고 다음을 추가하세요.

• Z 인덱스: 999(막대가 있는 섹션보다 하나 더 많음)

레이아웃 편집기에서 변경 사항을 저장합니다.

본문 템플릿의 이메일 수신 동의 행에 CSS ID 추가

막대에 추가하는 구독 버튼 CTA에는 여전히 게시물 템플릿에 앵커 또는 "점프"할 위치가 필요합니다. CTA는 "구독"하기 위한 것이므로 이메일 동의 양식으로 이동하려면 CTA가 필요합니다.

이렇게 하려면 테마 빌더에서 게시물 템플릿의 "사용자 정의 본문" 영역을 엽니다.

레이아웃 하단에서 이메일 수신 동의 양식이 있는 행을 찾아 다음 CSS ID를 추가합니다.

• CSS ID: 구독

이렇게 하면 구독 버튼 앵커 링크가 템플릿의 이 특정 영역으로 스크롤할 수 있습니다.

완료되면 레이아웃과 테마 빌더에 대한 변경 사항을 저장합니다.

최종 결과

최종 결과를 보려면 사이트에서 라이브 게시물을 열고 보기만 하면 됩니다. 앵커 링크("댓글 남기기" 및 "구독하기")가 사용자를 게시물의 해당 영역으로 보내는 방법에 주목하세요.

마지막 생각들

이 동적 게시물 정보 표시줄이 Divi 블로그 게시물의 UX를 높이는 데 유용하기를 바랍니다. 다른 정보도 자유롭게 실험해 보십시오. 블로그 모듈을 사용하여 관련 게시물을 표시할 수 있는 방법이 있다고 확신합니다.

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

건배!