Divi에서 멋진 호버 효과를 사용하여 카테고리 레이아웃별로 최근 게시물을 디자인하는 방법

우리 모두는 웹사이트에 최근 게시물이 표시되는 것을 보는 데 익숙합니다. 그들은 일반적으로 블로그에 가장 최근에 게시된 기사를 표시하기 위해 WordPress 최근 게시물 위젯 또는 플러그인을 사용하여 생성됩니다. 그리고 일반적으로 블로그 페이지, 게시물 하단, 사이드바 또는 방문 페이지의 추천 섹션(이와 같은 항목)에 표시됩니다.

이 튜토리얼에서는 카테고리별로 최근 게시물을 표시하는 방법을 보여 드리겠습니다. Divi Builder(및 몇 가지 블로그 모듈)만 사용하여 4가지 범주의 최신 게시물을 표시하는 섹션을 만들 것입니다. 카테고리 섹션별 이 최근 게시물에는 플러그인 없이 고유한 카테고리 태그, 애니메이션 및 호버 효과가 포함됩니다.

확인 해봐!

엿보기

다음은 함께 구축할 카테고리별 최근 게시물 레이아웃의 디자인과 기능에 대해 간략히 살펴보겠습니다.

무료로 카테고리 레이아웃별 최근 게시물 다운로드

이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. 당신은 iresubscribedi하거나 추가 이메일을받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder로 드래그하기만 하면 됩니다.

튜토리얼로 가볼까요?

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. 또한 최근 게시물 섹션의 기능은 사이트에 카테고리가 할당된 실제 블로그 게시물이 있는지 여부에 달려 있습니다. 따라서 테스트 사이트를 사용하는 경우 몇 가지 모의 블로그 게시물 설정이 있는지 확인하십시오.

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

Divi에서 카테고리 섹션별 최근 게시물 생성하기

4열 행 만들기

Divi Builder에서 작업을 시작하려면 4열 행을 만드십시오.

블로그 모듈 만들기 1

4개의 각 열에는 별도의 블로그 모듈이 있습니다. 첫 번째 블로그 모듈을 열 1에 추가합니다.

각 블로그 모듈은 기본적으로 사이트의 가장 최근 게시물을 표시합니다. 특정 블로그 모듈에 포함할 특정 카테고리를 선택하기만 하면 됩니다. 그런 다음 하나의 게시물만 표시되도록 게시물 수를 1로 제한합니다. 그러면 해당 카테고리에 대한 최신 블로그 게시물이 동적으로 제공됩니다.

블로그 콘텐츠

다음과 같이 블로그 콘텐츠 옵션을 업데이트합니다.

• 게시물 유형: 게시물
• 게시물 수: 1
• 포함된 카테고리: 뉴스(또는 자신의 것)
• 게시물 발췌문 사용: 아니요
• 발췌 길이: 120

요소 옵션

그런 다음 다음과 같이 요소 옵션을 업데이트합니다.

• 카테고리 표시: 아니오
• 발췌문 표시: 아니요(데스크톱), 예(마우스오버 및 태블릿)
• 페이지 매김 표시: 아니요

블로그 디자인

그런 다음 다음과 같이 디자인을 업데이트합니다.

• 배경색(데스크톱): #ffffff
• 배경색(마우스오버): #8ac829
• 제목 글꼴 두께: 반 굵게
• 제목 글꼴 스타일: TT
• 제목 텍스트 크기: 24px
• 제목 글자 간격: 1px
• 제목 줄 높이: 1.4em
• 본문 색상: #ffffff
• 메타 글꼴 두께: Light
• 메타 문자 간격: 3px

• 최소 높이: 450px(데스크톱), 자동(태블릿)
• 패딩: 위쪽 5%, 아래쪽 5%, 왼쪽 5%, 오른쪽 5%
• 박스 섀도우: 스크린샷 참조
• 애니메이션 스타일: 확대/축소

이것이 첫 번째 블로그 모듈의 디자인을 담당합니다. 이제 사용자 정의 카테고리 태그를 만들어야 합니다.

카테고리 태그 생성 1

태그를 생성하려면 블로그 모듈 아래에 새 텍스트 모듈을 추가한 다음 블로그 모듈 위로 드래그합니다.

텍스트 내용

블로그 모듈에 대해 선택한 카테고리 이름으로 본문 콘텐츠를 업데이트합니다. 내 예에서는 뉴스 카테고리의 최근 게시물을 표시하므로 본문 콘텐츠에 "뉴스"라는 단어를 추가합니다.

카테고리 태그 디자인하기

텍스트 디자인 설정에서 다음을 업데이트합니다.

• 배경색: #8ac829
• 텍스트 글꼴 두께: 매우 굵게
• 텍스트 텍스트 색상: #ffffff
• 텍스트 정렬: 가운데
• 너비: 120px
• 여백: 상단 80px, 하단 -80px
• 패딩 : 상단 10px, 하단 10px
• 애니메이션 스타일: 페이드
• 애니메이션 지연: 1000ms
• Z 인덱스: 1

블로그 카드 위에 태그를 놓기 위해 음수 여백을 사용하고 있으므로 태그가 블로그 모듈 위에 유지되도록 z 인덱스를 1로 설정해야 합니다.

이제 하나의 게시물이 완료되었으므로 와이어프레임 보기 모드를 배포하고 해당 모듈을 다른 열에 복사할 수 있습니다.

열 1의 텍스트와 블로그 모듈을 복사하여 열 2,3, 4에 붙여넣어 각 열에 정확히 동일한 모듈이 있도록 합니다.

각 중복 블로그 모듈에 대해 새 블로그 카테고리를 지정하고 배경색을 가리켜야 합니다. 그리고 각 중복 카테고리 태그에 대해 블로그 모듈에 대해 선택한 카테고리에 해당하도록 카테고리 이름을 업데이트한 다음 블로그 모듈의 hover 배경색과 일치하도록 배경색을 업데이트해야 합니다.

2열의 모듈 업데이트

와이어프레임 보기에서 열 2의 블로그 모듈에 대한 설정을 열고 다음을 업데이트합니다.

• 포함된 카테고리: 비즈니스(또는 귀하의 소유)
• 배경색(마우스오버): #f64937

그런 다음 2열의 텍스트 모듈에 대한 설정을 다음과 같이 업데이트합니다.

• 본문: "사업"
• 배경색: #f64937

3열의 모듈 업데이트

그런 다음 3열의 블로그 모듈에 대한 설정을 열고 다음을 업데이트합니다.

• 포함된 범주: 돈(또는 자신의 것)
• 배경색(마우스오버): #6529c7

그런 다음 3열의 텍스트 모듈에 대한 설정을 다음과 같이 업데이트합니다.

• 몸: "돈"
• 배경색: #6529c7

4열의 모듈 업데이트

그런 다음 4열의 블로그 모듈에 대한 설정을 열고 다음을 업데이트합니다.

• 포함된 카테고리: 코칭(또는 자신의 것)
• 배경색(마우스오버): #f17809

그런 다음 4열의 텍스트 모듈에 대한 설정을 다음과 같이 업데이트합니다.

• 본문: "코칭"
• 배경색: #f17809

행 설정 업데이트

설정된 높이와 사용자 지정 거터 너비를 포함하여 행에 몇 가지 조정이 필요합니다. 다음 행 설정을 업데이트합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 2
• 폭: 94%
• 최대 너비: 1400px
• 높이: 540px(데스크톱), 자동(태블릿)
• 패딩: 0px 상단, 0px 하단

블로그 카드 위로 마우스를 가져갈 때 행이 확장되고 페이지의 다른 콘텐츠가 이동하는 것을 방지하기 위해 데스크탑에서 행 높이를 540px로 설정하고 있습니다. 콘텐츠를 숨기지 않도록 태블릿에서 높이를 자동으로 설정해야 합니다.

각 열에 대한 설정 업데이트

최근 블로그 게시물에 두 모듈에 동시에 적용되는 hover 효과를 주기 위해 블로그 게시물을 구성하는 두 모듈이 포함된 열에 hover 효과를 추가할 수 있습니다. 각 열에 대한 설정을 열고 다음을 업데이트합니다.

• 변환 스케일(호버링): 115%

그런 다음 태블릿 디스플레이 전용 기본 요소에 다음 사용자 정의 CSS를 추가합니다.

transform: none !important

이 작은 스니펫은 모바일용 변형 스케일 호버 효과를 비활성화합니다.

이제 최근 게시물이 해당 카테고리 태그와 카드 위로 마우스를 가져갈 때 표시되는 일치하는 배경색으로 모두 설정될 때마다. 또한 카드가 커지고 호버링 시 발췌문도 표시됩니다.

섹션 설정 업데이트

섹션의 경우 새로운 배경 그라디언트와 약간의 패딩을 지정해 보겠습니다. 섹션 설정을 열고 다음을 업데이트합니다.

• 배경 그라데이션 왼쪽 색상: #6529c7
• 배경 그라디언트 오른쪽 색상: #f64937
• 기울기 방향: 270deg
• 패딩: 10vw 상단, 10vw 하단

최종 결과

그게 다야! 최종 결과를 확인해보자. 이 이미지에는 디자인을 완성하기 위해 쉽게 추가할 수 있는 제목이 포함되어 있습니다.

그리고 여기에 애니메이션과 호버 효과가 있습니다.

마지막 생각들

카테고리 레이아웃으로 최근 게시물을 작성하는 것은 상자 밖에서 조금 생각하면 정말 쉬운 과정입니다. 표시하려는 모든 범주에 대해 블로그 모듈을 만들기만 하면 됩니다. 그런 다음 특정 카테고리에 대한 가장 최근 게시물만 표시하도록 해당 모듈을 제한합니다. 그 후, 당신은 디자인을 돌볼 수있는 Divi의 힘이 있습니다.

이 레이아웃은 테마 빌더 템플릿을 포함하여 사이트 어디에서나 사용할 수 있습니다. 따라서 이식성 옵션을 사용하여 필요할 때마다 자유롭게 가져올 수 있습니다. 다음 프로젝트에 도움이 되거나 적어도 더 나은 Divi 디자인을 위해 바퀴를 돌리는 데 약간의 영감을 주기를 바랍니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!