Divi: 호버에 기사 발췌를 표시하는 방법

마우스 오버 시 기사 스니펫을 표시하는 방법을 알고 싶습니다. Divi ?

호버에서 블로그 게시물 스니펫을 미리 보는 것은 해당 스니펫을 완전히 포기하지 않고 블로그 게시물에 대한 간결한 그리드 레이아웃을 유지하는 효과적인 방법일 수 있습니다.

따라서 아이디어는 처음에는 스니펫을 숨긴 다음 그리드의 게시물 위로 마우스를 가져갈 때 표시하는 것입니다. 따라서 독자가 더 많은 게시물을 볼 수 있도록 하는 동시에 관심 있는 게시물의 일부를 볼 수 있는 기능도 제공합니다.

따라서 이 자습서에서는 마우스를 가져갈 때 이 블로그 게시물 스니펫 토글 효과를 만드는 방법을 보여 드리겠습니다. Divi.

시작하자!

측량

먼저 이 튜토리얼에서 만들 내용에 대한 개요입니다.

블로그 모듈 레이아웃 만들기

먼저 블로그 게시물의 기본 레이아웃을 만들어야 합니다. 이 자습서에서는 열에 행을 추가하고 블로그 모듈을 열에 삽입합니다.

라인 생성

시작하려면 섹션에 한 열의 행을 삽입하십시오.

선의 폭

그런 다음 라인 설정으로 이동하십시오. 그런 다음 스타일 탭의 크기 조정에서 너비를 다음과 같이 수정합니다.

최대 너비: 90%
최대 너비: 1200px

블로그 모듈 추가

그런 다음 이전에 생성한 줄의 열에 Blog 모듈을 삽입합니다.

블로그 모듈 설정

그런 다음 탭에서 블로그 모듈 설정으로 이동합니다. 내용, 요소 아래에서 "더 읽기 버튼 표시" 옵션을 "예"로 설정합니다.

이제 스타일 탭으로 이동하여 템플릿 아래에서 블로그 레이아웃으로 "격자" 템플릿을 선택합니다.

마지막으로 고급 탭으로 이동하여 다음 CSS 클래스를 추가합니다.

CSS 클래스: 토글 블로그 발췌

결과적으로 이 클래스를 다음 단계에서 사용자 정의 CSS 코드에 대한 선택기로 사용할 것입니다.

코드 모듈을 사용하여 사용자 정의 CSS를 추가하십시오.

이 시점에서 블로그 게시물이 그리드에 배치되고 사용자 정의 CSS 클래스가 블로그 메뉴에 추가되었습니다. 따라서 이 CSS 클래스 선택기를 사용하여 이 블로그 모듈을 구체적으로 대상으로 지정하고 기사 위로 마우스를 가져갈 때 토글 효과를 추가할 것입니다.

CSS를 추가하려면 코드 모듈을 사용합니다. 이렇게 하려면 블로그 모듈 아래에 코드 모듈을 추가합니다.

그런 다음 마우스 오버 시 기사 스니펫 토글 효과를 만드는 데 필요한 사용자 정의 CSS를 아래에 붙여넣습니다. 무엇보다 필요한 스타일 태그 사이에 CSS 코드를 붙여넣어야 합니다.

@media all and (min-width: 981px) {
/* add transition for post content*/
.toggle-blog-excerpt .et_pb_post .post-content {
-webkit-transition: all 500ms !important;
transition: all 500ms !important;
}
/* keep post content visible in visual builder */
body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
visibility:visible;
opacity: 1;
max-height:none;
}
/* hide post content */
.toggle-blog-excerpt .et_pb_post .post-content {
visibility: hidden;
opacity: 0;
max-height:0px;
}
/* show post content when hovering over post item */
.toggle-blog-excerpt .et_pb_post:hover .post-content {
visibility: visible;
opacity:1;
max-height: 500px;
}
/* set min-height for all post items */
.toggle-blog-excerpt .et_pb_post {
min-height: 400px;
}
}

지금까지 얻은 결과를 보자.

결과

Divi 빌더를 사용하여 블로그 모듈에 몇 가지 추가 스타일을 추가해 보겠습니다.

이제 블로그 게시물 조각에 대한 토글 효과를 제공하는 CSS가 준비되었으므로 생성자를 사용하여 블로그 모듈에 추가 스타일을 추가할 수 있습니다. Divi.

이 예에서는 스타일을 최소한으로 조정하지만 자신의 스타일도 자유롭게 탐색할 수 있습니다.

기사 제목 스타일

희미한 조명 제목: 굵은 텍스트
제목 텍스트 색상: #6D6A7E
제목 텍스트 크기: 20px
제목 줄 높이: 1.3em

텍스트 스타일 "자세히 알아보기"

더 읽기 희미한 빛: 굵은 텍스트
더 읽어보기 스타일 복사: TT
텍스트 색상 더 읽기: #6D6A7E
문자 간격 더 읽기: 1px
라인 높이 더 읽기: 3.5em

텍스트 페이지 매김 표시 변경

페이지 매김 표시 희미한 조명: 굵은 텍스트
텍스트 색상 페이지 매김 표시: #6D6A7E
문자 간격 표시 페이지 매김: 1px
페이지 매김 복사 스타일 표시: TT

테두리 제거

그리드 레이아웃 테두리 너비: 0px

호버 섀도우 박스 스타일

섀도우 박스: 스크린샷 참조
시작 위치: 0px
상자 그림자 흐림 강도: 38px
자막 글꼴 색상: rgba (109,106,126,0.25)

최종 결과

결론

결론적으로 이 튜토리얼에서 볼 수 있듯이 CSS 스니펫을 추가하면 멋진 호버 효과로 블로그 게시물 스니펫을 흔드는 데 필요한 기능을 제공할 수 있습니다.

이 방법에서 가장 중요한 것은 Divi의 통합 옵션을 사용하여 블로그 모듈에 원하는 대로 스타일을 추가할 수 있다는 것입니다. 또한 더 많은 호버 효과를 추가하는 것을 포함하여 게시물 요소를 사용자 정의할 수 있습니다.

이 블로그가 귀하의 블로그에 도움이 되기를 바랍니다. 사이트 웹 Divi는 디자인과 기능면에서 추가적인 부스트입니다. 의견에 귀하의 경험에 대해 알려주십시오.

Divi: 호버에서 기사 발췌문을 표시하는 방법

측량