Divi의 텍스트 모듈을 사용하여 Divi 페이지 디자인에서 블록 요소 만들기

텍스트 모듈은 Divi로 만드는 모든 페이지 디자인의 중요한 부분입니다. 우리 모두가 동의할 수 있는 부분입니다. 일반적으로 텍스트를 직관적으로 표시하는 데 사용됩니다. 그러나 텍스트 모듈을 사용하여 멋진 디자인 요소도 만들 수 있습니다. 이전 블로그 게시물에서 텍스트를 사용하여 웹 디자인을 향상시키는 방법을 이미 보여주었습니다.

이 자습서에서는 페이지를 디자인하고 텍스트 모듈을 사용할 때 선택할 수 있는 옵션을 계속 추가합니다. 알거나 알 수 없지만 동일한 텍스트 모듈 내에서 결합할 수 있는 여러 가지 다른 텍스트 유형이 있습니다. 또한 하나의 모듈에는 여러 제목, 단락, 링크 등이 포함될 수 있습니다. 이 게시물에서는 이러한 모든 텍스트 유형을 유리하게 사용하여 페이지 디자인에서 멋진 블록 요소를 만들 것입니다.

가자!

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에서 최종 결과를 살펴보겠습니다.

시작하자!

새 일반 섹션 추가

배경색

현재 작업 중인 페이지에 새 일반 섹션을 추가하여 시작하십시오. 그런 다음 섹션 설정을 열고 배경색을 변경합니다.

• 배경색: #000000

간격

다음 섹션의 간격 설정으로 이동하여 사용자 정의 패딩 값을 추가하십시오.

• 상단 패딩: 280px(데스크톱), 150px(태블릿 및 휴대폰)
• 하단 패딩: 280px(데스크톱), 150px(태블릿 및 휴대폰)

새 행 추가

열 구조

섹션 설정 수정을 완료했으면 다음 열 구조를 사용하여 새 행을 추가합니다.

사이징

모듈을 추가하지 않고 행 설정을 열고 크기 조정 설정에서 행이 화면의 전체 너비를 차지하도록 합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

간격

마지막으로 간격 설정에서 사용자 지정 패딩을 추가합니다.

• 열 1 왼쪽 패딩: 100px(데스크톱 및 태블릿), 50px(휴대전화)
• 2열 맞춤 패딩: 50px
• 3열 맞춤 패딩: 50px

열 1에 제목 텍스트 모듈 추가

콘텐츠 상자

다양한 모듈을 추가할 시간입니다! 첫 번째 열에 필요한 첫 번째 모듈은 텍스트 모듈입니다. 콘텐츠 상자에 일부 H2 콘텐츠를 추가합니다.

H2 텍스트 설정

그런 다음 H2 텍스트 설정으로 이동하여 다음과 같이 변경합니다.

• 제목 2 글꼴: 소스 코드 프로
• 제목 2 글꼴 스타일: 대문자
• 제목 2 텍스트 색상: #ffffff
• 제목 2 텍스트 크기: 100px
• 제목 2 글자 간격: 24px

간격

약간의 음수 상단 여백을 사용하여 상단의 공간을 줄입니다.

• 상단 여백: -50px

열 1에 설명 텍스트 모듈 추가

텍스트 설정

첫 번째 열에 필요한 두 번째 모듈은 설명 텍스트 모듈입니다. 콘텐츠를 추가한 후 텍스트 설정으로 이동하여 다음과 같이 변경합니다.

• 텍스트 글꼴: 소스 코드 프로
• 텍스트 색상: #ffffff
• 텍스트 방향: 양쪽 맞춤

사이징

텍스트 모듈의 너비도 줄이십시오.

• 폭: 68%

간격

마지막으로 Spacing 설정에서 이 Text Module과 이전 Text Module 사이에 약간의 공간을 만드십시오.

• 상단 여백: 200px(데스크톱), 100px(태블릿 및 휴대폰)
• 하단 여백: 100px(태블릿 및 휴대폰)

열 2에 블록 텍스트 모듈 추가

콘텐츠 상자

두 번째 칼럼으로 넘어갈 시간! 여기서는 텍스트 모듈을 사용하여 블록 요소를 생성합니다. 이 작업을 수행하는 데 있어 중요한 부분은 콘텐츠 상자를 올바르게 구성하는 것입니다. 아래 인쇄 화면에서 H3 제목, H4 제목, 단락 및 링크를 사용하고 있는 것을 볼 수 있습니다. H4 제목과 단락 사이에 추가 공간이 있는지 확인하고 있습니다.

배경색

텍스트 모듈에 검정색 배경색을 추가합니다.

• 배경색: #000000

텍스트 설정

각 텍스트 유형을 개별적으로 수정할 것입니다. 단락 설정을 수정하여 시작합니다.

• 텍스트 글꼴: 소스 코드 프로
• 텍스트 방향: 왼쪽
• 텍스트 색상: 라이트

링크 텍스트 설정

그런 다음 링크 설정을 추가로 변경합니다.

• 링크 글꼴 스타일: 대문자 및 밑줄
• 링크 밑줄 색상: #ffffff
• 링크 텍스트 색상: #edf000
• 링크 텍스트 크기: 16px
• 링크 문자 간격: 3px

제목 3 텍스트 설정

콘텐츠 상자의 H3 제목에는 다음 설정이 필요합니다.

• 제목 3 글꼴 스타일: 대문자
• 제목 3 텍스트 크기: 33px

제목 4 텍스트 설정

계속해서 H4 텍스트 설정을 열고 거기에서도 약간의 변경을 가하십시오.

• 제목 4 텍스트 색상: #4f4f4f
• 제목 4 텍스트 크기: 19px
• 제목 4 글자 간격: -1px

사이징

원하는 정확한 모양을 만들기 위해 다음으로 텍스트 모듈의 너비를 줄입니다.

• 너비: 88%(데스크탑), 60%(태블릿), 90%(휴대폰)

간격

간격 설정도 변경해야 합니다.

• 왼쪽 여백: 200px(태블릿)
• 상단 패딩: 50px
• 하단 패딩: 50px
• 왼쪽 패딩: 50px
• 오른쪽 패딩: 50px

국경

그런 다음 텍스트 모듈에 미묘한 테두리를 추가합니다.

• 테두리 너비: 2px
• 테두리 색상: #424242

박스 섀도우

그리고 마무리로 컬러풀한 박스 섀도우를 추가합니다.

• 상자 그림자 수평 위치: 19px
• 상자 그림자 수직 위치: 16px
• 상자 그림자 확산 강도: -4px
• 그림자 색상: #f2ff00

블록 텍스트 모듈을 두 번 복제하고 3열에 배치

시간을 절약하기 위해 두 번 생성한 블록 텍스트 모듈을 복제하고 두 복제본을 행의 세 번째 열에 배치합니다.

빨간색 텍스트 모듈 수정

링크 텍스트 색상 변경

세 번째 열의 첫 번째 텍스트 모듈을 열고 링크 색상을 변경합니다.

• 링크 텍스트 색상: #e02b20

간격 변경

그런 다음 간격 설정으로 이동하여 상단 여백을 추가합니다.

• 상단 여백: -150px(데스크톱), -20px(태블릿), 50px(휴대폰)

상자 그림자 색상 변경

상자 그림자 색상을 링크 텍스트에 사용된 것과 동일한 색상으로 변경합니다.

• 그림자 색상: #e02b20

파란색 텍스트 모듈 수정

링크 텍스트 색상 변경

세 번째 열에 있는 두 번째 텍스트 모듈의 링크 색상도 변경합니다.

• 링크 텍스트 색상: #0ff3ff

크기 변경

다음으로 크기 조정 설정을 변경합니다.

• 크기: 67%(데스크톱), 60%(태블릿), 90%(휴대폰)

간격 변경

그리고 이 모듈과 두 개의 다른 텍스트 모듈 사이에 약간의 겹침을 만들려면 사용자 정의 여백 값을 가지고 놀아보세요.

• 상단 여백: -20px(데스크톱), -30px(태블릿), 50px(전화)
• 왼쪽 여백: -160px(데스크톱), 200px(태블릿), 0px(전화)

상자 그림자 색상 변경

마무리하려면 상자 그림자 색상을 링크 텍스트에 사용된 것과 동일한 파란색으로 변경하면 완료됩니다!

• 그림자 색상: #0ff3ff

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에서 결과를 최종적으로 살펴보겠습니다.

마지막 생각들

Divi의 기본 제공 옵션과 함께 텍스트 모듈을 사용하여 얼마나 많은 독특한 디자인을 달성할 수 있는지 놀라실 것입니다. 추가 CSS 코드가 필요하지 않습니다. 이 게시물에서는 다양한 텍스트 유형을 사용하여 Divi 페이지 디자인에서 멋진 블록 요소를 만드는 방법을 보여주었습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!