Divi의 연락처 양식 모듈을 스타일링하는 5가지 독특한 방법

문의 양식은 많은 웹사이트에서 중요한 부분입니다. 그들의 주요 목적은 직관적이고 방문자가 쉽게 연락할 수 있도록 돕는 것입니다. 그러나 그렇다고 해서 모든 연락처 양식이 미리 정의된 특정 방식으로 표시되어야 하는 것은 아닙니다. 직관적인 경험과 아름다운 디자인을 쉽게 결합할 수 있습니다. 그것이 바로 우리가 이 포스트에서 할 일입니다. Divi의 기본 제공 옵션만 사용하여 구축할 수 있는 5가지 고유한 Divi 연락처 양식 모듈 디자인을 공유합니다.

가자!

Divi 연락처 양식 모듈 디자인 미리보기

데스크탑

데스크톱에서 Divi 연락처 양식 모듈 디자인을 살펴보는 것으로 시작해 보겠습니다.

이동하는

더 작은 화면 크기에서 Divi 연락처 양식 모듈 디자인은 다음과 같습니다.

Divi의 연락처 양식 모듈을 스타일링하는 5가지 독특한 방법

YouTube 채널 구독

문의 양식 만들기 #1

새 섹션 추가

그라데이션 배경

첫 번째 예제부터 시작하겠습니다! 새 섹션을 추가하고 배경 설정으로 이동하여 그라디언트 배경을 추가합니다.

• 색상 1: #4c00ff
• 색상 2: #ffd400
• 그라디언트 유형: 방사형
• 방사형 방향: 왼쪽 하단
• 시작 위치: 34%
• 최종 위치: 34%

간격

그런 다음 간격 설정으로 이동하여 사용자 지정 패딩 값을 추가합니다.

• 상단 패딩: 200px
• 하단 패딩: 200px

새 행 추가

열 구조

다음 열 구조를 사용하여 새 행을 추가합니다.

열 1 배경색

아직 모듈을 추가하지 않고 행 설정을 열고 열 1 그라데이션 배경을 추가하십시오.

• 1열 배경색: rgba(255,255,255,0.55)

열 1 배경 이미지

첫 번째 열에도 배경 이미지를 추가합니다.

• 열 1 배경 이미지 반복: 반복 없음
• 열 1 배경 이미지 혼합: 화면

2열 배경색

그리고 두 번째 열에 흰색 배경색을 지정합니다.

• 2열 배경색: #ffffff

사이징

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

• 열 높이 균등화: 예

간격

기본 사용자 지정 패딩도 모두 제거합니다.

• 상단 패딩: 0px
• 하단 패딩: 0px

열 테두리 반경

고급 탭의 두 열에 테두리 반경을 추가하십시오.

border-radius: 10px;

열 1에 텍스트 모듈 추가

콘텐츠 추가

다양한 모듈을 추가할 시간입니다! 선택한 콘텐츠가 포함된 첫 번째 열에 텍스트 모듈을 추가합니다.

텍스트 설정

그런 다음 텍스트 설정으로 이동하여 몇 가지를 변경합니다.

• 텍스트 글꼴: 만족
• 텍스트 색상: #333333
• 텍스트 크기: 100px
• 텍스트 줄 높이: 1em
• 텍스트 방향: 중앙

간격

사용자 정의 패딩 값도 추가하십시오.

• 상단 패딩: 600px
• 하단 패딩: 100px

박스 섀도우

디자인에 깊이를 더하려면 미묘한 상자 그림자를 사용하십시오.

• 상자 그림자 흐림 강도: 80px
• 상자 그림자 확산 강도: -16px
• 그림자 색상: rgba(0,0,0,0.3)

2열에 이미지 모듈 추가

PNG 이미지 업로드

두 번째 열에 이미지 모듈을 추가하여 계속하십시오. 선택한 PNG 이미지를 업로드합니다.

사이징

이 모듈의 크기 설정을 변경합니다.

• 너비: 25%(데스크탑), 50%(태블릿), 60%(휴대폰)
• 모듈 정렬: 중앙

간격

일부 음수 상단 여백을 사용하여 겹침을 만듭니다.

• 최고 마진: -60%

열 2에 텍스트 모듈 #1 추가

콘텐츠 추가

이미지 모듈 바로 아래에 내용이 포함된 텍스트 모듈을 추가합니다.

텍스트 설정

이 모듈의 텍스트 설정을 변경합니다.

• 텍스트 글꼴: 만족
• 텍스트 색상: #333333
• 텍스트 크기: 44px
• 텍스트 방향: 중앙

열 2에 텍스트 모듈 #2 추가

콘텐츠 추가

다음에 다른 텍스트 모듈을 추가하십시오.

텍스트 설정

이 모듈의 텍스트 설정도 변경하십시오.

• 텍스트 글꼴: Arial
• 텍스트 색상: #ffd400
• 텍스트 크기: 18px
• 텍스트 문자 간격: 2px
• 텍스트 방향: 중앙

간격

다음에 아래쪽 여백을 추가합니다.

• 하단 여백: 100px

열 2에 문의 양식 모듈 추가

이름 및 이메일 필드에서 '전각으로 만들기' 옵션 활성화

필요한 마지막 모듈은 문의 양식 모듈입니다. 다른 작업을 수행하기 전에 이름과 이메일 필드를 열고 레이아웃을 변경하십시오.

• 전폭 만들기: 예

제목 필드 추가

이 디자인을 만들기 위해 주제에 대한 다른 필드를 추가했습니다.

집단

다음 보안 문자 옵션을 비활성화하십시오.

• 보안 문자 표시: 아니요

양식 필드 텍스트 설정

이 문의 양식 모듈의 양식 필드 텍스트 설정을 일부 변경하십시오.

• 양식 필드 배경색: rgba(255,255,255,0)
• 양식 필드 글꼴: Arial
• 양식 필드 글꼴 두께: Light
• 양식 필드 텍스트 크기: 16px
• 양식 필드 문자 간격: 2px

버튼 설정

버튼 모양도 수정하고 있습니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 색상: #ffd400
• 버튼 테두리 너비: 0px
• 버튼 문자 간격: 2px
• 버튼 글꼴: Arial
• 글꼴 스타일: 밑줄
• 밑줄 색상: #4c00ff

간격

다음으로 몇 가지 사용자 정의 패딩 값을 추가합니다.

• 하단 패딩: 100px
• 왼쪽 패딩: 50px
• 오른쪽 패딩: 50px

국경

그리고 각 필드에 미묘한 아래쪽 테두리를 추가합니다.

• 하단 테두리 너비: 2px
• 하단 테두리 색상: #efefef

개별 필드 간격

마지막으로 메시지 필드를 제외한 개별 필드 각각에 하단 여백을 추가하십시오.

• 하단 여백: 20px

문의 양식 #2 만들기

새 섹션 추가

그라데이션 배경

다음 예제로 넘어갑니다! 그라데이션 배경이 있는 새 섹션을 추가합니다.

• 색상 1: #562fef
• 색상 2: #ffffff
• 그라디언트 유형: 선형
• 시작 위치: 50%
• 최종 위치: 50%

간격

이 섹션의 간격 설정에 사용자 지정 패딩 값을 추가합니다.

• 상단 패딩: 200px
• 하단 패딩: 200px

새 행 추가

열 구조

다음 열 구조를 사용하여 새 행을 추가합니다.

배경색

아직 모듈을 추가하지 않고 행 설정을 열고 행에 배경색을 추가하십시오.

• 배경색: #ffffff

2열 그라데이션 배경

다음 행의 두 번째 열에 그라데이션 배경을 추가합니다.

• 색상 1: #9932ff
• 색상 2: #562fef
• 2열 그라디언트 유형: 선형
• 열 2 기울기 방향: 160deg

사이징

행의 크기 설정도 변경하십시오.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 열 높이 균등화: 예

간격

그런 다음 몇 가지 사용자 지정 간격 값을 추가합니다.

• 상단 패딩: 0px
• 하단 패딩: 0px
• 열 1 상단 패딩: 100px
• 열 1 하단 패딩: 50px
• 열 1 왼쪽 패딩: 50px
• 열 1 오른쪽 패딩: 50px
• 열 2 상단 패딩: 100px
• 2열 하단 패딩: 100px
• 열 2 왼쪽 패딩: 50px
• 열 2 오른쪽 패딩: 50px

국경

행의 각 테두리에 '20px'를 추가합니다.

박스 섀도우

마지막으로 행에 미묘한 상자 그림자를 추가하십시오.

• 상자 그림자 흐림 강도: 45px
• 상자 그림자 확산 강도: -11px
• 그림자 색상: rgba(0,0,0,0.3)

열 1에 텍스트 모듈 추가

콘텐츠 추가

모듈 추가를 시작할 시간입니다! 첫 번째 열에서 텍스트 모듈로 시작하십시오.

텍스트 설정

이 모듈의 텍스트 설정을 변경합니다.

• 텍스트 글꼴 두께: 매우 굵게
• 텍스트 글꼴 스타일: 대문자
• 텍스트 색상: #562fef
• 텍스트 Suze: 100px(데스크톱), 80px(태블릿), 60px(전화)
• 텍스트 문자 간격: -10px
• 텍스트 줄 높이: 1em

간격

하단 여백도 추가하십시오.

• 하단 여백: 50px

열 1에 문의 양식 모듈 추가

집단

첫 번째 열에 필요한 두 번째 모듈은 문의 양식 모듈입니다. 모듈을 추가했으면 'Captcha 표시' 옵션을 비활성화합니다.

• 보안 문자 표시: 아니요

양식 필드 텍스트 설정

다음으로 양식 필드 배경색을 변경합니다.

• 양식 필드 배경색: #ffffff

버튼 설정

텍스트가 포함된 버튼 대신 아이콘 버튼을 만들기 위해 버튼 설정을 가지고 놀아보세요.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 73px
• 하단 텍스트 색상: rgba(0,0,0,0)
• 호버 버튼 배경색: rgba(255,255,255,0)
• 버튼 테두리 너비: 0px
• 버튼 아이콘 색상: #9932ff
• 버튼에 대한 호버에 아이콘만 표시: 아니오

박스 섀도우

마지막으로 각 필드에 미묘한 상자 그림자를 추가합니다.

• 상자 그림자 흐림 강도: 36px
• 상자 그림자 흐림 강도: -14px
• 그림자 색상: rgba(0,0,0,0.3)

열 2에 텍스트 모듈 추가

콘텐츠 추가

두 번째 열에 필요한 첫 번째 모듈은 또 다른 텍스트 모듈입니다.

텍스트 설정

컨텐츠를 추가했으면 이 모듈의 텍스트 설정을 변경하십시오.

• 텍스트 글꼴 두께: 매우 굵게
• 텍스트 색상: #ffffff
• 텍스트 크기: 23px
• 텍스트 문자 간격: -1px

열 2에 Blurb 모듈 #1 추가

콘텐츠 추가

두 번째로 필요한 모듈은 Blurb 모듈입니다. 연락처 정보를 입력하세요.

아이콘 선택

그런 다음 일치하는 아이콘을 선택합니다.

아이콘 설정

이 아이콘의 설정을 변경합니다.

• 아이콘 색상: #ffffff
• 아이콘 배치: 왼쪽

제목 텍스트 설정

다음에 제목 텍스트 설정을 약간 변경하여 계속하십시오.

• 제목 텍스트 크기: 15px
• 제목 문자 간격: -0.5px

간격

그리고 상단 여백을 추가하십시오.

• 상단 여백: 120px

Blurb 모듈을 두 번 복제

첫 번째 Blurb 모듈 수정이 완료되면 계속해서 모듈을 두 번 복제할 수 있습니다.

두 복제본의 콘텐츠 및 아이콘 변경

두 복제본의 콘텐츠와 아이콘을 변경하여 방문자와 다른 종류의 연락처 정보를 공유합니다.

두 복제본의 간격 변경

두 복제본의 상단 여백도 변경해야 합니다.

• 상단 여백: 30px

문의 양식 만들기 #3

새 섹션 추가

배경색

세 번째 예시로! 다음 배경색으로 새 섹션을 추가합니다.

• 배경색: #3491CE

간격

간격 설정에서 몇 가지 사용자 정의 패딩 값을 추가하여 계속하십시오.

• 상단 패딩: 200px
• 하단 패딩: 200px

행 #1 추가

열 구조

그런 다음 다음 열 구조를 사용하여 새 행을 추가합니다.

텍스트 모듈 추가

콘텐츠 추가

모듈 추가를 시작할 시간입니다! 첫 번째 열에 추가해야 하는 첫 번째 모듈은 텍스트 모듈입니다. 선택한 내용을 입력합니다.

텍스트 설정

그런 다음 텍스트 설정을 변경합니다.

• 텍스트 글꼴 두께: 매우 굵게
• 텍스트 색상: rgba(255,255,255,0.24)
• 텍스트 크기: 100px(데스크톱), 86px(태블릿), 60px(전화)
• 텍스트 줄 높이: 1em
• 텍스트 방향: 중앙

간격

음수 하단 여백도 추가하십시오.

• 하단 여백: -100px

행 #2 추가

열 구조

이 예제를 완료하는 데 필요한 두 번째 행에는 다음 열 구조가 포함되어 있습니다.

그라데이션 배경

아직 모듈을 추가하지 않고 행 설정을 열고 그라데이션 배경을 추가하십시오.

• 색상 1: #11CE84
• 색상 2: #10C77F
• 그라디언트 유형: 선형
• 기울기 방향: 160deg
• 시작 위치: 50%
• 최종 위치: 50%

사이징

크기 설정도 변경합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 열 높이 균등화: 예

간격

다음으로 몇 가지 사용자 정의 패딩 값을 추가합니다.

• 상단 패딩: 150px
• 하단 패딩: 100px
• 왼쪽 패딩: 50px
• 오른쪽 패딩: 50px

국경

그런 다음 테두리 설정으로 이동하여 각 모서리에 '20px'를 추가합니다. 하단 테두리도 사용하십시오.

• 하단 테두리 너비: 10px
• 하단 테두리 색상: #1ba35a

박스 섀도우

미묘한 상자 그림자를 추가하여 행 설정을 완료하십시오.

• 상자 그림자 흐림 강도: 80px
• 상자 그림자 확산 강도: -24px
• 그림자 색상: rgba(0,0,0,0.3)

열 1에 문의 양식 모듈 추가

이름 및 이메일 필드에서 '전각으로 만들기' 옵션 활성화

행의 첫 번째 열에 필요한 첫 번째 모듈은 문의 양식 모듈입니다. 이름 및 이메일 필드를 열고 레이아웃 설정을 변경합니다.

• 전폭 만들기: 예

집단

다음에 보안 문자를 비활성화하십시오.

• 보안 문자 표시: 아니요

버튼 설정

그리고 버튼 설정을 변경합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 색상: #ffffff
• 색상 1: #3AA0E3
• 색상 2: #3491CE
• 그라디언트 유형: 선형
• 기울기 방향: 155deg
• 시작 위치: 50%
• 최종 위치: 50%
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 10px
• 상자 그림자 확산 강도: -2px
• 그림자 색상: #0a60af

국경

또한 각 필드에 둥근 모서리 '5px'를 추가하고 있습니다.

열 2에 텍스트 모듈 추가

콘텐츠 추가

두 번째 열에서 필요한 첫 번째 모듈은 텍스트 모듈입니다. 콘텐츠를 입력하세요.

배경색

그런 다음 배경색을 변경합니다.

• 배경색: rgba(255,255,255,0.13)

텍스트 설정

텍스트 설정도 가지고 놀아보세요.

• 텍스트 글꼴 두께: 가벼움
• 텍스트 색상: #ffffff
• 텍스트 크기: 15px
• 텍스트 문자 간격: -0.5px

간격

모듈에 숨을 쉴 수 있는 공간을 제공하기 위해 사용자 지정 패딩을 추가합니다.

• 상단 패딩: 12px
• 하단 패딩: 12px
• 왼쪽 패딩: 10px
• 오른쪽 패딩: 10px

국경

또한 왼쪽 상단과 왼쪽 하단 모서리에 '20px'를 추가합니다. 그 위에 왼쪽 테두리를 추가합니다.

• 왼쪽 테두리 너비: 34px
• 왼쪽 테두리 색상: #edf000

시계

이 디자인이 다양한 화면 크기와 일치하도록 하기 위해 휴대폰과 태블릿에서 텍스트 모듈을 비활성화할 것입니다.

텍스트 모듈을 두 번 복제

첫 번째 텍스트 모듈 수정을 완료했으면 계속해서 모듈을 두 번 복제하십시오.

두 복제본의 내용 변경

두 복제본의 내용을 다른 것으로 변경합니다.

두 복제본의 간격 변경

그리고 각 모듈 사이에 공간을 만들기 위해 상단 여백을 추가합니다.

• 상단 여백: 20px

두 복제의 경계 변경

마지막으로 각 복제본의 왼쪽 테두리 색상을 개별적으로 변경합니다.

• 색상 1: #00faff
• 색상 2: #00f76f

문의 양식 만들기 #4

새 섹션 추가

배경색

네 번째 예시로! 다음 배경색을 사용하여 새 섹션을 추가합니다.

• 배경색: #FFBABD

간격

이 섹션의 기본 패딩을 제거합니다.

• 상단 패딩: 0px
• 하단 패딩: 0px

새 행 추가

열 구조

다음 열 구조를 사용하여 새 행을 계속 추가합니다.

그라데이션 배경

아직 모듈을 추가하지 않고 행 설정을 열고 그라데이션 배경을 추가하십시오.

• 색상 1: #ffffff
• 색상 2: rgba(41,196,169,0)
• 그라디언트 유형: 방사형
• 방사형 방향: 중심
• 시작 위치: 38%
• 최종 위치: 38%

사이징

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

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

간격

그리고 사용자 정의 패딩을 추가하십시오.

• 상단 패딩: 160px
• 하단 패딩: 160px

텍스트 모듈 추가

콘텐츠 추가

첫 번째 모듈은 텍스트 모듈입니다. 콘텐츠를 입력하세요.

텍스트 설정

그에 따라 텍스트 설정을 변경합니다.

• 텍스트 글꼴: Abril Fatface
• 텍스트 색상: #640076
• 텍스트 크기: 45px(데스크톱), 34px(태블릿), 20px(휴대폰)
• 텍스트 줄 높이: 1em
• 텍스트 방향: 중앙

간격

다음에 몇 가지 사용자 정의 간격 값을 추가하십시오.

• 상단 여백: 300px
• 상단 패딩: 50px
• 하단 패딩: 50px

문의 양식 모듈 추가

이름 및 이메일 필드에서 '전각으로 만들기' 옵션 활성화

두 번째이자 마지막으로 필요한 모듈은 문의 양식 모듈입니다. 이름과 이메일 필드를 모두 열고 레이아웃 설정을 변경합니다.

• 전폭 만들기: 예

집단

그런 다음 요소 설정에서 보안 문자 옵션을 비활성화합니다.

• 보안 문자 표시: 아니요

양식 필드 텍스트 설정

양식 필드 텍스트 설정도 일부 변경하십시오.

• 양식 필드 배경색: #fff6f6
• 양식 필드 텍스트 색상: #ff7c7c

버튼 설정

다음 설정을 사용하여 버튼을 아이콘 버튼으로 변경합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 88px
• 버튼 텍스트 색상: rgba(255,255,255,0)
• 호버 버튼 배경색: rgba(255,255,255,0)
• 버튼 테두리 너비: 0px
• 버튼 아이콘 색상: #e60085
• 버튼을 가리키면 아이콘만 표시: 예

사이징

그리고 디자인이 모든 화면 크기와 일치하도록 크기 값을 조정하십시오.

• 너비: 42%(데스크탑), 50%(태블릿), 77%(휴대폰)
• 모듈 정렬: 중앙

간격

모듈에 몇 가지 사용자 정의 간격 값을 추가하여 계속하십시오.

• 하단 여백: 200px
• 왼쪽 패딩: 50px
• 오른쪽 패딩: 50px

국경

그리고 각 모서리에 '10px'를 추가합니다.

버튼 여백

마지막으로 고급 탭에서 다음 CSS 코드 줄을 사용하여 아이콘 버튼을 오른쪽으로 누릅니다.

margin-right: -100px;

문의 양식 만들기 #5

새 섹션 추가

그라데이션 배경

마지막 예시로! 다음 그라데이션 배경으로 새 섹션을 추가합니다.

• 색상 1: #4bf2d0
• 색상 2: #ffffff
• 그라디언트 유형: 방사형
• 방사형 방향: 왼쪽
• 시작 위치: 36%
• 최종 위치: 36%

간격

그런 다음 간격 설정으로 이동하여 사용자 지정 패딩을 추가합니다.

• 상단 패딩: 250px
• 하단 패딩: 250px

새 행 추가

열 구조

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

배경색

아직 모듈을 추가하지 않고 행 설정을 열고 배경색을 추가하십시오.

• 배경색: #ffffff

열 1 배경색

첫 번째 열에 다른 배경색을 추가합니다.

• 열 1 배경색: #f9f9f9

사이징

그런 다음 행의 크기 설정을 변경합니다.

• 사용자 정의 너비 사용: 예
• 단위: PX
• 사용자 정의 너비: 1730px
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 열 높이 균등화: 예

간격

모든 화면 크기와 일치하도록 몇 가지 사용자 지정 간격 값을 추가합니다.

• 상단 패딩: 0px
• 하단 패딩: 0px
• 열 1 상단 패딩: 200px(데스크톱), 0px(태블릿 및 휴대전화)
• 열 1 하단 패딩: 150px(데스크톱), 0px(태블릿 및 휴대전화)
• 열 1 왼쪽 패딩: 50px
• 열 1 오른쪽 패딩: 50px
• 2열 상단 패딩: 200px(데스크톱), 100px(태블릿 및 휴대전화)
• 2열 하단 패딩: 150px, 100px(태블릿 및 휴대전화)

박스 섀도우

행 설정에서 마지막으로 해야 할 일은 미묘한 상자 그림자를 추가하는 것입니다.

• 상자 그림자 흐림 강도: 56px
• 상자 그림자 확산 강도: -17px
• 그림자 색상: rgba(0,0,0,0.3)

열 1에 텍스트 모듈 추가

콘텐츠 추가

모듈 추가를 시작할 시간입니다! 첫 번째 열에 텍스트 모듈을 추가합니다.

텍스트 설정

콘텐츠를 추가했으면 텍스트 설정으로 이동하여 일부 변경을 수행합니다.

• 텍스트 글꼴: Cambay
• 텍스트 색상: #000000
• 텍스트 크기: 26px
• 텍스트 문자 간격: -0.5px
• 텍스트 방향: 오른쪽

간격

상단 여백도 추가하십시오.

• 상단 여백: 60px

시계

그리고 휴대폰과 태블릿 모두에서 모듈을 숨깁니다.

텍스트 모듈을 두 번 복제

두 복제본의 내용 변경

첫 번째 텍스트 모듈 수정을 완료했으면 계속해서 모듈을 두 번 복제하십시오. 두 복제본의 내용을 변경합니다.

두 복제본의 간격 변경

두 복제본의 위쪽 여백도 수정합니다.

• 상단 여백: 80px

열 2에 문의 양식 모듈 추가

이름 및 이메일 필드에서 '전각으로 만들기' 옵션 활성화

두 번째 열에 필요한 유일한 모듈은 문의 양식 모듈입니다. 이름 및 이메일 필드를 열고 레이아웃 설정을 변경합니다.

• 전폭 만들기: 예

집단

다음 보안 문자 옵션을 비활성화하십시오.

• 보안 문자 표시: 예

양식 필드 텍스트 설정

그런 다음 양식 필드 텍스트 설정으로 이동하여 일부를 수정합니다.

• 양식 필드 배경색: rgba(255,255,255,0)
• 양식 필드 글꼴: Cambay

버튼 설정

다음 버튼 설정을 사용하여 고유한 버튼을 만듭니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 64px(데스크톱), 50px(태블릿), 40px(전화)
• 버튼 텍스트 색상: #000000
• 색상 1: #4bf2d0
• 색상 2: rgba(41,196,169,0)
• 그라디언트 유형: 방사형
• 방사형 방향: 중심
• 시작 위치: 25%
• 최종 위치: 25%
• 버튼 테두리 너비: 0px
• 버튼에 대한 호버 시 버튼만 표시: 아니오

간격

이 모듈에도 상단 여백을 추가하십시오.

• 상단 여백: 50px

국경

그리고 각 필드에 미묘한 아래쪽 테두리를 사용합니다.

• 하단 테두리 너비: 0.5px
• 하단 테두리 색상: #000000

개별 필드 간격

마지막으로 각 필드에 다음 하단 여백을 개별적으로 추가하면 완료됩니다!

• 하단 여백: 50px

시사

데스크탑

이제 모든 단계를 거쳤으므로 데스크톱의 Divi 연락처 양식 모듈 디자인을 마지막으로 살펴보겠습니다.

이동하는

이것은 더 작은 화면 크기에서 Divi 문의 양식 모듈 디자인에서 기대할 수 있는 것입니다.

마지막 생각들

이 게시물에서 우리는 당신이 만드는 모든 웹사이트에 쉽게 사용하고 수정할 수 있는 5가지 아름다운 Divi 문의 양식 모듈 디자인을 공유했습니다. 문의 양식은 많은 웹사이트에서 매우 중요한 부분이므로 방문자가 연락할 수 있도록 디자인하는 것이 중요합니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!