Divi 블로그 모듈에서 추천 이미지 위에 블로그 게시물 제목을 배치하는 방법

게시 됨: 2022-10-14

간단한 모듈의 경우 Divi의 블로그 모듈은 매우 강력한 모듈입니다. Divi의 블로그 모듈을 사용하여 블로그 피드가 있는 모든 유형의 페이지를 만들 수 있습니다. 블로그 게시물 템플릿 하단에 관련 게시물 섹션을 추가하여 사용자를 사이트에 더 오래 머물게 하려는 경우 바닥글 영역의 모듈을 사용할 수도 있습니다. 기본 블로그 모듈을 사용한 후 블로그 피드가 표시되는 방식을 지정하고 스타일을 지정할 수 있습니다.

Divi에서 기본적으로 블로그 모듈은 다음 순서(위에서 아래로)로 표시됩니다.

추천 이미지 게시
게시물 제목
포스트 메타
포스트 발췌

이 튜토리얼에서는 추천 이미지 썸네일 바로 위에 블로그 제목, 메타 및 콘텐츠를 배치하는 방법을 보여줍니다. 그 속으로 들어가 보자!

Divi 블로그 모듈에서 추천 이미지 위에 블로그 게시물 제목, 메타 및 콘텐츠 배치

1단계: Divi 테마 옵션에 사용자 정의 코드 추가

먼저 Divi → 테마 옵션 → 통합으로 이동한 다음 블로그 코드의 <head>에 코드 추가 영역에 다음 사용자 지정 코드를 배치합니다.

 <스크립트>
    (함수($) {
        $(문서).ready(함수() {
            $(".wpb-블로그 .et_pb_post").each(함수() {
                $(this).find(".entry-title, .post-meta, .post-content ").wrapAll('<div class="wpb-blog-text"></div>');
            });
            //아약스에서도 동일하게 수행
            $(document).bind('준비된 ajaxComplete', function() {
                $(".wpb-블로그 .et_pb_post").each(함수() {
                    $(this).find(".entry-title, .post-meta, .post-content ").wrapAll('<div class="wpb-blog-text"></div>');
                });
            });
        });
    })(제이쿼리); 
</스크립트>

그런 다음 변경 사항 저장 버튼을 클릭하여 변경 사항을 저장합니다.

위의 코드가 하는 일은 블로그 모듈의 3가지 부분인 제목, 메타, 콘텐츠를 하나의 요소로 결합하는 것입니다.

2단계: 사용자 정의 CSS 클래스 추가

이전 사용자 정의 코드를 추가하고 저장했으면 Divi Builder로 페이지를 생성하거나 편집하여 그리드 레이아웃으로 블로그 모듈을 추가하십시오. 모듈이 이미 설치되어 있고 이를 사용자 정의하려는 경우 계속해서 블로그 설정 패널을 열고 고급 탭으로 이동한 다음 CSS ID 및 클래스 블록을 열어 다음 사용자 정의 CSS 클래스를 추가할 수 있습니다.

wpb-블로그

3단계: 사용자 정의 CSS 추가

블로그 모듈에 대한 클래스를 추가했으면 이제 맞춤 CSS를 추가하여 1단계에서 결합된 요소를 추천 이미지 위로 이동합니다. 또한 사용자 정의 CSS는 여백과 패딩을 조정하고 추천 이미지에 오버레이를 추가하여 텍스트를 더욱 돋보이게 합니다.

준비가 되면 다음 코드를 복사한 다음 Divi → Theme Options → General (첫 번째 탭) → Custom CSS 에 배치합니다.

 /*랩핑된 제목, 메타 및 텍스트를 이미지 위로 이동*/
.wpb-블로그-텍스트 {
	위치: 절대;
	상단: 50%;
	왼쪽: 50%;
	변환: 번역(-50%, -50%);
	너비: 100%;
	패딩: 30px;
	z-인덱스: 1;
}

/*이동된 항목을 상위 항목과 함께 위치 유지*/
.et_pb_blog_grid 기사 {
	위치: 상대;
}

/*전체 블로그 게시물 주위의 공백 제거*/
.et_pb_blog_grid .et_pb_post {
	패딩: 0px;
}

/*블로그 추천 이미지에서 음수 여백 제거*/
.et_pb_image_container {
	여백: 0;
}

/*특징 이미지 프레임 아래 여백 제거*/
.et_pb_post .entry-featured-image-url {
	여백: 0;
}

.et_pb_blog_grid .entry-featured-image-url::before {
	콘텐츠: '';
	위치: 절대;
	너비: 100%;
	높이: 100%;
	배경색: rgba(0, 0, 0, 0.5);
}

변경 사항 저장 버튼을 클릭하여 계속해서 변경 사항을 저장합니다.

이제 블로그 모듈에는 이미지 위에 제목, 메타 및 콘텐츠가 표시됩니다. 그러나 블로그 피드를 아래 이미지보다 더 매력적으로 만들기 위해 일부 설정을 조정할 수 있습니다.

4단계: 블로그 모듈 일부 조정

블로그 모듈에 대해 원하는 요소 선택

블로그 모듈에 표시할 요소를 언제든지 선택할 수 있습니다. 추천 이미지, 제목 및 메타로만 구성된 블로그 피드를 갖고 싶다면 콘텐츠 탭 → 요소 에서 발췌 표시 옵션을 비활성화하면 됩니다. 또한 더 읽기 버튼 또는 댓글 수 표시 와 같이 표시되는 요소를 늘릴 수도 있습니다.

텍스트를 밝게

위의 이미지에서 볼 수 있듯이 텍스트는 거의 읽을 수 없습니다. 텍스트 색상을 흰색이나 원하는 다른 밝은 색상으로 변경해 보겠습니다. 블로그 스타일을 따르려면 블로그 설정 → 디자인 을 열고 다음과 같이 조정하십시오.

제목 텍스트

제목 텍스트 색상 을 흰색으로 설정하고 어두운 색상 빛나는 효과와 함께 제목 텍스트 그림자 를 사용합니다.

본문

본문 텍스트는 그리드 레이아웃에 충분한 공간이 없기 때문에 일반적으로 이미지 하단에서 오버플로됩니다. 내용 탭 → 발췌 길이 로 이동하여 필요한 글자 수를 입력하면 내용을 줄일 수 있습니다.

Body Text Color 의 경우 약간 칙칙한 색상(#D6D6D6)을 선택하고 어두운 색상의 빛나는 효과가 있는 Body Text Shadow 를 사용합니다. 추가 정보 텍스트는 기본적으로 이 색상을 따릅니다. 그러나 더 읽기 텍스트 블록 → 더 읽기 텍스트 색상 에서 변경할 수 있습니다.

메타 텍스트

Meta Text Color 를 밝은 파란색(#88D9DD)으로 설정하고 Title Text Shadow 를 어두운 색상의 빛나는 효과와 함께 사용합니다.

블로그 피드 테두리 제거

기본적으로 Divi는 블로그 모듈을 사용할 때마다 회색 1px 테두리를 추가합니다. 디자인 탭 → 테두리 로 이동한 다음 그리드 레이아웃 테두리 너비 를 0px로 설정하여 이를 제거할 수 있습니다.

5단계: 프론트엔드에서도 결과 보기

사용자 정의 코드를 사용하여 Divi 요소를 사용자 정의할 때 빌더와 프런트엔드 결과 간에 불일치가 발생하는 경우가 있습니다.

위 이미지를 보면 알 수 있듯이 Divi 에디터에서 콘텐츠가 추천 이미지의 중간에 제대로 위치하지 않습니다. 프론트엔드에서 콘텐츠는 우리가 원하는 대로 완벽하게 표시됩니다.

결론

기본 블로그 게시물 모듈을 사용한 후 블로그 피드가 표시되는 방식을 지정하고 스타일을 지정할 수 있습니다. 이 튜토리얼에서는 블로그 모듈에 사용할 수 있는 사용자 정의 중 하나를 보여주므로 블로그 모듈에 해당 콘텐츠가 포함된 추천 이미지가 표시됩니다.

디비 다운로드