Divi를 사용하여 블로그 게시물 템플릿을 위한 동적 작성자 상자를 디자인하는 방법

블로그 게시물에서 게시물 작성자를 언급하는 것은 필수적입니다. 이제 Divi의 테마 빌더를 사용하여 사이트 전체의 동적 작성자 상자를 게시물에 추가할 수 있습니다. Divi의 기본 제공 옵션을 사용하여 작성자 상자의 스타일을 지정할 수도 있습니다. 이는 아름다운 웹 디자인으로 이어질 수 있습니다. 이 튜토리얼에서는 게시물 템플릿 내부에 아름다운 동적 작성자 상자를 디자인하는 방법을 정확하게 보여줍니다. 게시물 템플릿 JSON 파일도 무료로 다운로드할 수 있습니다!

시작하겠습니다.

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에 따른 결과를 간단히 살펴보겠습니다.

데스크탑

이동하는

무료로 포스트 템플릿 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

1. Divi 테마 빌더로 이동하여 새 게시물 템플릿 추가

Divi 테마 빌더로 이동 및 새 템플릿 추가

Divi 테마 빌더로 이동하여 시작하십시오. 거기에 새 템플릿을 추가합니다.

모든 게시물에 템플릿 사용

모든 게시물에 새 템플릿을 사용하세요.

• 사용: 모든 게시물

템플릿 본문 작성 시작

그리고 템플릿 본문을 작성하기 시작합니다.

2. 블로그 게시물 템플릿 본문 작성

섹션 설정

배경색

템플릿 편집기 안에 섹션이 있습니다. 섹션 설정을 열고 배경색을 추가합니다.

• 배경색: #270fff

배경 이미지

이 게시물의 시작 부분에서 다운로드할 수 있었던 압축 폴더에서 찾을 수 있는 배경 이미지를 업로드합니다.

새 행 추가

열 구조

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

사이징

행의 설정을 열고 크기 설정에서 최대 너비를 변경합니다.

• 최대 너비: 1380px

열에 게시물 제목 모듈 추가

집단

이 행에 필요한 유일한 모듈은 게시물 제목 모듈입니다. 요소 설정에서 게시물의 추천 이미지를 비활성화하고 있습니다.

• 추천 이미지 표시: 아니요

텍스트 설정

모듈의 디자인 탭으로 이동하여 일반 텍스트 설정에서 텍스트 색상을 변경합니다.

• 텍스트 색상: 라이트

제목 텍스트 설정

다음으로 제목 텍스트 설정을 수정합니다.

• 제목 글꼴: Work Sans
• 제목 텍스트 크기: 7rem(데스크톱), 4rem(태블릿), 2rem(전화)
• 제목 문자 간격: -2px

메타 텍스트 설정

메타 텍스트 설정과 함께.

• 메타 글꼴: Work Sans
• 메타 텍스트 크기: 1rem

새 섹션 추가

간격

템플릿 본문에 새 일반 섹션을 추가하고 섹션 설정을 열고 모든 기본 상단 패딩을 제거합니다.

• 상단 패딩: 0px

새 행 추가

열 구조

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

사이징

행 설정을 열고 다음과 같이 크기 조정 설정을 변경합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 열 높이 균등화: 예
• 최대 너비: 1380px

간격

모든 기본 상단 패딩도 제거하십시오.

• 상단 패딩: 0px

열 1 설정

간격

그런 다음 열 1 설정을 열고 다양한 화면 크기에서 사용자 지정 패딩 값을 추가합니다.

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

박스 섀도우

첫 번째 열에도 상자 그림자를 추가합니다.

• 상자 그림자 흐림 강도: 60px
• 그림자 색상: rgba(0,0,0,0.09)

열 1에 게시물 콘텐츠 모듈 추가

텍스트 설정

모듈 추가를 시작할 시간입니다! Post Content Module을 1열에 배치하고 그에 따라 텍스트 설정을 변경합니다.

• 텍스트 글꼴: Work Sans
• 텍스트 크기: 1rem(데스크탑), 0.9rem(태블릿 및 휴대폰)
• 텍스트 줄 높이: 2.3em

제목 텍스트 설정

다른 제목 텍스트 설정도 수정합니다.

• 제목 글꼴: Work Sans
• 제목 2 텍스트 크기: 1.6rem(H2), 1.5rem(H3), 1.4rem(H4), 1.3rem(H5), 1.2rem(H6)
• 제목 줄 높이: 1.3em

CSS ID

CSS ID를 추가하여 모듈 설정을 완료합니다.

• CSS ID: 블로그 게시물 콘텐츠

열 1에 코드 모듈 추가

제목 CSS 코드 삽입

다른 게시물 콘텐츠 요소 사이에 공간을 추가하기 위해 열 1에 코드 모듈을 추가하고 다음 CSS 코드 줄을 삽입합니다.

<style>
#blog-post-content h2, h3, h4, h5, h6 {
margin-top: 50px;
margin-bottom: 50px;
}

#blog-post-content p {
margin-top: 20px;
margin-bottom: 20px;
}
</style>

열 2에 사람 모듈 추가

동적 콘텐츠

두 번째 열에서 필요한 유일한 모듈은 Person 모듈입니다. 다음 동적 콘텐츠를 선택합니다.

• 이름: 게시물 작성자
• 직위: 저자
• 본문: 저자 약력

이미지 동적 콘텐츠

작성자의 동적 프로필 사진도 모듈에 추가합니다.

• 이미지: 저자 프로필 사진

호버 배경색

그런 다음 호버에 흰색 배경색을 추가합니다.

• 배경색: #ffffff

제목 텍스트 설정

모듈의 디자인 탭으로 이동하여 그에 따라 H3 텍스트 설정을 변경합니다.

• 제목 제목 수준: H3
• 제목 글꼴: Work Sans
• 제목 텍스트 크기: 1.1rem

본문 설정

본문 설정도 수정하십시오.

• 본문 글꼴: Work Sans
• 본문 텍스트 크기: 0.9rem
• 바디 라인 높이: 2em

위치 텍스트 설정

그런 다음 위치 글꼴 텍스트 설정을 변경합니다.

• 위치 글꼴: Work Sans
• 위치 텍스트 크기: 0.9rem

기본 크기 조정

크기 설정에서 높이를 수정합니다.

• 높이: 160px(데스크톱), 자동(태블릿 및 휴대전화)

호버 크기 조정

그리고 호버에서 높이를 자동으로 되돌립니다.

• 높이: 자동

간격

다음으로 사용자 지정 패딩을 사용하여 모듈 주위에 공간을 추가합니다.

• 상단 패딩: 50px
• 하단 패딩: 50px
• 왼쪽 패딩: 50px
• 오른쪽 패딩: 50px

기본 테두리

그리고 우리는 테두리도 사용할 것입니다.

• 왼쪽 테두리 너비: 0px(데스크톱), 4px(태블릿 및 휴대폰)
• 왼쪽 테두리 색상: #270fff

호버 테두리

마우스 오버 시 테두리 너비를 수정합니다.

• 왼쪽 테두리 너비: 4px

기본 상자 그림자

그런 다음 상자 그림자를 추가합니다.

• 상자 그림자 흐림 강도: 60px
• 그림자 색상: rgba(0,0,0,0)(데스크톱), rgba(0,0,0,0.11)(태블릿 및 휴대폰)

호버 박스 그림자

마우스 오버 시 그림자 색상을 변경합니다.

• 그림자 색상: rgba(0,0,0,0.11)

기본 필터

계속해서 불투명도를 변경하겠습니다.

• 불투명도: 41%(데스크톱), 100%(태블릿 및 휴대폰)

호버 필터

마우스를 가져가면 불투명도를 100%로 되돌립니다.

• 불투명도: 100%

주요 요소 CSS

이 게시물의 미리보기에서 알 수 있었던 끈적거리는 효과를 추가하기 위해 모듈의 기본 요소에 몇 줄의 사용자 정의 CSS를 추가합니다.

position: sticky;
position: -webkit-sticky;
top: 50px !important;

회원 이미지 CSS

모듈의 멤버 이미지에 CSS 코드 한 줄을 추가하여 작성자 프로필 사진이 왼쪽 정렬되도록 합니다.

text-align: left;

기본 가시성

데스크탑에서 모듈의 내용을 숨기기 위해 고급 탭에서 오버플로를 변경합니다.

• 수평 오버플로: 숨김
• 수직 오버플로: 숨김

호버 가시성

오버플로를 표시로 변경하여 콘텐츠를 가리키면 표시되도록 할 것입니다.

• 수평 오버플로: 표시
• 수직 오버플로: 표시

새 섹션 추가

디자인에 다른 섹션을 추가하십시오.

새 행 추가

열 구조

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

사이징

행 설정을 열고 그에 따라 크기 설정을 변경합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 열 높이 균등화: 예
• 최대 너비: 1380px

열에 주석 모듈 추가

필드 설정

이 행에 필요한 유일한 모듈은 주석 모듈입니다. 다음과 같이 필드 설정을 변경합니다.

• 필드 배경색: #ffffff
• 필드 상단 패딩: 20px
• 필드 하단 패딩: 20px
• Fields 글꼴: Work Sans
• 필드 텍스트 크기: 1rem

댓글 수 텍스트 설정

댓글 수 텍스트 설정도 수정합니다.

• 댓글 수 제목 수준: H2
• 댓글 수 글꼴: Work Sans
• 댓글 수 텍스트 크기: 1.5rem

양식 제목 텍스트 설정

그런 다음 양식 제목 텍스트 설정을 변경합니다.

• 양식 제목 제목 수준: H3
• 양식 제목 글꼴: Work Sans
• 양식 제목 텍스트 크기: 1.2rem

메타 텍스트 설정

메타 텍스트 설정도 수정합니다.

• 메타 글꼴: Work Sans
• 메타 텍스트 크기: 1rem

댓글 텍스트 설정

댓글 텍스트 설정도 변경하고 있습니다.

• 주석 글꼴: Work Sans
• 댓글 텍스트 크기: 1rem
• 주석 줄 높이: 2.3em

버튼 설정

버튼의 스타일을 지정하여 모듈의 설정을 완료합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 1rem
• 버튼 텍스트 색상: #ffffff
• 버튼 배경색: #270fff
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 0px

• 버튼 글꼴: Work Sans

3. 테마 빌더 변경 사항 저장 및 결과 보기

템플릿을 완성했으면 모든 변경 사항을 저장하고 테마 빌더를 종료한 다음 게시물에서 결과를 확인하세요!

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.

데스크탑

이동하는

마지막 생각들

이 게시물에서는 Divi의 기본 제공 옵션, 동적 기능 및 테마 빌더를 사용하여 아름다운 동적 작성자 상자를 디자인하는 방법을 보여주었습니다. 이 세 가지를 결합하면 블로그 게시물 템플릿을 사용자 정의하고 독창적인 방식으로 게시물 작성자를 표시하는 것이 그 어느 때보다 쉬워졌습니다. JSON 파일도 무료로 다운로드할 수 있었습니다! 질문이나 제안 사항이 있으면 아래의 댓글 섹션에 자유롭게 의견을 남겨주세요.

Divi에 대해 자세히 알아보고 더 많은 무료 Divi를 받고 싶다면 이메일 뉴스레터와 YouTube 채널을 구독하세요. 그러면 항상 이 무료 콘텐츠를 가장 먼저 알고 혜택을 받을 수 있습니다.