Divi로 투명하고 끈끈한 헤더를 만들고 싶습니까?
글로벌 헤더를 설정할 때 사이트 웹, 접근하는 방법에는 여러 가지가 있습니다. 보다 미묘한 접근 방식 중 하나는 투명한 헤더입니다.
투명한 헤더를 사용하기로 결정했지만 스크롤할 때 고정해야 하는 경우 이 튜토리얼을 좋아할 것입니다. 투명함과 끈적임 사이의 전환은 어렵지 않습니다!
가자.
측량
튜토리얼을 시작하기 전에 결과를 간단히 살펴보겠습니다.
새 전역 헤더 템플릿 만들기
Divi > 테마 빌더로 이동하세요.
섹션 #1 설정
배경색
템플릿 편집기에 들어가면 섹션이 표시됩니다. 이 섹션은 이 기사의 미리보기에서 확인할 수 있는 상단 헤더 표시줄 전용입니다. 섹션 설정을 열고 검정색 배경색을 추가합니다.
- 배경: #000000
간격
섹션 스타일 탭으로 전환하고 기본적으로 모든 내부 여백(상단 및 하단)을 제거합니다.
- 내부 여백 정점: 0px
- 하단 내부 여백: 0px
새 행 추가
기둥의 구조
다음 열 구조를 사용하여 새 행을 계속 추가합니다.
열에 텍스트 모듈 추가
행 열에 텍스트 모듈을 추가하고 원하는 메시지를 입력합니다.
텍스트 설정
모듈 스타일 탭으로 전환하고 그에 따라 텍스트 설정을 변경합니다.
- 텍스트 글꼴: Oswald
- 텍스트 복사 스타일: TT
- 텍스트 색상 텍스트: #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
- 소프트 라이트 메뉴: 굵게
- 스타일 메뉴 복사: TT
- 메뉴 텍스트 색상: #efefef
- 메뉴 텍스트 크기: 18px
- 텍스트 정렬: 오른쪽
드롭 다운 메뉴 설정
드롭다운 메뉴 설정도 변경합니다.
- 드롭다운 행 색상: rgba(0,0,0,0)
- 모바일 메뉴 배경색: rgba (0,0,0,0,95)
아이콘 설정
다음으로 아이콘 설정에서 아이콘 색상을 변경합니다.
- 장바구니 아이콘 색상: #ffffff
- 검색 아이콘 색상: #ffffff
- 햄버거 메뉴 아이콘 색상: #ffffff
로고 설정
또한 이미지 반전 필터를 변경하여 로고 설정에서 로고 색상을 변경합니다.
- 이미지 반전: 90%
크기 조정
다음으로 로고에 최대 높이를 지정합니다.
- 로고 최대 너비: 40픽셀
간격
다음으로 작은 화면 크기에 위쪽 및 아래쪽 패딩을 추가합니다.
- 최대 내부 마진:
- 태블릿 및 휴대전화: 10px
- 하단 내부 여백:
- 태블릿 및 휴대전화: 10px
2열에 Button 모듈 추가
텍스트 추가 버튼으로
2열에서 필요한 유일한 모듈은 Button 모듈입니다. 원하는 텍스트를 추가합니다.
버튼 정렬
모듈 스타일 탭으로 전환하고 버튼 정렬을 변경합니다.
- 버튼 정렬: 오른쪽
버튼 설정
다음 버튼을 사용자 정의합니다.
- 버튼에 사용자 정의 스타일 사용: 예
- 버튼 텍스트 크기: 16px
- 버튼 텍스트 색상: #ffffff
- 배경 버튼: #ed4441
- 버튼 테두리 색상: #ed4441
- 테두리 반경 버튼: 0픽셀
- 버튼 문자 간격: 4px
- 버튼 글꼴: Oswald
- 소프트 라이트 버튼: 굵은 텍스트
- 스타일 복사 버튼: TT
- 버튼 아이콘 표시: 예
- 버튼 아이콘 색상: #1a1a1a
간격
그리고 맞춤 간격 값을 추가하여 모듈 매개변수를 완성합니다.
- 상단 여백: -70px
- 상단 및 하단 내부 여백: 25픽셀
사용자 지정 고정 효과 적용
섹션 #2를 끈끈하게 만들기
이제 헤더의 기초를 마련했으므로 고정 효과를 적용할 차례입니다! 이렇게 하려면 두 번째 섹션에서 설정을 열고 다음 고정 설정을 고급 탭에 적용합니다.
- 고정 위치: 상단에 고정
- 스틱 상단 오프셋: 0px
- 하단 스티커 Mimit: 없음
- 주변 점착 요소와의 간격띄우기: 예
- 전환 기본 및 고정 스타일: 예
스틱 라인 배경색
이제 고정 옵션이 활성화되었으므로 섹션의 모든 요소에 고정 옵션을 변경할 수 있습니다. 먼저 메뉴가 포함된 행을 열고 고정 옵션에 흰색 배경색을 적용합니다.
- 배경색: #FFFFFF
고정 행 간격
다음으로 줄의 스티키 기능의 간격 값을 수정해 보겠습니다.
- 내부 여백 정점: 0px
- 하단 내부 여백: 0px
스티키 로우 섀도우 박스
또한 끈적한 상태에서 상자 그림자의 색상을 변경합니다.
- 자막 글꼴 색상: rgba(0,0,0,0.08)
스티키 라인 포지셔닝
다음으로, 우리는 고정 상태에서 상대 위치로 행 위치를 되돌릴 것입니다.
- 위치: 상대
- 오프셋 원점: 왼쪽 상단
고정 상태 메뉴 텍스트 설정
다음으로 메뉴 텍스트 색상을 고정 상태로 변경합니다.
- 메뉴 텍스트 색상: #000000
고정 상태의 메뉴 드롭다운 설정
드롭다운 메뉴 설정에서 모바일 메뉴 배경색 사용.
- 모바일 메뉴, 배경색: #ffffff
고정 상태의 메뉴 아이콘 색상
또한 고정 상태에서 아이콘 색상을 변경합니다.
- 장바구니 아이콘 색상: #000000
- 검색 아이콘 색상: #000000
- 햄버거 메뉴 아이콘 색상: #000000
스티커 상태의 로고 필터
다음으로 스티커 상태의 로고 이미지에서 반전 필터를 제거합니다.
- 이미지 반전: 0%
고정 상태의 버튼 간격
그리고 버튼이 고정 상태일 때 버튼에서 음수 상단 여백을 제거하여 자습서를 완료합니다.
- 상단 여백: 0px
측량
이제 모든 단계를 거쳤으므로 최종 결과를 마지막으로 살펴보겠습니다.
지금 DIVI를 다운로드하세요!!!
결론
이 기사에서는 생성자를 결합하는 방법을 보여주었습니다. 테마 새로운 고정 옵션이 있는 Divi의 특히 스크롤하는 동안 투명한 머리글에서 다른 스타일의 고정 머리글로 전환하는 방법을 보여 주었습니다.
이 접근 방식을 사용하면 스크롤할 때 여전히 멋진 고정 헤더를 유지하면서 페이지 디자인을 메뉴와 병합할 수 있습니다.
Divi에 대해 더 알고 싶다면 주저하지 말고 당사 카탈로그를 방문하십시오. 디비 튜토리얼. 상담도 가능합니다 Divi 블로그 모듈로 블로그 페이지를 만드는 방법
질문이나 제안이 있으시면 아래 댓글 섹션에 댓글을 남겨주세요.
그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요한 경우 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
하지만 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
