필요한 것 투명한 플로팅 메뉴를 만들려면 Divi ?
페이지의 주요 섹션 위에 전체 머리글을 배치하는 방법을 찾고 계십니까? 튜토리얼에서 Divi 오늘은 그 방법을 정확히 알려드리겠습니다.
처음부터 멋진 글로벌 헤더를 만들 것입니다(생성자를 사용하여 테마 de Divi) 그리고 메뉴바에 플로팅 효과를 적용하겠습니다.
가자.
측량
이 튜토리얼을 시작하기 전에 달성하고자 하는 결과를 간단히 살펴보겠습니다.
Divi의 테마 빌더로 이동하여 새 템플릿을 추가합니다.
Allez Divi > 테마 빌더에서.
전역 헤더 생성 Divi 테마 빌더로
'전역 헤더 추가'를 클릭하고 '전역 헤더 작성'을 선택하여 계속하십시오.
섹션 설정
배경색
템플릿 편집기에 들어가면 페이지의 섹션을 볼 수 있습니다. 이 섹션을 열고 배경색을 완전히 투명한 색으로 변경합니다. 이렇게 하면 섹션 아래의 모든 항목이 표시됩니다.
- 배경: rgba(0,0,0,0)
크기 조정
그런 다음 섹션 스타일 탭으로 이동하여 최대 너비를 변경합니다.
- 최대 너비(스크린샷 참조): 100%
간격
또한 모든 기본 위쪽 및 아래쪽 내부 여백을 제거합니다.
- 내부 여백 정점: 0px
- 하단 내부 여백: 0px
Z-인덱스
그리고 해당 섹션이 모든 것 위에 위치하도록 하세요. 내용 Hero 섹션의 가시성 설정에서 Z-색인을 늘려야 합니다.
- Z-인덱스: 99999
새 행 추가
기둥의 구조
섹션 설정을 완료하면 다음 열 구조를 사용하여 새 행을 추가할 수 있습니다.
크기 조정
모듈을 추가하지 않고 행 설정을 열고 다음과 같이 사이징 설정을 변경합니다.
- 열 높이 조화: 예
- 최대 너비: 100%
- 최대 너비: 100%
간격
그런 다음 사용자 정의 내부 여백(상단 및 하단)을 추가합니다.
- 최대 내부 마진: 2vw
- 하단 내부 여백: 0vw
주요 요소
다음으로 고급 탭으로 이동하여 기본 행 요소에 한 줄의 CSS 코드를 추가하여 작은 화면 크기에서 열이 서로 옆에 유지되도록 합니다.
display: flex;
2 열
배경색
2열 설정을 열어 계속해서 배경색을 반투명으로 변경합니다.
- 배경색: rgba (255,255,255,0.71)
경계
또한 열에 아래쪽 테두리를 추가합니다.
- 하단 테두리 너비: 2px
- 버튼 및 하단 테두리 색상: #f4583f
그림자 상자
그리고 미묘한 상자 그림자를 추가하여 떠 있는 효과를 만듭니다.
- 섀도우 박스: [뷰 캡처]
- 시작 위치: 20px
- 보우 섀도우 블러 강도: 50px
- 상자 그림자 확산 강도: -20px
- 자막 글꼴 색상: rgba(0,0,0,0.23)
열 1에 이미지 모듈 추가
로고 다운로드
행 및 열 설정을 완료했으면 열 1의 이미지 모듈부터 시작하여 모듈을 추가할 차례입니다. 배경이 투명한 로고를 업로드합니다.
조정
모듈 스타일 탭으로 전환하고 정렬을 변경합니다.
- 이미지 정렬: 중앙
크기 조정
또한 사이징 설정에서 모듈의 너비를 변경합니다.
- 최대 너비: 8 vw(데스크톱), 14 vw(태블릿), 21 vw(휴대폰)
2열에 메뉴 모듈 추가
메뉴 선택
다음 칼럼으로 가자. 여기서 필요한 유일한 모듈은 메뉴 모듈입니다. 원하는 메뉴를 선택하세요.
배경색 제거
그런 다음 배경 설정으로 이동하여 배경색을 제거합니다.
규정
모듈 스타일 탭으로 전환하고 레이아웃을 변경합니다.
- 스타일: 중앙
- 드롭다운 메뉴: 아래로
메뉴 텍스트
또한 메뉴 텍스트 설정의 스타일을 지정합니다.
- 메뉴 글꼴: Mulish
- 메뉴 텍스트 색상: #6f6666
- 텍스트 크기 메뉴: 1vw(데스크톱), 2vw(태블릿), 3vw(전화)
드롭 다운 메뉴
그런 다음 드롭다운 메뉴에서 설정을 변경합니다.
- 드롭다운 행 색상: #f4583f
아이콘
아이콘 설정에서 햄버거 메뉴 아이콘 색상에 동일한 색상을 사용하십시오.
- 햄버거 메뉴 아이콘 색상: #f4583f
간격
간격 설정에서 위쪽 및 아래쪽 패딩을 추가하여 모듈 설정을 완료합니다.
- 최대 내부 마진: 1,5 vw
- 하단 내부 여백: 1,5 vw
3열에 Button 모듈 추가
버튼에 텍스트 추가
다음 열과 마지막 열로 넘어 갑시다. 원하는 텍스트로 Button 모듈을 추가합니다.
조정
그런 다음 모듈 정렬을 변경합니다.
- 버튼 정렬: 중앙
버튼 설정
그에 따라 버튼을 사용자 정의하여 계속하십시오.
- 버튼에 사용자 정의 스타일 사용: 예
- 버튼 텍스트 크기: 0,9 vw(데스크톱), 1,5 vw(태블릿), 2,5 vw(전화)
- 버튼 텍스트 색상: #ffffff
- 배경 버튼: #f4583f
- 버튼 테두리 너비: 0픽셀
- 버튼 테두리 색상: #f4583f
- 테두리 반경 버튼: 0픽셀
- 버튼 글꼴: 뮬리쉬
- 희미한 조명 버튼: 굵은 텍스트
간격
다양한 화면 크기에 맞춤 패딩을 추가하여 모듈 설정을 완료합니다.
- 상단 및 하단 내부 여백: 1vw(데스크톱), 2vw(태블릿), 3vw(전화)
- 왼쪽 및 오른쪽 내부 여백: 2vw(데스크톱), 3vw(태블릿), 4vw(전화)
추가 섹션 매개변수
기본 기본 요소
일반 사용자 정의를 완료한 후에는 해야 할 일이 한 가지 더 있습니다. 섹션을 위에 배치하세요. 내용 귀하의 페이지. 이렇게 하려면 섹션의 기본 요소에 두 줄의 CSS 코드를 추가해야 합니다.
position: absolute;
top: 0;
호버의 주요 요소
동일한 CSS 코드 행을 기본 요소의 hover 옵션에 추가해야 합니다. 이렇게 하면 섹션 위로 마우스를 가져가면 섹션이 깜박이는 것을 방지할 수 있습니다.
position: absolute;
top: 0;
생성자 변경 사항 저장 및 결과 보기
섹션을 완료하면 전체 헤더를 저장하고 사이트에 결과를 표시할 수 있습니다!
측량
모든 단계를 거쳤으므로 이제 결과를 마지막으로 살펴보겠습니다.
지금 DIVI를 다운로드하세요!!!
결론
그래서 ! 그것이 이 기사의 내용입니다. Divi의 Theme Builder로 떠 있는 투명한 메뉴바를 만드는 방법을 보여 드렸습니다. 헤더는 페이지 또는 게시물의 첫 번째 섹션 위에 배치됩니다.
Divi의 Theme Builder에 익숙해지려면 다음 기사를 읽어보십시오. Divi의 테마 빌더로 글로벌 헤더를 만드는 방법
상담도 가능합니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
