Divi에서 슬라이딩 및 반응형 사이드 메뉴를 만들고 싶으십니까?
생성할 때 사이트 웹, 당신은 종종 어떤 유형의 헤더를 만들지 궁금해합니다. 웹에서 가장 많이 사용되는 것은 상단의 가로 메뉴바지만, 슬라이딩 메뉴와 같은 다른 옵션도 있습니다.
슬라이딩 메뉴는 대부분 전역 머리글이 차지하는 공간을 제한하는 데 도움이 됩니다. 따라서 슬라이드 아웃 메뉴가 표시되도록 할 수 있습니다. 방문자 오른쪽 상단 모서리에 있는 햄버거 아이콘을 클릭합니다.
따라서 슬라이드 아웃 메뉴를 사용하면 추가 상호 작용을 추가할 수 있습니다. 사이트 웹.
따라서 이 튜토리얼에서는 Divi의 테마 빌더를 사용하여 테마를 만드는 방법을 보여줍니다.
시작하자!
측량
이 튜토리얼을 시작하기 전에 먼저 얻을 결과를 살펴보겠습니다.
Theme Builder로 이동하여 전역 헤더를 만듭니다.
테마 빌더로 이동
시작하려면 WordPress 대시보드에 있는 Divi 메뉴에서 테마 빌더로 이동하여 "전체 헤더 추가"를 클릭하십시오.
전역 헤더 생성
'전체 헤더 만들기'를 선택하여 계속합니다.
헤더 스타일 만들기
섹션 설정
배경색
템플릿 편집기에 들어가면 섹션이 표시됩니다. 이 섹션을 열고 배경색을 투명하게 만듭니다.
- 배경: rgba(255,255,255,0)
간격
스타일 탭으로 전환하고 모든 아래쪽 및 위쪽 여백을 제거합니다.
- 내부 여백 정점: 0px
- 하단 내부 여백: 0px
글
다음으로 고급 탭으로 이동하여 위치 설정을 변경하여 섹션의 위치를 변경합니다.
- 위치: 고정
- 위치: 상단 중앙
첫 번째 줄 추가
기둥의 구조
섹션 설정을 완료했으면 다음 열 구조를 사용하여 새 행을 추가합니다.
크기 조정
아직 모듈을 추가하지 않고 행 설정을 열고 다음과 같이 크기 설정을 변경합니다.
- 최대 너비: 97%
- 최대 너비: 100%
간격
간격 설정을 변경합니다.
- 최대 내부 마진: 1%
- 하단 내부 여백: 0px
주요 요소
다음으로 고급 탭으로 이동하여 줄의 기본 요소에 CSS 코드 두 줄을 추가합니다. 이렇게 하면 수직으로 정렬하는 데 도움이 됩니다. 내용 우리 행에 있는 열의
display: flex;
align-items: center;
열 1에 이미지 모듈 추가
로고 다운로드
1열의 이미지 모듈부터 시작하여 모듈을 추가할 시간입니다. 로고를 업로드하세요.
열 3에 텍스트 모듈 추가
콘텐츠 영역에 공백 3개 추가
<spanclass="line line-1"></span>
<spanclass="line line-2"></span>
<spanclass="line line-3"></span>
배경색
모듈의 배경색을 수정합니다.
- 배경: rgba(0,0,0,0.04)
텍스트 설정
그런 다음 스타일 탭으로 전환하고 텍스트 줄 높이를 제거합니다. 이렇게 하면 추가한 범위를 완전히 제어하는 데 도움이 됩니다.
- 텍스트 줄 높이: 0em
크기 조정
모듈 크기 조정 매개변수를 수정할 것입니다.
- 최대 너비: 120픽셀
- 텍스트 정렬: 오른쪽
간격
그리고 모듈을 정사각형으로 변환하여 모듈 매개변수를 완성합니다. 이를 위해 간격 설정에서 맞춤 패딩 값을 사용합니다.
- 내부 여백 정점: 40px
- 하단 내부 여백: 60px
- 왼쪽 내부 여백: 40px
- 내부 여백 오른쪽: 40px
두 번째 줄 추가
기둥의 구조
다음 줄! 우리는 이 라인을 사용하여 전체 슬라이딩 메뉴를 디자인할 것입니다. 다음 열 구조를 사용합니다.
배경색
모듈을 추가하지 않고 행 설정을 열고 배경색을 다음과 같이 변경합니다.
- 배경: #e7e0e2
배경 이미지
패턴이 있는 배경 이미지도 사용합니다. 원하는 배경 패턴을 사용할 수 있습니다.
- 배경 이미지 크기: 실제 크기
- 배경 이미지 위치: 중앙
- 반복 배경 이미지: 반복
크기 조정
그런 다음 스타일 탭으로 전환하고 그에 따라 크기 설정을 수정합니다.
- 사용자 지정 거터 너비 사용: 예
- 열 간격: 1
- 최대 너비: 20%(데스크톱), 40%(태블릿), 60%(휴대폰)
- 높이: 100vh
간격
또한 다양한 화면 크기에서 간격 설정을 변경합니다.
- Summit 내부 여백: 10 vw(데스크톱), 30 vw(태블릿), 40 vw(휴대폰)
경계
그리고 왼쪽 테두리를 추가하여 라인 매개변수를 완성합니다.
- 왼쪽 테두리 너비: 10px
- 왼쪽 테두리 색상: #24394a
- 왼쪽 테두리 스타일: 이중
열에 텍스트 모듈 추가
콘텐츠 추가
이제 첫 번째 텍스트 모듈 메뉴 항목을 추가할 시간입니다! 상자에 사본 추가 내용.
링크 추가
메뉴 항목에 관련 링크를 추가하여 계속하십시오.
- 모듈 링크 URL: #
배경색
그런 다음 배경색을 변경합니다.
- 배경: rgba(216,210,212,0.35)
텍스트 설정
그런 다음 Style'3 탭으로 전환하고 다음과 같이 텍스트 설정을 변경합니다.
- 텍스트 글꼴: Domine
- 소프트 라이트 텍스트: 굵은 텍스트
- 텍스트 색상 텍스트: #000000
- 텍스트 텍스트 크기: 1vw(데스크톱), 2vw(태블릿), 3vw(전화)
- 텍스트 정렬: 가운데
간격
다양한 화면 크기에 맞춤 간격 값을 추가하여 모듈 설정을 완료합니다.
- 하단 여백: 1vw(데스크톱), 2vw(태블릿), 3vw(전화)
- 최대 내부 마진: 1vw
- 하단 내부 여백: 1vw
복제 텍스트 모듈(메뉴 항목당 1개 모듈)
첫 번째 메뉴 항목 텍스트 모듈을 완료하면 필요한 만큼 복제할 수 있습니다. 모듈이 창 높이를 초과하지 않는지 확인하십시오.
중복 텍스트 모듈 콘텐츠 및 링크 편집
수정 내용 및 각 중복 텍스트 모듈의 링크.
열에 버튼 모듈 추가
복사본 추가
이 행에서 필요한 마지막 모듈은 Button 모듈입니다. 원하는 사본을 추가하십시오.
링크 추가
또한 링크를 추가하십시오.
- 버튼 링크 URL: #
조정
스타일 탭으로 전환하고 버튼 정렬을 변경합니다.
- 버튼 정렬: 중앙
버튼 설정
다음과 같이 Button 모듈을 사용자 지정하여 계속 진행합니다.
- 버튼에 사용자 정의 스타일 사용: 예
- 버튼 텍스트 크기: 0,7 vw(데스크톱), 1,5 vw(태블릿), 2,5 vw(전화)
- 버튼 텍스트 색상: #000000
- 배경 버튼: rgba(0,0,0,0)
- 버튼 테두리 색상: #24394a
- 테두리 반경 버튼: 0픽셀
- 버튼 문자 간격: 4px
- 글꼴 버튼: 열기 없음
- 소프트 라이트 버튼: 굵은 텍스트
- 스타일 복사 버튼: TT
간격
그리고 다양한 화면 크기에 맞춤 간격 값을 추가하여 모듈 설정을 완료합니다.
- 최고 마진: 5vw
- 최대 내부 마진: 1vw(데스크톱), 2vw(태블릿), 3vw(휴대폰)
- 내부 여백 하단: 1vw(데스크톱), 2vw(태블릿), 3vw(전화)
- 내부 여백 왼쪽: 1,8 vw(데스크톱), 3 vw(태블릿), 4 vw(휴대폰)
- 오른쪽 안쪽 여백: 1,8 vw(데스크톱), 3 vw(태블릿), 4 vw(휴대폰)
슬라이딩 기능 추가
메뉴 아이콘 텍스트 모듈에 CSS ID 추가
이제 모든 요소가 준비되었으므로 반응형 슬라이딩 메뉴 효과를 만들 차례입니다! 먼저 첫 번째 행의 세 번째 열에 있는 텍스트 모듈(범위 포함)을 열고 고급 탭에서 사용자 정의 CSS ID를 사용합니다. 이 CSS ID를 사용하여 코드에서 클릭 기능을 생성합니다.
- CSS ID: 슬라이드인 오픈
라인 #2에 CSS 클래스 추가
그런 다음 두 번째 줄을 열고 고급 탭으로 이동하여 사용자 지정 CSS 클래스를 추가합니다. 클릭하면 선이 미끄러집니다.
- CSS 클래스: 슬라이드인 메뉴 컨테이너
라인 #2의 위치 변경
우리는 또한 이 라인을 재배치할 것입니다. 가로 오프셋이 크기 설정에서 다양한 화면 크기의 선 너비와 어떻게 일치하는지 확인하십시오.
- 위치: 절대
- 위치: 오른쪽 상단
- 수평 오프셋: -20%(데스크톱), -40%(태블릿), -60%(휴대폰)
라인 2의 불투명도 변경
그리고 기본 상태에서 불투명도를 0으로 가져옵니다.
opacity: 0;
첫 번째 행의 두 번째 열에 코드 모듈 추가
CSS 코드 삽입
클릭 기능 효과를 만들고 햄버거 아이콘의 막대 스타일을 지정하려면 CSS 코드가 필요합니다. 첫 번째 행의 두 번째 열에 코드 모듈을 추가하고 스타일 태그 사이에 다음 CSS 코드 줄을 배치합니다. 아래 인쇄 화면에서 볼 수 있듯이:
#slide-in-open{
cursor: pointer;
}
.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.line-2{
top: 10px;
}
.line-3{
top: 20px;
}
#slide-in-open.open .line-1{
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#slide-in-open.open .line-2{
display: none;
}
#slide-in-open.open .line-3{
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.slide-in-menu {
right: 0!important;
opacity: 1!important;
}
.slide-in-menu-container {
-webkit-transition: all0.5s ease !important;
-moz-transition: all0.5s ease !important;
-o-transition: all0.5s ease !important;
-ms-transition: all0.5s ease !important;
transition: all0.5s ease !important;
}
jQuery 코드 삽입
클릭 기능을 위한 JQuery도 추가해야 합니다. 당신이 스크립트 태그 사이에 코드 배치 , 아래 인쇄 화면에서 볼 수 있듯이:
jQuery(function($){ $('#slide-in-open').click(function(){ $(this).toggleClass('open'); $('.slide-in-menu-container') .toggleClass('메뉴에서 슬라이드'); }); });
테마 빌더 변경 사항을 저장하고 웹 사이트에 결과 표시
전체 헤더의 모든 요소를 완료했으면 모든 변경 사항을 저장하고 사이트에 결과를 표시하기만 하면 됩니다!
측량
모든 단계를 거쳤으므로 이제 결과를 마지막으로 살펴보겠습니다.
결론
결론적으로 이 글에서는 Divi의 테마 빌더를 사용하여 반응형 슬라이딩 메뉴를 만드는 방법을 보여 드렸습니다. 이를 위해 Divi의 최고의 내장 요소 및 옵션을 맞춤형 클릭 기능 코드와 결합했습니다. 따라서 슬라이드 아웃 메뉴 디자인에 집중할 수 있고 코드가 전역 헤더의 기능적 부분을 처리하도록 할 수 있습니다!
질문이나 제안이 있으시면 아래 댓글 섹션에 댓글을 남겨주세요.
