생성하시겠습니까? 연락처 양식 버튼을 클릭하면 나타나는 Divi에서?
이 Divi 튜토리얼에서는 연락처 양식 Divi, jQuery 코드 및 CSS 코드만 사용하여 버튼을 클릭하면 나타납니다.
다음에 대한 가이드를 읽어보십시오. Divi: "공개" 효과로 고정 바닥글을 만드는 방법
유지하는 좋은 방법입니다 방문자 당신의 웹 사이트 버튼 클릭 시 수행한 작업에 집중했습니다. 다른 페이지로 이동하지 않습니다.
측량
아래에서 우리가 만들 내용을 간단히 살펴본 다음 튜토리얼로 넘어갈 수 있습니다!
PC에서 미리보기
휴대전화 및 태블릿에서 미리보기
미리 정의된 레이아웃으로 새 페이지 만들기
Divi 라이브러리에서 미리 정의된 레이아웃을 사용하여 시작하겠습니다. 이 예에서는 연락처 페이지를 사용합니다. 미용 제품 레이아웃 팩 .
귀하의 페이지에 새 페이지를 추가하십시오. 사이트 웹 제목을 지정한 다음 옵션을 선택하십시오. 'Divi 빌더 사용'.
이 예에서는 Divi 라이브러리에서 미리 만들어진 레이아웃을 사용할 것이므로 '레이아웃 선택'.
레이아웃의 홈 페이지 '를 찾아 선택합니다.인테리어 디자인 회사'.
고르다 '레이아웃 선택' 페이지에 레이아웃을 추가합니다.
이제 튜토리얼을 계속할 준비가 되었습니다.
Button 모듈로 섹션 만들기
가장 먼저 해야 할 일은 다음을 허용하는 버튼을 배치할 새 섹션을 추가하는 것입니다. 연락처 양식 나타나다.
표준 섹션을 추가하기만 하면 됩니다.
다음으로 XNUMX열 행을 선택합니다.
완료되면 여기에 Button 모듈을 추가합니다.
버튼을 원하는 대로 사용자 정의할 수 있지만 버튼 URL이 '#'으로 시작하고 그 뒤에 다른 문자가 오는지 확인해야 합니다. 그냥 공백으로 두거나 '#' 문자를 사용할 수 없습니다. '#'와 텍스트를 추가하면 버튼을 클릭해도 페이지가 이동하지 않습니다. 비워 두면 클릭 시 페이지가 새로 고쳐집니다. 그리고 '#'만 사용하면 페이지 상단으로 이동합니다.
다음으로 해야 할 중요한 일은 버튼에 CSS 클래스를 할당하는 것입니다. 이 CSS 클래스를 jQuery 코드의 뒷부분에서 사용하여 클릭 후 연락처 양식이 표시되도록 할 것입니다. 버튼에 할당해야 할 클래스는 단순히 "버튼"입니다.
- CSS 클래스: 버튼
PC 버전 문의 양식 만들기
다음으로 해야 할 일은 이 기사의 이전 부분에서 만든 버튼을 누군가가 클릭하면 표시되는 데스크톱 연락처 양식을 만드는 것입니다. 이 기사의 뒷부분에서 모바일 버전을 만드는 방법도 보여줍니다.
새 표준 섹션 추가
작업 중인 페이지에 새 표준 섹션을 추가하여 시작하십시오. 섹션 설정에서 고급 탭으로 이동하여 CSS 클래스 필드에 "팝업"을 추가합니다.
동일한 탭을 아래로 스크롤하여 Custom CSS 하위 범주의 Before 필드에 다음 CSS 코드 줄을 배치합니다.
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;
고급 탭에서 마지막으로 해야 할 일은 가시성 하위 범주에서 휴대폰 및 태블릿 섹션을 비활성화하는 것입니다.
두 개의 열에 행 추가
계속해서 XNUMX열 행을 추가하고 탭으로 이동합니다. 스타일.
- 사용자 지정 거터 너비 사용: 예
- 최대 너비: 1291px
각 열의 매개변수를 입력합니다.
내부 여백(위쪽, 왼쪽 및 오른쪽)을 다음과 같이 수정합니다.
- 내부 여백(위, 왼쪽, 오른쪽): 30px
고급 탭으로 이동하여 완료하십시오. 기본 요소에서 다음 CSS 코드 줄을 추가합니다.
transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;
첫 번째 텍스트 모듈 추가
섹션과 행을 모두 변경했으면 표시할 다양한 모듈을 추가할 차례입니다.
가장 먼저 추가할 것은 표시되는 제목입니다. 행의 첫 번째 열에 새 텍스트 모듈을 추가하여 시작하고 탭에 텍스트를 작성합니다. 내용 탭으로 전환 스타일.
스타일 탭에서 텍스트 하위 범주에 대해 다음 설정을 사용했습니다.
- 헤더 글꼴: 랍스터
- 소프트 라이트 헤더: 굵은 텍스트
- 텍스트 정렬: 굵게
- 헤더 텍스트 색상: #002282
- 헤더 텍스트 크기: 37px
- 헤더 행 높이: 1,7em
두 번째 텍스트 모듈 추가
계속해서 새 텍스트 모듈을 추가하고 콘텐츠 탭에 표시할 텍스트를 입력합니다. 스타일 탭으로 전환하고 다음 설정을 텍스트 하위 범주에 적용합니다.
- 텍스트 정렬: 가운데
- 텍스트 글꼴: Arial
- 텍스트 텍스트 크기: 13px
- 텍스트 색상 텍스트: #002282
- 텍스트 줄 높이: 1,7em
'소셜 네트워크에서 팔로우' 모듈 추가
다음으로 첫 번째 열에 '소셜 미디어에서 팔로우' 모듈도 추가합니다. 이 경우 세 가지 소셜 미디어 아이콘을 선택했습니다. 페이스북, 트위터, 인스타그램.
마지막으로 해야 할 일은 고급 탭에서 이 모듈에 패딩(왼쪽)을 추가하는 것입니다. 다음 CSS 코드 줄을 기본 요소에 추가합니다.
padding-left: 40%;
문의 양식 모듈 추가
그런 다음 행의 두 번째 열로 이동할 수 있습니다. 이 칼럼에서 가장 먼저 배치할 것은 Contact Form 모듈입니다.
이 예에서는 두 개의 필드만 선택했습니다. 이름과 이메일.
연락처 양식 모듈을 추가했으면 연락처 양식 모듈의 스타일 탭으로 이동하여 필드 하위 범주를 다음과 같이 변경합니다.
- 텍스트 색상 필드: #002282
- 텍스트 크기 필드: #002282
- 필드 라인 높이: 1,7 em
동일한 탭에서 Button 하위 범주를 다음과 같이 변경합니다.
- 버튼에 사용자 정의 스타일 사용: 예
- 텍스트 크기 버튼: 20
- 버튼 텍스트 색상: #FFFFFF
- 배경 버튼: #0086c4
- 버튼 테두리 너비: 2
- 테두리 반경 버튼: 3
고급 탭으로 전환하고 5%의 여백을 추가합니다.
요약 모듈 추가
두 번째 열에 추가해야 할 또 다른 사항은 요약 모듈입니다. 이 모듈이 필요한 유일한 것은 팝업 창의 오른쪽 상단에 있는 종료 아이콘입니다. 아이콘 목록에서 다음 아이콘을 선택하고 나머지는 모두 비워 둡니다.
그런 다음 고급 탭으로 이동하여 CSS 클래스로 "닫기"를 입력합니다.
이 동일한 탭에서 사용자 정의 CSS 하위 범주의 기본 요소에 다음 코드 줄을 추가합니다.
position: absolute;
top: -45px;
right: -30px;
cursor: pointer;
선에 그라데이션 채우기 적용
마지막으로 선에 멋진 그라데이션 배경을 추가합니다. 설정을 열고 그라데이션 배경 옵션에 다음 변경 사항을 적용합니다.
- 첫 번째 그라데이션 색상: #FFFFFF
- 두 번째 그라데이션 색상: #0c71c3
- 그라디언트 유형: 선형
- 기울기 방향: 124도
- 시작 위치: 50%
- 최종 순위: 50%
태블릿 및 휴대폰용 연락처 양식 만들기
이제 PC 버전을 만들었으므로 태블릿과 휴대폰 버전이 훨씬 더 빨라질 것입니다. PC 버전에서 사용한 대부분의 모듈은 모바일 버전과 동일합니다.
이전 섹션 복제
PC 버전과 마찬가지로 휴대폰 및 태블릿에서 비활성화하는 대신 모듈 설정의 가시성 하위 범주에서 PC 버전을 비활성화합니다.
요약 모듈의 CSS 코드 수정
데스크톱 코드를 사용하는 대신 다음을 사용하세요.
position: absolute;
top: -15px;
right: -25px;
cursor: pointer;
선에 그라데이션 채우기 적용
모바일 버전의 경우 선의 그라데이션 배경에 대해 다른 설정을 사용합니다.
- 첫 번째 그라데이션 색상: #FFFFFF
- 두 번째 그라데이션 색상: #0c71c3
- 그라디언트 유형: 선형
- 기울기 방향: 180도
- 시작 위치: 40%
- 최종 순위: 40%
jQuery 코드 추가
이 튜토리얼에서 마지막으로 해야 할 일은 jQuery 코드를 추가하는 것입니다. 코드 모듈을 추가하고 다음 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를 다운로드하세요!!!
결론
이 기사에서는 원클릭 문의 양식을 만드는 방법을 설명했습니다. 이 방법을 사용하여 방문자 미묘하지만 효과적입니다.
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
