어때요포스터er 블로그 기사를 쉽게 스크롤할 수 있는 캐러셀 형태의 Divi?
많은 웹사이트에서 블로그는 마케팅 전략의 중요한 부분이 되었습니다. SEO.
그러나 고품질 콘텐츠를 만드는 것 외에도 방문자를 위해 게시물을 검색하는 프로세스를 단순화하는 것도 중요합니다. 이렇게 하면 기사에서 기사로 건너뛰고 웹사이트에 게시한 콘텐츠를 읽는 데 더 많은 시간을 할애할 수 있습니다.
Divi에는 기사를 동적으로 표시하고 사용자 정의하는 데 사용할 수 있는 블로그 모듈이 있습니다. 게시물 검색 경험을 한 단계 끌어올릴 방법을 찾고 있다면 이 기사를 좋아할 것입니다.
Divi의 통합 요소와 무료 js 라이브러리 .
가자.
측량
튜토리얼을 시작하기 전에 결과를 간단히 살펴보겠습니다.
Divi Theme Builder로 블로그 페이지 만들기
작업 중인 웹 사이트에 새 페이지를 추가하여 시작하십시오.
페이지에 제목을 지정하고 페이지를 게시한 다음 'Divi Builder 사용'.
'인테리어 디자인 회사' 사전 디자인 레이아웃 블로그 페이지 다운로드
이 튜토리얼에서는 '인테리어 디자인 회사' 레이아웃의 블로그 페이지를 사용하지만 원하는 다른 레이아웃을 자유롭게 사용할 수 있습니다.
Divi의 요약 모듈을 사용하여 '이전' 및 '다음' 화살표 템플릿 생성
블로그 페이지에 들어가면 회전 목마 만들기를 시작할 수 있습니다.
첫 번째 부분은 방문자가 기사 사이를 탐색할 수 있도록 하는 데 필요한 화살표를 만드는 데 전념합니다.
화살표를 디자인하기 위해 Divi의 요약 모듈을 사용하지만 원하는 다른 모듈을 자유롭게 사용할 수 있습니다.
섹션 상단에 새 줄 추가 블로그 다음 열 구조를 사용합니다.
크기 조정
아직 모듈을 추가하지 않고 선 설정을 열고 다음과 같이 크기 설정을 변경하여 선이 섹션의 왼쪽과 오른쪽에 닿도록 합니다.
- 최대 너비: 100%
- 최대 너비: 100%
요약 모듈 추가
요약 모듈을 추가하고 제목을 삽입하십시오.
그런 다음 아이콘을 선택합니다.
- 아이콘 사용: 예
아이콘 설정
스타일 탭으로 전환하고 아이콘 설정을 다음과 같이 수정합니다.
- 아이콘 색상: #000000
- 이미지/아이콘 배치: 정점
- 이미지/아이콘 정렬: 중앙
제목 텍스트 설정
다음으로 제목 텍스트 설정을 변경합니다.
- 제목 글꼴: Mulish
- 소프트 라이트 제목: 반 굵게
- 텍스트 정렬: 가운데
- 제목 텍스트 색상: #000000
크기 조정
그런 다음 다른 화면 크기에서 모듈 크기 설정을 변경합니다.
- 최대 너비: 10%(데스크톱), 20%(태블릿), 30%(휴대폰)
- 텍스트 정렬: 오른쪽
CSS 클래스도 추가해 보겠습니다. 이 CSS 클래스는 클릭 시 캐러셀 동작을 트리거하는 데 도움이 됩니다.
- CSS 클래스: 뒤로 버튼
마지막으로 모듈의 주요 요소에 CSS 코드 한 줄을 추가하여 커서를 포인터로 전환합니다.
cursor: pointer;
선을 복제하고 섹션의 맨 아래에 놓습니다.
첫 번째 화살표를 완료하면 전체 행 컨테이너를 복제하고 블로그 섹션 끝에 중복 행을 배치할 수 있습니다.
중복 행에서 요약 모듈을 열고 제목을 편집합니다.
아이콘 사용: 예.
또한 CSS 클래스를 수정합니다.
- CSS 클래스: 다음 버튼
블로그 모듈 준비
크기 조정
화살표가 제자리에 있으면 블로그 모듈이 배치된 행부터 시작하여 블로그 모듈을 조정할 차례입니다. 라인 설정을 열고 그에 따라 크기 설정을 변경합니다.
- 최대 너비: 100%
- 최대 너비: 100%
그런 다음 라인 오버플로를 '숨김'으로 설정합니다. 이렇게 하면 캐러셀로 인해 페이지에 가로 스크롤 막대가 표시되지 않습니다.
- 수평 오버플로: 숨김
- 수직 오버플로: 숨김
페이지 매김 숨기기
라인 설정이 완료되면 블로그 모듈 설정을 엽니다. 항목 설정에서 페이징이 비활성화되어 있는지 확인하십시오.
- 페이지 매김 표시: 아니요
그런 다음 스타일 탭으로 전환하고 레이아웃을 '전체 화면'으로 변경합니다.
- 모델: 전체 화면
오버레이도 추가하겠습니다.
- 표시된 오버레이 이미지: ACTIVE
- 오버레이 아이콘 색상: #ffffff
- 오버레이 배경색: rgba(1,0,66,0.33)
다음으로, 우리 블로그에 CSS 클래스를 추가할 것입니다. 이것은 튜토리얼의 뒷부분에서 캐러셀을 활성화하는 데 도움이 될 것입니다.
- CSS 클래스: 블로그 모듈
그리고 고급 탭의 Post Metadata CSS 요소에 하단 여백을 추가하여 포스트 메타와 발췌 부분 사이에 약간의 공간을 생성합니다.
발견 : DIVI에서 슬라이딩 및 푸시 메뉴를 만드는 방법
margin-bottom: 50px;
Slick JS 기능 추가
모든 Divi 설정이 완료되면 매끄러운 js 기능을 추가할 차례입니다! 블로그 모듈 바로 아래(또는 페이지의 다른 곳)에 코드 모듈을 추가합니다.
그런 다음 매끄러운 js 라이브러리를 추가하십시오. 스크립트 태그에서 (아래 인쇄 화면에서 볼 수 있듯이). 또한 설정에서 웹사이트 헤더에 자유롭게 추가할 수 있습니다. 디비 테마.
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"
CSS 코드를 사용하여 개별 수준에서 각 블로그 게시물을 약간 수정합니다.
읽기 : DIVI에서 블로그 모듈로 블로그 페이지를 만드는 방법
코드를 꼭 넣어주세요 스타일 태그 사이 아래 스크린샷과 같이.
.slick-slide {
float: left;
margin: 2vw;
}
마지막으로 캐러셀이 모양을 잡을 수 있도록 JQuery 코드를 추가합니다. 아래 코드에서 캐러셀 기능을 위해 디자인한 버튼도 추가합니다.
코드를 꼭 넣어주세요 스크립트 태그에서 아래에서 볼 수 있듯이.
jQuery(function($){
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.blog-module .et_pb_ajax_pagination_container');
postContainer.addClass('slider');
postContainer.addClass('blog-carousel');
$('.blog-carousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
centerMode: true,
centerPadding: '10%',
swipe: true,
prevArrow: backButton,
nextArrow: nextButton,
responsive: [{
breakpoint: 1079, settings: {
slidesToShow: 1
}
}]
});
});
페이지를 저장하고 Divi의 Visual Builder를 종료하여 결과를 표시하십시오.
Visual Builder에서는 결과를 볼 수 없습니다.
따라서 작업이 완료되는 즉시 페이지를 저장하고 Visual Builder를 종료하고 웹사이트에서 결과를 확인하십시오!
측량
이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.
지금 DIVI를 다운로드하세요!!!
결론
그래서 ! 그것이 이 기사의 내용입니다. 블로그 모듈 디자인을 다음 단계로 끌어올리는 방법을 보여 드렸습니다. 특히, 무료 js 라이브러리를 사용하여 Divi의 내장 블로그 모듈을 캐러셀로 바꾸는 방법을 보여주었습니다.
Divi에 대해 더 알고 싶다면 주저하지 말고 당사 카탈로그를 방문하십시오. 디비 튜토리얼. 상담도 가능합니다 Divi 블로그 모듈로 블로그 페이지를 만드는 방법
또한보십시오 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
