Divi로 웹사이트를 위한 스와이프 메뉴바를 만드는 방법

매주 다음 프로젝트에 사용할 수 있는 새로운 무료 Divi 레이아웃 팩을 제공합니다. 레이아웃 팩 중 하나의 경우 웹사이트를 한 단계 업그레이드하는 데 도움이 되는 사용 사례도 공유합니다.

이번 주에 진행 중인 Divi 디자인 이니셔티브의 일환으로 모기지 브로커 레이아웃 팩을 사용하여 웹사이트의 스와이프 메뉴 모음을 만드는 방법을 보여 드리겠습니다. 이것은 웹사이트에 상호작용을 추가하는 좋은 방법입니다. 모든 화면 크기에서 동일한 사용자 경험을 갖게 되며 구축 중인 모든 종류의 웹 사이트에 이 기술을 사용할 수 있습니다.

가자!

시사

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

데스크탑

이동하는

Divi 테마 옵션에서 고정 탐색 비활성화

Divi 테마 옵션으로 이동

시작하자! 가장 먼저 해야 할 일은 WordPress 웹사이트에서 Divi 테마 옵션으로 이동하는 것입니다.

고정 탐색 비활성화

여기에서는 고정 탐색 모음을 비활성화합니다. 이 자습서의 뒷부분에서 페이지의 기본 메뉴 표시줄을 완전히 제거하려면 이 옵션을 비활성화해야 합니다.

• 고정 탐색 모음: 비활성화됨

페이지에서 기본 메뉴 모음 숨기기

모기지 브로커 레이아웃 팩 방문 페이지에서 Visual Builder 활성화

계속해서 모기지 브로커 레이아웃 팩의 방문 페이지를 사용하여 만든 페이지로 이동하고 Visual Builder를 활성화하십시오.

페이지 설정 열기

CSS 코드를 추가하여 페이지의 기본 메뉴 표시줄을 숨길 것입니다. 이 코드를 추가하려면 페이지 설정을 여세요.

기본 메뉴 모음을 숨기기 위해 사용자 정의 CSS 코드 추가

그런 다음 고급 탭으로 이동하여 사용자 정의 CSS 상자에 다음 CSS 코드 행을 배치합니다.

#main-header {
display: none;
}

이 코드를 추가하면 기본 메뉴 모음이 페이지에 표시되지 않도록 방지하는 데 도움이 됩니다.

Divi로 사용자 정의 메뉴 디자인 만들기

모든 화면 크기에서 영웅 섹션의 상단 패딩이 충분한지 확인하십시오.

이제 페이지에서 기본 메뉴 모음을 제거했으므로 대신 스와이프 메뉴 모음을 추가할 수 있습니다. 가장 먼저 해야 할 일은 페이지 상단에 충분한 여백이 있는지 확인하여 스와이프 메뉴 모음이 기존 콘텐츠와 겹치지 않도록 하는 것입니다. 특히 Mortgage Broker Layout Pack의 방문 페이지의 경우 열 1 사용자 지정 패딩이 모든 화면 크기에서 '180px'로 유지되도록 해야 합니다.

• 상단 패딩: 180px

페이지 하단에 새 일반 섹션 추가

맞춤 스와이프 메뉴 모음을 만들 시간입니다! 페이지 하단에 일반 섹션을 추가합니다.

간격

섹션 설정을 열고 기본 상단 및 하단 패딩을 모두 제거합니다.

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

행 추가

열 구조

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

배경색

행 설정을 열고 행 배경색을 흰색으로 변경합니다.

• 배경색: #ffffff

사이징

그런 다음 행 설정을 열고 행이 화면의 전체 너비를 차지하도록 크기 설정을 변경합니다.

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

간격

다음으로 모든 상단 및 하단 패딩을 제거합니다.

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

박스 섀도우

그리고 스와이프 메뉴 막대와 페이지 자체 사이에 충분한 깊이가 있는지 확인하기 위해 상자 그림자를 추가합니다.

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

이미지 모듈 추가

회사 로고 업로드

이미지 모듈부터 시작하여 스와이프 메뉴 모음에 표시하려는 모든 모듈을 추가할 시간입니다. 너비 226픽셀, 높이 100픽셀의 이미지 파일을 사용하여 로고를 업로드하세요.

조정

그런 다음 이미지 모듈의 디자인 탭으로 이동하여 이미지 정렬을 변경합니다.

• 이미지 정렬: 중앙

사이징

다음 이미지의 크기 설정을 변경합니다.

• 최대 너비: 75%(데스크톱), 100%(태블릿 및 휴대폰)

간격

그리고 이미지에 사용자 정의 상단 및 하단 패딩도 추가하십시오.

• 상단 패딩: 15px(태블릿), 25px(휴대폰)
• 하단 패딩: 15px(태블릿), 25px(휴대폰)

버튼 모듈 추가

사본 추가

두 번째로 필요한 모듈은 Button 모듈입니다. 원하는 사본을 추가하십시오.

조정

그런 다음 디자인 탭으로 이동하여 버튼 정렬을 변경합니다.

• 버튼 정렬: 중앙

버튼 설정

다음 버튼의 모양을 수정합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 0.8vw(데스크톱), 1.4vw(태블릿), 2.1vw(전화)
• 버튼 텍스트 색상: #ffffff
• 버튼 배경색: #40eccc
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 50px
• 버튼 문자 간격: 2px
• 버튼 글꼴: Lato
• 글꼴 두께: 무거움
• 글꼴 스타일: 대문자

간격

그리고 사용자 정의 여백 및 패딩 값을 사용하여 원하는 모양을 만듭니다.

• 상단 여백: 15px
• 하단 여백: 15px
• 상단 패딩: 15px
• 하단 패딩: 15px
• 왼쪽 패딩: 40px
• 오른쪽 패딩: 40px

텍스트 모듈 #1 추가

콘텐츠 상자에 메뉴 항목 추가

스와이프 메뉴 모음에 필요한 다음 모듈은 텍스트 모듈입니다. 여기서는 콘텐츠 상자에 페이지 제목을 추가합니다.

링크 추가

링크 설정으로 이동하여 텍스트 모듈에 올바른 링크를 추가하십시오.

배경색

다음으로 배경색을 수정합니다.

• 배경색: #f2f2f2

텍스트 설정

그런 다음 텍스트 설정을 변경합니다.

• 텍스트 글꼴: Lato
• 텍스트 글꼴 두께: 굵게
• 텍스트 색상: #000000
• 텍스트 크기: 0.9vw(데스크톱), 1.9vw(태블릿), 2.4vw(전화)
• 텍스트 방향: 중앙

간격

그리고 모듈에 사용자 정의 상단 및 하단 패딩도 추가하십시오.

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

복제 텍스트 모듈 x5배

텍스트 모듈 수정이 완료되면 계속해서 5번 복제할 수 있습니다.

사본 변경

이러한 중복 항목 각각에서 페이지 제목을 변경해야 합니다.

링크 변경

링크와 함께.

배경색 변경

다음 두 번째, 네 번째, 여섯 번째 메뉴 항목의 배경색을 수정합니다.

• 배경색: #ffffff

행에 사용자 정의 CSS 추가

주요 요소

이제 스와이프 메뉴 막대가 페이지 상단에 고정되도록 하려면 행의 기본 요소에 몇 줄의 CSS 코드를 추가해야 합니다.

position:fixed;
top: 0px;
z-index: 99;

열 주요 요소

또한 열을 스크롤할 수 있는 그리드로 바꾸고 있습니다. 아래 CSS 코드에서 볼 수 있는 백분율은 각 모듈이 그리드에서 차지하는 공간을 나타냅니다. 그리드가 다르게 보이도록 하려면 이 값을 수정할 수 있습니다.

overflow-x: scroll;
display: grid;
grid-template-columns: 15% 45% 25% 25% 25% 25% 25% 25%;

열 CSS 클래스

스크롤바를 없애기 위해 행에 CSS 클래스도 추가할 것입니다.

스크롤바 제거

페이지에서

페이지 설정을 열고 사용자 정의 CSS 상자에 다음 CSS 코드 행을 추가하여 페이지 자체에서 스크롤바를 제거할 수 있습니다.

.swipe-menu::-webkit-scrollbar {
display: none;
}

전체 웹사이트에서

각 페이지에서 스크롤바를 개별적으로 숨기는 동일한 단계를 반복하고 싶지 않다면 Divi 테마 옵션으로 이동하여 일반 탭을 아래로 스크롤하고 다음 줄을 추가하여 CSS 코드를 전체 웹사이트에 적용할 수도 있습니다. 사용자 정의 CSS 상자에 CSS 코드:

.swipe-menu::-webkit-scrollbar { display: none; }

전역 항목으로 섹션으로 저장

스와이프 메뉴 모음이 제대로 작동하면 Divi 라이브러리에 전역 항목으로 저장하고 다른 페이지에서도 사용할 수 있습니다!

시사

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

데스크탑

이동하는

마지막 생각들

이 게시물에서는 Divi를 사용하여 생성하는 모든 웹사이트에 대한 스와이프 메뉴 모음을 만드는 방법을 보여주었습니다. 이것은 웹사이트에 다른 차원을 추가하는 훌륭한 기술입니다. 이 튜토리얼은 진행 중인 Divi 디자인 이니셔티브의 일부로 매주 디자인 도구 상자에 추가 기능을 추가하려고 합니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!