Divi 블로그 모듈에는 블로그 게시물에 유용한 그리드 형태의 레이아웃 옵션이 있습니다. 그리드 템플릿은 블로그 게시물을 상자 나 맵으로 구성하여 표준보기와 비교하여 화면에서 항목의 가시성을 단순화합니다.

블로그 모듈 설정을 사용하면 네트워크의 전체 디자인을 사용자 지정할 수 있습니다. 모든 카드의 배경색, 글꼴, 여백 등을 쉽게 만들 수 있습니다. 그러나 스타일 옵션은 전체적으로 그리드 디자인으로 제한되어있어 어렵습니다. 그리드 내의 맵에 여러 또는 다른 디자인을 적용합니다.

오늘은 그리드를 구성하는 카드에 두 가지 이상의 스타일을 대상으로 지정하고 적용하는 방법을 보여 드리겠습니다. 블로그 사용자 정의 CSS를 사용합니다. 서로 다른 스타일을 카드에 적용하여 체커보드 효과를 만드는 방법을 보여 드리겠습니다. 또한 각 카드의 스타일을 행별로 다르게 지정하는 방법과 개별 카드를 대상으로 지정하는 방법도 보여 드리겠습니다.

맞춤설정 방법에 대한 4가지 예는 다음과 같습니다. 블로그, 사용할 수 있는 일부 호버 효과를 포함합니다. 이 튜토리얼이 끝나면 멋진 디자인을 만들 수 있을 것입니다. 블로그.

Divi 테마에 대한 다른 튜토리얼

• 레스토랑 이용 디비 테마 5 웹 사이트
• WooCommerce 제품 디비에 텍스트를 추가하는 방법
• Divi에서 페이지 간 메뉴 색상을 변경하는 방법
• Divi에 대해 모르는 기능
• Divi에서 슬라이더를 만드는 방법
• Divi에서 사용자 역할을 편집하는 방법

시작하자.

블로그에 대한 구성 레이아웃 격자

블로그 모듈 카드 디자인을 시작하기 전에 상자에 이미지로 생성 된 12 개 이상의 기사가 있는지 확인하십시오.

메시지가 작성되면 새 페이지를 작성하십시오. 새 페이지에서 표준 부분의 전각 열에 블로그 모듈을 배포하십시오.

블로그 모듈의 설정을 편집하려면 클릭하십시오. 일반 설정에서 다음 설정을 변경하십시오.

• 레이아웃 : 그리드 (그리드)
• 기사 수 : 12
• 추천 이미지 표시 : 예
• 버튼 자세히보기 : ON

Custom CSS에서 CSS ID 텍스트 상자에 "gridcard"를 입력합니다. 이 블로그 모듈 만 개인화하는 방법이 될 것입니다.

변경 사항을 저장

블로그의 "그리드"레이아웃을 이해하는 방법

이제이 곳에서 블로그 그리드를 가지고, 당신은 사용자 정의 할 블로그 모듈의지도를 찾을 수 있도록 그리드의 레이아웃의 구조를 이해하는 것이 중요합니다.

블로그 그리드는 3 열 레이아웃으로 구성됩니다. 다음은 12 블로그 기사가 세 개의 열로 나누어 져있는 블로그 그리드를 보여줍니다.

블로그 티켓 카드는 각 열에서 위에서 아래로 주문됩니다. 따라서 숫자를 지정하려면 위에서 아래로 각 길이에서 1에서 4까지를 계산해야합니다.

각 열 아래에있는 각 블로그 카드의 숫자 순서를 알고 있으므로 다음과 같이 각 카드를 홀수 또는 짝수로 식별 할 수도 있습니다.

디자인 게이트 예

예 n ° 1 : "체크 무늬"그리드 디자인

이 첫 번째 예에서는 첫 번째 열의 블로그 모듈 (카드 1 및 3)에있는 모든 홀수 카드를 대상으로하여 어두운 회색 배경색을 제공합니다. 이렇게하려면 "Divi → 테마 옵션"으로 이동하여 사용자 정의 CSS 텍스트 상자에 다음 CSS를 추가하십시오.

#gridcard .column : 첫 번째 하위 문서 : n 번째 자식 (홀수) {배경 : #333; }

다음은이 코드가하는 일의 고장이다 :

#gridcard = 전체 블로그 모듈의 ID

.column : first-child = 블로그 모듈에서 첫 번째 열을 선택하십시오.

게시물 : n 번째 자식 (홀수) = 열의 모든 홀수 항목 (또는 카드)을 선택

이를 모두 합치면 블로그 모듈의 첫 번째 열에서 ID가 "그리드 카드"인 홀수 카드가 선택됩니다.

그런 다음 CSS를 추가하여 어두운 배경에 갈 것이다 흰색 텍스트를 추가 :

#gridcard .column : 첫 번째 하위 문서 : n 번째 자식 (홀수) .entry 타이틀, #gridcard .column : 첫 번째 하위 문서 : n 번째 자식 (홀수) - 메타 .POST, #gridcard .column : 제 아이 제 : n 번째 자식 (홀수) .post 메타-A, #gridcard .column : 첫 번째 하위 문서 : n 번째 자식 (홀수) .POST 콘텐츠의 P {색상 : #FFFFFF; }

이 코드는 블로그 모듈 카드의 모든 텍스트 요소(제목, 게시물 메타, 게시물 메타 링크 및 내용 기사의) 흰색을 제공합니다.

결과는 다음과 같습니다.

바둑판 레이아웃을 만드는 다음 단계는 세 번째 열의 홀수 카드를 대상으로 지정하고 첫 번째 열에서했던 것처럼 어두운 회색 배경과 흰색 텍스트를 적용하는 것입니다. 사용자 정의 CSS 텍스트 상자에 다음 CSS를 추가하십시오.

#gridcard .column : 마지막 자식 문서 : n 번째 자식 (홀수) {배경 : # 333; } #gridcard .column : last-child article : nth-child (odd) .entry-title, #gridcard .column : last-child article : nth-child (odd) .post-meta, #gridcard .column : last- 자식 기사 : nth-child (홀수) .post-meta a, #gridcard .column : 마지막 자식 기사 : nth-child (홀수) .post-content p {color : #ffffff; }

이 코드는 "마지막"열 (이 경우 세 번째 열은 마지막 열입니다) 별명 요소 "last-child"와 함께.

두 번째 열 (또는 중간), 짝수 카드를 목표로하여 바둑판 효과를 완성하십시오. 이렇게하려면 다음 CSS를 추가해야합니다.

#gridcard .column : nth-child (2) article : nth-child (짝수) {background : # 333; } #gridcard .column : nth-child (2) article : nth-child (even) .entry-title, #gridcard .column : nth-child (2) article : nth-child (even) .post-meta, # gridcard .column : nth-child (2) article : nth-child (even) .post-meta a, #gridcard .column : nth-child (2) article : nth-child (even) .post-content p {color : #fff; }

이제 블로그 모듈 카드의 바둑판 레이아웃을 볼 수있는 블로그 페이지를 확인 이동합니다.

예제 # 2 : 체크 무늬 레이아웃으로 호버 효과 추가

블로그 모듈 카드를 타겟팅하는 방법을 알고 나면 카드 내의 모든 요소를 ​​창의적으로 변경할 수 있습니다.

이 예에서는 바둑판 레이아웃을 사용하고 이번에는지도 위로 마우스를 가져갈 때 추천 이미지를 진한 회색지도에서 흑백으로 변경하겠습니다. 그리고 카드 위로 마우스를 가져갈 때 흰색 카드의 첫 페이지 이미지를 더 밝게 만들 것입니다. 이렇게하려면 사용자 정의 CSS 영역에 다음 CSS를 추가합니다 (새 코드와 호환되지 않도록 다른 코드를 비활성화하거나 잘라내십시오).

#gridcard .column : 첫 번째 하위 문서 : nth-child (홀수), #gridcard .column : 마지막 하위 문서 : nth-child (홀수), #gridcard .column : nth-child (2) 문서 : nth-child (짝수) {배경 : # 333; } #gridcard .column : 첫 번째 하위 문서 : nth-child (홀수) .entry-title, #gridcard .column : 첫 번째 하위 문서 : nth-child (odd) .post-meta, #gridcard .column : first- child article : nth-child (odd) .post-meta a, #gridcard .column : first-child article : nth-child (odd) .post-content p, #gridcard .column : last-child article : nth-child (홀수) .entry-title, #gridcard .column : last-child article : nth-child (odd) .post-meta, #gridcard .column : last-child article : nth-child (odd) .post-meta a , #gridcard .column : 마지막 하위 문서 : nth-child (홀수) .post-content p, #gridcard .column : nth-child (2) article : nth-child (even) .entry-title, #gridcard. column : nth-child (2) article : nth-child (even) .post-meta, #gridcard .column : nth-child (2) article : nth-child (even) .post-meta a, #gridcard .column : nth-child (2) 기사 : nth-child (짝수) .post-content p {color : #fff; } #gridcard .column : nth-child (2) article : nth-child (even) : hover img, #gridcard .column : first-child article : nth-child (odd) : hover img, #gridcard .column : last -child article : nth-child (odd) : hover img {-webkit-filter : grayscale (1); 필터 : 그레이 스케일 (1); } #gridcard .column : nth-child (2) article : nth-child (odd) : hover img, #gridcard .column : first-child article : nth-child (even) : hover img, #gridcard .column : last -child article : nth-child (even) : hover img {-webkit-filter : 밝기 (1.5); 필터 : 밝기 (1.5); }

또한 카드에 반전 효과를 추가하여 흰색 카드 위로 마우스를 가져 가면 진한 회색으로 변하고 진한 회색 카드 위로 가져 가면 흰색으로 변하도록 할 수 있습니다.

다음 CSS 이상 더 CSS를 추가합니다

#gridcard .column article, #gridcard .column article img {-webkit-transition : all 0.8s; -moz-transition : 모두 0.8 초; 전환 : 모두 0.8 초; } #gridcard .column : 첫 번째 자식 문서 : nth-child (홀수) : hover, #gridcard .column : 마지막 자식 문서 : nth-child (홀수) : hover, #gridcard .column : nth-child (2) 기사 : n 번째 자녀 (짝수) : hover {background : #fff; } #gridcard .column : 첫 번째 하위 문서 : nth-child (홀수) : hover .entry-title, #gridcard .column : 첫 번째 하위 문서 : nth-child (홀수) : hover .post-meta, #gridcard. 열 : 첫 번째 하위 문서 : n 번째 하위 항목 (홀수) : hover .post-meta a, #gridcard .column : 첫 번째 하위 문서 : n 번째 하위 항목 (홀수) : hover .post-content p, #gridcard .column : 마지막 자식 문서 : nth-child (홀수) : hover .entry-title, #gridcard .column : 마지막 자식 문서 : nth-child (odd) : hover .post-meta, #gridcard .column : 마지막 자식 문서 : nth-child (홀수) : hover .post-meta a, #gridcard .column : last-child article : nth-child (odd) : hover .post-content p, #gridcard .column : nth-child (2) article : nth-child (even) : hover .entry-title, #gridcard .column : nth-child (2) article : nth-child (even) : hover .post-meta, #gridcard .column : nth-child ( 2) 기사 : nth-child (짝수) : hover .post-meta a, #gridcard .column : nth-child (2) article : nth-child (even) : hover .post-content p {color : # 333; } #gridcard .column : 첫 번째 자식 문서 : n 번째 자식 (짝수) : hover, #gridcard .column : 마지막 자식 문서 : n 번째 자식 (짝수) : hover, #gridcard .column : n 번째 자식 (2) 기사 : n 번째 자녀 (홀수) : hover {background : # 333; } #gridcard .column : 첫 번째 하위 문서 : nth-child (even) : hover .entry-title, #gridcard .column : 첫 번째 하위 문서 : nth-child (even) : hover .post-meta, #gridcard. 열 : 첫 번째 하위 문서 : n 번째 하위 항목 (짝수) : hover .post-meta a, #gridcard .column : 첫 번째 하위 항목 문서 : n 번째 하위 항목 (짝수) : hover .post-content p, #gridcard .column : 마지막 자식 문서 : nth-child (짝수) : hover .entry-title, #gridcard .column : 마지막 자식 문서 : nth-child (even) : hover .post-meta, #gridcard .column : 마지막 자식 문서 : nth-child (even) : hover .post-meta a, #gridcard .column : last-child article : nth-child (even) : hover .post-content p, #gridcard .column : nth-child (2) article : nth-child (홀수) : hover .entry-title, #gridcard .column : nth-child (2) article : nth-child (odd) : hover .post-meta, #gridcard .column : nth-child ( 2) 기사 : nth-child (홀수) : hover .post-meta a, #gridcard .column : nth-child (2) article : nth-child (odd) : hover .post-content p {color : #fff; }

이제 블로그에 미치는 영향을 확인하십시오.

예 # 3은 : 선으로 맵을 사용자 정의

세 번째 예에서는 열이 아닌 다른 모든 행의 카드에 동일한 어두운 배경과 흰색 텍스트를 적용 할 것입니다. 이렇게하려면 각 열의 모든 짝수 카드를 타겟팅해야합니다. 테마의 "Divi → 옵션"으로 이동하여이 튜토리얼 시작 이후 추가 한 이전 CSS 코드를 비활성화하거나 제거하십시오. 그런 다음 다음 CSS를 추가합니다.

# 그리드 카드 기사 : nth-child (짝수) {background-color : # 333; } #gridcard article : nth-child (even) .entry-title, #gridcard article : nth-child (even) .post-meta, #gridcard article : nth-child (even) .post-meta a, #gridcard article : nth-child (짝수) .post-content p {color : #fff; }

결과는 다음과 같습니다.

예 # 4 : 특정 그리드 맵 디자인

일부는 특정 카드를 선택하고 싶을 수 있습니다. 이렇게하려면 각 카드에 자동으로 할당되는 고유 항목 ID를 찾아야합니다. 이 예에서는 Chrome 브라우저를 사용하고 있습니다.

블로그 모듈이 표시된 페이지로 이동하여 카드 중 하나를 마우스 오른쪽 버튼으로 클릭합니다. 표시되는 옵션 상자에서 "검사"를 선택합니다 (일부 브라우저에는 "항목 검사"또는 이와 유사한 항목이있을 수 있습니다. 이렇게하면 개발자 도구 창이 배포되어 사용자의 HTML과 CSS를 모두 표시합니다.) 기사를 감싸는 기사 태그를 찾아 여기에 할당 된 기사 ID를 적어 둡니다. 이것은 개별 카드를 타겟팅하는 데 사용해야하는 선택기입니다. 예를 들어, 마우스 오른쪽 버튼을 클릭하고 검사하여 "post-3466"ID를 찾았습니다.

아래와 같이 :

그에게 하얀색 글씨 회색 배경을 제공하기 위해 CSS 카드를 대상으로 지정하려면 다음과 같은 CSS를 사용해야합니다 :

# post-3466 {background : # 333333; } # post-3466 .entry-title, # post-3466 .post-meta, # post-3466 .post-meta a, # post-3466 .post-content p {color : #fff; }

이제지도에 특정 스타일이 적용되었습니다.

그게 다야!

마지막 생각

다음은 블로그 모듈 카드의 이러한 유형의 CSS 타겟팅을 사용하여 수행 할 수있는 다양한 스타일의 몇 가지 예일뿐입니다. 더 이상 각 카드에 대해 동일한 스타일을 유지할 필요가 없습니다. 원하는대로 디자인 할 수 있습니다.

당신이 가지고있는 경우에 질문이나 제안은 나에게 제공 주시기 바랍니다.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”플랫” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI 테마 다운로드 [/vcex_button][/vc_column][vc_column 너비=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” 레이아웃=”확장” align=”center” font_family = ”Raleway” font_weight=”700″ style=”플랫” ​​custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]다운로드 TEMPLATES DIVI[/vcex_버튼][/vc_열][/vc_row]

다른 Divi 자습서

• 레스토랑 이용 디비 테마 5 웹 사이트
• Divi WooCommerce 제품에 텍스트를 추가하는 방법
• Divi 페이지 간의 메뉴 색상을 변경하는 방법
• Divi로 블로그 그리드를 개인화하는 방법
• 어떻게 워드 프레스의 역할 디비 편집기를 사용하는
• 전체 화면 Divi 슬라이더를 만드는 방법
• Divi 페이지 간의 메뉴 색상을 변경하는 방법
• Divi에 대해 잘 모르는 기능
• WordPress에 Divi Builder를 사용하는 방법
• Divi 비디오 스크롤 모듈을 사용하는 방법
• Divi Builder Flip 모듈을 사용하는 방법
• Divi Builder에서 회원 평가 모듈을 추가하는 방법
• Divi 텍스트 모듈을 사용하는 방법
• Divi에서 슬라이더를 만드는 방법
• Divi 사용자 역할을 편집하는 방법
• Divi Social Media 모듈 사용 방법
• 테마 WordPress Divi에서 상점 모듈을 사용하는 방법
• Divi 사이드 바 모듈을 사용하는 방법
• Divi Price 테이블 모듈을 사용하는 방법
• Divi 발행물의 제목 모듈을 사용하는 방법
• Divi의 비디오 모듈을 추가하는 방법
• 기사 탐색 모듈을 사용하는 방법
• Divi 검색 모듈 사용 방법
• Divi 지갑 모듈 사용 방법
• Divi Builder에서 person 모듈을 사용하는 방법
• Divi 필터와 함께 Wallet 모듈을 사용하는 방법
• 전체 너비 슬라이더 모듈을 사용하는 방법
• Divi Builder 이미지 모듈을 사용하는 방법
• Divi Builder의 전체 너비 탐색 모듈을 사용하는 방법
• 이미지 갤러리 모듈을 사용하는 방법
• Divi Builder Full-Width Module을 사용하는 방법
• Divi Full Width 포트폴리오 모듈을 사용하는 방법
• Divi 전폭 헤더 모듈 사용 방법
• Divi Counter Module 사용 방법
• Divi Builder에서 아티클 슬라이더를 사용하는 방법
• Divi Email Optin 모듈을 사용하는 방법