인라인 필드와 모듈 전체 너비 필드를 결합해야 함 문의 양식 de Divi ?
Le 연락처 양식 이메일을 캡처하고 방문자를 고객으로 전환하려는 경우 웹사이트에 포함해야 할 중요한 요소입니다.
모듈 문의 양식 de Divi 쉽게 사용자 정의하여 만들 수 있습니다. 형태 모든 유형의 웹사이트를 위한 매력적이고 매혹적인 연락처 카드. 이 모듈에는 각 양식 필드에 적용할 수 있는 두 가지 표시 옵션이 있습니다. 대열을 ou 전폭.
이 자습서에서는 사용자를 위한 네 가지 고유한 레이아웃 가능성을 제시합니다. 연락처 양식 인라인 및 전체 너비 필드를 사용하여 Divi.
시작하자!
측량
다음은 우리가 디자인할 내용의 미리보기입니다.
첫 번째 레이아웃
두 번째 레이아웃
세 번째 레이아웃
네 번째 레이아웃
시작하려면 무엇이 필요합니까?
시작하기 전에 Divi 테마 설치 및 활성화 웹 사이트에 최신 버전의 Divi가 있는지 확인하십시오.
이제 시작할 준비가 되었습니다!
인라인 및 전폭 필드를 사용하는 Divi의 문의 양식 모듈용 샘플 레이아웃 4개
사전 정의된 레이아웃 선택
4개의 템플릿은 각각 신발 수선 연락처 페이지 레이아웃에서 수정됩니다. 구두 수선 레이아웃 팩, Divi 라이브러리에서 찾을 수 있습니다.
웹사이트에 새 페이지를 추가하고 제목을 지정한 다음 옵션을 선택합니다. Divi Builder 사용.
이 예에서는 Divi 라이브러리에서 미리 만들어진 레이아웃을 사용하므로 다음을 선택합니다. 레이아웃 찾아보기.
구두 수선 연락처 페이지 레이아웃을 찾아 선택합니다.
선택 이 레이아웃 사용 페이지에 레이아웃을 추가합니다.
이제 예제를 디자인할 준비가 되었습니다.
첫 번째 레이아웃
먼저 모듈이 포함된 줄을 이동합니다. 문의 양식 위의 섹션, Blurb 모듈이 있는 라인 바로 아래로 이동하세요. 그런 다음 나머지 빈 섹션을 삭제할 수 있습니다.
선 설정을 열고 왼쪽 및 오른쪽 패딩을 추가하고,
- 패딩(좌우): 15%
반응형 옵션을 선택하고 모바일용 패딩을 설정합니다.
- 패딩(좌우): 5%
인라인 및 전체 너비 필드로 변경된 연락처 양식 레이아웃
이 레이아웃의 경우 성과 이름에 대한 두 개의 개별 필드를 생성합니다.
연락처 양식 모듈 설정을 열고 성 필드의 ID 및 제목 필드를 이름으로 변경합니다.
이름 필드 아래에 새 필드를 추가합니다. ID 및 Title 필드를 Name으로 설정합니다.
이름 필드 설정에서 레이아웃 설정을 열고 Make Fullwidth를 No로 설정합니다.
- 전폭으로 만들기: 아니오
그런 다음 설정에서 연락처 양식에서 전화번호가 제목 앞에 나열되도록 제목과 전화번호의 순서를 변경하세요.
제목 필드 레이아웃 설정을 열고 필드를 전체 너비로 설정합니다.
- 전폭 만들기: 예
연락처 양식 디자인 사용자 정의
이제 몇 가지 설정을 변경하여 디자인을 완성해 보겠습니다. 문의 양식 모듈 설정의 디자인 탭으로 이동합니다.
먼저 버튼의 배경색을 변경합니다.
- 버튼 배경: #DBC2B3
버튼에 위쪽 여백을 추가합니다.
- 버튼 여백(상단): 10px
마지막으로 테두리 설정으로 이동하여 필드에 둥근 모서리를 추가합니다.
- 입력 둥근 모서리: 30px
예제 1의 최종 결과
데스크톱 및 모바일의 최종 결과는 다음과 같습니다.
두 번째 예
두 번째 예에서는 Blurb 모듈을 페이지 왼쪽으로 옮기고 연락처 양식을 페이지 오른쪽에 배치합니다. Blurb 모듈을 열로 이동합니다.
행 레이아웃을 변경합니다.
라인 디자인 설정을 열고 끄기 사용자 거터 너비 사용.
- 사용자 정의 여백 너비 사용: 아니오
기본 요소의 사용자 지정 CSS에 코드를 추가하여 Blurb 및 문의 양식 모듈을 세로로 정렬합니다.
align-items:center;
이제 열 사이의 얇은 테두리를 제거해야 합니다. 행 설정 열기, 열 설정 열기 1. 디자인 탭에서 테두리 설정으로 이동하여 테두리를 제거합니다.
- 오른쪽 테두리 너비: 0px
그런 다음 열 2 설정을 열고 단계를 반복하여 테두리를 제거합니다.
- 오른쪽 테두리 너비: 0px
"문의하기" 텍스트를 중앙에 맞춥니다.
연락처 양식을 오른쪽 열로 이동합니다. 나머지 빈 섹션을 삭제합니다.
인라인 및 전체 너비 필드로 변경된 연락처 양식 레이아웃
이 레이아웃에는 이름과 성에 대한 두 개의 개별 필드도 있습니다. 연락처 양식 모듈 설정을 열고 성 필드의 ID 및 제목 필드를 이름으로 변경합니다.
이름 필드 아래에 새 필드를 추가합니다. ID 및 Title 필드를 Name으로 설정합니다.
이름 필드 설정에서 레이아웃 설정을 열고 Make Fullwidth를 No로 설정합니다.
- 전폭으로 만들기: 아니오
전화가 제목 앞에 오도록 전화 및 제목 필드의 순서를 변경합니다.
이메일, 전화 및 제목에 대한 필드 설정을 열고 레이아웃을 전체 너비로 설정합니다.
- 전폭 만들기: 예
연락처 양식 디자인 사용자 정의
행 설정을 연 다음 열 설정을 엽니다. 2. 배경색을 설정합니다.
- 배경: #DBC2B3
열 2 설정에서 디자인 탭으로 이동하여 패딩을 추가합니다.
- 패딩(위, 아래, 왼쪽 및 오른쪽: 50px
반응형 설정을 변경하려면 모바일 아이콘을 선택하세요. 모바일용 패딩을 설정합니다.
- 패딩(위, 아래, 왼쪽 및 오른쪽): 30px
그런 다음 열에 상자 그림자를 추가합니다.
마지막으로 문의 양식 모듈 설정을 열고 필드 텍스트 색상을 변경합니다.
- 필드 텍스트 색상: #000000
예제 2의 최종 결과
다음은 두 번째 레이아웃의 최종 결과입니다.
세 번째 예
세 번째 레이아웃의 경우 왼쪽에 연락처 양식이 있고 오른쪽에 Blurb 모듈이 있습니다. Blurb 모듈을 포함하는 행의 열 구조를 변경하여 시작하겠습니다.
주소 모듈을 오른쪽 열로 이동합니다.
그런 다음 "문의하기" 텍스트 모듈을 왼쪽 열로 이동한 다음 나머지 빈 줄을 삭제합니다.
문의 양식 모듈을 "문의하기" 텍스트 모듈 아래의 왼쪽 열로 이동합니다. 나머지 빈 섹션을 삭제합니다.
디자인 탭에서 라인 설정을 열고 끄십시오. 사용자 거터 너비 사용
- 사용자 정의 여백 너비 사용: 아니오
기본 요소의 사용자 지정 CSS에 코드를 추가하여 Blurb 및 문의 양식 모듈을 세로로 정렬합니다.
align-items:center;
행 설정 열기, 열 설정 열기 1. 디자인 탭에서 테두리 설정으로 이동하여 테두리를 제거합니다. 단계를 반복하여 열 2에서 테두리를 제거합니다.
- 오른쪽 테두리 너비: 0px
연락처 양식의 레이아웃 변경
세 번째 디자인에 대한 필드 너비는 그대로 두지만 연락처 양식 설정을 열고 전화 번호와 제목 필드의 순서를 변경하여 전화가 먼저 오도록 합니다.
예제 3의 최종 결과
다음은 세 번째 레이아웃의 최종 결과입니다.
네 번째 예
네 번째 및 최종 레이아웃의 경우 문의 양식 모듈은 왼쪽에, Blurb 모듈은 오른쪽에 있습니다. 다시 Blurb 모듈을 포함하는 행의 열 구조를 변경하여 시작하겠습니다.
주소 모듈을 오른쪽 열로 이동합니다.
그런 다음 문의 양식 모듈을 왼쪽 열로 이동합니다. 나머지 빈 섹션을 삭제합니다.
디자인 탭에서 라인 설정을 열고 비활성화합니다. 사용자 거터 너비 사용.
- 사용자 정의 여백 너비 사용: 아니오
기본 요소의 사용자 지정 CSS에 코드를 추가하여 Blurb 및 문의 양식 모듈을 세로로 정렬합니다.
align-items:center;
행 설정 열기, 열 설정 열기 1. 디자인 탭에서 테두리 설정으로 이동하여 테두리를 제거합니다.
- 오른쪽 테두리 너비: 0px
그런 다음 열 2 설정을 열고 단계를 반복하여 테두리를 제거합니다.
- 오른쪽 테두리 너비: 0px
"문의하기" 텍스트에 대한 텍스트 모듈 설정을 열고 텍스트를 중앙에 배치합니다.
- 텍스트 정렬: 가운데
인라인 및 전체 너비 필드로 변경된 연락처 양식 레이아웃
이 디자인의 경우 모든 필드가 전체 너비가 됩니다. 문의 양식 모듈 설정을 연 다음 각 필드에 대한 설정을 엽니다. 디자인 탭에서 선택 레이아웃 정의하다 전폭으로 만들기 에 예.
각 전체 너비 필드를 만든 후에는 양식이 다음과 같아야 합니다.
이제 Last Name 필드의 ID 및 Title 필드를 First Name으로 변경합니다.
이름 필드 아래에 새 필드를 추가합니다. ID 및 Title 필드를 Name으로 설정합니다.
전화가 제목 앞에 오도록 전화 및 제목 필드의 순서를 변경합니다.
문의 양식 모듈 디자인 사용자 지정
모듈 설정의 디자인 탭에서 필드 텍스트 색상을 검은색으로 설정합니다.
- 필드 텍스트 색상: #000000
섹션 설정을 열고 배경색을 추가합니다.
- 배경: #DBC2B3
마지막으로 배경 마스크를 추가합니다.
- 배경 마스크: 아치
- 마스크 변환: 수평
모바일에서 배경 마스크가 더 잘 작동하도록 하려면 반응형 설정을 사용합시다.
- 마스크 변환(전화): 수평 및 회전
최종 결과
다음은 네 번째 레이아웃의 최종 결과입니다.
최종 결과
모든 예제를 한 번 더 살펴보겠습니다.
첫 번째 예
두 번째 예
세 번째 예
네 번째 예
지금 DIVI를 다운로드하세요!!!
결론
매력적인 문의 양식을 사용하면 전환율을 높이고 방문자가 귀하와 직접 연결할 수 있습니다.
이 기사에서 시연했듯이 인라인 및 전체 너비 필드 옵션을 사용하여 양식에 대한 다양한 모양과 레이아웃을 만들 수 있으며 Divi의 내장 디자인 옵션을 사용하면 양식을 돋보이게 하는 독특한 디자인과 매력을 만들 수 있습니다.
이 기술이 향후 프로젝트에 유용한 또 다른 디자인 기술을 추가할 수 있기를 바랍니다.
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.
주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
