텍스트 모듈을 사용하여 고유한 Divi 버튼 디자인 만들기

텍스트 모듈을 사용하여 고유한 Divi 버튼 디자인을 만드는 것은 이미 마음을 넘어섰을 수 있습니다. 그렇다면 당신은 당신이 아는 것보다 더 창의적입니다! Divi에서 호버 옵션이 출시되면서 모든 모듈을 클릭 가능하게 만들 수 있습니다. 그러면 모든 모듈(모든 내장 디자인 설정 포함)을 클릭 가능한 CTA 또는 버튼으로 사용할 수 있는 문이 열립니다. 예를 들어 텍스트 모듈을 사용하면 다양한 형식으로 모듈에 원하는 만큼 텍스트를 추가할 수 있습니다. 또한 텍스트 모듈에는 고유한 모양을 만들기 위해 둥근 모서리를 사용자 지정할 수 있는 몇 가지 강력한 디자인 옵션이 있습니다.

이 튜토리얼에서는 텍스트 모듈을 사용하여 가능한 몇 가지 고유한 Divi 버튼 디자인을 탐색할 것입니다.

시작하자!

엿보기

다음은 텍스트 모듈을 사용하여 쉽게 만들 수 있는 몇 가지 버튼 디자인의 예입니다.

이것은 두 줄에 텍스트가 있는 버튼입니다...

목록 항목을 사용하는 버튼입니다...

크리에이티브 코너를 활용한 버튼입니다...

텍스트 모듈을 사용하여 고유한 Divi 버튼 디자인 만들기

YouTube 채널 구독

#1 여러 줄의 텍스트로 버튼 만들기

앞서 언급했듯이 텍스트 모듈은 무한한 양의 텍스트를 허용하므로 여러 형식의 텍스트 모듈을 사용하여 단 두 줄의 텍스트로 버튼을 쉽게 만들 수 있습니다. wysiwyg 또는 텍스트 편집기를 사용하여 단락 텍스트, 헤더, 링크, 목록 및 인용문을 추가할 수 있습니다. 그리고 텍스트 모듈의 가장 좋은 점은 시각적 빌더 디자인 설정에 내장된 탭 UI를 사용하여 이러한 각 텍스트 형식을 개별적으로 대상으로 지정하고 스타일을 지정할 수 있다는 것입니다.

이렇게 하면 여러 줄의 텍스트를 추가한 다음 고유한 버튼 레이아웃을 위해 텍스트의 각 줄에 개별적으로 스타일을 지정하는 것이 정말 쉽습니다.

다음은 텍스트 모듈을 여러 줄의 텍스트가 있는 버튼으로 설정하는 방법에 대한 간단한 예입니다.

아직 만들지 않았다면 새 페이지를 만들고 시각적 빌더를 배포합니다. "처음부터 만들기" 옵션을 선택합니다. 그런 다음 새 섹션을 한 열 행으로 만듭니다. 그런 다음 행에 텍스트 모듈을 추가합니다.

텍스트 콘텐츠의 경우 html 탭을 사용하고 다음을 입력합니다.

<h3>Contact Us</h3>
<h4>WE CAN HELP</h4>

모듈에 추가할 수 있는 다양한 배경 스타일이 있지만 이 예에서는 간단한 그라데이션 배경을 추가합니다.

배경 그라데이션 왼쪽 색상: #FEE140
배경 그라데이션 오른쪽 색상: #FA709A

그런 다음 디자인 탭으로 이동하여 제목 탭 UI를 사용하여 다음과 같이 h3 및 h4 제목 태그의 스타일을 지정합니다.

제목 3 글꼴 두께: 매우 굵게
제목 3 글꼴 스타일: TT
제목 3 텍스트 색상: #ffffff
제목 4 글꼴 스타일: TT
제목 4 텍스트 색상: #ffffff
제목 4 텍스트 크기: 16px

이제 버튼처럼 보이도록 텍스트 모듈의 크기를 조정하기만 하면 됩니다. 업데이트하려면 다음을 수행하십시오.

너비: 230px
맞춤 패딩: 상단 1em, 하단 0.5em, 왼쪽 2em, 오른쪽 2em

Divi의 새로운 호버 옵션이 출시된 이후로 모든 모듈을 버튼처럼 클릭할 수 있게 되었습니다. 이렇게 하려면 콘텐츠 탭으로 돌아가서 모듈 링크 URL을 입력합니다.

다음은 최종 결과입니다.

호버 효과로 버튼 전체를 스윕하는 상자 그림자를 추가하여 궁극적으로 그라디언트를 대체할 새 배경색을 적용할 수 있습니다.

이렇게 하려면 텍스트 모듈 설정을 열고 다음을 업데이트하십시오.

박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: 0px(기본값), 230px(호버링)
상자 그림자 수직 위치: 0px
그림자 색상: rgba(0,0,0,0)(기본값), #fee140(호버링)

다음은 호버를 했을 때의 모습입니다.

#2 목록 항목 버튼 만들기

텍스트 모듈을 사용하면 콘텐츠에 목록(순서 없음 또는 정렬됨)을 추가할 수 있으므로 이 기능을 활용하여 목록 버튼을 만들 수 있습니다. 기본적으로 콘텐츠 상자 안에 하나의 목록 요소가 있는 목록을 만들기만 하면 됩니다. 그런 다음 목록 글머리 기호 항목과 제목 텍스트의 스타일을 별도로 지정할 수 있도록 목록 항목을 제목 태그로 묶습니다.

아직 만들지 않았다면 새 페이지를 만들고 시각적 빌더를 배포합니다. "처음부터 만들기" 옵션을 선택합니다. 그런 다음 새 섹션을 한 열 행으로 만듭니다. 그런 다음 행에 텍스트 모듈을 추가합니다.

그런 다음 콘텐츠 설정의 텍스트 탭에 다음 html을 추가합니다.

<ol><li><h3>Contact Us</h3></li></ol>

목록 항목 글머리 기호/번호의 스타일을 텍스트와 별도로 지정할 수 있도록 목록 항목 텍스트를 제목 태그로 감싸는 것이 중요합니다.

이제 디자인 탭으로 이동하여 버튼으로 텍스트 모듈 디자인을 마칩니다.

텍스트 설정 범주에서 정렬된 목록 탭을 선택하고 다음을 업데이트합니다.

정렬된 목록 글꼴: 엑소 2
정렬된 목록 글꼴 두께: Light
정렬된 목록 텍스트 색상: #000000
정렬된 목록 텍스트 크기: 20px
정렬된 목록 문자 간격: 5px
정렬된 목록 스타일 유형: 10진수 선행 0
정렬된 목록 스타일 위치: 외부
주문 목록 항목 들여쓰기: 2em

제목 텍스트 범주에서 H3 탭을 클릭하고 다음을 업데이트합니다.

제목 3 글꼴: 엑소 2
제목 3 글꼴 두께: 반 굵게
제목 3 글꼴 스타일: TT
제목 3 텍스트 색상: #0c71c3
제목 3 텍스트 크기: 26px
제목 3 줄 높이: 0.3em

다음으로, 모듈의 너비를 변경하고 테두리와 간격을 지정하여 버튼처럼 보이도록 합니다.

너비(모듈): 262px
모듈 정렬: 중앙
맞춤 패딩: 위쪽 2em, 아래쪽 0px, 왼쪽 2em, 오른쪽 2em
둥근 모서리: 10px2em
테두리 너비: 1px
테두리 색상: #000000
테두리 스타일: 단색

그리고 모듈에 대한 링크를 선택한 지정된 URL에 추가하는 것을 잊지 마십시오.

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

독특한 목록 버튼 디자인을 위해 새로운 목록 스타일 유형(예: Upper Roman)을 자유롭게 탐색하십시오.

#3 크리에이티브 모서리가 있는 버튼 만들기(잎과 같은)

이 다음 디자인에서는 텍스트 모듈 내의 둥근 모서리 디자인 설정을 활용할 것입니다. 기본 아이디어는 다른 모서리 반경 값을 설정하여 고유한 모양의 버튼을 만드는 것입니다. 이 예에서는 잎 버튼처럼 보이도록 모듈을 만들 것입니다.

아직 만들지 않았다면 새 페이지를 만들고 시각적 빌더를 배포합니다. "처음부터 만들기" 옵션을 선택합니다. 그런 다음 새 섹션을 한 열 행으로 만듭니다. 그런 다음 행에 텍스트 모듈을 추가합니다.

텍스트 모듈 설정을 열고 콘텐츠 상자의 텍스트 탭에 다음 html을 입력합니다.

<h3>grow</h3>
<h4>with us</h4>

이렇게 하면 버튼 텍스트를 두 줄에 배치하고(세로 너비를 줄임) 독립적으로 스타일을 지정할 수 있습니다.

다음으로 더 "잎과 같은" 색상으로 그라디언트 배경을 추가합니다.

배경 그라데이션 왼쪽 색상: #7cda24
배경 그라데이션 오른쪽 색상: #26e051
기울기 방향: 90deg

이제 디자인 설정으로 이동하여 텍스트를 가운데에 맞추고 제목 태그의 스타일을 지정해 보겠습니다. h3 제목을 디자인하려면 h3 탭을 선택하고 h4 제목을 디자인하려면 h4 탭을 선택해야 합니다.

텍스트 방향: 중앙
제목 3 글꼴: Oswald
제목 3 글꼴 두께: 가벼움
제목 3 글꼴 스타일: TT
제목 3 텍스트 색상: #ffffff
제목 3 텍스트 크기: 27px
제목 4 글꼴: Oswald
제목 4 글꼴 스타일: TT
제목 4 텍스트 색상: #ffffff

버튼의 적절한 너비와 간격을 텍스트 모듈에 제공하도록 디자인을 계속 업데이트하십시오.

너비: 178px
모듈 정렬: 중앙
맞춤 패딩: 위쪽 2em, 아래쪽 2em, 왼쪽 1em, 오른쪽 1em

마지막으로, 모듈에 잎 모양을 주기 위해 사용자 정의 둥근 모서리를 추가한 다음 상자 그림자를 추가하여 잎을 보다 생생하게 만들 수 있습니다. 이 업데이트를 수행하려면 다음을 수행하십시오.

먼저 둥근 모서리 옵션의 잠금을 해제하여 각 모서리에 개별 값을 할당할 수 있습니다.

왼쪽 상단 모서리: 100px
오른쪽 하단 모서리: 100px

그런 다음 상자 그림자를 추가하십시오 ...

박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: 25px
상자 그림자 수직 위치: -4px
상자 그림자 확산 강도: -12px
그림자 색상: rgba(0,0,0,0.25)

모듈이 원하는 위치에 링크되도록 모듈 링크 URL을 추가하는 것을 잊지 마십시오.

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

호버 효과의 경우 둥근 모서리 값을 대체하여 호버 시 반대 방향으로 버튼 디자인을 배치할 수 있습니다.

호버 효과는 다음과 같습니다.

마지막 생각들

Divi를 사용하여 웹 사이트를 디자인할 때 상자 밖에서 생각하는 것은 항상 좋습니다. 이 튜토리얼이 텍스트 모듈을 사용하여 새롭고 창의적인 divi 버튼 디자인을 생각하는 데 도움이 되기를 바랍니다. 사실, 더 많은 디자인 옵션을 위해 Blurb 모듈과 같은 다른 모듈을 탐색하는 것이 좋습니다.

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

건배!