페이지 하단에서 상단까지 고정되는 Divi 내비게이션 바를 만들고 싶으신가요?
튜토리얼에서 Divi 오늘은 Divi에서 아래에서 위로 고정되는 탐색 모음을 만드는 방법을 단계별로 보여 드리겠습니다.
이렇게 하면 탐색 모음이 처음에 페이지 하단에 남아 고유한 스크롤 없이 볼 수 있는 레이아웃을 만들 수 있습니다. 그런 다음 페이지 접힌 부분 위의 섹션을 스크롤하면 탐색 모음이 페이지 상단에 남아 있고 페이지 전체에 유지됩니다.
페이지가 화면 하단의 메뉴를 "인계"하고 메인 메뉴와 사이트 웹.
시작하자!
측량
달성하려는 결과를 시각화하는 데 도움이 되도록 최종 결과를 살펴보겠습니다.
지금 DIVI를 다운로드하세요!!!
Divi Builder로 새 페이지를 만들어 봅시다.
시작하려면 다음을 수행해야 합니다.
WordPress 대시보드에서 페이지> 새로 추가 새 페이지를 만듭니다.
이해하기 쉬운 제목을 지정하고 클릭하십시오. Divi Builder 사용
그런 다음 클릭 건물 시작 (처음부터 구축)
그 후에 Divi에서 디자인을 시작할 빈 캔버스가 생깁니다.
Divi에서 끈적한 아래에서 위로 탐색 모음 만들기
1부: 흘수선 위에 단면 및 머리글 만들기
이 자습서의 첫 번째 부분에서는 페이지의 기본 머리글 섹션으로 사용할 섹션과 머리글을 스크롤 없이 만들 수 있습니다. 섹션이 전체 디스플레이 창을 차지하도록 바탕 화면의 전체 화면이 됩니다.
행 추가
시작하려면 기본 섹션의 열에 행을 추가하세요.
섹션 설정
모듈을 추가하기 전에 섹션 설정을 열고 다음과 같이 배경을 추가하십시오.
- 배경색: #e9f9ff
- 배경 이미지: [이미지 추가]
탭 아래 디자인, 최소 높이와 패딩을 업데이트합니다.
- 최소 높이: 100vh(데스크톱), 자동(태블릿 및 휴대폰)
- 패딩: 20vh(상단 및 하단)
헤더 텍스트
헤더 텍스트를 생성하려면 라인에 새로운 Text 모듈을 추가하십시오.
그런 다음 업데이트 내용 다음 H1 헤더를 사용합니다.
<h1>Above the Fold</h1>
텍스트 설정
탭 아래 디자인 텍스트 모듈 설정에서 다음과 같이 헤더 글꼴 스타일을 업데이트합니다.
- 표제:
- 글꼴: 루비
- 글꼴 두께: 반 굵게
- 스타일: TT
- 텍스트 정렬: 중앙
- 텍스트 색상: #302ea7
- 크기: 130px(데스크톱), 70px(태블릿), 40px(휴대폰)
- 문자 간격: 2px
- 줄 높이: 1,3em
파트 2: 흘수선 아래 섹션 만들기
고정 탐색 모음의 기능을 시연하기 위해 스크롤할 수 있는 공간을 확보할 수 있도록 스크롤할 수 있는 부분 아래에 섹션을 추가해야 합니다.
섹션을 생성하려면 방금 생성한 주름 위에 섹션을 복제합니다.
중복 섹션의 배경을 업데이트합니다.
- 배경색: #f4def1
그런 다음 페이지를 아래로 스크롤할 공간이 있도록 섹션에 큰 최소 높이를 지정합니다. 이것은 단순히 내용 진짜 한 페이지.
- 최소 높이: 200vh
그런 다음 업데이트 내용 단어를 교체하여 텍스트 모듈의 "아래에" 년부터 "위에".
3부: 고정 탐색 모음 만들기
아래쪽에서 위쪽으로 고정 탐색 모음을 만들려면 첫 번째 단계는 한 행에서 한 열로 새 섹션을 만드는 것입니다.
새로운 섹션 및 라인 추가
먼저 스크롤 없이 볼 수 있는 부분 바로 아래에 새 일반 섹션을 추가해 보겠습니다.
다음으로 섹션에 XNUMX열 행을 추가해 보겠습니다.
섹션 배경 및 패딩
섹션 설정을 열고 배경색을 업데이트하십시오.
- 배경 색상: #302ea7
그런 다음 상단 및 하단 패딩을 제거하여 탐색 막대의 높이를 줄이십시오.
- 패딩: 0px(상단 및 하단)
보이는 오버플로 추가
드롭다운 메뉴가 계속 표시되도록 하려면 다음과 같이 가시성 옵션을 업데이트하십시오.
- 수평 오버플로: 표시
- 수직 오버플로: 표시
모바일에서 섹션에 절대 위치 지정
모바일 드롭다운 메뉴는 기본적으로 햄버거 아이콘 아래에 열립니다. 탐색 모음을 맨 아래에 유지하면 사용자가 클릭하면 드롭다운 메뉴가 숨겨집니다.
더 나은 사용자 경험을 위해 탐색 모음이 태블릿과 휴대폰 화면의 페이지 맨 위에서 시작되기를 원합니다.
이를 위해 태블릿과 휴대폰에서 섹션에 절대 위치를 지정합니다.
- 위치: 상대(데스크톱), 절대(태블릿 및 휴대폰)
데스크톱 및 모바일용 고정 위치 추가
탐색 모음 섹션에 고정 위치를 추가하려면 다음을 업데이트하세요.
- 고정 위치: 상단 및 하단에 고정(데스크탑), 상단에 고정(태블릿 및 휴대폰)
행 패딩 업데이트
고정 섹션이 완료되면 섹션 내부의 행 설정을 열고 다음과 같이 패딩을 업데이트합니다.
- 패딩: 10px(상단 및 하단)
탐색 메뉴 만들기
섹션과 선이 있으면 탐색 메뉴를 만들 준비가 되었습니다.
XNUMX열 행에 메뉴 모듈을 추가하여 시작합니다.
메뉴 내용
다음과 같이 메뉴 콘텐츠를 업데이트합니다.
- 드롭다운 목록에서 메뉴 선택
- 로고 이미지 추가
- 기본 배경색 제거
탭 아래 디자인, 다음 메뉴 텍스트 및 아이콘 설정을 업데이트합니다.
- 활성 링크 색상: #fff
- 메뉴 글꼴: Ruby
- 메뉴 글꼴 스타일: TT
- 텍스트 색상: #fff
- 메뉴 텍스트 크기: 16px
- 텍스트 정렬: 오른쪽
- 드롭다운 메뉴 선 색상: #e19dff
- 모바일 메뉴 텍스트 색상: #302ea7
- 장바구니 아이콘 색상: #fff
- 검색 아이콘 색상: #fff
- 햄버거 메뉴 아이콘 색상: #fff
테두리를 사용하여 모바일에서 탐색 모음의 절대 위치 오프셋
탐색 모음 섹션은 모바일에서 절대 위치를 가지므로 바는 페이지의 상단 섹션 위에 놓이고 잘립니다. 이 문제를 해결하려면 탐색 모음/섹션과 동일한 높이의 상단 테두리를 사용하여 상단 섹션을 오프셋해야 합니다.
모바일에서 탐색 모음 섹션의 높이 검사
모바일에서 탐색 모음의 높이를 결정하려면 새 브라우저 창에서 페이지의 라이브 버전을 엽니다. 그런 다음 브라우저 너비를 980px 아래로 줄여 모바일 메뉴를 볼 수 있습니다.
다음과 같이 상담할 수도 있습니다. Divi: 고정 탐색 모음을 만드는 방법
메뉴가 포함된 섹션을 마우스 오른쪽 버튼으로 클릭하고 옵션을 선택합니다. 요소를 검사 브라우저 컨텍스트 메뉴에서 당신은 상자를 볼 것입니다 도구 섹션의 치수(높이 포함)를 나타내는 섹션 아래.
이 예에서 navbar 섹션의 높이는 72픽셀입니다.
접힌 부분 위 섹션에 위쪽 테두리 오프셋 추가
섹션의 높이를 결정했으므로 상단 섹션(접힌 부분 위)에 대한 설정을 엽니다.
탭 아래 디자인, 태블릿 및 휴대전화에 다음 상단 테두리를 추가합니다.
- 상단 테두리 너비: 72픽셀(태블릿 및 휴대폰)
- 상단 테두리 색상: #302ea7
테두리는 절대 위치의 단면과 높이가 같기 때문에 테두리가 잘리지 않도록 단면을 아래로 밀어주는 역할만 하기 때문에 테두리가 보이지 않습니다.
최종 결과
최종 결과를 발견하십시오!
지금 DIVI를 다운로드하세요!!!
결론
Divi의 기본 제공 위치 및 고정 옵션.
핵심은 폴드 위 섹션의 높이를 100vh로 지정한 다음 브라우저의 맨 아래와 맨 위에 고정되는 탐색 모음 섹션을 아래에 추가하는 것입니다. 스크롤 없이 볼 수 있는 부분에 더 독특하고 매력적인 요소를 추가하는 데 도움이 되길 바랍니다. 사이트 웹.
이 고정 탐색 모음은 전체 템플릿보다 단일 페이지 디자인에 가장 적합합니다. 즉, 이것을 홈페이지 디자인으로 사용하도록 쉽게 선택하고 다음을 사용하여 나머지 페이지에 글로벌 헤더를 사용할 수 있습니다. Divi 테마 생성기 .
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.
주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
