확대 스크롤 애니메이션으로 반응형 전체 화면 연락처 양식 섹션을 만드는 방법

많은 웹사이트에서 페이지의 연락처 섹션은 방문자에게 이상적인 목적지입니다. 명백히 말하면, 대부분의 사람/회사는 방문자가 더 많은 비즈니스를 위해 그들에게 연락하기를 원합니다. 그렇기 때문에 더 나은 전환을 위해 해당 섹션을 최적화하는 것이 중요합니다. 우리가 할 수 있는 한 가지 방법은 사용자에게 연락처 정보를 방해 없이 볼 수 있는 전체 화면 연락처 양식 레이아웃을 만드는 것입니다.

이 튜토리얼에서는 Divi 사이트의 모든 페이지에서 사용할 수 있는 전체 화면 연락처 양식 섹션 레이아웃을 만들 것입니다. 또한 전체 화면 레이아웃을 작은 휴대폰에서도 멋지게 유지하는 유용한 반응형 디자인 설정으로 레이아웃을 사용자 지정합니다.

시작하자!

엿보기

다음은 우리가 만들 반응형 전체 화면 문의 양식 섹션을 간략하게 살펴보겠습니다.

무료로 레이아웃 다운로드

이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

https://youtu.be/5Qt9J95uME8

YouTube 채널 구독

섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.

가져오기 버튼을 클릭합니다.

이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.

그런 다음 가져오기 버튼을 클릭합니다.

완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다. 이것은 섹션 레이아웃이므로 빌더에서 새 섹션을 생성할 때 이 레이아웃을 페이지, 게시물 또는 템플릿에 추가해야 합니다.

페이지에 섹션 레이아웃을 추가하는 방법은 게시물 하단을 참조하세요.

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

시작하는 데 필요한 것

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

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

접촉 섹션 레이아웃 구축

일을 시작하기 위해 Divi Builder를 사용하여 미리 만들어진 레이아웃을 새 페이지에 추가할 것입니다. 이렇게 하면 디자인 속도가 빨라져 섹션(문의 양식 포함)을 전체 화면 및 반응형으로 만드는 데 필요한 작업에 집중할 수 있습니다. 그런 다음 스크롤 효과를 추가하여 결국에는 모두 함께 끌어올립니다.

미리 만들어진 레이아웃 추가하기

Divi 빌더를 사용하여 페이지 편집을 클릭하면 "미리 만들어진 레이아웃 선택" 옵션을 선택합니다.

그런 다음 Business Coach 연락처 페이지 레이아웃을 찾아 "이 레이아웃 사용" 버튼을 클릭합니다.

섹션 설정

레이아웃이 페이지에 로드되면 레이아웃 맨 위에 있는 섹션의 설정을 열고 다음을 업데이트합니다.

배경

• 배경색: #3550a0

섹션 높이 및 패딩

• 최소 높이: 600px
• 높이: 104vh
• 패딩: 상단 0px, 하단 0px

이 디자인의 핵심 중 하나는 높이를 최소 100vh(뷰포트 높이의 100%)로 설정하는 것입니다. 이렇게 하면 섹션이 브라우저 창의 전체 높이에 걸쳐 있게 됩니다. 사용자가 섹션으로 스크롤할 때 약간의 추가 공간이 있도록 104vh 높이를 추가합니다.

min-height를 600px로 설정하면 브라우저 높이가 너무 작은 경우 섹션 내의 어떤 요소도 숨겨지지 않도록 대체 높이입니다. 섹션에 포함된 콘텐츠의 양에 따라 조정해야 합니다.

맞춤 CSS

섹션 내에서 행을 세로로 가운데에 맞추려면(전체 화면 섹션에 적합) 다음 사용자 지정 CSS 기본 요소를 추가합니다.

display:flex;flex-direction: column;

문의 양식 추가

섹션에 문의 양식을 추가하려면 아래 미리 만들어진 섹션에서 기존 텍스트 모듈 아래로 끌어다 놓습니다.

미리 만들어진 레이아웃에서 추가 섹션 삭제

그런 다음 우리가 만들고 있는 한 섹션만 남도록 맨 아래 섹션을 삭제합니다.

전체 화면 반응형 디자인을 위한 섹션 요소 사용자 지정

이제 섹션 레이아웃이 완료되었으므로 모든 장치의 전체 화면 섹션에 맞게 확장되는 반응형 디자인으로 섹션의 콘텐츠(또는 하위 요소) 사용자 지정을 시작할 준비가 되었습니다.

대부분의 텍스트 크기와 각 요소의 간격에 대해 vh 길이 단위를 사용합니다. 이렇게 하면 짧은 전화 디스플레이에서도 전체 화면 레이아웃으로 요소를 볼 수 있습니다.

행 설정

행 설정을 열고 다음을 업데이트합니다.

• 거터 폭: 1
• 폭: 100%
• 패딩: 위쪽 0px, 아래쪽 0px, 왼쪽 7vh, 오른쪽 7vh

텍스트 모듈 설정

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

제목 텍스트 크기

• 제목 텍스트 크기: 7vh(데스크톱), 5vh(태블릿 및 휴대폰)

• 제목 3 텍스트 크기: 2vh(데스크톱), 3vh(태블릿), 12px(전화)

여유

• 여백: 3vh 하단

문의 양식 설정

이제 vh 길이 단위를 사용하여 문의 양식에서 반응형 디자인 조정을 계속할 것입니다. 문의 양식 설정을 열고 다음을 업데이트하십시오.

필드 설정

• 필드 마진: 3vh
• Fleids 패딩: 2vh 상단, 2vh 하단
• 필드 텍스트 크기: 2.5vh

버튼 텍스트 크기

• 버튼 텍스트 크기: 2vh

너비

• 최대 너비: 없음

스크롤 효과 추가

디자인의 마지막 단계는 페이지를 아래로 스크롤할 때 연락처 양식 섹션을 전체 화면 보기로 전환하는 스크롤 효과입니다. 이렇게 하려면 섹션 설정을 한 번 더 열고 다음을 업데이트합니다.

확대 및 축소 탭에서…

• 확장 및 축소 활성화: 예
• 시작 규모: 60%(0%에서)
• 중간 규모: 60%(70%에서)
• 종료 스케일: 100%(100%에서)

이로써 전체 화면 연락처 양식 섹션의 디자인이 완료되었습니다. 그러나 최종 결과를 보기 전에 먼저 웹 사이트의 페이지 중 하나에 추가해 보겠습니다.

웹사이트에서 전체 화면 문의 양식 섹션 사용

섹션 레이아웃을 Divi 라이브러리에 저장

이 섹션을 웹 사이트의 다른 페이지에 추가하려면 먼저 섹션 레이아웃을 Divi 라이브러리에 저장해야 합니다.

이렇게 하려면 섹션 메뉴에서 "라이브러리에 추가" 아이콘을 클릭합니다. 그런 다음 레이아웃 이름을 지정하고 "라이브러리에 저장" 버튼을 클릭합니다.

이제 섹션 레이아웃은 나중에 사용할 수 있도록 Divi 라이브러리에서 사용할 수 있습니다.

Divi 라이브러리에서 페이지에 섹션 레이아웃 추가

전체 화면 연락처 양식 섹션 레이아웃을 Divi의 페이지(또는 게시물)에 추가하려면 Divi Builder를 사용하여 페이지를 열어 편집하십시오.

그런 다음 클릭하여 페이지 어딘가에 새 섹션을 추가합니다.

섹션 삽입 팝업에서 라이브러리에서 추가 탭을 클릭하고 목록에서 저장된 섹션 레이아웃을 선택합니다(내 이름은 "전체 화면 연락처 양식").

최종 결과

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

여기 데스크탑에 있습니다.

여기 태블릿에 있습니다(실제로는 iPad Pro).

여기 전화입니다(실제로는 iPhone 5). 화면이 정말 짧음에도 불구하고 콘텐츠는 여전히 전체 화면 보기에 맞습니다.

마지막 생각들

전체 화면 문의 양식 섹션이 귀하의 웹사이트에 대한 전환율이 높은 문의 양식/섹션을 만드는 데 도움이 되기를 바랍니다. 명심해야 할 중요한 점은 항상 콘텐츠를 간결하게 유지하여 작은 휴대폰에서도 멋지게 표시할 수 있도록 하는 것입니다. 이 레이아웃에 사용된 주요 반응형 디자인 기술 중 일부는 웹사이트 전체의 디자인을 조정할 때도 유용합니다.

이 주제에 대한 자세한 내용은 vw 및 vh 길이 단위를 사용하여 Divi에서 반응형 문의 양식을 디자인하는 방법에 대한 게시물을 확인하세요.

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

건배!