Divi에서 3가지 멋진 고정 폭 글꼴 디자인을 만드는 방법

고정 폭 글꼴은 웹 디자인의 즐거운 자산입니다. 그들은 아름다운 대칭과 균형을 가진 디자인을 만드는 데 특히 유용합니다. 고정 폭 글꼴은 너비(또는 가로 간격)가 동일한 문자와 문자로 구성됩니다. 따라서 텍스트를 표시하기 위한 일관되고 우아한 구조를 제공합니다. 이러한 이유로 고정 폭 글꼴은 코딩에 널리 사용됩니다.

이 튜토리얼에서는 Divi에서 세 가지 멋진 고정 폭 글꼴 디자인을 만들 것입니다. 고정 폭 글꼴을 매우 독특한 방식으로 배치하고 디자인하기 위해 텍스트 모듈을 적절하게 사용자 정의하는 방법 등을 살펴보겠습니다.

시작하자.

엿보기

다음은 이 튜토리얼에서 만들 디자인에 대한 간략한 설명입니다.

고정 폭 글꼴 디자인 #1: 로고 스타일

건물 디자인 시작 #1

고정 폭 글꼴 디자인 #2: 큰 글자 블록

건물 설계 시작 #2

고정 폭 글꼴 디자인 #3: 낱말 퍼즐

건물 설계 시작 #3

Monospaced 글꼴 디자인 레이아웃을 무료로 다운로드하십시오

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

파일 다운로드

무료로 다운로드

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

다운로드

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

YouTube 채널 구독

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

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

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 설치된 Divi 테마(또는 Divi 테마를 사용하지 않는 경우 Divi Builder 플러그인)를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. 튜토리얼에 사용할 모의 이미지 몇 개를 미디어 라이브러리에 업로드합니다. HVAC 레이아웃 팩의 200px x 200px 이미지 로고와 Cake Maker Layout Pack 및 Home Improvement Layout Pack에서 가져온 두 개의 배경 이미지(최소 너비 1920px)를 사용할 것입니다.

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

고정 폭 글꼴 디자인 #1: 로고 스타일

글자의 대칭적인 균형을 강조하는 단순한 고정 폭 글꼴 디자인부터 시작해 보겠습니다. 글자 간격이 균일하기 때문에 고정 폭 글꼴은 그래픽과 로고에 적합합니다. 다음은 고정 폭 글꼴을 간단한 이미지 아이콘과 통합하여 멋진 그래픽을 만드는 방법에 대한 간단한 예입니다.

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

텍스트 모듈을 추가하기 전에 섹션에 배경을 추가할 것입니다. 배경은 어두운 회색 배경의 중앙 아이콘 이미지로 구성됩니다. 우리가 사용할 아이콘 이미지는 HVAC 레이아웃 팩에서 가져온 것입니다. 실제 크기를 배경 이미지로 사용할 것이기 때문에 이미지 아이콘이 약 200px x 200px인지 확인하십시오.

섹션 설정을 열고 다음을 업데이트합니다.

• 배경색: #121212
• 배경 이미지: [200x200픽셀 이미지 아이콘 삽입]
• 배경 이미지 크기: 실제 크기
• 배경 이미지 위치: 중앙

텍스트 모듈 추가

섹션이 완료되면 한 열 행에 텍스트 모듈을 추가합니다.

여기에 고정 폭 글꼴로 텍스트를 추가합니다. 고정 폭 문자의 편리한 점은 각 문자의 너비가 동일하기 때문에 페이지에서 텍스트의 중간 문자를 쉽게 중앙에 배치할 수 있다는 것입니다. 이렇게 하면 섹션에 추가한 배경 이미지 아이콘과 쉽게 정렬할 수 있습니다.

텍스트 모듈 설정을 열고 "우아한"이라는 단어로 본문 내용을 업데이트하십시오. 실제로 배경 이미지 아이콘과 멋지게 겹치는 가운데 문자가 있도록 홀수 문자가 있는 거의 모든 단어를 사용할 수 있습니다.

고정 폭 글꼴 디자인 추가

Divi에는 우리가 선택할 수 있는 Divi 빌더에 포함된 약 12가지 고정 폭 글꼴이 있습니다. 이를 보려면 클릭하여 텍스트 글꼴을 선택하고 검색 창에 "모노"를 입력할 수 있습니다. 사용 가능한 고정 폭 글꼴 목록이 표시됩니다.

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

• 텍스트 글꼴: Droid Sans Mono
• 텍스트 텍스트 크기: 5vw
• 텍스트 문자 간격: 1.3em
• 텍스트 줄 높이: 1em

텍스트 크기에 대한 vw 길이 단위와 문자 간격 및 줄 높이에 대한 em 길이 단위의 조합은 텍스트가 모든 브라우저 크기에 완벽하게 반응하도록 합니다.

간격

글꼴이 준비되면 텍스트 모듈에 약간의 간격을 추가하여 텍스트가 완벽하게 중앙에 오도록 합니다. 글자 간격 때문에 텍스트가 중앙에서 약간 벗어난 것을 볼 수 있습니다. 문자 간격에 추가한 값과 동일한 왼쪽 패딩을 추가하여 이 문제를 쉽게 고칠 수 있습니다.

다음을 업데이트합니다.

• 여백: 0px 하단
• 패딩: 상단 2em, 하단 2em, 왼쪽 1.3em

중앙 문자의 색상 변경

Divi에서 단일 문자의 색상을 변경하는 간단한 방법은 프런트 엔드에서 빌더를 사용할 때 인라인 스타일 옵션을 사용하는 것입니다.

변경하려는 문자를 강조 표시하고 메뉴 표시줄에서 텍스트 색상 아이콘을 클릭하기만 하면 됩니다.

그런 다음 다음 색상 코드를 추가하십시오. rgba(248, 142, 96, 0.54)

그게 다야!

행을 전체 너비로 만들기

텍스트가 추가될 공간을 확보해야 하므로 행 설정을 열고 다음을 업데이트하여 행을 전체 너비로 만듭니다.

• 폭: 100%
• 최대 너비: 100%

최종 결과

다음은 최종 결과입니다.

그리고 원하는 경우 텍스트의 가운데 문자에 공백을 추가하여 빈 공간에 배경 이미지 아이콘을 사용할 수 있습니다. 다음은 그 모습입니다.

고정 폭 글꼴 디자인 #2: 큰 글자 블록

다음 디자인은 고정 폭 글꼴로 가능한 블록과 같은 글꼴 구조를 보여줍니다. 일반(가변 너비) 글꼴과 달리 고정 폭 글꼴은 현대적이고 눈을 즐겁게 하는 균형 잡힌 디자인을 위해 서로 겹쳐집니다.

방법은 다음과 같습니다.

한 열 행으로 새 일반 섹션을 만듭니다.

모듈을 추가하기 전에 다음과 같이 배경 디자인으로 섹션을 업데이트하십시오.

• 배경 그라데이션 왼쪽 색상: #fcd1e5
• 배경 그라데이션 오른쪽 색상: rgba(255,255,255,0)
• 기울기 방향: 135deg
• 시작 위치: 50%
• 최종 위치: 76%

그런 다음 배경 이미지를 추가합니다. 나는 케이크 메이커 레이아웃 팩에서 하나를 사용하고 있습니다.

행 너비 추가

다음으로 행 너비를 다음과 같이 업데이트합니다.

• 폭: 100%
• 최대 너비: 100%

텍스트 모듈 추가

전체 너비 행이 있으면 행에 텍스트 모듈을 추가하십시오.

그런 다음 다음으로 본문 내용을 업데이트합니다.

<p>dividesign<a href="#">learnmore</a></p>

그런 다음 단락 텍스트의 스타일을 다음과 같이 지정합니다.

• 텍스트 글꼴: 육교 모노
• 텍스트 글꼴 스타일: TT
• 텍스트 텍스트 색상: #2e298f
• 텍스트 텍스트 크기: 15vw
• 텍스트 문자 간격: 0.16em
• 텍스트 줄 높이: 1em

다음과 같이 링크 텍스트에 다른 스타일을 추가합니다.

• 링크 글꼴 스타일: 밑줄
• 링크 텍스트 색상: #2e298f
• 링크 텍스트 크기: 3.5vw
• 링크 문자 간격: 0em

간격

텍스트의 스타일을 지정한 후 다음과 같이 간격을 업데이트합니다.

• 여백: 0px 하단
• 패딩: 왼쪽 0.16em, 오른쪽 3em

그런 다음 설정을 저장합니다. 그런 다음 게시물 앞부분의 첫 번째 디자인 예제에서 했던 것처럼 인라인 스타일 옵션을 사용하여 글자의 색상을 변경합니다.

이렇게 하려면 상단 네 글자를 강조 표시하고 색상을 흰색으로 변경합니다.

두 번째 문자 색상을 다음과 같이 변경합니다. #f34a43

마지막으로 링크 텍스트("학습")의 처음 다섯 글자를 강조 표시하고 색상을 다음과 같이 업데이트합니다. #f34a43.

최종 디자인

이제 라이브 페이지에서 최종 결과를 확인해 보겠습니다.

고정 폭 글꼴 디자인 #3: 낱말 퍼즐

이 마지막 디자인은 고정 폭 글꼴을 활용하여 텍스트에 대한 낱말 퍼즐 유형 레이아웃을 만듭니다. 방법은 다음과 같습니다.

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

모듈을 추가하기 전에 섹션 설정을 열고 다음과 같이 그라디언트가 있는 배경 이미지를 추가합니다.

• 배경 이미지: [이미지 삽입]
• 배경 그라데이션 왼쪽 색상:
• 배경 그라디언트 오른쪽 색상:
• 기울기 방향 : 90deg
• 시작 위치: 25%
• 최종 위치: 0%
• 배경 이미지 위에 그라디언트 배치: 예

행 설정

섹션 배경이 완료되면 새로운 너비와 약간의 간격으로 행 설정을 엽니다.

• 폭: 100%
• 최대 너비: 100%
• 패딩: 상단 22vw, 왼쪽 5vw

텍스트 모듈 추가

행이 업데이트되면 본문 내용으로 "mono"라는 단어가 있는 행에 새 텍스트 모듈을 추가합니다.

그런 다음 다음과 같이 텍스트 모듈 디자인을 업데이트합니다.

• 텍스트 글꼴: Rubik Mono One
• 텍스트 텍스트 색상: #faac00
• 텍스트 텍스트 크기: 8vw
• 텍스트 문자 간격: 0.15em
• 텍스트 줄 높이: 1em

텍스트 모듈 복제

다음 두 텍스트 블록의 디자인 속도를 높이기 위해 방금 두 번 디자인한 텍스트 모듈을 복제하여 총 3개의 텍스트 모듈이 서로 겹쳐지도록 해 보겠습니다.

텍스트 모듈 #2 업데이트

텍스트 모듈을 복제한 후 두 번째(가운데) 텍스트 모듈에 대한 설정을 열고 본문 텍스트를 "글꼴"이라는 단어로 변경합니다.

그런 다음 다음을 업데이트합니다.

• 본문: "글꼴"
• 배경색: #dddddd
• 텍스트 텍스트 색상: #930565
• 폭: 0.86em
• 여백: -3em 상단, 2em 왼쪽

텍스트 모듈의 너비를 변경하면 텍스트가 세로로 어떻게 표시되는지 확인하십시오. 그리고 고정폭 글꼴이기 때문에 고르게 쌓입니다. 그리고 각 문자 블록의 크기와 동일한 너비로 텍스트 모듈을 1em씩 이동할 수 있습니다. 따라서 -3em 상단 여백은 텍스트를 정확히 3글자 블록 위로 가져옵니다. 그리고 2em 왼쪽 여백은 텍스트 모듈을 오른쪽으로 정확히 2글자 블록 위로 이동합니다. 이렇게 하면 이와 같은 십자말 풀이 레이아웃에서 항목을 쉽게 배치할 수 있습니다.

박스 섀도우

텍스트 모듈 뒤의 배경 크기를 늘리기 위해 상자 그림자를 추가해 보겠습니다.

• 박스 섀도우: 스크린샷 참조
• 상자 그림자 수직 위치: 0px
• 상자 그림자 흐림 강도: 0px
• 상자 그림자 확산 강도: 0.08em
• 그림자 색상: #dddddd(배경색과 동일)

Z 인덱스

이 텍스트 블록이 다른 텍스트 모듈 위에 유지되도록 하려면 다음과 같이 z 인덱스를 업데이트하십시오.

• Z 인덱스: 11

텍스트 모듈 #3 업데이트

텍스트 모듈 #2가 완료되면 세 번째 텍스트 모듈의 설정을 열고 본문 텍스트를 "spaced"라는 단어로 변경합니다.

그런 다음 마법의 em 여백 값을 사용하여 모듈을 제자리로 이동합니다.

• 여백: 상단 -1em, 왼쪽 2em

최종 디자인

이동하는

이러한 디자인은 vw 및 em 길이 단위를 사용하여 구축되기 때문에 디자인은 모든 브라우저 크기에서 일관되게 유지됩니다. 다음은 태블릿 및 휴대폰 디스플레이에서 디자인이 어떻게 보이는지 보여줍니다.

참고: 반응하지 않는 유일한 요소는 첫 번째 디자인의 배경 이미지 아이콘입니다. 그러나 이 문제를 해결하기 위해 태블릿과 휴대폰에 더 작은 배경 이미지를 쉽게 추가할 수 있습니다.

마지막 생각들

아마도 Divi에서 고정 폭 글꼴 디자인을 만드는 가장 좋은 점은 글꼴 스타일의 다양성일 것입니다. 약간의 작은 터치만으로도 큰 차이를 만들 수 있습니다. 또한 응용 프로그램은 모든 웹 사이트에서 매우 실용적입니다.

이 세 가지 예 중 어느 것이 가장 유망하다고 생각했습니까?

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

건배!