Divi로 투명 헤더를 스크롤에 고정시키는 방법

웹사이트의 전역 헤더를 설정할 때 접근하는 방법은 여러 가지가 있습니다. 보다 미묘한 접근 방식 중 하나는 투명한 헤더입니다. 투명한 헤더는 페이지의 영웅 섹션 상단에 배치되어 최소한의 하지만 명확한 접근 방식에 초점을 맞춘 아름다운 디자인으로 이어질 수 있습니다. 투명한 헤더를 사용하기로 결정했지만 스크롤 시 고정 헤더가 필요한 경우 이 튜토리얼을 좋아하게 될 것입니다. Divi의 내장된 고정 옵션을 사용하여 스크롤 시 투명 헤더에서 다른 스타일의 고정 헤더로 이동하는 방법을 보여줍니다. 투명함과 끈적임 사이의 전환은 어렵지 않습니다! JSON 파일도 무료로 다운로드할 수 있습니다.

시작하겠습니다.

시사

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

데스크탑

이동하는

글로벌 헤더 템플릿을 무료로 다운로드하십시오

무료 글로벌 헤더 템플릿을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

1. 새 헤더 템플릿 내부에 헤더 요소 구조 만들기

새 글로벌 헤더 템플릿 생성

Divi 테마 빌더로 이동하여 시작하십시오. 거기에서 새로운 전역 또는 사용자 정의 헤더를 구축하기 시작합니다.

섹션 #1 설정

배경색

템플릿 편집기에 들어가면 섹션이 표시됩니다. 이 섹션은 이 게시물의 미리보기에서 확인할 수 있는 상단 헤더 표시줄 전용입니다. 섹션의 설정을 열고 검정색 배경색을 추가합니다.

• 배경색: #000000

간격

섹션의 디자인 탭으로 이동하여 모든 기본 상단 및 하단 패딩을 제거합니다.

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

새 행 추가

열 구조

다음 열 구조를 사용하여 새 행을 계속 추가합니다.

열에 텍스트 모듈 추가

콘텐츠 추가

행의 열에 텍스트 모듈을 추가하고 원하는 사본을 입력하십시오.

텍스트 설정

모듈의 디자인 탭으로 이동하여 그에 따라 텍스트 설정을 변경합니다.

• 텍스트 글꼴: Oswald
• 텍스트 글꼴 스타일: 대문자
• 텍스트 색상: #ffffff
• 텍스트 크기:
  • 데스크탑: 19px
  • 태블릿: 18px
  • 전화: 16px
• 텍스트 정렬: 가운데

섹션 #2 추가

간격

첫 번째 섹션 바로 아래에 다른 일반 섹션을 추가합니다. 이 섹션은 스크롤 시 고정으로 바뀌는 투명 메뉴 전용입니다. 섹션 설정을 열고 디자인 탭에서 모든 기본 상단 및 하단 패딩을 제거합니다.

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

새 행 추가

열 구조

다음 열 구조를 사용하여 새 행을 계속 추가합니다.

투명한 배경색

행 설정을 열고 행에 완전히 투명한 배경색을 적용합니다.

• 배경색: rgba(255,255,255,0)

사이징

행의 디자인 탭으로 이동하여 크기 설정을 수정합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 폭: 100%
• 최대 너비: 100%

간격

다음으로 사용자 지정 왼쪽 및 오른쪽 패딩을 추가합니다.

• 왼쪽 패딩: 10%
• 오른쪽 패딩: 10%

박스 섀도우

그런 다음 투명한 상자 그림자를 적용합니다. 튜토리얼의 뒷부분에서 우리는 이 상자 그림자를 다른 그림자 색상으로 끈적한 상태로 사용할 것입니다.

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

위치

행이 투명한 배경으로 페이지 콘텐츠 상단에 표시되도록 하기 위해 고급 탭에서 행에 대한 절대 위치를 사용합니다.

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

2열 가시성

작은 화면 크기에서 덜 복잡한 헤더 디자인을 갖도록 태블릿과 휴대폰에서 행의 두 번째 열을 숨기고 있습니다.

열 1에 메뉴 모듈 추가

메뉴 선택

이제 행 설정이 완료되었으므로 1열의 메뉴 모듈부터 시작하여 모듈을 추가할 차례입니다. 원하는 메뉴를 선택하십시오.

로고 업로드

다음에 로고를 업로드하십시오.

배경색 제거

모듈의 배경색도 제거하십시오.

메뉴 텍스트 설정

모듈의 디자인 탭으로 이동하여 그에 따라 메뉴 텍스트 설정을 변경합니다.

• 메뉴 글꼴: Oswald
• 메뉴 글꼴 두께: 굵게
• 메뉴 글꼴 스타일: 대문자
• 메뉴 텍스트 색상: #efefef
• 메뉴 텍스트 크기: 18px
• 텍스트 정렬: 오른쪽

드롭다운 메뉴 설정

드롭다운 메뉴 설정도 변경합니다.

• 드롭다운 메뉴 선 색상: rgba(0,0,0,0)
• 모바일 메뉴 배경색: rgba(0,0,0,0.95)

아이콘 설정

그런 다음 아이콘 설정에서 아이콘 색상을 변경합니다.

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

로고 설정

이미지 반전 필터를 변경하여 로고 설정에서도 로고 색상을 변경하고 있습니다.

• 이미지 반전: 90%

사이징

그런 다음 로고에 최대 높이를 할당합니다.

• 로고 최대 높이: 40px

간격

다음으로 더 작은 화면 크기에 위쪽 및 아래쪽 패딩을 추가합니다.

• 탑 패딩:
  • 태블릿 및 휴대전화: 10px
• 하단 패딩:
  • 태블릿 및 휴대전화: 10px

2열에 버튼 모듈 추가

사본 추가

2열에서 필요한 유일한 모듈은 버튼 모듈입니다. 원하는 사본을 추가하십시오.

버튼 정렬

모듈의 디자인 탭으로 이동하여 버튼 정렬을 변경합니다.

• 버튼 정렬: 오른쪽

버튼 설정

다음 버튼의 스타일을 지정합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 16px
• 버튼 텍스트 색상: #ffffff
• 버튼 배경색: #ed4441
• 버튼 테두리 색상: #ed4441

• 버튼 테두리 반경: 0px
• 버튼 문자 간격: 4px
• 버튼 글꼴: Oswald
• 버튼 글꼴 두께: 굵게
• 버튼 글꼴 스타일: 대문자
• 버튼 아이콘 표시: 예
• 버튼 아이콘 색상: #1a1a1a

간격

그리고 몇 가지 사용자 정의 간격 값을 추가하여 모듈 설정을 완료합니다.

• 상단 여백: -70px
• 상단 패딩: 25px
• 하단 패딩: 25px

2. 사용자 지정 스티커 효과 적용

섹션 #2 끈끈이 회전

이제 헤더의 기초를 설정했으므로 고정 효과를 적용할 차례입니다! 그렇게 하려면 두 번째 섹션의 설정을 열고 다음 고정 설정을 고급 탭에 적용합니다.

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

고정 행 배경색

이제 고정 옵션이 활성화되었으므로 섹션 내부의 모든 요소에 고정 디자인을 변경할 수 있습니다. 메뉴가 포함된 행을 열고 흰색 끈적한 배경색을 적용하는 것으로 시작하겠습니다.

• 배경색: #FFFFFF

고정 행 간격

다음으로 행의 고정 간격 값을 수정합니다.

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

스티키 로우 박스 섀도우

끈적한 상태에서 상자 그림자 색상도 변경하고 있습니다.

• 그림자 색상: rgba(0,0,0,0.08)

고정 행 위치 지정

그런 다음, 행 위치를 고정 상태에서 상대 위치로 되돌립니다.

• 위치: 상대
• 오프셋 원점: 왼쪽 상단

고정 메뉴 텍스트 설정

다음으로 고정 메뉴 텍스트 색상을 변경합니다.

• 메뉴 텍스트 색상: #000000

고정 메뉴 드롭다운 설정

메뉴 드롭다운 설정에서 모바일 메뉴 배경색과 함께.

• 모바일 메뉴 배경색: #ffffff

스티커 메뉴 아이콘 색상

스티커 상태에서도 아이콘 색상을 변경합니다.

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

스티커 로고 필터

그런 다음 스티커 상태의 로고 이미지 반전 필터를 제거합니다.

• 이미지 반전: 0%

고정 버튼 간격

그리고 고정된 상태에서 버튼의 음수 상단 여백을 제거하여 자습서를 완료합니다.

• 상단 여백: 0px

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.

데스크탑

이동하는

마지막 생각들

이 게시물에서 우리는 Divi의 테마 빌더를 새로운 고정 옵션과 결합하는 방법을 보여주었습니다. 더 구체적으로 말하면, 스크롤 시 투명 헤더에서 다른 스타일의 고정 헤더로 이동하는 방법을 보여 주었습니다. 이 접근 방식을 사용하면 스크롤에 아름다운 고정 헤더를 유지하면서 페이지 디자인을 메뉴와 병합할 수 있습니다. JSON 파일도 무료로 다운로드할 수 있었습니다! 질문이나 제안 사항이 있으면 아래의 댓글 섹션에 자유롭게 의견을 남겨주세요.

Divi에 대해 자세히 알아보고 더 많은 무료 Divi를 받고 싶다면 이메일 뉴스레터와 YouTube 채널을 구독하세요. 그러면 항상 이 무료 콘텐츠를 가장 먼저 알고 혜택을 받을 수 있습니다.