Divi 모듈의 클릭 가능한 회전 목마를 만드는 방법
게시 됨: 2017-09-19오늘의 게시물은 "Divi Kitchen"의 본고장인 Divi Soup의 Michelle Nunan이 제출했습니다. 이곳에서 그녀는 새롭고 유용한 Divi 튜토리얼과 강의를 끊임없이 요리하고 있습니다.
캐러셀은 인기 있는 웹사이트 기능입니다. 추가 공간을 차지하지 않고 더 많은 콘텐츠를 표시할 수 있으며 웹사이트에 상호작용 요소를 추가하여 방문자가 콘텐츠에 더 많이 참여하도록 할 수 있습니다.
캐러셀에 콘텐츠를 표시하는 데 도움이 되는 훌륭한 플러그인이 많이 있지만 이 게시물에서는 CSS와 자바스크립트만 사용하여 Divi 모듈의 클릭 가능한 캐러셀을 만드는 방법을 보여 드리겠습니다.
이 효과는 거의 모든 표준 Divi 모듈 또는 모듈 조합과 함께 사용할 수 있습니다. 이미지 모듈을 사용하여 이 캐러셀을 만드는 방법을 보여 드리겠습니다. 그런 다음 블로그 모듈을 프로세스로 사용하는 방법은 약간 다릅니다. 여기에서 거의 모든 표준 모듈을 사용하여 자신만의 캐러셀을 만드는 방법을 이해해야 합니다.
결과
이것은 블로그 모듈로 캐러셀을 만든 후에 끝내야 하는 것입니다.
여기에서 다양한 Divi Builder 모듈을 사용한 효과를 보여주는 라이브 데모를 볼 수 있습니다.
시작하겠습니다.
새 페이지 추가
이미지 모듈로 캐러셀을 만드는 것으로 시작하겠습니다. 새 페이지를 추가하거나 캐러셀을 추가할 페이지를 엽니다.
새 섹션 추가
단일 열로 페이지에 새로운 표준 섹션을 추가하십시오. 그런 다음 섹션 설정을 열고 고급 탭에서 CSS 클래스 필드에 클래스 ds-carousel-section 을 추가합니다.
섹션과 행이 표시되는 방식을 변경할 예정이므로 이러한 변경 사항이 캐러셀에만 적용되기를 원하므로 코드가 사이트의 다른 요소에 영향을 미치지 않도록 사용자 정의 클래스를 추가합니다.
그런 다음 섹션을 저장하고 종료합니다.
이제 행 설정을 열고 고급 탭에서 CSS 클래스 필드에 클래스 ds-carousel-row 를 추가합니다. 그런 다음 행을 저장하고 종료합니다.
다음으로 행에 이미지 모듈을 추가할 것입니다. 모듈 삽입을 클릭하고 목록에서 이미지 모듈을 선택합니다.
이미지 모듈의 콘텐츠 탭에서 이미지 업로드를 클릭하고 미디어 라이브러리에서 원하는 이미지를 선택하거나 새 이미지를 업로드합니다.
이미지를 라이트박스에서 열려면 설정에서 이 옵션을 선택하십시오.
또는 원하는 경우 이미지를 클릭할 때 새 페이지를 여는 URL을 추가할 수 있습니다.
모듈에서 마지막으로 해야 할 일은 클래스를 추가하는 것입니다. 고급 탭을 클릭하고 CSS 클래스 필드에 ds-carousel-module 클래스를 추가합니다. 그런 다음 모듈을 저장하고 종료합니다.
모듈 중 하나가 완료되었지만 회전 목마를 만들려면 하나 이상의 이미지가 필요합니다. 이 게시물의 뒷부분에서 제공할 코드는 한 번에 5개의 이미지를 표시하므로 캐러셀 버튼에 효과가 있고 콘텐츠를 슬라이드하려면 최소 6개의 이미지가 필요합니다.
Divi의 복제 기능을 사용하여 이미지를 캐러셀에 표시하려는 횟수만큼 이미지 모듈을 복제합니다.
완료되면 이미지 모듈이 단일 행에 쌓인 상태에서 섹션이 다음과 같이 표시되어야 합니다.
각 모듈에 대한 설정을 열고 추가한 경우 이미지와 URL을 교체해야 합니다.
콘텐츠 설정이 완료되었습니다. 이제 탐색을 생성하겠습니다.
새 섹션 추가
이미지 섹션 바로 아래에 새 섹션을 추가합니다. 이번에는 두 개의 열이 있습니다.
행 설정을 열고 고급 탭에서 CSS 클래스 필드에 클래스 ds-arrow-row 를 추가합니다. 그런 다음 행을 저장하고 종료합니다.
탐색 추가
다음으로 이 행의 두 열 각각에 텍스트 모듈을 추가합니다.
이제 탐색 버튼으로 사용할 입력 필드를 만들어야 합니다. 왼쪽 열에서 텍스트 모듈을 열고 콘텐츠 영역에 다음 HTML을 붙여넣습니다.
<input id="ds-arrow-left" type="button" value="8">
그런 다음 모듈을 저장하고 종료합니다.
다음으로 오른쪽 열에서 텍스트 모듈을 열고 다음 HTML을 붙여넣습니다.
<input id="ds-arrow-right" type="button" value="9">
그런 다음 모듈을 저장하고 종료합니다.
이러한 입력 필드에 ds-arrow-left 및 ds-arrow-right 의 고유 ID를 부여하여 CSS로 스타일을 지정하고 JavaScript로 대상을 지정하여 클릭 시 수행하려는 작업을 알릴 수 있습니다.
8과 9의 값은 ET 모듈 글꼴 패밀리의 이중 왼쪽 및 오른쪽 화살표를 나타냅니다.
그것이 우리가 빌더에서 해야 할 전부입니다. 지금 페이지의 프론트 엔드를 확인하면 이미지의 단일 열과 8과 9가 있는 두 개의 작은 회색 버튼으로 표시되며 아무 작업도 수행하지 않습니다. 이제 코드를 추가하여 재미있는 부분으로 들어가 보겠습니다.
CSS 추가
다음 CSS를 하위 테마에 추가하는 것이 좋지만 하위 테마를 사용하지 않는 경우 Divi > 테마 옵션 > 일반 > 사용자 정의 CSS에 추가하고 저장을 눌러도 좋습니다.
/*Hide the section overflow*/
.ds-carousel-section {
width: 100%;
overflow: hidden;
}
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 1000vw;
max-width: 1000vw;
}
@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
.ds-carousel-section .ds-carousel-row {
max-width: 1000vw !important;
}
}
@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
.ds-carousel-section .ds-carousel-row {
max-width: 1000vw !important;
}
}
/*Style the navigation arrows*/
#ds-arrow-left,
#ds-arrow-right {
color: #fff;
background: gray;
font-family: 'ETModules';
font-size: 30px;
padding: 5px 30px;
border-style: none;
border-radius: 0;
cursor: pointer;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/*Position the left arrow*/
#ds-arrow-left {
float: right;
margin-right: 5px;
}
/*Position the right arrow*/
#ds-arrow-right {
float: left;
margin-left: 5px;
}
/*Style navigation arrows on hover*/
#ds-arrow-left:hover,
#ds-arrow-right:hover {
-webkit-box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
}
/*Style navigation arrows on click*/
#ds-arrow-left:active,
#ds-arrow-right:active {
-webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
}
/*Make sure the modules span their entire container*/
.ds-carousel-module .column {
float: left;
width: 100% !important;
margin-right: 0 !important;
}
/*Set the module width*/
.ds-carousel-module {
width: 20vw; /*Change this value to increase or decrease the module displayed per page*/
padding: 0 30px;
float: left;
position: relative;
margin-bottom: 0 !important;
}
/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
/*Show 3 modules per page on tablets*/
.ds-carousel-module {
width: 33.33vw;
}
/*Align the navigation on smaller screens*/
#ds-arrow-row .et_pb_column {
width: 50% !important;
}
}
@media all and (max-width: 479px) {
/*Show 1 module per page on mobiles*/
.ds-carousel-module {
width: 100vw;
}
}필요에 맞게 CSS 편집
캐러셀에서 사용하는 모듈의 수에 따라 CSS 선언 중 일부를 편집해야 할 수도 있습니다.
이제 약간의 수학을 위해!
이 선언은 모듈을 포함하는 행의 너비를 설정합니다.
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 1000vw;
max-width: 1000vw;
}모듈을 서로 옆에 띄우고 일부는 보이는 영역 외부에 배치하려면 행의 너비를 늘려야 합니다.
페이지당 5개씩 총 15개의 모듈을 표시하는 경우 3페이지가 됩니다. 따라서 행의 가시적 너비는 다음과 같아야 합니다.
(15 / 5) x 100 = 300.
따라서 1000vw 값을 최소 300vw로 변경해야 합니다. (자바스크립트가 빈 페이지를 추가로 표시하지 않도록 처리하므로 더 큰 수를 삽입해도 문제가 되지 않습니다.) 따라서 조정된 CSS는 다음과 같습니다.
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 300vw;
max-width: 300vw;
}미디어 쿼리에서는 약간 다릅니다. CSS는 너비가 1024px 이하인 화면에서는 페이지당 3개의 이미지를 표시하고 너비가 479px 이하인 화면에서는 페이지당 1개의 이미지를 표시하도록 구성되어 있으므로 다음을 반영하도록 수학을 조정해야 합니다.
(15 / 3) x 100 = 500(정제용)
(15 / 1) x 100 = 1500(모바일용)
조정된 CSS는 다음과 같습니다.
@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
.ds-carousel-section .ds-carousel-row {
max-width: 500vw !important;
}
}
@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
.ds-carousel-section .ds-carousel-row {
max-width: 1500vw !important;
}
}단순성을 위해 사용 중인 총 모듈 수보다 큰 너비로 이러한 값을 모두 수정할 수 있습니다. 따라서 앞서 언급한 예에서 그 값은 1500vw 이상이 될 것입니다.
페이지당 표시되는 모듈 수를 변경할 수도 있습니다. 이 CSS 선언에서 조정할 수 있습니다.
/*Set the module width*/
.ds-carousel-module {
width: 20vw; /*Change this value to increase or decrease the modules displayed per page*/
padding: 0 30px;
float: left;
position: relative;
margin-bottom: 0 !important;
}
너비 값 20vw는 페이지당 5개의 이미지를 표시하며 100의 백분율일 뿐입니다. 따라서 25vw는 페이지당 4개의 이미지를 표시하고 16.66vw는 페이지당 6개의 이미지를 표시하는 식입니다.
미디어 쿼리에 대해서도 동일한 작업을 수행할 수 있습니다.
/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
/*Show 3 modules per page on tablets*/
.ds-carousel-module {
width: 33.33vw;
}
/*Align the navigation on smaller screens*/
#ds-arrow-row .et_pb_column {
width: 50% !important;
}
}
@media all and (max-width: 479px) {
/*Show 1 module per page on mobiles*/
.ds-carousel-module {
width: 100vw;
}
}페이지당 표시되는 이미지 수를 변경하면 앞서 설명한 행 너비 값도 조정해야 할 수 있습니다.
지금 페이지를 다시 확인하면 모든 것이 멋지게 스타일이 지정되고 회전 목마처럼 보일 것입니다. 하지만 작동하려면 일부 JavaScript를 추가해야 합니다.
자바스크립트 추가
다음 코드를 복사하여 Divi > 테마 옵션 > 통합 > 블로그의 < head >에 코드 추가에 붙여넣고 반드시 저장하세요.
<script type="text/javascript">
(function ($) {
var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;
function mn_next_slide(item) {
mn_end_index = ( item.length / mn_visible ) - 1; //End index
if (mn_index < mn_end_index ) {
mn_index++;
item.animate({'left':'-=100vw'}, 1000);
}
}
function mn_previous_slide(item) {
if (mn_index > 0) {
mn_index--;
item.animate({'left':'+=100vw'}, 1000);
}
}
function mn_first_slide(item) {
if (mn_index > 0) {
var move_vw = (100 * mn_index);
item.animate({'left':'+='+move_vw+'vw'}, 1000);
mn_index = 0;
}
}
function mn_set_visible() {
if ($(window).width() < 480) {
mn_visible = 1;
} else if ($(window).width() < 1025) {
mn_visible = 3;
}
}
function mn_carousel_init() {
mn_set_visible();
var item = $('.ds-carousel-module');
$('#ds-arrow-right').click(function() {
mn_next_slide(item);
});
$('#ds-arrow-left').click(function() {
mn_previous_slide(item);
});
$(window).resize(function() {
mn_set_visible();
mn_first_slide(item);
});
}
$(document).ready(function() {
mn_carousel_init();
});
})(jQuery)
</script>이 코드는 버튼에 기능을 추가하고 클릭 시 행을 왼쪽과 오른쪽으로 이동하여 모듈을 표시합니다.
편집할 수 있는 몇 가지 영역이 있습니다.
var mn_index = 0; //Starting index var mn_visible = 5; var mn_end_index = 0;
mn_visible = 5; 변수는 데스크탑에서 페이지당 표시되는 모듈 수에 해당합니다. 따라서 앞서 언급한 대로 CSS에서 이것을 변경했다면 이 값도 변경하고 싶을 것입니다.
마찬가지로 이 기능은 태블릿과 모바일에 표시되는 이미지의 수를 조정합니다. 따라서 CSS에서 이것을 변경했다면 여기에서도 mn_visible 값을 조정하십시오.
function mn_set_visible() {
if ($(window).width() < 480) {
mn_visible = 1;
} else if ($(window).width() < 1025) {
mn_visible = 3;
}
}마지막으로 회전 목마가 움직이는 속도가 있습니다. 여기에서는 1000으로 설정됩니다. 이것은 밀리초 단위의 속도입니다: 1000밀리초 = 1초.
이 값을 조정하여 애니메이션 속도를 높이거나 낮출 수 있습니다.
function mn_next_slide(item) {
mn_end_index = ( item.length / mn_visible ) - 1; //End index
if (mn_index < mn_end_index ) {
mn_index++;
item.animate({'left':'-=100vw'}, 1000);
}
}
function mn_previous_slide(item) {
if (mn_index > 0) {
mn_index--;
item.animate({'left':'+=100vw'}, 1000);
}
}
function mn_first_slide(item) {
if (mn_index > 0) {
var move_vw = (100 * mn_index);
item.animate({'left':'+='+move_vw+'vw'}, 1000);
mn_index = 0;
}
}그게 다야! 이제 페이지를 보면 클릭할 수 있는 이미지 모듈 캐러셀이 있어야 합니다.
내가 말했듯이 거의 모든 표준 Divi 빌더 모듈에서 이 방법을 사용할 수 있지만 블로그 모듈과 같은 일종의 피드를 표시하도록 설계된 모듈로 설정을 조정해야 할 수도 있습니다.
블로그 모듈이 게시물을 가져와 여러 열에 표시하기 때문에(그리드 기능을 사용할 때) 모듈 설정과 약간의 추가 CSS를 조정해야 합니다.
블로그 모듈을 사용한 캐러셀
섹션과 행을 설정하려면 동일한 단계를 따르십시오.
이미지 모듈을 추가하는 대신 블로그 모듈을 선택하고 모듈 설정의 고급 탭에서 ds-carousel-module 클래스를 추가합니다.
그런 다음 디자인 탭의 레이아웃 드롭다운에서 그리드를 선택합니다.
원하는 경우 전체 너비로 둘 수 있지만 그리드 옵션은 캐러셀 레이아웃에 더 잘 맞는 스타일을 자동으로 추가합니다.
이제 콘텐츠 탭에서 일부 설정을 조정해야 합니다.
이 첫 번째 모듈의 경우 Posts Number를 1로 설정하고 Offset Number를 0으로 설정해야 합니다.
나머지 설정을 조정하는 방법과 표시할 콘텐츠는 전적으로 귀하에게 달려 있습니다. 그런 다음 저장하고 종료합니다.
이전과 마찬가지로 Divi의 복제 기능을 사용하여 필요한 만큼 모듈을 복제하십시오.
필요한 수의 블로그 모듈이 있으면 각 블로그 모듈이 피드의 다음 게시물을 표시하도록 각 모듈을 열고 오프셋 수를 1씩 늘립니다.
따라서 설정은 다음과 같습니다.
첫 번째 = 오프셋 번호: 0
두 번째 = 오프셋 번호: 1
세 번째 = 오프셋 번호: 2
4번째 = 오프셋 번호: 3
등.
약간의 추가 CSS
Grid 형식을 사용할 때 블로그 모듈이 열에 표시되므로 더 작은 화면에서 Divi의 열 설정을 재정의하려면 이 추가 미디어 쿼리를 CSS에 추가해야 합니다.
@media all and (max-width: 980px) {
/*Set post to fullwidth on smaller screens*/
.ds-carousel-section .et_pb_blog_grid .column.size-1of2 {
width: 100% !important;
margin: 0 !important;
}
}전체 너비 모드에서 블로그 모듈을 사용하기로 결정했다면 이것을 추가할 필요가 없습니다.
결과
이제 페이지를 확인하고 멋진 새 블로그 회전 목마를 확인하십시오.
마지막 생각들
이 캐러셀 효과를 사용하여 페이지 길이를 늘리지 않고도 더 많은 콘텐츠를 표시할 수 있는 방법은 많습니다.
사이트 디자인, 고객 평가, 직원 전기, 비디오, 팟캐스트 또는 매장 제품의 쇼케이스를 표시할 수 있습니다.
이 튜토리얼을 사용하여 Divi 모듈의 클릭 가능한 회전 목마를 만드는 방법을 듣고 싶습니다. 아래 섹션에 의견을 남겨주세요!
추천 이미지 작성자: aunaauna / Shutterstock.com