Divi에서 5가지 고유한 제목 디자인을 만들기 위한 스태킹 타이포그래피

스태킹 타이포그래피는 Divi에서 아름다운 제목 디자인을 만드는 쉽고 효과적인 기술입니다. 타이포그래피는 검색 엔진이 읽는 콘텐츠에 실제로 기여하지 않는 방식으로 추상적인 디자인 요소로 엄격하게 사용되는 경우가 많습니다. 그러나 몇 가지 Divi 기술을 사용하여 실제 제목(h1, h2 등)의 디자인으로 창의력을 발휘할 수도 있습니다.

이 튜토리얼에서는 Divi를 사용하여 스택형으로 5가지 다른 제목 디자인을 만들 것입니다. 이 디자인을 자신만의 제목 디자인에 대한 영감으로 사용할 수 있기를 바랍니다.

시작하자.

엿보기

5가지 디자인을 소개합니다.

디자인 #1

디자인 #2

디자인 #3

디자인 #4

디자인 #5

시작하기

우리는 이러한 디자인을 처음부터 구축할 것입니다. 시작하려면 새 페이지를 만들고 페이지에 제목을 지정한 다음 Visual Builder를 배포하세요. "처음부터 빌드" 옵션을 선택하면 빌드를 시작할 준비가 된 것입니다.

5가지 디자인 각각을 만드는 과정을 단순화하기 위해 섹션을 복제하여 다음 디자인을 먼저 시작할 것입니다. 따라서 첫 번째 디자인부터 시작하여 이러한 디자인을 순서대로 만드는 것이 가장 좋습니다.

제목 디자인 #1

이 첫 번째 디자인의 경우 제목 텍스트를 세로로 쌓아 행 중앙에 배치하는 방법을 보여 드리겠습니다. 또한 흰색 페이지 배경과 완벽하게 혼합되는 균형 잡힌 반투명 흰색 오버레이를 제공하기 위해 배경 이미지 위에 두 개의 그라디언트 레이어(섹션에 하나, 행에 하나)를 추가할 것입니다. 결과는 미묘하지만 매우 독특하고 깨끗합니다.

텍스트 모듈을 추가하기 전에 먼저 섹션 및 행 설정을 처리해 보겠습니다. 이렇게 하면 나중에 모듈을 훨씬 쉽게 조정할 수 있습니다.

섹션 설정으로 이동하여 다음을 업데이트합니다.

배경 이미지 추가(최소 너비 1920px)
배경 그라데이션 왼쪽 색상: #ffffff
배경 그라데이션 오른쪽 색상: rgba(255,255,255,0)
배경 이미지 위에 그라디언트 배치: 예

다음으로 행 설정을 다음과 같이 업데이트합니다.

배경 그라데이션 왼쪽 색상: rgba(255,255,255,0)
배경 그라데이션 오른쪽 색상: #ffffff
사용자 정의 너비: 100%
맞춤 패딩: 상단 0px, 하단 0px

이제 3열 행의 중간 열에 텍스트 모듈을 추가할 수 있습니다. 그런 다음 다음과 같이 텍스트 모듈 설정을 업데이트합니다.

콘텐츠 상자의 모의 콘텐츠를 다음과 같이 "design"이라고 읽는 h2 헤더로 바꿉니다.

<h2>design</h2>

그런 다음 나머지 설정을 다음과 같이 업데이트합니다.

제목 2 글꼴: 카이로
제목 2 글꼴 두께: 일반
제목 2 글꼴 스타일: 대문자(TT)
제목 2 텍스트 크기: 8vw
너비: 58%(데스크톱), 16%(태블릿), 18%(스마트폰)
모듈 정렬: 중앙
사용자 정의 여백: -10vw 상단, -10vw 하단

8vw 제목 텍스트 크기와 결합된 사용자 정의 너비 값은 이 디자인을 만드는 핵심입니다. 사용자 정의 너비는 각 문자가 서로 겹쳐지도록 텍스트를 압축합니다. 텍스트 모듈을 포함하는 열 크기가 1/3에서 전체 너비로 이동하기 때문에 너비 백분율 값은 태블릿에서 크게 변경됩니다. 제목 텍스트를 vw(뷰포트 너비) 길이 단위로 설정하면 텍스트가 브라우저 창 크기에 따라 완벽하게 확장됩니다.

마지막으로 좌우 경계선으로 디자인을 마무리해 보겠습니다.

오른쪽 테두리 너비: 4px
왼쪽 테두리 너비: 4px

다음은 최종 결과입니다.

제목 디자인 #2

이 다음 예에서는 각 문자를 개별적으로 쌓는 대신 제목 텍스트가 반으로 나누어 쌓이도록 디자인을 약간 조정하겠습니다. 나는 또한 다른 모습을 위해 메인 제목 아래에 부제목을 추가할 것입니다.

콘텐츠 상자에 다음 h3 제목을 추가합니다.

<h3>our process</h3>

그런 다음 모듈에 흰색 배경을 추가합니다.

배경색: #ffffff

디자인 탭에서 다음을 업데이트합니다.

제목 2 텍스트 크기: 10vw
너비: 100%(데스크톱), 32%(태블릿), 33%(스마트폰)
제목 3 글꼴: Ubuntu Condensed
제목 3 텍스트 정렬: 가운데
제목 3 텍스트 크기: 32px(데스크톱), 20px(태블릿), 16px(스마트폰)

그런 다음 텍스트 모듈의 간격을 업데이트하여 모바일에서 더 빠르게 반응하도록 합니다.

사용자 정의 여백(태블릿): -5vw 상단, -10vw
사용자 정의 여백(스마트폰): -5vw 상단, -12vw

이제 섹션과 행에서 배경 그라디언트를 제거하십시오.

그런 다음 다음 행 설정을 업데이트하여 행에 약간의 패딩을 추가합니다.

사용자 지정 패딩(데스크톱): 5vw 상단, 5vw 하단
사용자 지정 패딩(태블릿): 0vw 상단, 0vw 하단

다음은 최종 결과입니다.

제목 디자인 #3

이번에는 제목을 왼쪽으로 오프셋하고 각 문자를 세로로 쌓는 것으로 돌아갑니다. 그런 다음 글꼴을 변경하고 모듈 테두리를 보완하기 위해 행에 일치하는 테두리를 지정하겠습니다.

두 번째 디자인 섹션을 복제하고 다음과 같이 모듈 설정을 업데이트합니다.

먼저 콘텐츠 상자에서 h3 제목을 삭제합니다.

제목 2 글꼴: Ubunto Condensed
제목 2 텍스트 크기: 6vw
너비: 54%(데스크톱), 16.4%(태블릿), 17.5%(스마트폰)
모듈 정렬: 왼쪽(기본값)

모바일 장치에 맞게 조정하려면 다음 간격을 업데이트하십시오.

사용자 정의 여백(태블릿): -15vw 하단
사용자 정의 여백(스마트폰): -17vw 하단

이제 행 설정으로 이동하여 다음을 업데이트하여 간격을 올바르게 맞추십시오.

맞춤 패딩: 상단 2vw, 하단 2vw, 왼쪽 10vw

그런 다음 행에 테두리를 추가하여 모듈의 테두리를 보완합니다.

상단 테두리 너비: 4px
하단 테두리 너비: 4px

이제 모듈을 행의 왼쪽 열로 드래그하기만 하면 됩니다.

최종 결과를 확인하십시오.

제목 디자인 #4

마지막 제목 디자인의 경우 누적 제목을 완전히 왼쪽 정렬한 다음 색상과 멋진 상자 그림자 효과를 추가합니다.

먼저 행 설정을 업데이트하여 왼쪽 패딩을 제거합니다.

그런 다음 다음을 포함하도록 텍스트 모듈 설정을 업데이트합니다.

배경색: #5b7796
텍스트 색상: 라이트
제목 2 글꼴: 카이로
제목 2 글꼴 스타일: 기본값
제목 2 텍스트 크기: 10vw

텍스트 텍스트 크기: 5vw
맞춤 패딩: 상단 2vw, 하단 2vw, 왼쪽 4vw, 오른쪽 4vw

테두리 스타일을 기본값으로 복원한 다음 다음과 같이 새 테두리 설정을 업데이트합니다.

테두리 오른쪽 너비: 0.2em
오른쪽 테두리 색상: #ffffff

하단 테두리 너비: 0.2em
오른쪽 테두리 색상: #ffffff

이제 알 수 있듯이 테두리의 0.2em 값이 작게 보일 수 있습니다. 이는 em 값이 본문 글꼴 값을 기반으로 하기 때문이며, 이러한 이유로 특별히 5vw로 변경했습니다. 제목의 크기에 따라 테두리 너비를 조정하기를 원하기 때문에 본문 텍스트에 브라우저 크기에 따라 조정되는 vw 길이 단위 값을 제공해야 합니다.

이제 멋진 깨진 격자 효과를 위해 상자 그림자를 지정해 보겠습니다.

박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: 20px
상자 그림자 수직 위치: 20px
그림자 색상: #5b7796
상자 그림자 위치: 외부 그림자

그런 다음 모바일용 모듈의 크기를 업데이트합니다.

너비: 50%(데스크톱), 13%(태블릿), 16%(스마트폰)

마지막 단계로 행의 패딩과 테두리를 제거합니다.

그런 다음 최종 결과를 확인하십시오.

제목 디자인 #5

이 마지막 제목 디자인의 경우 텍스트 모듈을 넓히기 위해 간격을 약간 조정할 것입니다. 이렇게 하면 제목 디자인 #2에서와 유사한 디자인이 생성됩니다.

먼저 텍스트 모듈을 열고 h2 제목 아래에 다음 텍스트를 추가합니다.

<h3>our process</h3>

그런 다음 디자인 설정을 다음과 같이 업데이트합니다.

제목 2 글꼴 스타일: 대문자(TT)
너비: 94%(데스크톱), 29%(태블릿), 29%(스마트폰)

그런 다음 다음과 같이 간격을 업데이트합니다.

사용자 정의 여백: -8vw 상단, -5vw 하단
맞춤 패딩: 4vw 상단, 4vw 하단

다음은 최종 결과입니다.

반응형

이러한 디자인이 모바일에서 잘 보이도록 하는 비결은 축소되는 브라우저 창에 맞게 텍스트 모듈의 크기와 여백을 조정하는 것입니다. 따라서 무언가가 제대로 확장되지 않으면 이러한 속성을 자신의 목적에 맞게 조정해야 할 수 있습니다. 다음은 모바일에서 디자인이 어떻게 보일지입니다.

마지막 생각들

이 튜토리얼의 5가지 제목 디자인이 최소한 자신의 디자인을 위한 훌륭한 출발점을 제공하기를 바랍니다. 예상할 수 있듯이 디자인은 텍스트가 세로로 쌓이기 때문에 짧은(한 단어) 제목에 가장 적합합니다. 그러나 이러한 디자인을 정말 독특하게 만들기 위해 추가할 수 있는 수많은 디자인 요소가 있습니다. 다양한 글꼴, 색상 및 테두리를 자유롭게 탐색하여 나만의 글꼴로 만드십시오.

더 많은 영감을 얻으려면 이 세로 텍스트 레이아웃을 확인하세요. 또한 보다 맞춤화된 CSS 접근 방식으로 가로 및 세로 텍스트를 만드는 방법을 배우고 싶을 수도 있습니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!