Divi: "문의 양식" 모듈을 사용자 정의하는 방법

생성하시겠습니까? 연락처 양식 모듈 덕분에 귀하의 웹사이트에 문의 양식 디비에서? 다음은 3가지 사용자 정의 아이디어입니다.

숲 형태 연락처 정보는 많은 웹사이트에서 필수적인 부분입니다. 그들의 주요 목표는 직관적이고 방문자가 쉽게 연락할 수 있도록 돕는 것입니다.

그러나 그것이 모든 것을 의미하지는 않습니다 형태 접점은 정확하고 미리 정의된 모양을 가져야 합니다. 직관적인 경험을 아름다운 디자인과 쉽게 결합할 수 있습니다. 이것이 바로 이 튜토리얼에서 우리가 할 일입니다.

모듈의 3가지 고유한 디자인을 공유합니다. 문의 양식 de Divi Divi의 기본 제공 옵션만 사용하여 만들 수 있습니다.

가자!

Divi Contact Form 모듈의 설계 개요

데스크톱 버전

다양한 모듈 디자인의 데스크톱 버전을 살펴보는 것부터 시작하겠습니다. 문의 양식 이 튜토리얼에서 디자인할 것입니다.

모바일 버전

작은 화면 크기에서는 다음과 같이 표시됩니다.

지금 DIVI를 다운로드하세요!!!

Divi Contact Form 모듈을 사용자 지정하는 방법: 3가지 예

읽기 : Divi: 팀원 섹션을 캐러셀로 만드는 방법

문의 양식 만들기 #1

새 섹션 추가

그라데이션 배경

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

그라디언트 정지
- 34%: #4c00ff
- 34%: #ffd400
유형: 라운드
그라데이션 방향: 왼쪽 아래

간격

그런 다음 디자인 탭의 간격 옵션으로 이동하여 다음과 같이 설정을 변경합니다.

패딩(상단 및 하단): 200px

새 행 추가

기둥의 구조

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

열 1: 배경색

아직 모듈을 추가하지 않은 상태에서 행 설정을 연 다음 열 1 설정을 열고 아래에 배경색을 추가하십시오.

배경: rgba(255,255,255,0.55)

열 1: 배경 이미지

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

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

열 2: 배경 이미지

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

배경: #ffffff

크기 조정

그런 다음 크기 조정 매개변수를 수정합니다.

열 높이 균등화: 예

간격

또한 모든 기본 맞춤 패딩을 제거합니다.

패딩(상단 및 하단): 0px

기둥 테두리 반경

고급 탭의 두 열에 테두리 반경을 추가합니다.

border-radius: 10px;

열 1에 텍스트 모듈 추가

콘텐츠 추가

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

텍스트 설정

그런 다음 텍스트 모듈의 디자인 탭으로 이동하여 몇 가지 사항을 변경합니다.

텍스트 :
- 글꼴: 만족
- 텍스트 색상: #333333
- 크기: 100px
- 줄 높이: 1em
- 정렬: 중앙

간격

또한 사용자 정의 채우기 값을 추가하십시오.

패딩(상단): 600px
패딩(하단): 100px

그림자 상자

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

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