Divi로 아름답고 매력적인 동적 블로그 게시물 영웅 섹션을 만드는 방법

새로운 업데이트가 나올 때마다 디자인 가능성이 높아집니다. 예를 들어 동적 콘텐츠와 호버 옵션을 결합하면 놀라운 결과를 얻을 수 있습니다. 이를 보여주기 위해 Divi의 기본 제공 옵션만 사용하여 3개의 멋진 동적 블로그 게시물 영웅 섹션을 만드는 방법을 보여 드리겠습니다. 또한 자신만의 변형을 만들도록 영감을 줄 각 예제를 단계별로 안내합니다.

가자!

시사

튜토리얼을 시작하기 전에 우리가 만들 세 가지 예제의 최종 결과를 살펴보겠습니다.

예 #1

예 #2

예 #3

새 블로그 게시물 추가

게시물 세부정보

먼저 새 블로그 게시물을 작성하여 시작하십시오. 제목, 선택 카테고리 및 추천 이미지를 추가합니다. 완료되면 Divi Builder를 활성화하십시오.

Divi 페이지 설정

Visual Builder로 전환하기 전에 새 블로그 게시물의 오른쪽 상단에서 Divi 페이지 설정을 변경하십시오.

• 페이지 레이아웃: 전각
• 게시물 제목: 숨기기

Visual Builder로 전환

다양한 예제를 만들기 위해 Visual Builder로 전환할 시간입니다!

모듈 만들기

새 섹션 추가 + 1열 행

각 예제를 개별적으로 살펴보기 전에 동적 콘텐츠가 포함된 텍스트 모듈을 만드는 것부터 시작하겠습니다. 세 가지 예 모두에서 이러한 미리 만들어진 모듈을 사용하여 설계를 완료합니다. 새 섹션을 추가했으면 다음 열 구조를 사용하여 새 행을 추가합니다.

게시물 제목 텍스트 모듈

게시물 제목 동적 콘텐츠 선택

필요한 첫 번째 동적 모듈에는 게시물 제목이 포함됩니다. 새 텍스트 모듈을 추가하고 동적 콘텐츠 목록에서 게시물 제목을 선택합니다.

텍스트 설정

그런 다음 텍스트 설정으로 이동하여 몇 가지를 변경합니다.

• 텍스트 글꼴: Lato
• 텍스트 글꼴 두께: 굵게
• 텍스트 색상: #000000
• 텍스트 크기: 58px(데스크톱), 45px(태블릿), 35px(전화)
• 텍스트 줄 높이: 1em
• 텍스트 방향: 중앙

간격

간격 값도 변경하십시오.

• 하단 여백: 50px
• 상단 패딩: 10px
• 하단 패딩: 10px

게시 날짜 텍스트 모듈

게시 날짜 선택 동적 콘텐츠

두 번째 모듈은 게시 날짜를 포함하는 텍스트 모듈입니다. 계속해서 하나를 추가하고 동적 콘텐츠 목록에서 게시 게시 날짜를 선택합니다.

텍스트 설정

다음에 이 모듈의 텍스트 설정을 변경합니다.

• 텍스트 글꼴 두께: 가벼움
• 텍스트 색상: #000000
• 텍스트 크기: 30px(데스크톱), 20px(태블릿), 16px(휴대폰)
• 텍스트 문자 간격: 14px
• 텍스트 방향: 중앙

간격

하단 여백도 추가하십시오.

• 하단 여백: 50px

게시물 카테고리 텍스트 모듈

카테고리 선택 동적 콘텐츠

마지막으로 추가할 모듈은 게시물 카테고리 동적 콘텐츠를 포함하는 텍스트 모듈입니다.

텍스트 설정

텍스트 설정으로 이동하여 텍스트 방향을 변경합니다.

• 텍스트 방향: 중앙

링크 텍스트 설정

그런 다음 링크 텍스트 설정에 몇 가지 수정 사항을 적용합니다.

• 링크 글꼴 두께: 매우 굵게
• 링크 글꼴 스타일: 대문자
• 링크 텍스트 색상: #000000
• 링크 텍스트 크기: 15px
• 링크 문자 간격: 5px

간격

다음으로 하단 패딩을 추가합니다.

• 하단 패딩: 20px

국경

그리고 미묘한 하단 테두리로 마무리합니다.

• 하단 테두리 너비: 1px
• 하단 테두리 색상: #000000

예제 #1 만들기

새 섹션 추가

간격

첫 번째 예제를 만들어 봅시다! 생성한 이전 섹션 바로 아래에 새 섹션을 추가하세요. 설정을 열고 모든 기본 사용자 정의 패딩을 제거하십시오.

• 상단 패딩: 0px
• 하단 패딩: 0px

새 행 추가

열 구조

다음 열 구조로 새 행을 추가하여 계속하십시오.

사이징

이 행의 크기 설정을 열고 주변을 변경합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 열 높이 균등화: 예

간격

다음에 몇 가지 사용자 정의 간격 값을 추가하십시오.

• 상단 패딩: 0px
• 하단 패딩: 0px
• 열 2 상단 패딩: 130px
• 2열 하단 패딩: 130px
• 열 2 왼쪽 패딩: 50px
• 열 2 오른쪽 패딩: 50px

열 1에 이미지 모듈 추가

추천 이미지 동적 콘텐츠 선택

첫 번째 열에 이미지 모듈을 추가하여 진행합니다. 이미지를 업로드하는 대신 모듈을 동적 추천 이미지에 연결하세요.

테두리 기본값

또한 호버에 오른쪽 테두리를 추가하고 있습니다. 그렇게 하려면 먼저 다음 기본 테두리 너비를 선택하십시오.

• 오른쪽 테두리 너비: 0px

테두리 호버

그리고 호버에 다음 설정을 추가합니다.

• 오른쪽 테두리 너비: 24px
• 오른쪽 테두리 색상: #FFFFFF

상자 그림자 기본값

상자 그림자도 마찬가지입니다. 다음 기본 상자 그림자 설정을 적용합니다.

• 상자 그림자 수직 위치: 0px
• 상자 그림자 흐림 강도: 0px
• 상자 그림자 확산 강도: 80px
• 그림자 색상: rgba(255,255,255,0)

상자 그림자 호버

그리고 호버에서 주변을 변경하십시오.

• 상자 그림자 수평 위치: 600px
• 상자 그림자 수직 위치: 0px
• 상자 그림자 흐림 강도: 0px
• 상자 그림자 확산 강도: 80px
• 그림자 색상: #E4BAC7

전환

부드러운 전환을 만들려면 고급 탭에서 전환 시간을 변경하세요.

• 전환 시간: 1200ms

열 2에 동적 모듈 배치

이 예제를 완료하기 위해 남은 유일한 작업은 이 자습서의 첫 번째 부분에서 만든 모듈을 두 번째 열에 배치하는 것입니다.

예제 #2 만들기

새 섹션 추가

상단 구분선 기본값

다음으로! 다음 상단 구분선이 있는 새 섹션을 추가합니다.

• 구분선 스타일: 목록에서 찾기
• 디바이더 색상: #FFFFFF
• 디바이더 높이: 50px
• 구분선 배열: 섹션 콘텐츠 상단

상단 디바이더 호버

호버에서 구분선 높이를 변경합니다.

• 디바이더 높이: 174px

간격

다음 섹션의 모든 사용자 지정 패딩을 제거합니다. 이렇게 하면 행과 섹션이 다음 단계 중 하나에서 충돌할 수 있습니다.

• 상단 패딩: 0px
• 하단 패딩: 0px

전환

부드러운 구분선 전환을 만들려면 고급 탭에서 전환 시간을 변경합니다.

• 전환 시간: 500ms

새 행 추가

열 구조

이제 다음 열 구조를 사용하여 섹션에 행을 추가합니다.

배경색 기본값

다음 배경색을 추가하십시오.

• 배경색: #FFFFFF

배경색 호버

마우스 오버 시 배경색을 변경합니다.

• 배경색: rgba(255,255,255,0.56)

추천 이미지 동적 배경 이미지

추천 이미지도 동적 행 배경 이미지로 업로드합니다. 그런 다음 배경 이미지 블렌드를 변경합니다.

• 배경 이미지 혼합: 화면

사이징

크기 설정을 변경하여 행이 화면의 전체 너비를 차지하도록 합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

간격

그리고 몇 가지 사용자 정의 패딩 간격 값을 추가합니다.

• 상단 패딩: 200px
• 하단 패딩: 200px
• 왼쪽 패딩: 100px(데스크톱), 50px(태블릿), 20px(전화)
• 오른쪽 패딩: 100px(데스크톱), 50px(태블릿), 20px(전화)

전환

마지막으로 전환 지속 시간을 변경하여 부드러운 전환을 만듭니다.

• 전환 시간: 700ms

열에 동적 모듈 배치

이제 행의 열에 모든 동적 모듈을 배치할 수 있으며 두 번째 예제는 완료되었습니다!

예제 #3 만들기

새 섹션 추가

추천 이미지 동적 배경 이미지

마지막 예시로! 새 섹션을 추가하고 섹션 배경 이미지로 추천 이미지를 선택합니다.

간격 기본값

그런 다음 섹션의 기본 사용자 지정 패딩을 모두 제거합니다.

• 상단 패딩: 0px
• 하단 패딩: 0px

간격 띄우기

축소 효과를 만들기 위해 마우스를 가져갈 때 사용자 지정 여백을 추가합니다.

• 왼쪽 패딩: 150px(데스크톱), 50px(태블릿), 30px(전화)
• 오른쪽 패딩: 150px(데스크톱), 50px(태블릿), 30px(전화)

전환

전환 기간도 변경하십시오.

• 전환 시간: 500ms

새 행 추가

열 구조

섹션 설정 수정을 완료했으면 다음 열 구조로 새 행을 추가하여 계속하십시오.

배경색 기본값

다음 배경색을 추가합니다.

• 배경색: #ffffff

배경색 호버

마우스 오버 시 배경색을 변경합니다.

• 배경색: rgba(255,255,255,0.46)

그라데이션 배경

방사형 그라데이션 배경도 추가하십시오.

• 색상 1: rgba(41,196,169,0)
• 색상 2: #ffffff
• 그라디언트 유형: 방사형
• 시작 위치: 29%
• 최종 위치: 29%

사이징

다음 행의 크기 설정을 변경합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

간격

그리고 몇 가지 사용자 정의 패딩 값을 추가합니다.

• 상단 패딩: 200px
• 하단 패딩: 200px
• 왼쪽 패딩: 100px(데스크톱), 50px(태블릿), 20px(전화)
• 오른쪽 패딩: 100px(데스크톱), 50px(태블릿), 20px(전화)

전환

마지막으로 부드러운 전환을 위해 전환 지속 시간을 변경하십시오.

• 전환 시간: 500ms

열에 동적 모듈 배치

계속해서 행의 열에 미리 만들어진 모든 모듈을 배치하십시오.

모든 모듈의 텍스트 방향 변경

이 모듈에 대해 변경해야 할 유일한 것은 텍스트 방향이며 완료되었습니다!

• 텍스트 방향: 왼쪽

시사

이제 모든 단계를 거쳤으므로 우리가 만든 세 가지 예제를 모두 마지막으로 살펴보겠습니다.

예 #1

예 #2

예 #3

마지막 생각들

이 게시물에서는 동적 콘텐츠를 Divi의 호버 옵션과 결합하여 멋진 블로그 게시물 영웅 섹션을 만드는 방법을 보여주었습니다. 이러한 예는 자신만의 변형을 만들고 거기에 게시한 블로그 게시물을 개인화하도록 영감을 줄 것입니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!