Divi로 클릭 시 연락처 양식을 만드는 방법

이 Divi 튜토리얼에서는 Divi, 일부 jQuery 코드 및 CSS 코드만 사용하여 버튼(오버레이로)을 클릭한 후 표시되는 문의 양식을 만드는 방법을 보여줍니다.

이는 사이트 방문자가 버튼을 클릭하여 수행한 작업에 집중할 수 있는 좋은 방법입니다. 다른 페이지로 이동하지 않고 완료될 때까지 해당 작업으로 잠급니다.

아래에서 우리가 만들 내용을 간단히 살펴보고 튜토리얼로 넘어갈 수 있습니다!

데스크탑의 결과

휴대전화 및 태블릿의 결과

영감

이 게시물에 대한 영감은 댓글 요청에서 비롯되며 B3multimedia에서 찾을 수 있습니다. 이 작업을 수행하기 위해 다른 방법을 사용하고 있지만 클릭 시 연락처 양식을 만드는 놀라운 방법도 있습니다. 결과를 살펴보십시오.

버튼 모듈로 섹션 만들기

일반적으로 우리는 Divi의 프론트엔드 비주얼 빌더에서 거의 모든 작업을 수행하는 방법을 보여줍니다. 그러나 오늘의 포스트에서는 백엔드 빌더를 사용할 것입니다. 우리가 사용하는 코드 때문에 조금 더 쉽습니다. 즉, 우리만큼 프론트엔드 편집기를 좋아한다면 프론트엔드 "스켈레톤" 보기를 사용하여 이 튜토리얼을 쉽게 완료할 수 있습니다.

자, 이 튜토리얼을 시작하겠습니다!

YouTube 채널 구독

가장 먼저 해야 할 일은 연락처 양식을 표시할 수 있는 버튼을 배치할 새 섹션을 추가하는 것입니다. 표준 섹션을 추가하고 1열 행을 선택하기만 하면 됩니다. 이 작업을 완료했으면 여기에 Button Module을 추가합니다.

원하는 대로 버튼의 스타일을 지정할 수 있지만 버튼 URL이 '#'으로 시작하고 뒤에 다른 것이 오는지 확인해야 합니다. 그냥 공백으로 두거나 '#' 문자만 사용할 수 없습니다. '#'와 일부 텍스트를 추가하면 버튼을 클릭해도 페이지가 이동하지 않습니다. 비워 두면 클릭 시 페이지가 새로 고쳐집니다. 그리고 '#'만 사용하면 페이지 상단으로 이동합니다.

다음으로 해야 할 중요한 일은 버튼에 CSS 클래스를 할당하는 것입니다. 이 CSS 클래스를 이 게시물의 jQuery 코드에서 나중에 사용하여 클릭 후 문의 양식이 표시되는지 확인합니다. 버튼에 할당해야 할 클래스는 단순히 '버튼'입니다.

클릭 시 데스크톱 문의 양식 만들기

다음으로 해야 할 일은 이 게시물의 이전 부분에서 만든 버튼을 누군가 클릭하면 표시되는 데스크톱 연락처 양식을 만드는 것입니다. 이 게시물의 뒷부분에서 모바일 버전을 만드는 방법도 보여드리겠습니다.

이 방법을 사용하면 기본적으로 행 내에서 원하는 디자인을 만들고 팝업으로 표시할 수 있습니다. 다음 예제를 만드는 방법을 보여줌으로써 달성할 수 있는 것을 맛보기만 하면 됩니다.

새 표준 섹션 추가

작업 중인 페이지에 새 표준 섹션을 추가하여 시작하십시오. 방금 추가한 섹션의 고급 탭으로 이동하여 CSS 클래스 필드에 '팝업'을 추가합니다. 동일한 탭을 아래로 스크롤하고 다음 CSS 코드 줄을 Custom CSS 하위 범주의 Before 필드에 배치합니다.

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

이것을 추가하여 섹션이 전체 탭을 차지하도록 합니다. CSS 코드에서 배경색을 조정하여 원하는 배경 오버레이를 만들 수 있습니다. 이 경우 투명도가 약간 있는 검정색을 사용합니다. 동일한 탭 내에서 다음 CSS 코드 줄을 기본 요소에도 추가합니다.

display: none;

고급 탭에서 마지막으로 해야 할 일은 가시성 하위 범주에서 휴대폰 및 태블릿 섹션을 비활성화하는 것입니다.

2열 행 추가

계속해서 2열 행을 추가하고 디자인 탭으로 이동합니다. 크기 조정 하위 범주에서 행의 너비를 수정하여 시작합니다. 이 예에서는 1291px의 사용자 정의 너비를 사용했습니다.

디자인 탭을 아래로 스크롤하고 Spacing 하위 범주 내 두 열의 상단, 왼쪽 및 오른쪽 패딩에 '30px'를 사용합니다.

고급 탭으로 이동하여 완료하십시오. 기본 요소 내에서 다음 CSS 코드 줄을 추가합니다.

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

첫 번째 텍스트 모듈 추가

섹션과 행을 모두 변경했으면 표시할 다른 모듈을 추가할 차례입니다. 가장 먼저 추가할 것은 표시되는 제목입니다. 행의 첫 번째 열에 새 텍스트 모듈을 추가하고 콘텐츠 탭에 텍스트를 작성한 다음 디자인 탭으로 이동하여 시작합니다. 디자인 탭 내에서 텍스트 하위 범주에 대해 다음 설정을 사용했습니다.

• 텍스트 방향: 중앙
• 텍스트 글꼴: 랍스터
• 글꼴 스타일: 굵게
• 텍스트 글꼴 크기: 37
• 텍스트 색상: #002282
• 텍스트 줄 높이: 1.7em

두 번째 텍스트 모듈 추가

계속해서 새 텍스트 모듈을 추가하고 콘텐츠 탭에 표시할 텍스트를 입력합니다. 디자인 탭으로 이동하여 다음 설정을 텍스트 하위 범주에 적용합니다.

• 텍스트 방향: 중앙
• 텍스트 글꼴: Arial
• 텍스트 글꼴 크기: 13
• 텍스트 색상: #002282
• 텍스트 줄 높이: 1.7em

소셜 미디어 팔로우 모듈 추가

계속해서 첫 번째 열에도 소셜 미디어 팔로우 모듈을 추가할 것입니다. 이 경우 세 가지 소셜 아이콘을 선택했습니다. 페이스북, 트위터, 인스타그램. 콘텐츠 탭에 이러한 소셜 아이콘을 추가했으면 아이콘 하위 범주에서 링크 모양을 '원'으로 변경합니다.

마지막으로 해야 할 일은 고급 탭에서 이 모듈에 왼쪽 패딩을 추가하는 것입니다. 기본 요소에 다음 CSS 코드 줄을 추가합니다.

padding-left: 40%;

문의 양식 모듈 추가

그런 다음 행의 두 번째 열로 이동할 수 있습니다. 이 열에서 가장 먼저 배치할 것은 Contact Form Module입니다. 이 예에서는 두 개의 필드만 선택했습니다. 이름과 이메일. 연락처 양식 모듈을 추가했으면 연락처 양식 모듈의 디자인 탭으로 이동하여 양식 필드 텍스트 하위 범주를 다음과 같이 변경합니다.

• 양식 필드 글꼴 크기: 15
• 양식 필드 텍스트 색상: #002282
• 양식 필드 라인 높이: 1.7em

동일한 탭 내에서 다음 변경 사항을 Button 하위 범주에 적용합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 20
• 버튼 텍스트 색상: #FFFFFF
• 버튼 배경색: #0086c4
• 버튼 테두리 너비: 2
• 버튼 반경: 3

고급 탭으로 이동하여 5%의 상단 패딩을 추가합니다.

블러브 모듈 추가

두 번째 열에 추가해야 할 또 다른 것은 Blurb 모듈입니다. 이 모듈이 필요한 유일한 것은 팝업의 오른쪽 상단에 있는 종료 아이콘입니다. 아이콘 목록에서 다음 아이콘을 선택하고 다른 모든 항목은 비워 둡니다.

계속해서 고급 탭으로 이동하여 CSS 클래스로 '닫기'를 입력합니다. 동일한 탭 내에서 Custom CSS 하위 범주의 기본 요소에 다음 코드 줄을 추가합니다.

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

행에 그라데이션 배경 적용

마지막으로 행에 멋진 그라데이션 배경을 추가할 것입니다. 설정을 열고 그라데이션 배경 옵션에 다음 변경 사항을 적용합니다.

• 첫 번째 그라데이션 색상: #FFFFFF
• 두 번째 그라디언트 색상: #0c71c3
• 그라디언트 유형: 선형
• 기울기 방향: 124deg
• 시작 위치: 50%
• 최종 위치: 50%

클릭 시 태블릿 및 전화 문의 양식 만들기

이제 데스크톱 버전을 만들었으므로 태블릿 및 휴대폰 버전은 훨씬 더 빨라질 것입니다. 데스크탑 버전에 사용한 대부분의 모듈은 모바일 버전과 동일합니다. 모바일에서의 최종 결과는 다음과 같습니다.

새 표준 섹션 추가

다른 표준 섹션을 추가하여 시작하십시오. 이 섹션은 이전에 만든 섹션과 동일한 설정을 가져야 합니다. CSS 클래스에 '팝업'을 추가하고 다음 CSS 코드 줄을 Before 필드에 추가합니다.

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Main Element에도 다음 CSS 코드 줄을 추가합니다.

display: none;

데스크톱 버전에서 했던 것처럼 휴대폰과 태블릿에서 비활성화하는 대신 가시성 하위 범주의 데스크톱에서 비활성화할 것입니다.

1열 행 추가

전화 및 태블릿 팝업의 경우 하나의 열만 필요합니다. 이 행에서는 사용자 정의 너비를 사용하지 않습니다. 그러나 데스크탑 버전에서와 같이 사용자 정의 패딩을 적용할 것입니다. 열의 위쪽, 왼쪽 및 오른쪽 패딩에 대해 30px입니다.

또한 다음 CSS 코드 줄이 Custom CSS 하위 범주의 Main Element에 추가되었는지 확인해야 합니다.

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

텍스트 복제, 소셜 미디어 팔로우 및 문의 양식 모듈

다음으로 해야 할 일은 데스크탑 버전에 사용한 첫 번째 텍스트 모듈과 소셜 미디어 팔로우 및 문의 양식 모듈을 복제하는 것입니다. 복제한 후에는 방금 만든 새 섹션의 한 열 행에 배치합니다.

Blurb 모듈 복제 및 고급 탭에서 CSS 코드 변경

데스크탑 버전에 사용된 Blurb 모듈을 복제할 수도 있지만 CSS 코드에 약간의 변경이 필요합니다. 데스크톱용 코드를 사용하는 대신 다음을 사용하세요.

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

Blurb 모듈에도 'close' CSS 클래스가 사용되었는지 확인하십시오.

행에 그라데이션 배경 적용

모바일 버전의 경우 행의 그라데이션 배경에 대해 다른 설정을 사용하고 있습니다.

• 첫 번째 그라데이션 색상: #FFFFFF
• 두 번째 그라디언트 색상: #0c71c3
• 그라디언트 유형: 선형
• 기울기 방향: 180deg
• 시작 위치: 40%
• 최종 위치: 40%

테마 옵션에 jQuery 코드 추가

이 튜토리얼에서 마지막으로 해야 할 일은 jQuery 코드를 추가하는 것입니다. 테마 옵션을 통해 또는 작업 중인 페이지 내에 배치하는 코드 모듈을 통해 코드를 추가할 수 있습니다. 이 예에서는 단순히 테마 옵션에 넣을 것입니다.

그렇게 하려면 WordPress 대시보드 > Divi > 테마 옵션 > 통합 > 웹사이트 헤드에 다음 jQuery 코드 줄을 붙여넣습니다.

<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>

결과

게시물을 차근차근 따라하시면 ​​데스크탑에서 다음과 같은 결과를 얻을 수 있을 것입니다.

태블릿과 휴대전화에서 다음과 같은 결과가 나타납니다.

마지막 생각들

이 게시물에서는 클릭 시 문의 양식을 만드는 방법을 보여 주었습니다. 이 방법을 사용하여 방문자와 연락하는 것은 미묘하지만 효과적입니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요.

중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!

La1n / shutterstock.com의 주요 이미지