Divi 블로그 모듈을 회전식 블로그 게시물로 바꾸는 방법

게시 됨: 2022-10-28

Divi에는 블로그 게시물을 동적으로 표시할 수 있는 블로그 모듈이 있으며 박쥐에서 바로 두 가지 레이아웃 선택으로 스타일을 지정할 수도 있습니다. 하나는 세로로 쌓인 게시물을 표시하여 한 행에 하나의 게시물만 표시하는 전체 너비 레이아웃입니다. 블로그 게시물을 여러 열에 배치하여 그리드를 만드는 레이아웃입니다. 모듈을 한동안 사용해 왔다면 블로그 게시물에 그리드 및 전체 너비 레이아웃 외에 다른 스타일을 원할 수 있습니다.

이전에는 블로그 게시물의 스타일을 지정할 수 있는 몇 가지 기사도 만들었습니다. 그 중 하나는 그리드 레이아웃 블로그 모듈의 추천 이미지 위로 블로그 게시물의 콘텐츠를 이동하는 것이고 다른 하나는 전체 너비 레이아웃의 블로그 게시물을 목록 레이아웃으로 바꾸는 것입니다.

그리고 이번에는 블로그 게시물의 스타일을 지정하는 또 하나의 사용자 지정 기능을 보여드리고자 합니다. 블로그 게시물을 PC에서는 드래그할 수 있고 모바일에서는 스와이프하여 다음 애니메이션과 같은 블로그 게시물을 탐색할 수 있는 캐러셀로 전환하는 것입니다.

Divi 블로그 모듈을 회전 목마로 전환

1단계: 페이지 생성 또는 기존 페이지 편집

Divi 블로그 모듈을 캐러셀로 전환하려면 웹사이트에 새 페이지를 추가하거나 기존 페이지를 편집한 다음 Divi Builder 비주얼 편집기로 편집하십시오. 이 자습서에서는 새 페이지를 만들고 Charter Boat 사전 제작 레이아웃 팩의 블로그 레이아웃을 사용합니다.

2단계: 캐러셀에 대한 이전 및 다음 버튼 만들기

레이아웃을 로드하면 블로그 모듈이 블로그 게시물을 동적으로 로드합니다. 다음 단계는 사용자가 게시물 사이를 앞뒤로 이동할 수 있도록 이전 및 다음 버튼을 만드는 것입니다.

탐색 버튼에 대한 새 행 추가

먼저 새 행을 추가하고 블로그 모듈 행 바로 위로 이동한 후 다음 열 구조를 사용합니다.

아직 모듈을 추가하지 않고 행 설정 을 연 다음 디자인 탭 → 크기 조정 블록으로 이동하고 너비 와 최대 너비 를 모두 100%로 설정하여 행 너비를 섹션 너비의 100%로 설정합니다.

버튼에 대한 Blurb 모듈 추가

행이 준비되면 첫 번째 버튼에 대한 설명 모듈을 추가하여 게시물을 탐색합니다. 게시물 탐색에 사용하는 버튼의 아이콘 스타일을 지정할 수 있는 많은 옵션이 있으므로 버튼에 대한 설명 모듈을 선택합니다.

모듈을 추가한 후 Blurb 설정 을 열면 다음 설정이 모듈에 적용됩니다.

  • 제목 을 "이전"으로 변경
  • 본문 삭제
  • 이미지 및 아이콘 블록을 열고 아이콘 사용 옵션을 예로 전환한 다음 왼쪽 화살표 아이콘을 선택합니다.
  • 디자인 탭으로 이동한 다음 이미지 및 아이콘 블록을 열어 다음과 같이 아이콘 설정을 변경합니다.
    • 아이콘 색상 : #000000
    • 이미지/아이콘 배경색 : #f2f2f2
    • 이미지/아이콘 둥근 모서리 : 모든 모서리에 대해 50px
  • 제목 텍스트 블록을 열어 다음과 같이 제목 텍스트의 스타일을 지정합니다.
    • 제목 글꼴 두께 : 반 굵게
    • 제목 텍스트 정렬: 가운데
  • 다양한 화면 크기에서 모듈 크기 조정 옵션을 변경하고 크기 조정 블록으로 이동하여 오른쪽 정렬을 조정한 후 다음과 같이 설정을 수정합니다.
    • 너비 : 데스크탑 = 10%, 태블릿 = 20%, 휴대폰 = 30%
    • 모듈 정렬 : 오른쪽
  • 고급 탭 → CSS ID 및 클래스 블록으로 이동하여 나중에 캐러셀 작업을 트리거하도록 모듈에 사용자 정의 CSS 클래스를 추가한 다음 CSS 클래스 필드에 "뒤로 버튼" 사용자 정의 CSS 클래스를 추가합니다.
  • Custom CSS → Main Element 에 다음 CSS 스니펫을 추가하여 커서를 포인터로 변경합니다.
    • cursor: pointer;

버튼 행 복제 및 블로그 행 아래로 이동

이전 버튼이 설정되면 포함된 행과 모듈을 복제하여 단계를 반복할 필요가 없도록 하고 블로그 게시물 행 아래로 행을 이동하고 복제된 광고 문구 모듈에서 아이콘, 제목, 다음 버튼에 대한 사용자 정의 CSS 클래스. 변경된 설정은 다음과 같습니다.

  • 콘텐츠 탭에서 다음 값을 변경합니다.
    • 제목: 다음
    • 아이콘: 오른쪽 화살표
  • 그런 다음 고급 탭으로 이동하여 CSS 클래스를 변경합니다.
    • CSS ID 및 클래스 → CSS 클래스 : 다음 버튼

3단계: 블로그 모듈 준비

Carousel 블로그 게시물을 위한 행 준비

모듈을 만지기 전에 블로그 모듈을 캐러셀 블로그 게시물로 만들기 전에 먼저 블로그 모듈의 행을 준비합시다. 블로그 행 설정 을 열고 다음과 같이 설정을 변경합니다.

  • 디자인 탭 → 크기 조정 블록으로 이동한 다음 다음을 설정합니다.
    • 폭: 100%
    • 최대 너비: 100%
  • 고급 탭 → 가시성 블록으로 이동:
    • 수평 오버플로 : 숨김
    • 수직 오버플로: 숨김

위의 설정은 캐러셀로 인해 페이지 내에 가로 스크롤 막대가 나타나지 않도록 합니다.

블로그 모듈 준비

행을 준비했으면 블로그 모듈을 조정할 차례입니다. 블로그 설정 을 연 다음 다음과 같이 설정을 변경합니다.

  • 콘텐츠 탭 → 요소 블록에서 페이지 매김 표시 설정을 아니요 로 설정합니다.
  • 디자인 탭 → 레이아웃 블록으로 이동하여 블로그 게시물 레이아웃을 전체 너비로 변경합니다.
    • 레이아웃: 전폭
  • 그런 다음 오버레이 블록에 다음 값을 추가하여 오버레이를 추가합니다.
    • 추천 이미지 오버레이 : 켜기
    • 오버레이 아이콘 색상: #ffffff
    • 오버레이 배경색: rgba(1,0,66,0.33)
  • 여전히 디자인 탭에서 이미지 블록을 열고 이미지 상자 그림자 옵션에서 상자 그림자 효과 중 하나를 선택하여 추천 이미지에 그림자 효과를 추가하고 다음 색상을 사용합니다.
    • RGBA(1,0,66,0.33)
  • 고급 탭으로 이동하여 블로그 모듈에 사용자 정의 CSS 클래스를 추가하여 나중에 CSS ID 및 클래스 블록을 열어 캐러셀을 활성화한 후 다음 CSS 클래스를 추가합니다.
    • CSS 클래스: wpblog-module
  • 추천 이미지와 제목 사이에 약간의 여백을 추가하여 포스트 메타와 발췌문 사이에 약간의 공간을 추가합니다. 이렇게 하려면 사용자 정의 CSS 블록에 다음 CSS 스니펫을 추가합니다.
    • 제목: margin-top: 10px;
    • 포스트 메타 : margin-bottom: 30px;

블로그 모듈 설정은 여기까지입니다. 드래그할 수 있고 스와이프할 수 있는 회전 목마로 바꿔 볼까요?

4단계: 블로그 게시물을 드래그 및 스와이프할 수 있는 캐러셀로 전환

블로그 모듈 설정이 지정되면 이제 블로그 게시물을 끌어서 스와이프할 수 있는 회전 목마로 바꿀 차례입니다. 그렇게 하려면 Slick JS 라이브러리와 일부 사용자 정의 코드를 추가하여 작동하도록 해야 합니다.

Slick JS 기능 및 슬라이드 CSS 추가

Slick JS는 완전히 사용자 지정 가능하고 반응이 빠르며 모바일 친화적인 캐러셀을 만들기 위한 jQuery 플러그인입니다. Slick JS의 기능을 추가하려면 페이지의 열에 코드 모듈을 추가하거나 Divi → Divi 테마 옵션 → 통합 으로 이동하여 URL이 포함된 다음 스크립트를 웹사이트 헤드에 추가할 수 있습니다. 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

이 자습서에서는 코드 모듈을 사용하고 위의 코드를 그 안에 넣은 다음 스크립트 태그의 끝 바로 아래에 다음 슬라이드 CSS 코드를 추가합니다. 

 <스타일>
	.slick-슬라이드 {
	왼쪽으로 뜨다;
	여백: 2vw;
	}
</스타일>

회전 목마가 그 형태를 취하게하십시오

마지막으로 드래그 가능하고 스와이프할 수 있는 캐러셀이 형식을 취하도록 하려면 다음 JQuery 코드를 추가해야 합니다. 이전 슬라이드 CSS 코드 뒤에 코드를 배치할 수 있습니다. 더 이상 고민하지 않고 코드는 다음과 같습니다. 

 <스크립트>
  제이쿼리(함수($){
   
var backButton = $('.뒤로 버튼');
var nextButton = $('.다음 버튼');
var postContainer = $('.wpblog-module .et_pb_ajax_pagination_container');
   
postContainer.addClass('슬라이더'); 
postContainer.addClass('블로그 캐러셀'); 
 
$('.blog-carousel').slick({
    무한: 사실,
    슬라이드 쇼: 3,
    SlidesToScroll: 1,
    센터 모드: 참,
    centerPadding: '10%',
    스와이프: 사실,
    prevArrow: backButton,
    다음화살표: 다음버튼,
   
    반응: [{
    중단점: 1079, 설정: {
    슬라이드로 표시: 1
    }
    }]
 
});
});
</스크립트>

위의 코드는 이전 및 다음 버튼이 탐색 버튼으로 제대로 작동하도록 합니다. 코드 모듈의 코드 배치에 대한 아래 그림을 볼 수 있습니다.

5단계: 캐러셀 블로그 게시물 실시간 시청

이제 필요한 모든 코드가 이미 준비되어 있지만 블로그 모듈은 여전히 ​​Divi 빌더의 전체 너비 레이아웃에 있습니다. 어때요?

걱정하지 마세요. 페이지를 저장하고 비주얼 빌더를 종료하여 프런트 엔드에서 블로그 게시물을 확인하세요. 그리고 짜잔, 블로그 게시물은 다음 및 이전 버튼이 있는 드래그 및 스와이프가 가능한 캐러셀로 바뀌어 캐러셀 블로그 게시물을 탐색할 수 있는 또 다른 방법을 제공합니다.

결론

블로그 모듈을 한동안 사용해 왔다면 블로그 게시물에 대해 그리드 및 전체 너비 레이아웃 외에 다른 스타일을 원할 수 있습니다. 이 레이아웃은 바로 얻을 수 있는 기본 레이아웃입니다. 이 튜토리얼에서는 블로그 게시물을 드래그 가능하고 스와이프할 수 있는 캐러셀로 바꾸는 방법을 보여주었습니다. 이 캐러셀에서는 블로그 페이지 또는 관련 게시물과 같은 웹사이트 요소의 스타일을 지정할 수 있는 더 많은 옵션을 제공합니다.

디비 다운로드