Divi에서 아래로 스크롤하는 동안 헤더를 숨기는 방법

Rifat Oct 20, 2021

헤더는 사용자가 헤더에서 이 웹사이트에서 얻을 수 있는 것을 이해할 수 있기 때문에 웹사이트의 본질을 포착합니다. 방문객을 끌어들이는 일종의 초대라고 해도 과언이 아닙니다. 상단 탐색 모음이 주의를 산만하게 만드는 웹 사이트의 영웅 섹션을 강조 표시하려면 탐색 모음을 생략해야 합니까? 절대!

Divi 의 Sticky 옵션을 사용하면 웹사이트가 로드된 후 탐색 모음 없이 웹사이트의 Hero 섹션이 표시되는 위치를 디자인할 수 있으며 스크롤하면 헤더 표시줄이 해제됩니다. 윈-윈 상황입니다. 그러나 그런 디자인을 하는 방법? 그것이 오늘 우리가 보게 될 것입니다.

맛보기

메인 섹션으로 넘어가기 전에 디자인 결과를 살펴보겠습니다.

빌드: 헤더 구조

대시보드에서 글로벌 헤더 생성

대시보드에서 Divi 아래의 "테마 빌더" 옵션으로 이동하고 그림에 표시된 옵션에서 "글로벌 헤더 빌드"를 선택합니다.

놀라운 웹사이트 만들기

최고의 무료 페이지 빌더 Elementor와 함께

지금 시작

설정: 글로벌 헤더 섹션

배경색

헤더 템플릿을 선택한 후 "처음부터 빌드"로 이동합니다. 그런 다음 레이어 옵션을 열면 미리 생성된 섹션이 표시됩니다. 섹션에 대한 설정을 열고 배경을 변경합니다.

  • 배경색: #002854

간격

디자인 탭에서 일부 간격 값을 변경합니다.

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

새 행 추가

열 구조

열 구조로 표시된 다음 행을 섹션에 추가합니다.

배경색

이 행에 모듈을 추가하기 전에 몇 가지 조정을 해보겠습니다. 배경색으로 시작합니다.

  • 배경색: #002854

사이징

디자인 탭에서 행의 크기 값을 변경합니다.

  • 사용자 지정 거터 너비 사용: 예
  • 거터 폭: 1
  • 열 높이 균등화: 예
  • 폭: 100%
  • 최대 너비: 100%

간격

이제 패딩 값도 변경하십시오.

  • 상단 패딩: 0px
  • 하단 패딩: 0px
  • 왼쪽 패딩: 태블릿 및 전화: 5%
  • 오른쪽 패딩: 태블릿 및 전화: 5%

설정: 열 1

배경색

전체 행을 디자인한 후 열 1 디자인을 시작합니다. 먼저 배경색을 추가합니다.

  • 배경색: #85A8B2

추가: 열 1에 메뉴 모듈

메뉴 선택

이제 1열에 메뉴 모듈을 추가하겠습니다. 원하는 메뉴를 선택하세요.

심벌 마크

이제 헤더에 로고를 추가하십시오.

배경색

이제 배경색을 추가합니다.

  • 배경색: #063765

배경 이미지

이제 원하는 이미지를 추가하고 다음과 같이 조정합니다.

  • 배경 이미지 크기: 맞춤
  • 배경 이미지 위치: 중앙

설정: 메뉴 텍스트

모듈의 디자인 탭으로 이동하여 메뉴 텍스트 크기를 변경합니다.

  • 텍스트 색상: #ffffff
  • 메뉴 텍스트 크기: 18px

설정: 드롭다운 메뉴

이제 다음과 같이 드롭다운 메뉴 설정을 변경합니다.

  • 드롭다운 메뉴 선 색상: rgba(0,0,0,0)
  • 모바일 메뉴 배경색: #ddc1a7
  • 모바일 메뉴 텍스트 색상: #063765

설정: 아이콘

이제 모든 아이콘을 흰색으로 바꿉니다.

  • 장바구니 아이콘 색상: #ffffff
  • 검색 아이콘 색상: #ffffff
  • 햄버거 메뉴 아이콘 색상: #ffffff

사이징

그런 다음 로고 크기 설정을 수정합니다.

  • 로고 최대 너비: 70px

간격

패딩을 약간 변경합니다.

  • 탑 패딩: 1%
  • 하단 패딩: 1%
  • 왼쪽 패딩: 5%
  • 오른쪽 패딩: 5%

박스 섀도우

사용자 정의 상자 그림자에 몇 가지 변경 사항을 추가합니다.

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

변환 번역

이제 다음과 같이 변환 번역 설정을 수정하여 모듈 설정을 마칩니다.

  • 오른쪽: 데스크탑: 20px, 태블릿 및 전화: 0px

추가: 2열에 버튼 모듈

버튼 모듈 설정

2열에 버튼 모듈을 추가하고 원하는 텍스트를 추가합니다.

버튼 정렬

디자인 탭에서 버튼 정렬을 변경합니다.

  • 버튼 정렬: 오른쪽

버튼 설정

그런 다음 그에 따라 버튼 스타일을 변경합니다.

  • 버튼에 사용자 정의 스타일 사용: 예
  • 버튼 텍스트 크기: 16px
  • 버튼 텍스트 색상: #2a2a2a
  • 버튼 배경색: #ffffff
  • 버튼 테두리 너비: 0px
  • 버튼 테두리 색상: rgba(0,0,0,0)
  • 버튼 글꼴 두께: 굵게
  • 버튼 글꼴 스타일: 대문자

간격

버튼에 모양을 만들기 위해 몇 가지 사용자 지정 패딩을 추가합니다.

  • 상단 패딩: 20px
  • 하단 패딩: 20px
  • 왼쪽 패딩: 40px
  • 오른쪽 패딩: 40px

박스 섀도우

이제 상자 그림자(표시된 것)를 추가합니다.

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

변환 번역

모듈이 거의 완료되었습니다. 변형 섹션에서 약간의 조정으로 마무리합니다.

  • 오른쪽: 데스크탑: 50px, 태블릿 및 전화: 0px

추가: 헤더에 고정 효과

행 설정

헤더 섹션 구조의 구성을 완료했습니다. 이제 스티커 효과를 추가합니다. 이를 위해 행 설정에서 일부 값을 변경해야 합니다.

위치

먼저 위치를 조정합니다.

  • 위치: 절대
  • 위치: 왼쪽 상단

고정 설정 - 스크롤 효과

다음으로 섹션 설정을 열고 상단에 고정되도록 합니다.

  • 고정 위치: 상단에 고정
  • 하단 고정 제한: 없음
  • 주변 점착 요소와의 오프셋: 예
  • 전환 기본 및 고정 스타일: 예

생기

이제 방문자가 페이지를 로드하는 동안 헤더를 볼 수 없도록 애니메이션을 추가합니다.

  • 애니메이션 스타일: 페이드

전환 기간

전환 범위의 값을 변경하여 스크롤하는 동안 헤더가 표시되는 속도를 선택합니다.

  • 전환 시간: 800ms

변환 번역

처음에는 헤더를 표시하지 않기 때문에 변환 설정에서 Y축에 음수 값을 추가합니다.

  • 오른쪽: -300px

이제 고정 설정에서 값을 다시 0으로 만듭니다. 즉, 스크롤을 시작하자마자 메뉴가 표시됩니다.

  • 고정 오른쪽: 0px

 가시성을 위한 CSS 속성

이 섹션에서는 사용되지 않는 요소를 숨기기 위해 CSS 속성을 추가합니다. 이것은 필수 작업은 아니지만 이 작업을 수행하는 것이 좋습니다.

visibility: hidden;

이제 메뉴를 고정 상태로 다시 표시합니다.

visibility: visible;

최종 결과

모든 단계를 성공적으로 완료했으므로 최종 결과는 다음과 같습니다.

마지막 단어

오늘 튜토리얼에서는 방문자가 영웅 섹션에 집중하도록 하고 가시성과 관련하여 탐색 모음에서 작업하는 방법을 살펴보았습니다. Divi는 독특하고 재미있는 것을 디자인할 수 있는 기능이 내장된 훌륭한 테마입니다. 오늘의 포스팅이 마음에 드셨기를 바라며, 궁금한 점이나 질문이 있으시면 언제든지 댓글로 질문해주세요.