다른 중단점에서 Divi 갤러리 모듈의 열 수 변경

게시 됨: 2019-02-23

Divi 갤러리 모듈을 사용하면 반응형 그리드 레이아웃으로 아름다운 이미지 갤러리를 만들 수 있습니다. 갤러리는 이미지 크기를 조정하고 다양한 브라우저 너비에 따라 그리드의 열 수를 조정하기 때문에 반응형으로 간주됩니다.

기본적으로 갤러리 모듈에는 그리드의 열 수를 조정하는 세 개의 중단점(특정 브라우저 너비에서 스타일이 변경되는 지점)이 있습니다. 데스크탑에서는 이미지 갤러리를 4열로 표시한 다음 태블릿에서는 3열, 소형 태블릿(및 대형 휴대폰)에서는 2열, 휴대폰에서는 1열로 나눕니다.

이 기본 설정은 일반적으로 대부분의 경우에 작동하지만 때로는 특정 브라우저 너비에 표시되는 열 수를 더 많이 제어해야 할 수도 있습니다. 그렇기 때문에 이 튜토리얼에서는 데스크탑뿐만 아니라 3개의 추가 브라우저 중단점에 대해 Divi 갤러리 모듈에 표시되는 열 수를 완료하는 방법을 보여 드리겠습니다.

엿보기

다음은 이 튜토리얼에서 구축할 내용을 살짝 엿본 것입니다. 브라우저 너비에 따라 이미지 갤러리의 열 수가 다릅니다.

디자인 요소 준비

YouTube 채널 구독

이 튜토리얼에서는 Divi 테마가 설치되어 활성화되어 있어야 합니다. 또한 이미지 갤러리를 구축하는 데 사용할 미디어 라이브러리에 12개의 이미지를 추가해야 합니다. 그리드 레이아웃을 사용하는 Divi 갤러리 모듈의 경우 이미지가 대부분의 데스크탑에서 화면을 잘 채울 수 있도록 라이트박스 디스플레이에서 이미지를 열 계획이라면 이미지 크기는 약 1500px x 800px이어야 합니다.

Divi 갤러리 모듈에 대한 사용자 지정 간격 구현

새 페이지 설정

우선 새 페이지를 만들고 페이지에 제목을 지정하고 Divi Builder를 배포하십시오. "처음부터 빌드" 옵션을 선택한 다음 페이지를 게시합니다. 그런 다음 클릭하여 프런트 엔드에서 빌드합니다.

이미지 갤러리 만들기

Divi Builder가 배포된 상태에서 한 열 행이 있는 새 일반 섹션을 만들고 행에 Divi 갤러리 모듈을 추가합니다.

Divi는 다음과 같은 그리드 디스플레이에서 미디어 갤러리의 일부 이미지로 갤러리 모듈을 채웁니다.

갤러리 모듈 설정에서 회색 더하기 아이콘을 클릭하여 갤러리에 12개의 이미지를 추가합니다.

그런 다음 다음과 같이 Divi 갤러리 모듈 설정을 업데이트합니다.

이미지 번호: 12
제목 및 캡션 표시: 아니요
페이지 매김 표시: 아니요

거터 너비 없이 전체 너비 갤러리를 만들기 위해 행 설정 조정

새 열 구조가 작동하려면 갤러리에서 이미지 사이에 존재하는 기본 간격/여백을 제거해야 합니다. 이렇게 하려면 여백 너비를 1로 설정하기만 하면 됩니다. 또한 옵션으로 이미지 갤러리가 브라우저의 전체 너비에 걸쳐 있도록 하기 위해 행을 전체 너비로 만들 수 있습니다. 이렇게 하려면 행 설정을 열고 다음을 업데이트하십시오.

이 행을 전체 너비로 만들기: 예
거터 폭: 1

갤러리의 이미지 사이에 간격을 추가하려면 거터 너비를 1로 유지해야 하므로 이 방법을 사용하는 것이 좋습니다.

갤러리가 기본적으로 다양한 브라우저 너비에 응답하는 방식

앞서 언급했듯이 기본적으로 Divi 갤러리 모듈은 데스크탑에서 4개의 열에 이미지 갤러리를 표시한 다음 태블릿에서 3개의 열, 작은 태블릿(및 대형 휴대폰)에서 2개의 열, 휴대폰에서 1개의 열로 나뉩니다.

그러나 몇 가지 사용자 정의 CSS 스니펫을 사용하여 특정 중단점에 사용자 정의 열 수를 포함하도록 이를 변경할 것입니다.

모든 브라우저 크기에 대해 특정 수의 열 설정

모든 브라우저 크기에서 열 수가 동일하게 유지되도록 갤러리에 표시되는 열 수를 변경하려는 경우 간단한 방법이 있습니다. 갤러리를 한 열, 두 열 또는 세 열에만 표시하려는 경우에 유용할 수 있습니다. 그렇게 하면 열 번호를 동일하게 유지하면서 데스크탑에서는 정말 큰 이미지를, 모바일에서는 더 작은 이미지를 가질 수 있습니다. 이미지가 전화 디스플레이에 너무 작기 때문에 열이 4개 이상 있으면 작동하지 않을 수 있습니다.

모든 브라우저 크기에 세 개의 열을 표시하려고 한다고 가정해 보겠습니다. 이렇게 하려면 Divi 갤러리 모듈 설정을 열고 갤러리 항목에 다음 사용자 정의 CSS를 추가합니다.

width: 33.33% !important;
margin: 0 !important;
clear: none !important;

이제 갤러리는 모든 브라우저 크기에서 3열 구조를 유지합니다.

모든 브라우저 크기에 대해 2열 레이아웃을 원하는 경우 너비 속성 값을 50%로 변경하기만 하면 됩니다.

1열 레이아웃을 원하면 너비를 100%로 업데이트하기만 하면 됩니다.

그게 다야

그러나 특정 중단점에서 열 수를 더 많이 제어하려면 계속 읽으십시오.

특정 중단점의 열 수 변경

브라우저가 특정 중단점에 도달할 때 표시되는 열 수를 완전히 제어하려면 특정 브라우저 너비를 대상으로 하는 미디어 쿼리와 함께 CSS의 몇 가지 스니펫을 사용할 수 있습니다.

Divi 갤러리 모듈에 CSS 클래스 추가

사용자 정의 CSS를 추가하기 전에 먼저 갤러리 모듈에 사용자 정의 CSS 클래스를 제공해야 CSS에서 특정 클래스를 참조할 수 있습니다. 이렇게 하면 CSS가 이 특정 갤러리 모듈에만 적용됩니다. 이렇게 하려면 갤러리 모듈 설정을 열고 고급 탭 아래에 다음 CSS 클래스를 추가합니다.

CSS 클래스: 열 너비

이 문서의 이전 섹션에서 갤러리 항목에 추가한 사용자 지정 CSS를 추가했다면 빼는 것을 잊지 마세요.

그런 다음 설정을 저장합니다.

페이지 설정에 사용자 정의 CSS 추가

CSS 클래스가 있으면 사용자 정의 CSS를 추가할 준비가 된 것입니다. 페이지 하단의 페이지 설정 표시줄에서 톱니바퀴 아이콘을 클릭하여 페이지 설정을 엽니다(또는 키보드 단축키 "o"를 사용할 수 있음).

그런 다음 고급 탭에서 다음 사용자 정의 CSS를 추가하십시오.

/** Desktop **/
@media (min-width: 981px){
.col-width .et_pb_gallery_item {
width: 16.66% !important; /*six columns*/
clear: none !important;
}
}

/** Tablet **/
@media (max-width: 980px){
.col-width .et_pb_gallery_item {
width: 25% !important; /*four columns*/
clear: none !important;
}
}

/** Small Tablet and Large Phone **/
@media (max-width: 767px){
.col-width .et_pb_gallery_item {
width: 33.33% !important; /*three columns*/
clear: none !important;
}
}

/** Phone **/
@media (max-width: 479px){
.col-width .et_pb_gallery_item {
width: 50% !important; /*two columns*/
clear: none !important;
}
}