Divi에서 곡선 텍스트 디자인을 만드는 방법

웹 페이지에 텍스트를 표시하는 독특한 방법을 찾고 있다면 Divi에서 곡선 텍스트 디자인을 만드는 방법을 아는 것이 유용할 수 있습니다. 이러한 종류의 디자인은 사진 편집기를 사용하지 않고도 Divi에서 사용자 정의 그래픽 또는 독창적인 헤더 디자인을 구축하는 데 사용할 수 있습니다. 일반적으로 여기에는 보다 완전한 html 및 CSS가 포함되지만 Divi를 사용하면 사용자 정의 CSS를 최소화하고 고유한 방식으로 텍스트를 쉽게 디자인할 수 있는 훨씬 더 많은 기본 제공 옵션이 있습니다.

이 튜토리얼에서는 자신의 목적에 유용한 템플릿으로 사용할 수 있는 몇 가지 곡선 문자 디자인을 만드는 방법을 보여줍니다. 있다면 미래를 위해 디자인 도구 상자에 새로운 것을 추가할 수 있습니다.

시작하자.

엿보기

다음은 이 튜토리얼에서 만들 곡선형 텍스트 디자인을 살짝 엿본 것입니다.

편지 애니메이션 디자인 예제 레이아웃을 무료로 다운로드하십시오

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

파일 다운로드

무료로 다운로드

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

다운로드

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

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder로 드래그하기만 하면 됩니다.

튜토리얼로 들어가 볼까요?

Divi에서 곡선 텍스트를 만드는 기본 아이디어

이 튜토리얼의 방법을 사용하여 곡선 텍스트를 만들려면 텍스트의 각 문자를 별도의 텍스트 모듈에 추가해야 합니다(최상의 결과를 위해 고정 폭 글꼴을 사용하는 것이 좋습니다). 텍스트 모듈에 설정된 높이를 지정합니다. 그런 다음 각 텍스트 모듈에 중앙에 절대 위치를 지정하여 모두 서로의 위에 쌓이도록 해야 합니다.

이것은 각 문자가 동일한 중심점에서 회전하기를 원하기 때문에 중요합니다. 그런 다음 Divi의 변형 옵션을 사용하여 z축을 따라 각 문자를 회전하여 곡선 텍스트를 만들 수 있습니다(수학 수업에서 나침반을 사용하여 원을 그리는 것을 생각해 보세요). 또한 각 텍스트 모듈의 높이가 원의 반지름을 결정하므로 원의 둘레도 증가하고 결과적으로 문자 사이의 공간이 더 넓어집니다.

다음은 텍스트를 위한 완벽한 원형 레이아웃을 만들기 위해 45도씩 회전하는 8개의 텍스트 모듈의 예입니다. 회전을 쉽게 볼 수 있도록 각 모듈 주위에 흰색 테두리를 추가했습니다.

그리고 다음은 동일한 텍스트 모듈이 20도씩 회전하는 예입니다.

시작하기

YouTube 채널 구독

시작하려면 Divi에서 새 페이지를 만드세요. 그런 다음 페이지에 제목을 지정하고 프런트 엔드에 Divi 빌더를 배포합니다. "처음부터 빌드" 옵션을 선택합니다. 이제 갈 준비가 되었습니다!

곡선 텍스트 디자인 만들기

섹션 및 행 생성

먼저 한 열 행이 있는 일반 섹션을 만듭니다.

모듈을 추가하기 전에 다음과 같이 섹션 설정을 업데이트하십시오.

• 배경 그라데이션 왼쪽 색상: #1e003d
• 배경 그라데이션 오른쪽 색상: #121212
• 그라디언트 유형: 방사형

• 배경 이미지: [약 100px x 100px 로고 이미지 삽입]
• 배경 이미지 크기: 실제 크기

설정을 저장한 다음 행 설정으로 이동하고 다음을 업데이트합니다.

• 거터 폭: 1
• 폭: 100%
• 최소 높이: 400px
• 높이: 40vw
• 최대 높이: 600px
• 맞춤 패딩: 위쪽 0px, 아래쪽 0px

그런 다음 Column Main Element에 다음 사용자 정의 CSS를 추가하여 모든 텍스트 모듈이 수평으로 중앙에 유지되도록 합니다.

열 주요 요소 CSS:

display:flex;
justify-content:center;

각 문자에 대한 텍스트 모듈 만들기

이제 첫 글자로 첫 번째 텍스트 모듈을 추가할 준비가 되었습니다. 이렇게 하려면 행 열에 새 텍스트 모듈을 추가하고 다음을 업데이트하십시오.

• 내용: d(단일 문자)
• 텍스트 글꼴: Ubuntu Mono(고정 폭 글꼴이면 가능)
• 텍스트 텍스트 색상: #ffffff
• 텍스트 텍스트 크기: 5vw(데스크톱), 40px(전화)
• 텍스트 방향: 중앙
• 최소 높이: 200px
• 높이: 20vw
• 최대 높이: 300px

그런 다음 변환 원점을 맨 아래로 업데이트합니다. 이것은 텍스트의 회전이 발생하는 위치를 결정하는 데 중요합니다. 텍스트 모듈이 모듈의 맨 아래 지점에서 회전하기를 원합니다. 이 첫 번째 텍스트 모듈은 회전할 필요가 없지만 추가 문자에 대해 텍스트 모듈을 복제할 때마다 이 옵션을 계속 사용할 수 있도록 여기에 추가하는 것이 중요합니다.

• 변환 원점: 100%(또는 하단)

그런 다음 기본 요소에 다음 사용자 정의 CSS를 추가하여 텍스트 모듈에 절대 위치를 지정합니다.

position: absolute !important;

다른 텍스트 모듈 생성 및 회전

나머지 문자를 만들기 위해 텍스트 모듈을 복제합니다. 텍스트 모듈을 복제한 후에는 문자를 업데이트한 다음 새 모듈마다 회전을 45도 증가시키기만 하면 됩니다.

텍스트 모듈은 프런트 엔드의 각 모듈 위에 쌓이기 때문에 와이어프레임 보기 모드를 사용하여 이러한 업데이트를 수행하는 것이 가장 좋습니다.

계속해서 텍스트 모듈을 복제하고 다음을 업데이트하십시오.

• 내용: 나
• 변환 회전 z축: 45deg

텍스트 모듈을 복제한 다음 새 문자로 텍스트 모듈을 업데이트하고 변환 회전을 45도 증가시키는 프로세스를 계속합니다. 다음은 나머지 6개의 텍스트 모듈 업데이트에 대한 분석입니다.

텍스트 모듈 3

• 내용: v
• 변환 회전 z축: 90deg

텍스트 모듈 4

• 내용: 나
• 변환 회전 z축: 135deg

텍스트 모듈 5

• 내용: d
• 변환 회전 z축: 180deg

텍스트 모듈 6

• 내용: 나
• 변환 회전 z축: 225deg

텍스트 모듈 7

• 내용: v
• 변환 회전 z축: 270deg

텍스트 모듈 8

• 내용: 나
• 변환 회전 z축: 315deg

그게 다야! 이제 최종 결과를 확인하십시오.

최종 결과

긴 텍스트의 텍스트 크기 및 회전 각도 조정

더 큰 텍스트 디자인 옵션에 대해 곡선 텍스트를 조정하려는 경우 텍스트 크기를 변경하고 각 텍스트 모듈의 회전을 변환할 수 있습니다.

와이어프레임 보기 모드를 배포한 다음 Divi의 다중 선택 기능을 사용하여 곡선 문자가 포함된 모든 텍스트 모듈을 선택합니다. 그런 다음 클릭하여 선택한 텍스트 모듈 중 하나의 설정을 열어 선택한 모든 모듈을 한 번에 업데이트하는 요소 설정 모달을 엽니다.

요소 설정에서 바탕 화면의 텍스트 텍스트 크기를 40px로 변경합니다.

설정을 저장한 다음 각 텍스트 모듈에 대한 설정을 열고 각각의 문자와 회전을 업데이트합니다. 첫 번째 텍스트 모듈을 0도 회전으로 두고 이어지는 모든 텍스트 모듈에 대해 z축 회전을 10도 늘립니다. 그런 다음 필요에 따라 더 많은 문자에 대해 텍스트 모듈을 복제합니다. 이 예에서는 "elegant.themes"를 철자합니다.

다음은 각 텍스트 모듈에 필요한 내용 문자 및 회전에 대한 분석입니다.

• 텍스트 모듈 1
  • 내용: 전자
  • 변환 회전 z축: 0deg
• 텍스트 모듈 2
  • 내용: 엘
  • 변환 회전 z축: 10deg
• 텍스트 모듈 3
  • 내용: 전자
  • 변환 회전 z축: 20deg
• 텍스트 모듈 4
  • 내용: 지
  • 변환 회전 z축: 30deg
• 텍스트 모듈 5
  • 내용:
  • 변환 회전 z축: 40deg
• 텍스트 모듈 6
  • 내용: n
  • 변환 회전 z축: 50deg
• 텍스트 모듈 7
  • 내용: t
  • 변환 회전 z축: 60deg
• 텍스트 모듈 8
  • 콘텐츠: .
  • 변환 회전 z축: 70deg
• 텍스트 모듈 9
  • 내용: t
  • 변환 회전 z축: 80deg
• 텍스트 모듈 10
  • 내용: h
  • 변환 회전 z축: 90deg
• 텍스트 모듈 10
  • 내용: 전자
  • 변환 회전 z축: 100deg
• 텍스트 모듈 11
  • 내용: m
  • 변환 회전 z축: 110deg
• 텍스트 모듈 12
  • 내용: 전자
  • 변환 회전 z축: 120deg
• 텍스트 모듈 13
  • 내용물
  • 변환 회전 z축: 130deg

여기까지의 결과입니다.

전체 텍스트의 회전을 조정하는 쉬운 방법은 행에 변형 회전을 적용하는 것입니다. 행 설정을 열고 Z-색인 컨트롤 다이얼을 사용하여 원하는 위치에 곡선 텍스트를 배치합니다.

다음은 최종 디자인입니다.

더 많은 텍스트를 추가하고 회전 정도를 조정하여 문자 사이의 올바른 간격을 확보하는 방법을 자유롭게 탐색하십시오. 텍스트 모듈의 높이를 조정하여 반경을 줄이거나 늘릴 수도 있습니다.

마지막 생각들

Divi에서 곡선 텍스트 디자인을 만드는 것은 작동 방식을 이해하면 매우 간단한 프로세스입니다. 이 기사는 곡선에서 회전하도록 텍스트 모듈을 설정하는 것과 관련된 지오메트리를 이해하는 데 도움이 될 것입니다. 그리고 설정이 제대로 되면 몇 가지 사용자 정의 CSS 스니펫 외에 Divi의 기본 제공 디자인 설정을 사용하여 창의력을 발휘할 수 있습니다. 이 글이 독특한 곡선형 텍스트 디자인을 만드는 데 약간의 영감을 줄 수 있기를 바랍니다.

그리고 곡선 문자에 애니메이션을 추가하려면 문자에 애니메이션을 적용하는 방법에 대한 기사를 확인하십시오.

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

건배!