추가할 필요 연락처 양식 글로벌 헤더에?
사용자 정의 헤더를 만들 때 사이트 웹 Divi Theme Builder를 사용하여 CTA(Call to Action)를 추가하는 완벽한 방법을 찾고 있습니다. 이를 수행하는 한 가지 방법은 연락처 양식 스크롤링.
이렇게 하면 머리글의 전반적인 모양을 깨끗하게 유지하는 동시에 CONTACT 스크롤할 필요 없이.
이 튜토리얼에서는 연락처 양식 Divi와 JQuery 및 CSS 코드를 사용하여 스크롤 가능합니다.
시작하자!
측량
이 자습서를 시작하기 전에 얻을 결과의 미리 보기를 살펴보겠습니다.
글로벌 헤더 만들기
테마 빌더로 이동
WordPress 대시보드에 있는 Divi 메뉴에서 Theme Builder로 이동하여 "전체 헤더 추가"를 클릭합니다.
'전체 헤더 만들기'를 선택합니다.
헤더 스타일 만들기
섹션 설정
배경색
템플릿 편집기에 들어가면 섹션이 표시됩니다. 이 섹션을 열고 배경색을 변경합니다.
- 배경: #FFFFFF
간격
그런 다음 섹션에서 기본 상단 및 하단 내부 여백을 제거합니다.
- 내부 여백 정점: 0px
- 하단 내부 여백: 0px
그림자 상자
또한 미묘한 상자 그림자를 적용하십시오.
- 박스 섀도우 블루 강도: 50px
- 자막 글꼴 색상: rgba(0,0,0,0.15)
새 줄 추가
기둥의 구조
다음 열 구조를 사용하여 섹션에 새 행을 추가합니다.
크기 조정
모듈을 추가하지 않고 행 설정을 열고 다음과 같이 사이징 설정을 변경합니다.
- 사용자 지정 거터 너비 사용: 예
- 열 간격: 1
- 열 높이 조화: 예
- 최대 너비: 95%
- 최대 너비: 100%
간격
그런 다음 사용자 정의 상단 및 하단 패딩을 추가하십시오.
- 최대 내부 마진: 1vw
- 하단 내부 여백: 1vw
주요 요소
기본 행 요소에 CSS 코드 한 줄을 추가하여 모든 열 내용을 정렬합니다.
align-items: center;
2열의 Z 첨자
또한 반응형 디자인을 위해 두 번째 열의 z-인덱스 값이 더 높은지 확인합니다.
- Z-인덱스: 12
열 1에 이미지 모듈 추가
로고 다운로드
이제 모듈을 추가할 시간입니다! 1열의 이미지 모듈로 시작합니다. 로고를 업로드합니다.
조정
그런 다음 모듈 정렬을 변경합니다.
- 이미지 정렬: 중앙
크기 조정
너비도 변경하십시오.
- 최대 너비: 3vw(데스크톱), 5vw(태블릿), 7vw(휴대폰)
2열에 메뉴 모듈 추가
메뉴 선택
두 번째 열에서는 메뉴 모듈을 추가합니다.
규정
모듈 스타일 탭으로 전환하고 레이아웃 스타일을 변경합니다.
- 스타일: 중앙
메뉴 텍스트 설정
그런 다음 모듈 메뉴에서 텍스트 설정을 변경하십시오.
- 글꼴 메뉴: 열기 없음
- 희미한 조명 메뉴: 굵게
- 메뉴 텍스트 색상: #000000
- 메뉴 텍스트 크기: 0,8 vw(데스크톱), 2 vw(태블릿), 3 vw(전화)
- 메뉴 문자 간격: 1px
드롭다운 메뉴 텍스트 설정
그런 다음 드롭다운 메뉴에서 선 색상을 변경합니다.
- 드롭다운 메뉴 라인 색상: #007dff
아이콘
햄버거 메뉴 아이콘 색상을 변경합니다.
- 햄버거 메뉴 아이콘 색상: #007dff
열 3에 텍스트 모듈 추가
메시지 추가
세 번째 모듈로 이동합니다! 원하는 메시지가 포함된 텍스트 모듈을 추가합니다.
배경색
배경색을 추가합니다.
- 배경색: #007dff
텍스트 설정
모듈 디자인 탭으로 전환하고 그에 따라 텍스트 설정을 변경합니다.
- 텍스트 글꼴: Open Sans
- 소프트 라이트 텍스트: 굵게
- 텍스트 색상 텍스트: #ffffff
- 텍스트 텍스트 크기: 0,8 vw(데스크톱), 2 vw(태블릿), 3 vw(전화)
- 텍스트 정렬: 가운데
크기 조정
그런 다음 모듈 크기 조정 매개 변수를 수정하십시오.
- 최대 너비: 33%
- 모듈 정렬: 중앙
간격
다음으로 사용자 지정 위쪽 및 아래쪽 패딩을 추가합니다.
- 상단 내부 여백: 0,8 vw(데스크톱), 2 vw(태블릿 및 휴대폰)
- 내부 마진 낮음: 0,8 vw(데스크톱), 2 vw(태블릿 및 휴대폰)
경계
경계 반경을 추가하여 모듈 매개 변수를 완료하십시오.
- 둥근 사각형: 100px
열 3에 다른 텍스트 모듈 추가
컨텐츠 영역에 심볼 추가
다른 텍스트 모듈인 다음 모듈로 넘어갑시다. 콘텐츠 영역에 '▼' 화살표 기호를 추가합니다.
텍스트 설정
모듈 디자인 탭으로 전환하고 그에 따라 텍스트 설정을 변경합니다.
- 텍스트 글꼴: Open Sans
- 텍스트 색상: #007fff
- 텍스트 텍스트 크기: 3vw
- 텍스트 줄 높이: 0em
- 텍스트 정렬: 가운데
Z-인덱스
모듈의 z-색인도 증가시켜 보겠습니다.
- Z-인덱스: 11
열 3에 문의 양식 모듈 추가
원하는 전각 필드 추가
세 번째 열에 필요한 다음이자 마지막 모듈은 문의 양식 모듈입니다. 필요한 전각 필드를 추가하십시오.
제목 추가
제목을 사용하기도 합니다.
배경색
다음으로 배경색을 변경해 보겠습니다.
- 배경색: #e7f2ff
필드 설정
모듈의 스타일 탭으로 이동하여 필드 설정을 변경해 보겠습니다.
- 배경색 필드: #ffffff
- 필드 텍스트 색상: #dddddd
- 초점 텍스트 색상: #007dff
- 정점 패딩 필드: 1vw(데스크톱), 2vw(태블릿), 3vw(전화)
- 하단 패딩 필드: 1vw(데스크톱), 2vw(태블릿), 3vw(전화)
- 글꼴 필드: 열기 없음
- 필드 텍스트 크기: 0,7 vw(데스크톱), 1,8 vw(태블릿), 3 vw(전화)
제목 텍스트 설정
제목 텍스트 설정을 편집합니다.
- 제목 3 삽입: HXNUMX
- 소프트 라이트 제목: 굵은 텍스트
- 텍스트 정렬: 중앙
- 제목 텍스트 색상: #007dff
- 제목 텍스트 크기: 1 vw(데스크톱), 2,5 vw(태블릿), 3,5 vw(전화)
- 제목 줄 높이: 1,6em
보안문자 텍스트 설정
보안 문자 텍스트 설정으로.
- 글꼴 보안 문자: Open Sans
- 보안 문자 텍스트 색상: #007dff
버튼 설정
버튼을 사용자 정의하여 계속하십시오.
- 버튼에 사용자 정의 스타일 사용: 예
- 버튼 텍스트 크기: 0,8 vw(데스크톱), 2 vw(태블릿), 3 vw(전화)
- 버튼 텍스트 색상: #ffffff
- 배경 버튼: #007dff
- 테두리 너비 버튼: 0픽셀
- 버튼 테두리 반경: 100px
- 글꼴 버튼: 열기 없음
- 소프트 라이트 버튼: 굵은 텍스트
- 버튼 여백: 1vw
- 상단 패딩 버튼: 1vw(데스크톱), 2vw(태블릿 및 전화)
- 하단 패딩 버튼: 1vw(데스크톱), 2vw(태블릿 및 전화)
- 왼쪽 패드 버튼: 2vw(데스크톱), 7vw(태블릿 및 전화)
- 오른쪽 패드 버튼: 2vw(데스크톱), 7vw(태블릿 및 전화)
간격
다양한 화면 크기에서 맞춤 패딩 값을 사용합니다.
- 최대 내부 헤드룸: 4vw(데스크톱), 6vw(태블릿 및 휴대폰)
- 내부 여백 하단: 4vw(데스크톱), 6vw(태블릿 및 휴대폰)
- 왼쪽 내부 여백: 2vw(데스크톱), 6vw(태블릿 및 휴대폰)
- 오른쪽 내부 여백: 2vw(데스크톱), 6vw(태블릿 및 휴대폰)
경계
그런 다음 테두리 설정을 변경합니다.
- 입력 둥근 사각형: 10px
주요 요소, 연락처 제목 및 Captcha CSS
고급 탭에 약간의 CSS 변경 사항을 추가하여 모듈 설정을 완료하십시오.
주요 요소:
| 01 | border-radius: 20px; |
제목 CONTACT :
| 01 | margin-bottom: 1vw; |
보안 문자:
| 01 | margin-top: 1.5vw; |
한 번의 클릭으로 연락처 양식을 작성하도록 요소를 사용자 정의하십시오.
3 열의 높이 추가
모든 모듈이 제자리에 있으면 효과를 만들 차례입니다. 원하는 결과를 얻기 위한 첫 번째 단계는 3열 설정을 열고 고급 탭에서 사용자 정의 반응형 높이를 추가하는 것입니다.
책상 :
| 01 | height: 3vw; |
태블릿 :
| 01 | height: 5vw; |
부르다:
| 01 | height: 6vw; |
버튼과 화살표에 CSS 클래스 추가
다음으로 3열의 처음 두 텍스트 모듈에 동일한 CSS 클래스를 추가합니다.
- CSS 클래스: 표시-CONTACT
연락처 양식에 CSS 클래스 추가
또한 연락처 양식 모듈에 대한 사용자 정의 CSS 클래스가 필요합니다.
- CSS 클래스: 연락처 양식 모듈
문의 양식 모듈 숨기기
계속해서 문의 양식 모듈의 기본 요소에 CSS 코드 한 줄을 추가합니다. 이렇게 하면 클릭하기 전에 모듈을 숨길 수 있습니다.
| 01 | display: none; |
JQuery 및 CSS 코드를 사용하여 3열에 코드 모듈 추가
클릭 기능을 생성하려면 JQuery 코드가 필요합니다. 우리는 또한 사용자 정의 CSS 코드를 사용할 것입니다. 코드와 함께 열 2에 새 코드 모듈을 추가합니다. 스크립트 태그 사이에 JQuery 코드를 배치하고 스타일 태그 사이에 CSS 코드를 배치해야 합니다.
jQuery(function($){
$(".show-contact").click(function() {
$('.contact-form-module').slideToggle();
});
});
.show-contact {
cursor: pointer;
}
.et-menu>li {
padding-left: 0.7vw !important;
padding-right: 0.7vw !important;
}
측량
모든 단계를 거쳤으므로 이제 결과를 마지막으로 살펴보겠습니다.
결론
이 기사에서는 사용자 정의 헤더에 드롭다운 연락처 양식을 추가하는 방법을 보여주었습니다.
질문이나 제안이 있으시면 아래 댓글 섹션에 댓글을 남겨주세요.
