Divi의 포스트 슬라이더 모듈로 블로그 포스트 티커를 만드는 방법

블로그 게시물 티커는 웹사이트에서 블로그 게시물(최근, 관련 등)을 동적으로 표시하는 편리한 도구입니다. WordPress 블로그 게시물의 뉴스 티커로 생각할 수 있습니다.

오늘은 Divi의 포스트 슬라이더 모듈로 블로그 포스트 티커를 만드는 방법을 알려드리겠습니다. 뉴스 티커와 유사하게, 우리가 만들 블로그 포스트 티커는 Divi의 포스트 슬라이더 모듈의 단순화되고 컴팩트한 버전이 될 것입니다. 그리고 게시물 슬라이더 모듈에는 다양한 방식으로 게시물을 보여주는 기능이 내장되어 있어 원하는 곳 어디에서나 사용할 수 있습니다. 홈페이지에서 게시물 티커로 사용하여 최근 게시물을 표시하거나 블로그 게시물 템플릿의 헤더에 사용하여 현재 카테고리와 관련된 게시물을 표시할 수 있습니다.

Divi에서 블로그 게시물 티커를 생성하는 방법을 설명한 후 Divi Builder에서 블로그 게시물 템플릿의 헤더에 추가할 수 있도록 Divi 라이브러리에 저장하는 방법도 보여줍니다.

시작하자!

엿보기

다음은 이 튜토리얼에서 구축할 블로그 게시물 티커를 간략히 살펴보겠습니다.

다음은 게시물 시세 표시기가 전화 디스플레이에 멋지게 쌓이는 방법입니다.

블로그 게시물 템플릿의 헤더에도 관련 게시물을 표시하기 위해 게시물 티커를 추가하는 방법을 보여줍니다.

무료로 레이아웃 및 템플릿 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

레이아웃을 Divi 라이브러리로 가져오기

섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.

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

이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다. "blog post ticker layout (Divi Library)"라는 폴더 안에 JSON 파일이 있습니다.

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

완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다.

헤더 템플릿을 Divi 테마 빌더로 가져오기

헤더에 게시물 티커가 추가된 블로그 게시물 템플릿을 가져오려면 Divi > 테마 빌더를 탐색해야 합니다.

그런 다음 페이지 오른쪽 상단의 이식성 아이콘을 사용하여 JSON 파일을 가져옵니다. "게시물 시세 표시기가 있는 블로그 게시물 헤더 템플릿(테마 빌더)"이라는 폴더 안에 있는 파일입니다.

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

시작하는 데 필요한 것

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

1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. "처음부터 빌드" 옵션을 선택합니다.

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

Divi에서 블로그 게시물 티커 만들기

행 만들기

시작하려면 섹션 내부에 1열 행을 생성해 보겠습니다.

행 설정

다음으로 행 디자인 설정을 다음과 같이 업데이트합니다.

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

텍스트 모듈로 게시물 티커 제목 만들기

이제 행이 제자리에 배치되었으므로 행에 텍스트 모듈을 추가하여 게시물 티커 제목을 만듭니다.

제목 텍스트 및 배경

본문 텍스트를 "최근 게시물:"로 업데이트합니다.

그런 다음 배경색을 업데이트합니다.

• 배경색: #333333

디자인 설정

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

• 텍스트 글꼴: Poppins
• 텍스트 글꼴 두께: 반 굵게
• 텍스트 글꼴 스타일: TT
• 텍스트 텍스트 색상: rgba(255,255,255,0.7)
• 텍스트 문자 간격: 1px
• 텍스트 줄 높이: 40px
• 텍스트 정렬: 가운데

• 폭: 100%
• 최대 너비: 175px(데스크톱 및 태블릿), 100%(휴대폰)

이것은 포스트 티커 제목을 처리합니다. 이제 포스트 티커 빌드를 시작하겠습니다.

블로그 게시물 슬라이더 모듈로 블로그 게시물 티커 만들기

블로그 게시물 티커를 만들기 위해 게시물 슬라이더 모듈을 사용한 다음 디자인을 단순화하여 정말 컴팩트하게 만들 것입니다.

텍스트 모듈 아래에 포스트 슬라이더 모듈을 추가합니다.

게시물 슬라이더 콘텐츠

콘텐츠 탭에서 게시물 수, 포함된 카테고리 및 정렬 방식을 선택할 수 있습니다. 이 예에서는 기본값을 유지하고 슬라이더가 가장 최근 게시물을 표시하도록 할 것입니다.

게시물 발췌문을 숨기려면 다음을 업데이트해야 합니다.

• 게시물 발췌문 사용: 아니요
• 발췌 길이: 0

포스트 슬라이더 요소 및 배경

실제로 슬라이더에 표시하려는 것은 게시물 제목과 슬라이드 화살표뿐입니다. 요소 옵션 그룹에서 화살표를 제외한 모든 항목을 숨깁니다.

• 컨트롤 표시: 아니요
• 더 읽기 버튼 표시: 아니요
• 게시물 메타 표시: 아니요

추천 이미지를 각 슬라이드의 배경으로 표시하는 옵션을 유지합니다. 그러나 백업을 위해 다음 배경색을 추가해야 합니다.

• 배경색: #eeeeee

포스트 슬라이더 디자인 설정

오버레이 및 화살표 스타일

디자인 탭에서 다음과 같이 배경 오버레이 및 화살표 색상을 업데이트합니다.

• 배경 오버레이 사용: 예
• 배경 오버레이 색상: rgba(248,248,248,0.9)
• 화살표 색상: #ffffff(데스크톱), #ef51f7(호버)

제목 텍스트

그런 다음 다음과 같이 제목 텍스트 스타일을 업데이트합니다.

• 제목 글꼴: Poppins
• 제목 글꼴 두께: 중간
• 제목 텍스트 정렬: 왼쪽
• 제목 텍스트 색상: #333333
• 제목 텍스트 색상(마우스 오버): #ef51f7
• 제목 텍스트 크기: 16px(데스크톱), 14px(전화)
• 제목 줄 높이: 40px
• 제목 텍스트 그림자: 스크린샷 참조
• 제목 텍스트 그림자 색상: 투명

간격

게시물 슬라이더를 오른쪽에 배치할 수 있도록 게시물 티커 제목 텍스트 모듈을 위한 공간을 만들어야 합니다. 그렇게 하려면 다음을 업데이트하십시오.

• 여백: 왼쪽 175픽셀(데스크톱 및 태블릿), 왼쪽 0픽셀(휴대전화)
• 패딩: 위쪽 0px, 아래쪽 0px, 왼쪽 0px, 오른쪽 0px

자동 애니메이션

포스트 슬라이더에는 자동 애니메이션을 추가하기 위한 기본 제공 옵션이 있습니다. 이렇게 하면 슬라이드 화살표를 클릭하지 않고도 게시물을 보는 데 필요한 티커 기능이 제공됩니다.

다음과 같이 자동 애니메이션을 추가합니다.

• 자동 애니메이션: 켜짐
• 자동 애니메이션 속도: 3500

당신이 가장 좋다고 느끼는 대로 속도를 높이거나 낮추십시오.

고급 스타일링

CSS 클래스 및 사용자 정의 CSS

이 시점에서 포스트 슬라이더는 대부분 작동하는 포스트 티커입니다. 그러나 디자인을 정리하기 위해 추가할 수 있는 몇 가지 고급 조정이 있습니다.

먼저 다음과 같이 사용자 정의 CSS 클래스를 추가합니다.

• CSS 클래스: et-post-ticker

게시물 제목이 슬라이더/티커 내부의 한 줄에 유지되고 줄임표가 있는 오버플로를 숨기려면 다음 CSS를 슬라이드 제목에 추가합니다.

padding-bottom:0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

슬라이드 화살표에 버튼 느낌을 더하려면 슬라이드 화살표에 다음 CSS를 추가하십시오.

height: 40px;
width: 40px;
line-height:40px;
font-size: 28px;
text-align: center;
margin-top:-20px;
background:#333;

슬라이드 화살표 위치 지정을 위한 코드 모듈이 있는 추가 CSS

이 시점에서 슬라이드 화살표의 기본 기능은 마우스를 가져갔을 때만 표시되며 화살표의 위치는 슬라이드의 오른쪽과 왼쪽에 있습니다. 사용자 경험을 개선하고 포스트 티커처럼 만들기 위해 화살표를 항상 표시하고 슬라이더의 오른쪽에 배치할 수 있습니다.

이렇게 하려면 게시물 슬라이더 아래에 새 코드 모듈을 추가합니다.

그런 다음 필요한 스타일 태그로 감싸도록 다음 CSS를 붙여넣습니다.

.et-post-ticker.et_pb_slider:hover .et-pb-arrow-prev,
.et-post-ticker .et-pb-arrow-prev {
  right: 40px !important;
  opacity: 1 !important;
  left: auto !important;
}
.et-post-ticker.et_pb_slider:hover .et-pb-arrow-next,
.et-post-ticker .et-pb-arrow-next {
  right: 0px !important;
  opacity: 1 !important;
}
.et-post-ticker .et_pb_slide {
  padding: 0 84px 0 3% !important;
}

최종 결과

다음은 라이브 페이지의 최종 결과입니다.

게시물 시세 표시기가 제목 텍스트의 오버플로를 처리하는 방법에 주목하십시오.

그리고 게시물 시세 표시기가 전화 디스플레이에 멋지게 쌓이는 방법은 다음과 같습니다.

블로그 포스트 템플릿의 헤더에 포스트 티커 추가하기

이 게시물 티커의 한 가지 분명한 사용 사례는 블로그 게시물 템플릿의 실제 헤더에 최근 게시물을 표시하도록 하는 것입니다. 방법은 다음과 같습니다.

Divi 라이브러리에 행 저장

먼저 포스트 티커를 구성하는 요소가 포함된 행을 Divi 라이브러리에 저장합니다. 행에 있는 점 3개 아이콘을 클릭하고 "라이브러리에 저장"을 선택하면 됩니다. 그런 다음 레이아웃 이름을 지정하고 "라이브러리에 저장" 버튼을 클릭합니다.

헤더 템플릿에 포스트 티커 행 추가

사용자 정의 헤더 편집

행이 라이브러리에 저장되면 사용자 정의 헤더에 추가할 준비가 된 것입니다. 이 예에서는 템플릿이 "모든 게시물"에 할당되었는지 확인합니다. 그런 다음 클릭하여 해당 템플릿에 대한 사용자 정의 헤더를 편집합니다.

라이브러리에서 행(게시물 티커) 삽입

헤더 레이아웃 편집기에서 게시물 티커를 표시할 위치에 새 행을 클릭하여 추가합니다.

행 삽입 모달에서 라이브러리에서 추가 탭을 선택합니다. 이전에 라이브러리에 저장한 블로그 게시물 티커 행을 찾아 선택합니다.

이제 게시물 티커가 헤더에 표시됩니다.

현재 카테고리에 대한 쇼케이스 관련 게시물

이 게시물 티커는 블로그 게시물에만 표시될 예정이므로 현재 카테고리와 관련된 게시물만 표시하도록 선택할 수 있습니다.

먼저 텍스트 모듈의 제목 텍스트를 "Related Posts:"로 업데이트해야 합니다.

그런 다음 게시물 슬라이더 설정을 엽니다. 포함된 범주에서 현재 범주 옵션을 선택합니다.

이제 각 블로그 게시물의 헤더에는 현재 카테고리별로 관련 게시물을 표시하는 게시물 티커가 있습니다.

블로그 게시물 템플릿의 결과

다음은 작동 중인 자동 애니메이션입니다.

탐색 화살표를 클릭하여 다음 및 이전 게시물로 이동하는 방법은 다음과 같습니다. 그리고 게시물 제목을 클릭하면 해당 게시물로 이동합니다.

다음은 태블릿과 휴대폰에서 보이는 방법입니다.

마지막 생각들

배운 것처럼 Divi의 슬라이더 모듈 디자인을 단순화하고 탐색 화살표에 몇 가지 사용자 지정 조정을 적용하여 블로그 게시물 티커를 쉽게 만들 수 있습니다. 포스트 슬라이더에 내장된 모든 옵션을 사용하여 언제든지 스타일을 쉽게 조정할 수 있다는 점을 잊지 마십시오. 바라건대 이것은 모든 블로거와 웹 개발자에게 유용할 것입니다.

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

건배!