사용자 정의 헤더를 만들 때 사이트 웹, Divi의 테마 빌더를 사용하면 AAL(Call to Action)을 추가하는 완벽한 방법을 찾을 수 있습니다. 이를 수행하는 한 가지 방법은 연락처 양식 스크롤. 이렇게 하면 입력할 수 있는 기능을 제공하면서 머리글의 전체적인 모양을 깨끗하게 유지하는 데 도움이 됩니다. CONTACT 아래로 스크롤할 필요 없이 당신과 함께. 이 자습서에서는 연락처 양식 Divi 및 JQuery 및 CSS 코드를 사용한 드롭다운. 또한 무료로 JSON 파일을 다운로드할 수 있습니다!
가자.
측량
튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 살펴 보겠습니다.
1. Divi Theme Builder로 이동하여 글로벌 헤더 생성을 시작하십시오.
Divi Theme Builder로 이동
WordPress 사이트의 백엔드에서 Divi Theme Builder로 이동하여 시작하십시오.
글로벌 헤더 만들기
"글로벌 헤더 추가"를 클릭하고 "글로벌 헤더 작성"을 선택하여 사용자 정의 글로벌 헤더 작성을 시작하십시오.
2. 헤더 디자인 구축
섹션 설정
배경색
전체 헤더 템플릿에 들어가면 섹션이 표시됩니다. 이 섹션을 열고 흰색 배경색을 사용하십시오.
- 배경색 : #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.8vw (데스크톱), 2vw (태블릿), 3vw (전화)
- 메뉴 문자 간격 : 1px
드롭 다운 메뉴 텍스트 설정
그런 다음 드롭 다운 메뉴에서 선 색상을 변경하십시오.
- 드롭 다운 메뉴의 선 색상 : # 007dff
아이콘
햄버거 메뉴 아이콘 색상.
- 햄버거 메뉴 아이콘 색상 : # 007dff
1 텍스트 모듈을 3 열에 추가
복사본 추가
세 번째 모듈로 넘어 갑시다! 선택한 사본으로 텍스트 모듈을 추가하십시오.
배경색
그런 다음 배경색을 추가하십시오.
- 배경색 : # 007dff
텍스트 설정
모듈 디자인 탭으로 전환하고 그에 따라 텍스트 설정을 변경합니다.
- 텍스트 글꼴 : Open Sans
- 텍스트의 글꼴 크기 : 굵게
- 텍스트 색상 : #ffffff
- 텍스트 크기 : 0.8vw (데스크톱), 2vw (태블릿), 3vw (전화)
- 텍스트의 정렬 : 중심
크기 조정
그런 다음 모듈 크기 조정 매개 변수를 수정하십시오.
- 너비 : 33 %
- 모듈의 정렬 : 중심
간격
그런 다음 사용자 정의 상단 및 하단 패딩을 추가하십시오.
- 상단 패딩 : 0.8vw (데스크톱), 2vw (태블릿 및 전화)
- 하단 패딩 : 0.8vw (데스크톱), 2vw (태블릿 및 전화)
경계
경계 반경을 추가하여 모듈 매개 변수를 완료하십시오.
- 모든 모서리 : 100px
2 텍스트 모듈을 3 열에 추가
컨텐츠 영역에 심볼 추가
다른 텍스트 모듈 인 다음 모듈로 이동해 보겠습니다. 콘텐츠 영역에 "▼"화살표를 추가합니다.
텍스트 설정
모듈 디자인 탭으로 전환하고 그에 따라 텍스트 설정을 변경합니다.
- 텍스트 글꼴 : Open Sans
- 텍스트 색상 : # 007fff
- 텍스트 크기 : 3vw
- 텍스트 줄의 높이 : 0em
- 텍스트의 정렬 : 중심
Z 인덱스
또한 모듈의 z 인덱스를 늘립니다.
- Z 지수 : 11
문의 양식 모듈을 열 3에 추가
이제 다음을 추가할 수 있습니다. 연락처 양식 화살표가 포함된 텍스트 모듈 바로 아래에 있습니다. 이 모듈은 사용이 매우 간단하므로 표시하려는 필드를 사용자 정의해야 합니다.
3. 클릭 한 번으로 연락처 양식을 작성하도록 요소를 사용자 정의하십시오.
3 열의 높이 추가
모든 모드가 제자리에 있으면 효과를 만들 차례입니다. 원하는 결과를 얻기위한 첫 번째 단계는 열 3에서 설정을 열고 고급 탭에서 반응 형 사용자 지정 높이를 추가하는 것입니다.
사무실 :
height: 3vw;
태블릿 :
height: 5vw;
전화 :
height: 6vw;
버튼과 화살표에 CSS 클래스 추가
그런 다음 3 열의 처음 두 텍스트 모듈에 동일한 CSS 클래스를 추가합니다.
- CSS 클래스: 표시-CONTACT
연락처 양식에 CSS 클래스 추가
또한 Contact Form 모듈에 대한 사용자 정의 CSS 클래스가 필요합니다.
- CSS 클래스: CONTACT-양식 모듈
연락처 양식 모듈 숨기기
문의 양식 모듈의 기본 요소에 CSS 코드 줄을 추가하여 계속합니다. 클릭하기 전에 모듈을 숨길 수 있습니다.
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;}
측량
이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.
국
기억해야 할 것
이 기사에서는 드롭 다운 연락처 양식을 사용자 정의 헤더에 추가하는 방법을 보여주었습니다. 초기에 작업을 시작하는 좋은 방법입니다.
