DIVI 블로그 페이지를 다중 열 그리드로 표시하시겠습니까?
Divi의 블로그 모듈은 블로그 게시물을 전체 너비 또는 그리드 레이아웃으로 표시할 수 있습니다. 그리드 레이아웃을 선택하면 가질 수 있는 최대 열 수는 XNUMX개입니다.
이 튜토리얼에서는 몇 가지 CSS 스니펫을 사용하여 블로그 아름다운 다중 열 그리드 레이아웃으로 바뀔 것입니다. 또한 열은 모든 브라우저 크기에서 원활하고 반응성이 뛰어나므로 미디어 쿼리나 반응형 설정 업데이트에 대해 걱정할 필요가 없습니다.
당신은 또한 우리의 기사를 참조하여 알 수 있습니다 DIVI 블로그 모듈로 블로그 페이지를 만드는 방법.
측량
이 튜토리얼을 시작하기 전에 먼저 달성하고자 하는 결과를 살펴보겠습니다.
지금 DIVI를 다운로드하세요!!!
전체 화면 레이아웃으로 블로그 모듈 구성
DIVI의 블로그 모듈을 사용하여 귀하의 모든 페이지에 블로그를 추가할 수 있습니다. 사이트 웹. Divi에서 블로그 페이지를 쉽게 만들 수 있습니다. Divi Builder를 사용하여 페이지에 블로그 모듈을 추가하기만 하면 됩니다.
이 튜토리얼에서는 다음 중 하나에서 미리 만들어진 블로그 레이아웃을 사용할 것입니다. 무료 레이아웃 팩 기본 스타일의 블로그 모듈이 이미 포함된 DIVI의
미리 만들어진 블로그 레이아웃을 로드하려면:
- WordPress 대시보드에서 새 페이지 만들기
- 관련 이름을 지정하고 'Divi Builder 사용'을 클릭하십시오.
- "레이아웃 선택"을 클릭하십시오.
- 검색창에 '패션 디자이너'를 입력하고 '패션 디자이너 블로그 페이지' 레이아웃을 선택하세요.
- 블로그 레이아웃을 선택한 다음 "레이아웃 선택"을 클릭합니다.
레이아웃이 로드되면 블로그 게시물을 표시하는 데 사용되는 블로그 모듈을 찾아 설정을 엽니다.
게시물 수 설정
블로그 설정에서 내용 게시물 수를 10개로 제한합니다. (우리 그리드에는 결국 XNUMX개의 블로그 게시물이 XNUMX줄로 포함되기 때문에 이는 주로 미적인 이유 때문입니다.)
- 위치 수 : 10
전체 화면 레이아웃 선택
CSS 그리드를 사용하여 열에 블로그를 배치할 것이므로 블로그 모듈의 레이아웃이 '전체 화면'('그리드' 아님). 이렇게 하면 블로그 게시물이 일반 페이지 순서대로 세로로 쌓이게 됩니다.
블로그 모듈의 레이아웃을 변경하려면 모듈 설정을 열고 스타일 탭에서 드롭다운 메뉴를 엽니다. 템플릿을 선택하고 전체 화면을 선택합니다. .
이제 각 블로그 게시물은 열(또는 상위 컨테이너)의 전체 너비에 걸쳐 있습니다.
블로그 게시물에 테두리를 추가해 보겠습니다. 다음과 같이 테두리 옵션을 업데이트합니다.
- 테두리 너비: 1px
- 테두리 색상: rgba (150,104,70,0.35)
블로그 모듈에 사용자 정의 CSS 클래스 추가
CSS로 이 특정 블로그 모듈(다른 모듈이 아님)을 효과적으로 대상으로 지정하려면 모듈에 사용자 정의 CSS 클래스를 제공해야 합니다. 고급 탭에서 다음 CSS 클래스를 추가합니다.
- CSS 클래스: et-blog-css-grid
CSS 그리드로 다중 열 레이아웃 만들기
이제 블로그 모듈이 전체 화면 레이아웃으로 설정되었으므로 사용자 정의 CSS를 추가할 준비가 되었습니다.
블로그 모듈 아래에 코드 모듈을 삽입하여 페이지에 CSS를 추가할 것입니다.
코드 입력 상자에서 페이지에 추가된 CSS 코드를 래핑하는 데 필요한 스타일 태그를 추가합니다.
스타일 태그 안에 다음 CSS 코드 스니펫을 붙여넣습니다.
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
CSS의 첫 번째 줄은 내용 (또는 모듈)을 그리드 형태로 표시합니다.
display: grid;CSS의 두 번째 줄은 그리드 열 모델을 정의합니다.
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));세 번째 행은 그리드 항목 사이의 간격을 결정합니다.
gap : 20px ;이 시점에서 XNUMX열 반응형 그리드를 사용할 준비가 되었습니다. 실제로 블로그 게시물에 페이지 매김이나 테두리를 사용하고 싶지 않다면 여기에서 멈출 수 있습니다.
지금까지의 결과입니다.
그리드 항목 사용자 지정
그런 다음 그리드 요소를 대상으로 하는 몇 줄의 CSS를 추가하여 각 행의 상단에 정렬되고 약간의 패딩이 있도록 할 수 있습니다.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
그리드 페이지 매김 제거
현재 블로그 모듈에서 페이지 매김이 활성화되어 있으면 CSS 그리드의 마지막 그리드 요소로 처리됩니다. 그리드에서 페이지 매김을 완전히 제거하기 위해 절대 위치를 지정하고 블로그 모듈 바로 아래에 배치할 수 있습니다. 이렇게 하려면 다음 CSS를 추가합니다.
.et-blog-css-grid > div > div {
width: 100%;
position: absolute;
bottom: 0;
transform: translate(0%, 150%);
}
지금까지의 결과를 보시죠!
팁: 모든 추천 이미지(또는 축소판)의 크기 조정
이 시점에서 각 블로그 게시물에 표시되는 이미지의 높이가 일치하지 않는 것을 알 수 있습니다. 모두 같은 높이를 원하면 추가 CSS를 사용하여 그렇게 할 수도 있습니다.
.et-blog-css-grid .entry-featured-image-url {
padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
object-fit: cover;
}
56,25%의 상단 내부 여백으로 모든 이미지에 대해 16:9의 종횡비를 얻어야 합니다.
이미지 컨테이너의 패딩을 자유롭게 조정하여 이미지에 대해 원하는 종횡비를 얻으십시오.
최종 결과
다음은 새로운 열과 그리드가 있는 블로그 모듈의 최종 미리보기입니다. 그리고 우리가 볼 수 있듯이 그리드는 완전히 반응합니다.
지금 DIVI를 다운로드하세요!!!
결론
완료되었습니다! 이 자습서에서 블로그 게시물을 열로 정렬하는 방법을 보여주었습니다.
전체 Divi 블로그 모듈을 유동적인 XNUMX열 레이아웃으로 재구성할 수 있었습니다. 이것이 시간을 절약하고 아름다운 블로그 페이지를 만들 수 있는 더 많은 옵션을 제공하기를 바랍니다. 상담도 가능합니다 Divi의 블로그 모듈로 블로그 페이지를 만드는 방법
또한보십시오 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
