Divi에서 섹션 구분선을 사용하여 멋진 텍스트 디자인을 만드는 방법
게시 됨: 2018-10-08웹 사이트를 위한 고유한 텍스트 디자인을 만드는 것은 어려울 수 있습니다. 특히 많은 CSS를 사용하고 싶지 않거나 Photoshop에서 디자인하는 이미지에 대해 검색 친화적인 텍스트를 보완하려는 경우에는 더욱 그렇습니다. Divi(및 일부 "즉시 사용 가능한" 사고)를 사용하면 외부 CSS나 사용자 정의 이미지 없이 고유한 텍스트 디자인을 만들 수 있습니다. 트릭은 Divi의 섹션 구분선을 사용하여 텍스트를 오버레이하여 다양한 방법으로 나누기와 질감을 추가하는 것입니다. 이 튜토리얼에서는 페이지 헤더를 한 단계 끌어올릴 고유한 텍스트 디자인을 만들기 위해 Divi의 섹션 구분선의 기능을 살펴보겠습니다.
시작하자.
엿보기
다음은 이 기술을 사용하여 가능한 텍스트 디자인의 몇 가지 예입니다.
시작하기
이 디자인의 경우 비주얼 빌더를 사용하여 새 페이지를 만들어야 합니다. WordPress 대시보드에서 페이지 > 새로 추가로 이동합니다. 그런 다음 페이지에 제목을 지정하고 시각적 빌더를 배포합니다. "처음부터 빌드" 옵션을 선택합니다. 이제 시작할 준비가 되었습니다!
디자인 #1: 그라데이션 강조 표시가 있는 깨진 텍스트
이 첫 번째 텍스트 디자인에서는 섹션 구분선을 사용하여 텍스트를 나누고 그라데이션 배경을 사용하여 고유한 모양의 강조 요소를 추가하겠습니다. 1열 레이아웃으로 새 섹션을 추가합니다. 이 시점에서 모듈을 추가할 필요가 없습니다. 먼저 섹션을 사용자 정의하는 것으로 시작합니다.
섹션 설정
섹션 설정을 열고 다음을 업데이트합니다.
배경 그라데이션 왼쪽 색상: rgba(124,218,36,0.66)
배경 그라데이션 오른쪽 색상: rgba(0,106,193,0.61)
폭: 80%
단면 정렬: 중앙
상단 구분선 스타일: 스크린샷 참조
상단 구분선 색상: #ffffff
상단 분배기 높이: 1.8vw
상단 디바이더 수평 반복: 3x
상단 구분선 배열: 섹션 콘텐츠 상단
하단 구분선 스타일: 스크린샷 참조
하단 구분선 색상: #ffffff
하단 디바이더 높이: 1.8vw
하단 디바이더 수평 반복: 3x
하단 구분선 배열: 섹션 콘텐츠 상단
사용자 정의 여백: 5vw 상단, 5vw 하단
맞춤 패딩: 상단 0px, 하단 0px
텍스트 디자인은 섹션 구분선을 사용하여 이루어지므로 여백 없이 섹션을 작게 유지하여 구분선이 최소 구분선 높이로 텍스트와 겹치도록 하는 것이 중요합니다. vw 길이 단위로 구분선 높이를 설정하면 구분선 스타일이 모든 화면 크기에서 일관된 디자인을 위해 적절하게 확장됩니다. 섹션에 사용자 지정 여백을 주는 것은 선택 사항이지만 텍스트 모듈에서 음수 여백을 사용하여 섹션 위아래로 확장하므로 간격에 유용합니다(이는 나중에 더 이해가 될 것입니다).
행 설정
행의 경우 너비와 패딩을 조정하기만 하면 됩니다. 다음 행 설정을 업데이트합니다.
사용자 정의 너비: 100%
맞춤 패딩: 상단 0px, 하단 0px
텍스트가 행 열에 추가되므로 분할자가 텍스트의 상단과 하단을 감싸도록 패딩을 제거해야 합니다.
텍스트 모듈 설정
이제 마지막으로 한 열 행에 텍스트 모듈을 추가할 수 있습니다. 행 안에 "우리 작업"이라는 내용의 텍스트 모듈을 추가합니다. 그런 다음 디자인 설정을 다음과 같이 업데이트합니다.
텍스트 글꼴: Oswald
텍스트 글꼴 스타일: TT
텍스트 텍스트 색상: #0c71c3
텍스트 텍스트 크기: 10vw
텍스트 줄 높이: 1em
텍스트 방향: 중앙
사용자 정의 여백: -5vw 상단, -4vw 하단
맞춤 패딩: 2vw 상단, 2vw 하단
여기서 핵심은 사용자 정의 음수 여백을 사용하여 섹션 위아래로 텍스트를 확장하는 것입니다. 이렇게 하면 섹션 구분선이 텍스트 내부와 겹쳐서 깨진 디자인 효과를 만들 수 있습니다. 또한 배경 그라디언트가 빛을 발하여 멋진 디자인 터치를 제공합니다. 결과는 아마도 내가 가장 좋아하는 텍스트 디자인 중 하나일 것입니다.
다음은 최종 디자인입니다.
텍스트 디자인 #2: 세로선 텍스처가 있는 텍스트
두 번째 텍스트 디자인의 경우 한 열 행이 있는 새 섹션을 만듭니다. 그런 다음 열에 텍스트 모듈을 추가합니다. 섹션을 먼저 커스터마이징하는 것보다 디자인 과정을 더 잘 볼 수 있도록 텍스트 모듈로 시작하는 것이 가장 좋다고 생각했습니다.
텍스트 설정
한 열 행에 "우리 작업"이라는 내용의 텍스트 모듈을 추가합니다. 그런 다음 디자인 설정을 다음과 같이 업데이트합니다.
텍스트 글꼴: Poppins
텍스트 글꼴 두께: 매우 굵게
텍스트 글꼴 크기: 8vw
텍스트 줄 높이: 1em
텍스트 방향: 중앙
맞춤 여백: 위쪽 0px, 아래쪽 0px
행 설정
행 설정은 첫 번째 디자인 예제와 동일하므로 행 스타일을 복사하여 이 행에 붙여넣을 수 있습니다. 또는 다음과 같이 행 설정을 업데이트하십시오.
사용자 정의 너비: 100%
맞춤 패딩: 상단 0px, 하단 0px
섹션 설정
다음과 같이 섹션 설정을 업데이트합니다.
폭: 70%
상단 구분선 스타일: 스크린샷 참조
상단 구분선 색상: #ffffff
상단 분배기 높이: 8vw
상단 디바이더 수평 반복: 150x
상단 구분선 배열: 섹션 콘텐츠 상단
하단 구분선 스타일: 스크린샷 참조
하단 구분선 색상: #ffffff
하단 디바이더 높이: 8vw
하단 디바이더 수평 반복: 150x
하단 디바이더 플립: 수직
하단 구분선 배열: 섹션 콘텐츠 상단
맞춤 패딩: 상단 0px, 하단 0px
이 디자인의 핵심은 디바이더 수평 반복 옵션입니다. 구분선 수평 반복을 텍스트 높이와 동일한 높이로 150x로 설정하면 섹션의 상단과 하단에서 확장되는 일련의 겹치는 수직선이 생성됩니다. "선"이 위쪽으로 확장되도록 하단 구분선을 수직으로 뒤집도록 설정하는 것을 잊지 마십시오.
다음은 최종 디자인입니다.
디자인 #3: 위쪽과 아래쪽에 부분 텍스처가 있는 텍스트
이 다음 디자인의 프로세스 속도를 높이려면 위의 두 번째 디자인 예제에서 방금 만든 섹션을 복제하세요.
섹션 설정 업데이트
배경색: #e02b20
상단 구분선 스타일: 스크린샷 참조
상단 구분선 색상: #e02b20
상단 분배기 높이: 3vw
상단 디바이더 수평 반복: 30x
하단 구분선 스타일: 스크린샷 참조
하단 디바이더 색상: #e02b20
하단 디바이더 높이: 3vw
하단 디바이더 수평 반복: 30x
여기서 핵심은 구분선 색상이 섹션 배경색과 일치하는지 확인하여 구분선이 텍스트와 겹치는 곳에서만 볼 수 있도록 하는 것입니다.
텍스트 설정 업데이트
이제 남은 것은 텍스트 텍스트 색상을 업데이트하는 것입니다.
텍스트 텍스트 색상: #ffffff
다음은 최종 디자인입니다.
디자인 #3의 재미있는 디자인 대안
이 디자인을 떠나기 전에 이 섹션의 아래쪽 구분선을 잔디로 쉽게 바꿔서 텍스트가 들판에 앉아 있는 것처럼 보이게 하는 방법을 공유하고 싶습니다. 이렇게 하려면 다음과 같이 설정을 업데이트하십시오.
배경 그라데이션 왼쪽 색상: #68a4d8(하늘)
배경 그라데이션 오른쪽 색상: #1c7503(잔디)
시작 위치: 82%
최종 위치: 0%
사용자 정의 패딩: 5vw 상단
상단 구분선 스타일: 구름(또는 거품?)
하단 디바이더 색상: #1c7503
그런 다음 텍스트 색상을 #000835로 업데이트하십시오.
결과는 다음과 같습니다.
모바일은 어떻습니까?
이러한 디자인 전반에 걸쳐 vw 길이 단위가 사용되었기 때문에 텍스트 및 구분선 스타일은 태블릿 및 스마트폰에서 추가 크기를 할당할 필요 없이 모든 브라우저에서 적절하게 확장됩니다. 그러나 스마트폰에서 텍스트가 너무 작게 축소되는 문제가 발생하면 텍스트 크기 vw 길이 단위 값을 늘려야 할 수 있습니다.
마지막 생각들
독특한 텍스트 디자인을 위해 섹션 구분선을 실험하는 데 재미를 느끼셨기를 바랍니다. Divi에서 사용할 수 있는 다양한 글꼴, 색상 및 구분선 스타일을 사용하면 다음 프로젝트를 위해 자신만의 멋진 텍스트 디자인을 만드는 데 문제가 없을 것이라고 확신합니다.
섹션 구분선을 창의적으로 사용하는 방법에 대한 더 많은 영감을 얻으려면 이러한 배경 텍스처, 탐색 메뉴 프레임 및 하단 바닥글 막대 배경을 확인하세요.
다음 시간까지 댓글로 여러분의 의견을 기다리겠습니다.
건배!