Divi에서 스크롤 가능한 최근 게시물 위젯 영역을 디자인하는 방법

Divi의 사이드바 모듈은 사용자 정의 위젯 영역을 디자인에 통합하는 데 매우 유용한 도구입니다. 이를 통해 Divi 레이아웃 안에 모든 WordPress 위젯을 표시할 수 있습니다. 이 튜토리얼에서는 Divi에서 스크롤 가능한 최근 게시물 위젯 영역을 만드는 방법을 보여 드리겠습니다. 블로그 모듈의 오른쪽에 최근 게시물 위젯 영역이 있는 "우리 블로그에서" 섹션을 디자인하겠습니다. 이것은 홈페이지나 방문 페이지에 가장 최근의 블로그 게시물 몇 개를 보여주는 데 적합합니다.

시작하자!

엿보기

다음은 이 튜토리얼에서 구축할 디자인을 살짝 엿볼 수 있습니다.

스크롤 가능한 최근 게시물 레이아웃 무료 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder로 드래그하기만 하면 됩니다.

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

YouTube 채널 구독

최근 게시물 위젯 영역 만들기

최근 게시물 위젯을 Divi 레이아웃에 추가할 예정이므로 가장 먼저 해야 할 일은 Divi의 사이드바 모듈과 함께 사용할 새 위젯 영역(최근 게시물 위젯 포함)을 만드는 것입니다.

최근 게시물 위젯 영역을 만들려면 모양 > 위젯으로 이동합니다. 그런 다음 위젯 영역에 이름을 지정하고(원하는 경우 "최근 게시물"이라고 함) 만들기 버튼을 클릭하여 새 위젯 영역을 만듭니다. 사용 가능한 새 위젯 영역을 보려면 페이지를 새로고침하세요.

페이지 왼쪽에서 WordPress와 함께 제공되는 최근 게시물 위젯의 토글을 엽니다. 그런 다음 목록에서 "최근 게시물" 위젯 영역을 선택하고 위젯 추가를 클릭하여 위젯 영역에 위젯을 추가합니다.

그런 다음 최근 게시물 위젯 영역을 열고 최근 게시물 위젯을 제목으로 업데이트합니다. 디자인이 완료되었을 때 스크롤할 수 있는 충분한 게시물을 가질 수 있도록 표시할 게시물 수를 많은 수로 설정합니다.

이제 위젯 영역이 준비되었으므로 Divi 디자인을 시작할 수 있습니다.

스크롤 가능한 최근 게시물 위젯 영역으로 "우리 블로그에서" 섹션 만들기

제목 섹션 디자인

하나의 열 행이 있는 새 일반 섹션을 만듭니다.

모듈을 추가하기 전에 다음으로 섹션을 업데이트하십시오.

배경색: #333333
맞춤 패딩: 0px 하단

그런 다음 행 설정을 업데이트하여 행의 아래쪽 패딩도 제거합니다.

맞춤 패딩: 0px 하단

그런 다음 행에 텍스트 모듈을 추가합니다.

그런 다음 다음 텍스트 설정을 업데이트합니다.

콘텐츠의 경우 다음 h2 제목 html을 추가합니다.

<h2>From our Blog</h2>

그런 다음 다음 텍스트 설정을 업데이트합니다.

제목 2 글꼴: Roboto
제목 2 글꼴 스타일: TT
제목 2 텍스트 색상: #ffffff
제목 2 텍스트 크기: 40px
제목 2 글자 간격: 2px

이는 레이아웃의 제목을 처리합니다. 이제 특수 섹션을 사용하여 나머지 레이아웃을 만들 차례입니다.

전문 섹션 만들기

나머지 레이아웃에 대해 별도의 특수 섹션을 사용하면 스크롤 가능한 위젯 영역 오른쪽에 전용 사이드바를 사용할 수 있습니다. 또한 사이드바 영역과 별도로 섹션 왼쪽에 있는 행의 크기를 조정하고 스타일을 지정할 수 있습니다.

다음과 같이 오른쪽 사이드바 열 레이아웃이 있는 특수 섹션을 추가합니다.

그런 다음 섹션에 한 열 행을 추가합니다.

모듈을 추가하기 전에 섹션 및 행 설정을 업데이트하겠습니다.

섹션 설정 사용자 정의

전문 섹션에 대한 설정을 열고 다음을 업데이트합니다.

배경색: #333333
거터 폭: 2
맞춤 패딩: 0px 상단
열 2 맞춤 패딩: 위쪽 0px, 아래쪽 0px

행 설정 사용자 정의

다음으로 행 설정을 열고 다음을 업데이트하십시오.

높이: 640px
상단 테두리 너비: 8px
상단 테두리 색상: #444444
하단 테두리 너비: 8px
하단 테두리 색상: #444444

맞춤 640px 높이는 우리가 전문 섹션의 사이드바에 추가할 스크롤 가능한 최근 게시물 위젯 영역의 높이와 일치하도록 지정됩니다. 이렇게 하면 두 개의 높이가 더 미학적으로 만족스러운 디자인을 위해 동일한 높이를 갖게 됩니다.

블로그 모듈 추가

왼쪽의 1열 행에 블로그 모듈을 추가합니다.

그런 다음 다음과 같이 블로그 모듈 설정을 업데이트합니다.

게시물 수: 2

레이아웃: 그리드
제목 글꼴: Roboto
메타 글꼴: Roboto
메타 글꼴 두께: Light
메타 글꼴 스타일: TT
페이지 매김 글꼴: Roboto
페이지 매김 글꼴 스타일: TT
페이지 매김 텍스트 색상: #ffffff
페이지 매김 텍스트 크기: 18px
페이지 매김 문자 간격: 2px

스크롤 가능한 최근 게시물 위젯 영역 추가

마지막으로 스크롤 가능한 최근 게시물을 레이아웃에 추가할 차례입니다. 이렇게 하려면 오른쪽에 있는 특수 섹션의 사이드바 영역에 사이드바 모듈을 추가합니다.

그런 다음 콘텐츠 탭 아래의 위젯 영역 드롭다운에서 선택하여 이전에 생성한 "최근 게시물" 위젯 영역을 선택합니다.

그런 다음 제목 및 본문 텍스트 디자인을 다음과 같이 업데이트합니다.

제목 글꼴: Roboto
제목 글꼴 스타일: TT
제목 텍스트 색상: #ffffff
제목 글자 간격: 2px
본문 글꼴: Roboto
본문 글꼴 스타일: 밑줄

다음으로 테두리 구분 기호를 다음과 같이 숨깁니다.

테두리 구분 기호 표시: 아니요

그런 다음 사이드바 모듈에 다음과 같이 최대 높이와 ​​맞춤 패딩을 지정합니다.

최대 높이: 640px
맞춤 패딩: 위쪽 30px, 아래쪽 30px, 오른쪽 5%

640px 최대 높이는 인접한 행에 지정된 640px 사용자 정의 높이와 일치합니다.

이제 사이드바 모듈에 최대 높이를 640px로 지정했으므로 스크롤 가능한 기능을 사용하려면 세로 오버플로를 스크롤하도록 설정해야 합니다. 이렇게 하려면 고급 탭으로 이동하여 다음을 업데이트하십시오.

수직 오버플로: 스크롤

최종 결과

그게 다야! 이제 최종 결과를 확인해보자.

보너스 옵션: 디자인 스크롤바에 사용자 정의 CSS 추가(일부 브라우저에서는 지원되지 않음)

크로스 브라우저 지원을 원하는 경우 WordPress에서 스크롤 막대의 스타일을 지정하는 것은 일종의 고통입니다. 따라서 대부분의 경우 브라우저의 기본 스타일을 그대로 두고 하루라고 부르기를 원할 것입니다. 그러나 페이지 디자인과 일치하도록 스크롤 막대를 사용자 지정하려면 몇 가지 사용자 지정 CSS를 추가할 수 있습니다. 불행히도 브라우저 지원은 ::webkit 접두사 CSS 속성(기본적으로 Safari 및 Chrome만 해당)을 지원하는 브라우저로 제한됩니다. 방법은 다음과 같습니다.

Specialty 섹션의 설정을 열고 다음 CSS 클래스를 추가합니다.

CSS 클래스: 맞춤 스크롤

그런 다음 페이지 설정 모달을 열고 다음 사용자 정의 CSS를 페이지에 추가하십시오.

/* width */
.cust-scroll ::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.cust-scroll ::-webkit-scrollbar-track {
  background: #444444; 
}
 
/* Handle */
.cust-scroll ::-webkit-scrollbar-thumb {
  background: #888888; 
}

/* Handle on hover */
.cust-scroll ::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

그러면 스크롤 막대의 너비가 8px로 변경되고 트랙 및 핸들의 색상이 조정됩니다. 더 많은 디자인과 색상을 자유롭게 실험해 보세요.

궁금한 점이 있으면 다른 브라우저에 대한 대체가 스크롤 막대의 브라우저 기본 스타일이 됩니다.

마지막 생각들

콘텐츠에 수직 스크롤을 추가하면 사용자에게 제한된 공간에서 더 많은 콘텐츠를 볼 수 있는 옵션을 제공하려는 경우에 유용합니다. 스크롤 가능한 최근 게시물 위젯 영역은 세로 스크롤이 실제로 어떻게 작동하는지 보여주는 좋은 예입니다. 물론 이 튜토리얼에서 사용하는 사이드바 모듈을 텍스트 모듈로 교체하고 원하는 콘텐츠에 세로 스크롤을 추가할 수 있습니다. 동일한 사용자 정의가 모든 모듈에 적용됩니다.

스크롤 막대 스타일 지정과 관련하여 더 많은 크로스 브라우저 솔루션을 제공하는 다른 플러그인이나 Javascript 솔루션이 있다고 확신합니다. 좋은 것을 알고 계시다면 자유롭게 공유해 주십시오.

아래 의견에서 여러분의 의견을 기다리겠습니다.

건배!