Divi의 포스트 제목 모듈의 4가지 놀라운 예와 이를 달성하는 방법
게시 됨: 2019-01-13블로그 게시물에 사람들을 참여시키는 새로운 방법을 찾고 있는 모든 Divi 블로거에게 Divi 게시물 제목 모듈은 시작하기에 좋은 곳입니다. 게시물 제목 모듈을 사용하면 수많은 멋진 디자인을 위해 다양한 방식으로 게시물 제목(및 추천 이미지)의 스타일을 지정할 수 있습니다. 이를 통해 첫 눈에 잠재적인 독자를 사로잡는 멋진 기사를 만들 수 있습니다. 오늘 저는 독자들을 끌어들이는 데 도움이 되도록 Divi 포스트 제목 모듈의 스타일을 지정할 수 있는 4가지 멋진 방법을 보여 드리겠습니다.
시작하자!
엿보기
다음은 이 튜토리얼에 등장하는 게시물 제목 모듈 디자인을 간략히 살펴보겠습니다.
#1 추상 프레이밍
건물 #1 시작
#2 겹치는 텍스트와 추천 이미지
건물 #2 시작
#3 가독성을 위한 고유한 콘텐츠 배경
건물 #3 시작
#4 이중 특징 이미지로 스태킹 효과
건물 #4 시작
시작하기
YouTube 채널 구독
이 튜토리얼에 정말로 필요한 것은 Divi 뿐입니다. 우리는 새 게시물을 만들고 Divi Builder를 사용하여 게시물 제목 디자인을 만들 것입니다. 또한 추천 이미지로 사용하려면 몇 개의 이미지가 필요합니다.
새 게시물 설정
이 자습서에서는 Divi Builder를 사용하여 새 게시물에 예제 게시물 제목 디자인을 빌드합니다. 이 튜토리얼에서 빌드를 설정하려면 다음을 수행해야 합니다.
- 새 게시물을 만듭니다.
- 게시물에 제목을 추가합니다.
- 게시물에 추천 이미지를 추가하세요.
- Divi Builder를 배포합니다.
- 처음부터 빌드하도록 선택
- Divi 페이지 설정에서 사이드바 없음 페이지 레이아웃을 선택하고 게시물 제목 숨기기를 선택합니다.
- 그런 다음 프론트 엔드에서 빌드를 클릭하거나 백엔드에서 데스크탑 보기 모드를 배포하여 페이지를 시각적으로 디자인할 수 있습니다.
각 디자인에 대해 새 게시물을 만들거나 단순히 하나의 게시물에 여러 게시물 제목 디자인을 추가할지 여부는 귀하에게 달려 있습니다. 한 게시물에 여러 게시물 제목을 추가하면 동일한 페이지 제목과 추천 이미지가 상속된다는 점에 유의하세요.
#1 추상 프레이밍
이 깔끔한 게시물 제목 디자인에는 추천 이미지와 게시물 제목이 잘 어울리는 미묘한 추상 프레임 요소가 있습니다. 프레이밍 효과는 일부 사용자 정의 테두리 및 상자 그림자 스타일을 사용하여 생성됩니다.
방법은 다음과 같습니다.
이 문서의 시작 부분에 설명된 대로 새 게시물을 설정했는지 확인합니다(제목 추가, 추천 이미지, 사이드바 페이지 레이아웃 없음, 기본 게시물 제목 숨기기). 게시물에 1열 행이 있는 새 섹션을 추가합니다. 그런 다음 행에 게시물 제목 모듈을 추가합니다.
게시물 제목 설정에서 다음과 같이 추천 이미지 배치를 설정합니다.
추천 이미지 배치: 제목 위
그런 다음 업데이트는 배경 그라디언트를 추가하여 모듈의 오른쪽 하단 모서리에 작은 추상 디자인 요소를 추가합니다.
배경 그라데이션 왼쪽 색상: rgba(0,0,0,0.06)
배경 그라데이션 오른쪽 색상: rgba(0,0,0,0)
그라디언트 유형: 방사형
방사형 방향: 오른쪽 하단
시작 위치: 10%
최종 위치: 0%
다음과 같이 나머지 디자인을 계속 업데이트합니다.
제목 글꼴: Josefin Sans
제목 텍스트 정렬: 오른쪽
제목 텍스트 크기: 36px
제목 줄 높이: 1.7em(데스크톱), 1.3em(태블릿 및 스마트폰)
메타 글꼴: Josefin Sans
메타 글꼴 스타일: TT
메타 텍스트 정렬: 왼쪽
메타 문자 간격: 2px
메타 라인 높이: 2em
사용자 정의 여백: -5vw 상단
사용자 정의 패딩: 상단 5vw, 하단 5vw, 왼쪽 5vw, 오른쪽 5vw
오른쪽 테두리 너비: 4px
-5vw 여백은 오른쪽 테두리가 행에 추가할 왼쪽 테두리 위에 오도록 모듈을 행 외부로 끌어옵니다.
이제 상자 그림자를 사용하여 추상 디자인 요소를 추가해 보겠습니다.
박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: 112px
상자 그림자 수직 위치: 85px
상자 그림자 확산 강도: -80px
그림자 색상: rgba(224,43,32,0.3)
설정을 저장합니다.
이제 행 설정을 열어 크기를 조정하고 테두리와 상자 그림자를 사용하여 프레임 디자인의 왼쪽을 만듭니다.
맞춤 너비: 700px
오른쪽 테두리 너비: 4px
박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: 112px
상자 그림자 수직 위치: 85px
상자 그림자 확산 강도: -80px
그림자 색상: rgba(224,43,32,0.3)
이제 최종 디자인을 확인해 보겠습니다.
#2 겹치는 텍스트와 추천 이미지
두 개의 열 행이 있는 새 섹션을 만듭니다. 그런 다음 왼쪽 열에 이미지 모듈을 추가합니다.
이것은 동적 콘텐츠를 사용하여 추천 이미지로 사용됩니다. 이미지 설정을 열고 모의 이미지를 삭제하고 이미지 미리보기 상자 오른쪽 상단에 있는 동적 콘텐츠 아이콘을 클릭합니다. 그런 다음 목록에서 추천 이미지를 선택하여 페이지에 추천 이미지를 추가합니다.
이제 오른쪽 열에 게시물 제목 모듈을 추가합니다. 설정을 열고 추천 이미지 표시 옵션을 아니오로 설정하여 추천 이미지를 숨깁니다.
그런 다음 게시물 제목 모듈에 배경 그라디언트를 추가합니다.
배경 그라데이션 왼쪽 색상: #ffffff
배경 그라데이션 오른쪽 색상: rgba(255,255,255,0)
이것은 이미지를 겹치기 위해 약간의 음수 여백을 추가하면 표시됩니다.
다음과 같이 나머지 디자인을 업데이트합니다.
제목 글꼴: Fira Sans Condensed
제목 글꼴 두께: Ultra Light
제목 텍스트 크기: 80px(데스크톱), 70px(태블릿), 45px(스마트폰)
메타 글꼴: Fira Sans Condensed
메타 글꼴 스타일: TT
메타 텍스트 정렬: 오른쪽
메타 텍스트 색상: #cccccc
메타 문자 간격 : 2px
사용자 지정 여백: -20% 왼쪽(데스크톱), 0%(태블릿 및 스마트폰)
맞춤 패딩: 상단 5vw, 하단 5vw, 왼쪽 30px
이제 제목 아래에 선을 만들기 위해 상자 그림자를 만들어 보겠습니다.
박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: 80px
상자 그림자 수직 위치: 82px
상자 그림자 확산 강도: -80px
설정을 저장하고 행 설정을 열어 여백 너비를 조정합니다.
거터 폭: 1
열 높이 균등화: 예
이제 최종 디자인을 확인하십시오.
대체 둥근 이미지 디자인
몇 가지 작은 조정으로 추천 이미지를 원형으로 만들고 기둥 타일을 세로 중앙에 맞추도록 조정할 수 있습니다. 이렇게 하려면 이미지 설정을 열고 다음을 업데이트하십시오.
둥근 모서리: 50%
그런 다음 행 설정을 열고 기본 요소 아래에 다음 사용자 지정 CSS를 추가합니다.
align-items: center;
Equalize Column Heights가 YES로 설정되어 있는 경우에만 작동하여 항목을 수직으로 정렬할 수 있는 flex 속성을 활성화합니다. 
다음은 최종 디자인입니다.
#3 가독성을 위한 고유한 콘텐츠 배경
이 게시물 제목 디자인은 배경 그라디언트를 통합하여 추천 이미지 배경으로 제목과 메타 텍스트를 더 읽기 쉽게 만듭니다.
방법은 다음과 같습니다.
한 열 행으로 새 섹션을 만듭니다. 그런 다음 행에 게시물 제목 모듈을 추가합니다.
그런 다음 게시물 제목 모듈 설정을 업데이트하여 추천 이미지를 숨깁니다.
제목 글꼴: Abril Fatface
제목 텍스트 색상: #121212
제목 텍스트 크기: 75px(데스크톱), 50px(태블릿), 30px(스마트폰)
제목 글자 간격: 2px
제목 줄 높이: 1.1em
메타 글꼴: Roboto Condensed
메타 텍스트 색상: #ffffff
메타 텍스트 크기: 16px
메타 문자 간격 : 2px
메타 라인 높이: 2em
너비: 60%(데스크톱), 90%(태블릿), 100%(스마트폰)
맞춤 패딩: 3vw 남음
이제 메타 텍스트의 배경으로 사용할 상자 그림자를 추가하고 읽을 수 있도록 합시다.
박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: 0px
상자 그림자 수직 위치: -32px
상자 그림자 색상: #121212
이제 동적 콘텐츠를 사용하여 섹션 배경에 추천 이미지를 추가할 것입니다. 섹션 설정을 열고 배경 이미지 미리보기 상자의 오른쪽 상단에 있는 동적 콘텐츠 아이콘을 클릭합니다. 그런 다음 목록에서 추천 이미지를 선택하여 섹션에 추천 이미지를 추가합니다.
이제 글 제목 텍스트를 더 읽기 쉽게 만들기 위해 그라데이션 배경 요소를 추가해 보겠습니다. 그라디언트 탭을 클릭하고 다음을 업데이트하기만 하면 됩니다.
배경 그라데이션 왼쪽 색상: rgba(255,255,255,0.76)
배경 그라데이션 오른쪽 색상: rgba(255,255,255,0)
그라디언트 유형: 방사형
방사형 방향: 왼쪽 상단
시작 위치: 40%
최종 위치: 0%
배경 이미지 위에 그라디언트 배치: 예
이제 최종 디자인을 봅시다.
#4 이중 특징 이미지로 스태킹 효과
이 디자인은 게시물 제목 모듈과 섹션 배경을 구성하는 요소를 스택하는 효과를 주기 위해 일부 상자 그림자를 통합합니다. 또한 고유한 디자인 요소에 대해 두 가지 버전의 추천 이미지를 동적으로 사용합니다.
방법은 다음과 같습니다.
한 열 행으로 새 섹션을 만듭니다. 그런 다음 행에 게시물 모듈을 추가하고 추천 이미지 배치를 제목/메타 배경 이미지로 업데이트합니다.
그런 다음 디자인 설정을 다음과 같이 업데이트합니다.
텍스트 색상: 라이트
텍스트 배경색: rgba(1,59,104,0.79)
텍스트 방향: 중앙
제목 글꼴: Roboto Condensed
제목 글꼴 두께: Light
제목 텍스트 크기 70px(데스크톱), 50px(태블릿), 30px(스마트폰)
제목 줄 높이: 1.3em
메타 글꼴 두께: Light
메타 글꼴 스타일: TT
메타 텍스트 색상: #cccccc
메타 문자 간격: 1px
사용자 정의 패딩: 상단 10vw, 하단 0px
이제 첫 번째 스택 레이어를 만들기 위해 첫 번째 상자 그림자를 추가해 보겠습니다.
박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: 0px
상자 그림자 수직 위치: -46px
그림자 색상: #ffffff
제목과 메타 텍스트를 나누는 창의적인 방법이기도 하다는 것을 알 수 있습니다.
이제 설정을 저장하고 섹션 설정을 엽니다. 추천 이미지를 배경에 동적 콘텐츠로 추가합니다. 그런 다음 다음과 같이 그라디언트를 추가합니다.
배경 그라데이션 왼쪽 색상: rgba(1,59,104,0.79)
배경 그라데이션 오른쪽 색상: rgba(1,59,104,0.79)
배경 이미지 위에 그라디언트 배치: 예
이 추가 추천 이미지 배경 디자인은 게시물 제목에 각각의 새로운 추천 이미지와 함께 동적으로 변경되는 고유한 디자인을 부여하는 독특한 방법입니다.
다음으로 사용자 지정 패딩을 추가합니다.
사용자 지정 패딩(데스크톱): 상단 10vw, 하단 0px
맞춤 패딩(스마트폰): 0vw 상단, 0px 하단
그런 다음 다른 상자 그림자를 추가하여 스택 효과를 계속합니다.
박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: 0px
상자 그림자 수직 위치: -92px
그림자 색상: #ffffff
디자인을 완료하려면 행 설정을 열고 다음을 업데이트하십시오.
이 행을 전체 너비로 만들기: 예
거터 폭: 1
맞춤 패딩(데스크톱): 위쪽 0px, 아래쪽 0px, 왼쪽 6%, 오른쪽 6%
맞춤 패딩(스마트폰: 위쪽 0px, 아래쪽 0px, 왼쪽 0%, 오른쪽 0%)
이제 최종 디자인을 확인하십시오.
마지막 생각들
이러한 게시물 제목 디자인을 사용하면 Divi 게시물 제목 모듈과 Divi Builder로 가능한 것을 꽤 잘 이해할 수 있을 것입니다. 추천 이미지에 대한 동적 콘텐츠의 기능과 결합된 몇 가지 디자인 조정으로 블로그 게시물에 대한 수많은 고유한 게시물 제목 스타일을 만들 수 있습니다. 무엇이든, 이것들이 여러분이 멋진 게시물 제목을 스스로 만드는 데 영감을 주기를 바랍니다.
더 많은 관련 디자인 영감을 얻으려면 아름답고 매력적인 동적 블로그 게시물 영웅 섹션에 대한 블로그 게시물과 Divi에서 깨진 그리드 레이아웃을 디자인하는 비법을 확인하십시오.
댓글로 여러분의 의견을 기다리겠습니다.
건배!