전역 머리글을 만들 때 고려해야 할 사항이 많이 있습니다. 헤더에 넣은 요소는 방문자 쉽게 탐색합니다. 사람들이 브라우징하는 시간을 줄이기 위해 많은 웹 디자이너는 고정된 상단 헤더를 선택합니다. 방문자 다른 페이지나 출판물에 즉시 액세스할 수 있습니다. 이것은 정말 편리하지만 고정 헤더를 생성할 때 뷰포트 높이의 상당 부분이 방문자 바쁜 중이어서 허용되는 시간이 다음보다 적습니다. 내용 한번에 표시합니다. 이러한 희생을 할 준비가 되어 있지 않다면 그럴 필요가 없다는 것을 아십시오. 방문자가 위로 스크롤하면 전체 헤더가 표시되고 아래로 스크롤되면 숨겨지므로 고정 헤더의 이점을 얻을 수 있습니다. 오늘은 Divi의 Theme Builder를 사용하여 전역 헤더를 숨기고 표시하는 방법을 안내해 드리겠습니다.

측량

튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 살펴 보겠습니다.

1. Divi Theme Builder로 이동하여 새 템플릿 추가

Divi Theme Builder로 이동하여 시작하십시오.

글로벌 헤더 만들기 시작

"글로벌 헤더 추가"를 클릭하고 "글로벌 헤더 생성"을 선택하십시오.

2. 글로벌 헤더 만들기 시작

섹션 설정

배경 색상

템플릿 편집기 안에 섹션이 있습니다. 이 섹션을 열고 배경색을 변경하십시오.

• 배경색 : #ffffff

크기 조정

디자인 탭으로 이동하여 다음 섹션에 100 % 너비를 지정합니다.

• 너비 : 100 %

간격

또한 사용자 정의 상단 및 하단 패딩을 추가하십시오.

• 상단 패딩 : 2vw
• 하단 패딩 : 2vw

그림자 상자

또한 섹션에 미묘한 그늘을 적용합니다.

• 상자 그림자 흐림 강도 : 50px
• 그림자 색상 : rgba (0,0,0,0,08)

CSS ID

이 튜토리얼의 뒷부분에서 스크롤 효과가 발생하려면 사용자 지정 코드가 필요합니다. 이를 준비하기 위해 섹션에 CSS ID를 추가합니다.

• CSS ID : 글로벌 헤더 섹션

주요 요소

또한 섹션의 기본 요소에 두 줄의 CSS 코드를 추가하여 섹션을 고정 헤더로 만들 것입니다.

position: fixed;top: 0;

Z 인덱스

이제 섹션이 페이지 상단에 나타나는지 확인하거나 내용 게시물의 공개 설정에서 Z-색인도 높일 예정입니다.

• Z 지수 : 99999

새 행 추가

기둥 구조

모든 섹션 매개 변수를 완료하면 다음 열 구조를 사용하여 섹션에 새 행을 계속 추가하십시오.

크기 조정

아직 모듈을 추가하지 않고 행 설정을 열고 행이 화면의 전체 너비를 채우도록합니다.

• 사용자 정의 거터 너비를 사용하십시오. 예
• 거터 폭 : 1
• 열 높이 균등화 : 예
• 너비 : 100 %
• 최대 폭 : 100 %

간격

또한 기본 상단 및 하단 패딩을 모두 제거하십시오.

• 상단 패딩 : 0px
• 하단 패딩 : 0px

주요 요소

중앙에 내용 행의 기본 요소에 두 줄의 CSS 코드를 추가하면 더 작은 화면 크기에서도 열이 나란히 유지될 수 있습니다.

display: flex;align-items: center;

2 열에 소셜 미디어 추적 모듈 추가

소셜 네트워크 추가

1 열의 소셜 미디어 추적 모듈부터 시작하여 모듈을 추가 할 차례입니다. 표시 할 소셜 네트워크를 추가합니다.

개별 소셜 미디어 스타일 재설정

각 소셜 네트워크의 스타일을 개별 수준으로 재설정하여 계속하십시오.

개별 소셜 네트워크 공간 추가

또한 각 소셜 네트워크의 설정을 개별적으로 열고 간격 설정에 하단 여백을 추가해야합니다.

• 하단 패딩 : 0.5vw

조정

각 소셜 네트워크에 하단 패딩을 개별적으로 추가했으면 모드의 일반 설정으로 돌아갑니다. 디자인 탭으로 전환하고 모듈 정렬을 변경합니다.

• 모듈의 정렬 : 중심

기본 아이콘 설정

또한 아이콘 설정에서 아이콘 색상을 변경하십시오.

• 아이콘 색상 : # 000000

마우스 오버 아이콘 설정

그리고 호버 아이콘의 색상을 변경합니다.

• 아이콘 색상 : # c2ab92

경계

테두리 매개 변수에 아래쪽 테두리를 추가하여 모듈 매개 변수를 완료하십시오.

• 아래쪽 테두리 너비 : 1px
• 하단 테두리 색상 : # 000000

2 열에 메뉴 모듈 추가

메뉴를 선택하십시오

다음 열로 넘어 갑시다! 메뉴 모듈을 추가하고 원하는 메뉴를 선택하십시오.

로고 다운로드

그런 다음 모듈에 로고를 업로드하십시오.

배경색 제거

그리고 배경색을 제거하십시오.

규정

그런 다음 디자인 탭으로 전환하고 다음 설정이 레이아웃에 적용되는지 확인합니다.

• 스타일 : 중심
• 드롭 다운 메뉴의 방향 : 아래

기본 메뉴 텍스트

다음과 같이 메뉴 텍스트 설정을 변경하여 계속하십시오.

• 활성 링크 색상 : # c2ab92
• 메뉴 글꼴 : 가마우지 Garamond
• 텍스트 색상 : # 000000
• 메뉴 텍스트 크기 : 1vw (데스크톱), 2vw (태블릿), 3vw (전화)

호버 메뉴 텍스트

마우스를 올리면 메뉴 텍스트를 변경하십시오.

• 메뉴 텍스트 색상 : # c2ab92

드롭 다운 메뉴

그런 다음 드롭 다운 메뉴 설정에서 드롭 다운 메뉴 라인의 색상을 변경하십시오.

• 드롭 다운 메뉴의 선 색상 : # 000000

아이콘

또한 아이콘 설정에서 햄버거 메뉴 아이콘의 색상을 변경하고 있습니다.

• 햄버거 메뉴 아이콘 색상 : # 000000

크기 조정

크기 조정 설정에서 다양한 화면 크기의 최대 로고 너비를 변경하여 계속합니다.

• 최대 로고 너비 : 5vw (데스크), 10vw (태블릿), 13vw (전화)

CSS 링크 메뉴

그리고 고급 탭의 모듈 메뉴 링크에 두 줄의 CSS 코드를 추가하여 모듈 설정을 완료합니다.

padding-bottom: 1vw;border-bottom: 1px solid #000;

3 열에 텍스트 모듈 추가

복사본 추가

마지막 모듈로 이동하겠습니다! 필요한 유일한 모듈은 텍스트 모듈입니다.

링크 추가

이 모듈은 CTA 역할을합니다. 원하는 링크를 추가하십시오.

• 모듈 링크 URL : #

기본 텍스트 설정

모듈 디자인 탭으로 전환하고 그에 따라 텍스트 설정을 변경합니다.

• 텍스트 글꼴 : 가마우지 Garamond
• 텍스트 색상 : # 000000
• 텍스트 크기 : 1vw (데스크톱), 2vw (태블릿), 3vw (전화)

호버 텍스트 설정

마우스를 올리면 텍스트 색상이 변경됩니다.

• 텍스트 색상 : # c2ab92

크기 조정

다른 화면 크기에서 모듈 크기 조정 매개 변수를 변경하여 계속하십시오.

• 너비 : 12vw (데스크톱), 18vw (태블릿), 22vw (전화)
• 모듈의 정렬 : 중심

간격

그리고 간격 설정에서 하단 패딩을 추가하십시오.

• 하단 패딩 : 0.5vw

경계

아래쪽 테두리를 추가하여 모듈 매개 변수를 완료하십시오.

• 아래쪽 테두리 너비 : 1px
• 하단 테두리 색상 : # 000000

2 열에 코드 모듈 추가

JQuery와 CSS 코드 삽입

행에있는 모든 모드의 스타일을 지정했으면 이제 표시 / 숨기기 효과를 적용 할 시간입니다. 이렇게하려면 2 열에 배치 할 코드 모듈에 사용자 지정 코드를 추가해야합니다.이 코드는 헤더 나 모듈을 디자인하는 방법에 관계없이 추가하는 모든 섹션에서 작동합니다. 섹션에 CSS ID를 추가했는지 확인하세요. 아래 인쇄 화면과 같이 스크립트 태그 사이에 JQuery 코드를, 스타일 태그 사이에 CSS 코드를 배치합니다.

jQuery(function($){ var topPosition = $(window).scrollTop(); $(window).scroll(function() {var scrollMovement = $(window).scrollTop();if(scrollMovement > topPosition) {$('#global-header-section').slideUp();} else {$('#global-header-section').slideDown();}topPosition = scrollMovement;}); });

main-content{margin-top: 7vw;}

3. 생성기 수정 사항을 저장하고 결과를 표시하십시오.

전체 헤더를 완료했으면 모든 변경 사항을 저장하고 컴퓨터에서 결과를 봅니다. 사이트 웹!

측량

이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.

마지막 생각

이 기사에서는 위로 스크롤 할 때 전역 헤더를 표시하고 아래로 스크롤 할 때 숨기는 방법을 설명했습니다. 이것은 방문자가 창 높이의 일부를 차지하지 않고 쉽게 탐색 할 수 있도록하는 인기 있고 효과적인 방법입니다. JSON 파일을 무료로 다운로드 할 수도 있습니다! 질문이나 제안이 있으시면 아래 댓글 섹션에 댓글을 남겨주세요.