페이지에 명확한 클릭 유도 문안을 표시하는 것은 대부분의 웹 사이트에서 필수적입니다. 그리고 가장 중요한 CTA를 머리글에 배치하는 것보다 관심을 끌 수있는 더 좋은 방법은 무엇입니까?
오늘의 자습서에서는 단추 빌더를 사용하여 전역 머리글에 두 개의 나란히 있는 단추를 추가하는 방법을 보여줍니다. 테마 디비에서. 버튼 중 하나는 기본이고 다른 하나는 보조입니다. 전역 헤더 JSON 파일을 무료로 다운로드할 수도 있습니다!
측량
튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 빠르게 살펴 보겠습니다.
국
1. Divi Theme Builder에 액세스하여 글로벌 헤더를 만듭니다.
Divi Theme Builder로 이동
Divi Theme Builder로 이동하여 "글로벌 헤더 추가"를 클릭하십시오.
글로벌 헤더 만들기
"Build Global Header"를 클릭하여 계속하십시오.
2. 전체적인 헤더 디자인 구축
새 섹션 추가
간격
템플릿 편집기에 들어가면 섹션이 있습니다. 섹션 설정을 열고 모든 기본 상단 및 하단 패딩을 제거합니다.
- 상단 패딩 : 0px
- 하단 패딩 : 0px
Z 인덱스
또한 가시성 설정에서 섹션의 Z-색인을 늘려야 합니다. 이렇게 하면 내용 전역 헤더가 전체 페이지 상단에 나타나고 내용.
- Z 지수 : 99999
새 행 추가
기둥 구조
섹션 설정을 완료하면 다음 열 구조를 사용하여 섹션에 새 행을 추가하십시오.
크기 조정
모듈을 추가하지 않고 선 매개 변수를 열고 선이 섹션 컨테이너의 전체 너비를 차지하도록합니다.
- 사용자 정의 거터 너비를 사용하십시오. 예
- 거터 폭 : 1
- 열 높이 균등화 : 예
- 너비 : 100 %
- 최대 폭 : 100 %
간격
또한 선의 왼쪽과 오른쪽 채우기 값을 변경하십시오.
- 왼쪽 패딩 : 2vw (데스크톱), 10vw (태블릿 및 전화)
- 오른쪽 패딩 : 2vw (데스크톱), 10vw (태블릿 및 전화)
주요 요소
모두 중앙에 내용 열의 경우 이 두 줄의 CSS 코드를 행의 기본 요소에 추가합니다.
display: flex;align-items: center;
태블릿 및 모바일에서 데스크톱 디스플레이 속성을 제거합니다.
display: block;
1 열
경계
1 열의 설정을 열어서 바탕 화면에만 오른쪽 테두리를 추가하십시오.
- 오른쪽 테두리 너비 : 1px (데스크), 0px (태블릿 및 전화)
- 오른쪽 테두리 색상 : # d8d8d8
Z 인덱스
또한 열의 z 인덱스를 늘립니다.
- Z 지수 : 11
2 열
주요 요소
그런 다음 열 2의 설정을 열고 다음 CSS 코드 줄을 기본 열 요소에 추가하여 두 열로 바꿉니다.
display: grid;grid-template-columns: 50% 50%;
1 열에 메뉴 모듈 추가
메뉴를 선택하십시오
모듈 추가를 시작할 시간입니다! 열 1에 메뉴 모듈을 추가하고 원하는 메뉴를 선택하십시오.
로고 다운로드
그런 다음 로고를 업로드하십시오.
규정
모듈 디자인 탭으로 전환하고 다음 레이아웃 설정이 적용되는지 확인합니다.
- 스타일 : 왼쪽 정렬
- 드롭 다운 메뉴의 방향 : 아래
메뉴 텍스트
그런 다음 메뉴 텍스트 설정을 변경하십시오.
- 활성 링크 색상 : # ef6f49
- 메뉴 글꼴 : Montserrat
- 메뉴 글꼴 무게 : 반 굵은 체
- 메뉴 글꼴 스타일 : 대문자
- 메뉴 텍스트 색상 : # 333333 (기본값), # ef6f49 (마우스 오버)
- 메뉴 텍스트 크기 : 0.7vw (데스크톱), 1.8vw (태블릿), 2.5vw (전화)
- 메뉴 문자 간격 : 1px
드롭 다운 메뉴 텍스트
드롭 다운 메뉴에서 텍스트 설정도 변경하십시오.
- 드롭 다운 메뉴 배경 색상 : #ffffff
- 드롭 다운 메뉴의 선 색상 : # ef6f49
아이콘
다음으로 햄버거 메뉴 아이콘의 색상을 변경합니다.
- 햄버거 메뉴 아이콘 색상 : # 000000
크기 조정
또한 크기 조정 매개 변수에 최대 로고 너비를 추가하십시오.
- 최대 로고 너비 : 9vw (데스크), 12vw (태블릿), 15vw (전화)
CSS 로고 메뉴
그리고 고급 탭의 메뉴 로고에 CSS 코드 한 줄을 추가하여 모듈 설정을 완료합니다.
margin-right: 10vw;
1 열에 코드 모듈 추가
모듈에 사용자 정의 CSS 코드 추가
열 1에서 필요한 다음 모듈과 마지막 모듈은 코드 모듈입니다. 메뉴 항목 사이의 공간을 사용자 정의하려면 다음 CSS 코드 행을 추가하십시오.
<style>.et-menu>li {padding-left: 1.5vw !important;padding-right: 1.5vw !important;}</style>
첫 번째 버튼 모듈을 열 2에 추가
복사본 추가
다음 모듈로 넘어 갑시다! 첫 번째 버튼 모듈을 추가하고 원하는 사본을 입력하십시오.
링크 추가
그런 다음 버튼 모듈에 링크를 추가하십시오.
조정
모듈 디자인 탭으로 전환하고 버튼 정렬을 변경합니다.
- 버튼 정렬 : 오른쪽
버튼 설정
버튼의 스타일도 지정하십시오.
- 버튼에 사용자 정의 스타일 사용 : 예
- 버튼 텍스트 크기 : 0.8vw (데스크톱), 1.7vw (태블릿), 2.5vw (전화)
- 버튼 텍스트 색상 : # 000000
- 버튼 배경색 : # edeef0 (기본값), # d6d7d8 (호버)
- 버튼 테두리 너비 : 0px
- 버튼 테두리 반경 : 0px
- 버튼 문자 간격 : 2px
- 버튼 글꼴 : 몬세 라트
- 버튼 글꼴 무게 : 반 굵은 체
- 버튼 글꼴 스타일 : 대문자
간격
다양한 화면 크기에 사용자 지정 패딩 값을 추가하여 모듈 설정을 완료합니다.
- 상단 패딩 : 1vw (데스크톱), 2vw (태블릿), 3vw (전화)
- 하단 패딩 : 1vw (데스크), 2vw (태블릿), 3vw (전화)
- 왼쪽 패딩 : 2vw (데스크톱), 4vw (태블릿), 6vw (전화)
- 오른쪽 패딩 : 2vw (데스크), 4vw (태블릿), 6vw (전화)
클론 버튼 모듈
첫 번째 단추 모듈을 완료하면 복제하십시오.
링크 편집
중복 버튼 모듈을 열고 URL을 변경합니다.
정렬 변경
또한 모듈의 정렬을 변경하십시오.
- 버튼 정렬 : 왼쪽
버튼 설정 변경
버튼 설정도 변경하십시오.
- 버튼 텍스트 색상 : #ffffff
- 버튼 배경색 : # ef6f49 (기본값), # e06945 (호버)
호버 변환 스케일
변형 스케일 호버 효과를 추가하여 버튼 설정을 완료합니다.
- 오른쪽 : 110 %
- 낮음 : 110 %
3. 테마 생성기 및 미리보기 결과에 대한 변경 사항을 저장하십시오.
전체 헤더가 완료되면 테마 빌더에 대한 모든 변경 사항을 저장하고 사이트 웹!
측량
이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.
마지막 생각
이 튜토리얼에서는 Divi의 테마 빌더를 사용하여 전체 헤더에 두 개의 버튼을 나란히 추가하는 방법을 보여주었습니다.
우리가 추가한 버튼 중 하나는 기본이고 다른 하나는 보조입니다. 전체 헤더에 버튼을 추가하면 광고에서 가장 중요한 CTA를 강조할 수 있습니다. 사이트 웹. JSON 파일도 무료로 다운로드할 수 있었습니다! 질문이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요.
