5가지 크리에이티브 Divi 버튼 모듈 디자인 및 제작 방법

이번 포스트에서는 Divi의 버튼 모듈로 쉽게 만들 수 있는 창의적인 Divi 버튼 모듈 디자인 5가지를 보여드리겠습니다. 버튼 모듈은 방문자를 웹사이트 전체에서 원하는 목표로 이끄는 데 매우 중요하기 때문에 모든 Divi 모듈 중에서 가장 인기 있는 모듈 중 하나입니다. 따라서 디자이너와 개발자로서 이 버튼을 매력적이고 눈길을 끌도록 만드는 것이 매우 중요합니다.

파헤쳐보자!

엿보기

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

1. 왼쪽 화살표 테두리 버튼

2. 라인 이동 버튼

3. 탭 버튼 풀기

4. 원형 로고 버튼

5. 글로우 버튼

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

시작하는 데 필요한 것

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

1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. "처음부터 빌드" 옵션을 선택합니다.

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

5가지 Divi 버튼 모듈 디자인 및 제작 방법

1. 왼쪽 화살표 테두리 버튼

시작하려면 한 열 행으로 새 섹션을 만들고 행에 버튼 모듈을 추가합니다.

그런 다음 버튼의 기본 콘텐츠 텍스트를 "시작하기"(또는 실제로 원하는 대로)로 변경합니다.

이제 디자인 설정으로 이동하여 다음을 업데이트할 시간입니다.

버튼에 사용자 정의 스타일 사용: 예
버튼 텍스트 색상: #ffffff
버튼 배경색: #324376
테두리 너비: 0px
버튼 문자 간격: 0.2em
버튼 글꼴: Fira Sans
글꼴 스타일: TT(대문자), U(밑줄)
밑줄 색상: rgba(255,255,255,0.2)
밑줄 스타일: 이중
버튼 아이콘: 스크린샷 참조
버튼 아이콘 색상: #ff4751
버튼 아이콘 배치: 왼쪽

맞춤 패딩: 왼쪽 40px, 오른쪽 20px

박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: 22px
상자 그림자 수직 위치: 0px
그림자 색상: #ff4751

(40px의 사용자 지정 왼쪽 패딩은 왼쪽 화살표 버튼 아이콘과 같은 높이에 앉기 위해 상자 그림자로 채워지는 고정 공간을 만듭니다.)

왼쪽 상자 그림자가 화살표 아이콘의 시작 부분과 같은 높이에 있기 때문에 멋진 화살표 테두리 효과가 생성됩니다. 어떤 이유로 아이콘과 같은 높이에 있지 않으면 필요에 따라 수평 위치를 조정할 수 있습니다. 이 디자인의 장점은 다른 양의 버튼 텍스트를 추가해도 왼쪽 화살표 테두리가 그대로 유지된다는 것입니다.

다음은 최종 결과입니다.

2. 라인 이동 버튼

이 다음 버튼 스타일은 보다 기술적이고 미니멀한 느낌을 줍니다. 선은 투명한 테두리로 구분된 상자 그림자와 배경 그라디언트를 사용하여 생성됩니다. 또한 상자 그림자를 오른쪽으로 이동하는 호버 효과를 추가하여 미묘한 상호 작용을 위해 하단 라인을 약간 오른쪽으로 이동시킵니다.

시작하려면 한 열 행으로 새 섹션을 만들고 행에 버튼 모듈을 추가합니다.

버튼 텍스트 내용을 원하는 대로 업데이트합니다. 이 예에서는 기본 "여기를 클릭하십시오"를 그대로 둡니다. 그런 다음 디자인 설정을 다음과 같이 업데이트합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 색상: #3b7986
• 버튼 배경 그라데이션 왼쪽 색상: rgba(255,255,255,0)
• 버튼 배경 그라데이션 오른쪽 색상: #3b7986
• 기울기 방향: 180deg
• 시작 위치: 96%
• 최종 위치: 0%
• 버튼 테두리 너비: 10px
• 버튼 테두리 색상: rgba(0,0,0,0)
• 버튼 테두리 반경: 0px
• 버튼 문자 간격: 6px
• 버튼 글꼴: 엑소 2
• 글꼴 두께: 굵게
• 글꼴 스타일: Tt(작은 대문자)
• 버튼 아이콘: 오른쪽 화살표(스크린샷 참조)
• 버튼에 대한 호버에 아이콘만 표시: 아니오
• 맞춤 패딩: 0px 하단
• 박스 섀도우: 스크린샷 참조
• 상자 그림자 수평 위치: -15px
• 상자 그림자 수직 위치: 15px
• 상자 그림자 확산 강도: -13px
• 그림자 색상: #3b7986

버튼에 대한 기본 설정이므로 마우스를 가져갈 때 배경색을 #ffffff로 설정해야 할 수도 있습니다.

이 디자인의 핵심은 배경색 그라데이션과 상자 그림자입니다. 배경색 그라데이션 시작점을 96%로 설정하면 버튼 하단에 너비가 4%인 선이 생성됩니다. 그런 다음 상자 그림자를 배치하고 색상을 지정하면 버튼을 멋지게 감싸는 또 다른 선 요소가 생깁니다. 또한 오른쪽 화살표 아이콘은 라인 디자인 요소와도 잘 어울립니다.

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

상자 그림자를 움직이는 호버 효과를 추가하려면 디자인 설정으로 돌아가 "상자 그림자 수평 위치" 옵션 위로 마우스를 가져갑니다. 텍스트 바로 옆에 화살표 아이콘 팝업이 표시됩니다. 클릭하면 해당 특정 설정에 대한 호버 옵션이 열립니다.

그런 다음 호버 탭을 클릭하고 값을 13px로 변경합니다.
비주얼 빌더에서 미리보기 호버 효과를 볼 수 있습니다.

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

3. 탭 버튼 풀기

이 다음 버튼 디자인은 절대 위치에 남아 있는 오른쪽 버튼 아이콘의 프레임에 상자 그림자를 추가합니다. 마우스를 가져가면 버튼이 오른쪽으로 확장되어 탭을 당기는 효과를 만듭니다.

버튼을 생성하려면 먼저 1열 행으로 새 섹션을 생성한 다음 해당 행에 버튼 모듈을 추가합니다.

버튼 모듈 설정을 열고 콘텐츠 탭 아래의 버튼 텍스트를 원하는 대로 업데이트합니다(저는 "자세히 알아보기" 텍스트를 사용하겠습니다).

그런 다음 디자인 탭으로 이동하여 다음을 업데이트합니다.

버튼에 사용자 정의 스타일 사용: 예
버튼 텍스트 색상: #ffffff
버튼 배경 그라데이션 왼쪽 색상: #7D80DA
버튼 배경 그라데이션 오른쪽 색상: #8EEDF7
기울기 방향: 90deg
버튼 테두리 너비: 0px
버튼 테두리 반경: 10px
버튼 문자 간격: 1px
버튼 글꼴: Source Sans Pro
글꼴 두께: 굵게
글꼴 스타일: TT
버튼 아이콘: 스크린샷 참조
버튼 아이콘 색상: #ffffff
맞춤 패딩: 왼쪽 1em, 오른쪽 2.5em
박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: -35px
상자 그림자 수직 위치: 0px
그림자 색상: #7d80da

이 디자인의 핵심은 아이콘을 구성할 오른쪽의 상자 그림자입니다. 그러나 지금은 아이콘이 그라디언트 영역에 맞게 배치되어야 합니다. 이렇게 하려면 사용자 정의 CSS를 추가해야 합니다.

고급 탭으로 이동하여 After 입력 상자에 다음 CSS를 입력합니다.

position: absolute;
right: 5%;

이 CSS는 아이콘의 위치를 ​​지정하고 버튼의 오른쪽 가장자리에서 5%의 절대 위치를 지정합니다.

지금까지의 디자인을 확인해보세요.

이제 호버 효과를 추가하려면 호버 탭에서 올바른 패딩 옵션을 업데이트하면 됩니다. 이렇게 하려면 버튼 설정을 열고 사용자 정의 패딩 요소 위로 마우스를 가져간 다음 팝업되는 커서 아이콘을 클릭하여 호버 옵션을 엽니다. 그런 다음 호버 탭을 선택하고 다음을 입력합니다.

맞춤 패딩: 4em 오른쪽

이제 최종 결과를 확인해보자.

4. 원형 로고 버튼

다음 디자인에서는 원 아이콘/이미지를 짧은 클릭 유도문안을 보여주는 멋진 호버 효과가 있는 클릭 가능한 버튼으로 변환할 것입니다.

일을 시작하려면 한 열 행이 있는 새 섹션을 만들고 행에 버튼 모듈을 추가하십시오.

그런 다음 버튼 디자인 설정을 엽니다. 콘텐츠 탭에서 버튼 텍스트에 "이동"이라는 단어를 추가합니다.

그런 다음 디자인 설정으로 이동하여 사용자 정의 버튼 스타일을 사용하도록 선택합니다. 먼저 버튼의 배경 이미지로 원 이미지를 추가합니다. 이것이 작동하도록 디자인하려면 완전한 원인 로고 또는 아이콘의 png 이미지를 사용하고 이미지 크기가 동일한 높이와 너비인지 확인하십시오. 내가 사용하는 이미지는 118x118px 크기의 png입니다. 원하는 경우 여기에서 가져옵니다.

배경 이미지를 추가한 후 배경 이미지 크기가 "실제 크기"로 설정되어 있는지 확인하십시오. 이렇게 하면 이미지가 원래 크기(118px x 118px)를 유지합니다.

다음으로 우리는 circlce 이미지의 정확한 치수에 맞게 버튼의 크기를 조정하려고 합니다. 이렇게 하려면 고급 탭으로 건너뛰고 기본 요소에 다음 사용자 정의 CSS를 입력합니다.

width: 118px;
height: 118px;
line-height: 118px !important;
text-align: center;

CSS는 너비, 높이 및 줄 높이를 모두 118px의 동일한 값으로 설정합니다. 이것은 우리 이미지의 너비와 높이와 같습니다. 이제 이미지가 버튼에 완벽하게 맞습니다. line-height는 118px로 설정되어 버튼 안의 텍스트가 버튼 내에서 수직으로 중앙에 오도록 합니다. 그리고 text-align: center 는 버튼 모듈이 왼쪽이나 오른쪽으로 정렬된 경우에도 버튼 내부의 텍스트가 중앙에 유지되도록 합니다.

이제 우리가 해야 할 일은 디자인을 완성할 몇 가지 디자인 설정으로 마무리하는 것입니다. 디자인 탭으로 이동하여 다음을 업데이트합니다.

버튼 텍스트 색상(기본값): rgba(0,0,0,0)
버튼 텍스트 색상(마우스 오버): #ffffff

(기본적으로 버튼 텍스트를 숨기고 마우스를 올리면 흰색으로 표시됩니다.)

배경색(기본값): #121212
배경색(호버): #da00f2

(이렇게 하면 기본적으로 이미지 뒤에 검은색 배경이 표시되고 마우스를 올리면 밝은 분홍색 배경색이 표시됩니다.)

버튼 테두리 너비: 0px
버튼 반경: 50%;

(버튼 반경을 50%로 설정하면 커스텀 CSS에서 버튼의 높이와 너비가 118px로 설정되어 있기 때문에 버튼이 원형으로 바뀝니다.)

버튼 글꼴: Poppins
글꼴 두께: 굵게
글꼴 스타일: TT
버튼 아이콘 표시: 아니요(버튼 아이콘이 있으면 가운데 텍스트가 사라짐)
맞춤 패딩: 상단 0px, 하단 0px

(사용자 지정 CSS에서 설정한 line-height가 텍스트를 세로 중앙에 배치하도록 상단 및 하단 패딩을 제거하는 것이 중요합니다.)

박스 섀도우: 스크린샷 참조
상자 그림자 수직 위치: 0px
그림자 색상(기본값): rgba(0,0,0,0)
그림자 색상(마우스 오버): rgba(0,0,0,0.68)

(추가 팝아웃 효과를 위해 마우스를 가져가면 원 주위에 약간의 상자 그림자가 표시됩니다.)

다음은 호버 효과가 적용된 최종 디자인입니다.

5. 글로우 버튼

이 마지막 디자인은 매우 간단하고 간단합니다. 배경 그라디언트 색상과 상자 그림자 색상을 창의적으로 사용하기만 하면 됩니다. 호버 효과는 단순히 상자 그림자의 크기를 늘려 광선 효과를 더 많이 줍니다.

시작하려면 1열 행이 있는 새 섹션을 만들고 행에 버튼 모듈을 추가합니다. 버튼 모듈을 업데이트하기 전에 섹션 설정을 열고 섹션에 어두운 배경색을 지정하십시오(#333333).

이제 버튼 설정을 엽니다.

기본 버튼 텍스트인 "여기를 클릭하십시오"를 그대로 둘 수 있습니다. 그런 다음 다음 디자인 설정을 업데이트합니다.

버튼 정렬: 중앙
버튼에 사용자 정의 스타일 사용: 예
버튼 텍스트 크기: 18px
버튼 텍스트 색상: #ffffff

버튼 배경 그라데이션 왼쪽 색상: #00ff8c
버튼 배경 그라데이션 오른쪽 색상: #15c39a
그라디언트 유형: 방사형
방사형 방향: 중심
최종 위치: 75%

(그라디언트 유형을 방사형으로 설정하면 그라디언트에 바깥쪽으로 확장되는 원 모양이 제공됩니다. 그라디언트 중간에 밝은 색상이 표시되어 광선 효과를 만들 수 있는지 확인합니다.)

버튼 테두리 너비: 0px
버튼 테두리 반경: 100px
버튼 문자 간격(기본값): 4px
버튼 문자 간격(마우스 오버): 5px

(호버에서 글자 간격을 늘리면 좋은 효과를 위해 전체 버튼이 약간 확장됩니다)

글꼴 두께: 매우 굵게
글꼴 스타일: I, TT
버튼 아이콘: 오른쪽 화살표(스크린샷 참조)
맞춤 패딩: 상단 20픽셀, 하단 20픽셀, 왼쪽 30픽셀, 오른쪽 50픽셀

(오른쪽 화살표 버튼 아이콘을 설명하려면 더 많은 오른쪽 패딩이 필요합니다)

박스 섀도우: 스크린샷 참조
상자 그림자 수직 위치: 0px
상자 그림자 흐림 강도(기본값): 64px
상자 그림자 흐림 강도(마우스 오버): 100px
상자 그림자 확산 강도: -12px
그림자 색상: rgba(0,255,140,0.66)

(박스 섀도우는 버튼 색상과 섀도우 색상을 일치시키면 글로우 효과가 추가됩니다. 호버링 시 흐림 강도를 높이면 버튼의 글로우도 확대됩니다.)

호버 효과가 적용된 최종 디자인을 확인하세요.

더 많은 버튼 영감

버튼 스타일에 대한 영감에 대해 알아보려면 다음 문서를 확인하세요.

• Divi로 아이콘 글꼴 버튼을 만드는 방법
• 애니메이션 스크롤 버튼으로 고유한 전체 화면 Divi 레이아웃 디자인
• 사이트 디자인에 맞게 모나크 소셜 버튼의 스타일을 지정하는 방법
• 거부할 수 없는 구독 버튼을 만드는 7가지 핵심

마지막 생각들

이 예제를 통해 창의적이고 새로운 방식으로 Divi 버튼 모듈을 극대화할 수 있기를 바랍니다! 클릭 유도문안은 웹사이트에서 매우 중요하기 때문에 도구 상자에 고유한 버튼 옵션을 만들기 위한 다양한 아이디어를 가지고 있는 것이 좋습니다. 이 아이디어를 사용하여 자신만의 멋진 버튼 스타일을 만들어 보세요!

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

건배!