Divi로 마우스를 가져갈 때 확장 고정 메뉴를 만드는 방법

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

이번 주에는 진행 중인 Divi 디자인 이니셔티브의 일환으로 Divi의 Mechanic Layout Pack을 사용하여 마우스 오버 시 확장되는 고정 메뉴를 만드는 방법을 보여 드리겠습니다. 처음부터 다시 만들고 만들고 있는 모든 종류의 웹 사이트에 적용할 수 있는 두 가지 디자인 예제를 처리합니다! 메뉴는 데스크톱 화면 크기에서 마우스를 가져가면 표시되고 모바일 장치를 클릭하면 활성화됩니다.

가자!

시사

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

예 #1

데스크탑

이동하는

예 #2

데스크탑

이동하는

일반 단계

고정 탐색 비활성화

Divi 테마 옵션으로 이동

몇 가지 일반적인 단계부터 시작하겠습니다. 이 단계는 두 예에서 동일하며 원하는 결과를 얻는 데 필요합니다.

페이지 하단에서 확장 고정 메뉴를 사용할 계획이라면 상단의 기본 메뉴 표시줄을 생략할 수 있습니다. 그러려면 Divi의 테마 옵션으로 이동해야 합니다.

고정 탐색 비활성화

페이지 상단에 공간이 남지 않도록 고정 탐색 모음 옵션을 비활성화할 수 있습니다.

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

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

페이지 설정 열기

확장 고정 메뉴를 추가할 페이지로 이동하여 페이지 설정을 엽니다.

맞춤 CSS 추가

페이지에 다음 CSS 코드 줄을 추가하여 기본 메뉴를 숨깁니다.

#main-header {
display: none;
}

페이지 끝에 새 섹션 추가

어떤 예를 다시 만들든 기본 단계 중 일부는 동일하게 유지됩니다. 첫 번째 단계는 페이지 하단에 일반 섹션을 추가하는 것입니다.

간격

섹션 설정을 열고 모든 사용자 정의 상단 및 하단 패딩을 제거하십시오.

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

새 행 추가

열 구조

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

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 행이 화면의 전체 너비를 차지하도록 합니다.

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

간격

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

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

주요 요소

행의 기본 요소에 두 줄의 CSS 코드를 추가하여 전체 행이 페이지 하단에 고정되도록 합니다.

bottom: 0px;
position: fixed;

Z 인덱스

그리고 행의 가시성 설정에서 Z 인덱스를 높여 행(및 향후 단계에서 추가할 텍스트 모듈)이 모든 페이지 콘텐츠의 맨 위에 유지되도록 할 것입니다.

• Z 인덱스: 99

열에 코드 모듈 추가

스타일 태그 사이에 CSS 코드 추가

일반 단계의 마지막 부분은 새 행에 코드 모듈을 추가하는 것입니다. 이 코드 모듈 내부에 추가한 CSS 코드는 호버링 시 표시 효과를 얻는 데 도움이 됩니다. 모듈 내부에 다음 CSS 코드 줄을 붙여넣습니다.

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

예제 #1 다시 만들기

열에 텍스트 모듈 추가

콘텐츠 추가

이제 모든 단계를 거쳤으므로 첫 번째 것부터 시작하여 두 가지 다른 디자인 예제에 집중할 수 있습니다! 행의 열에 텍스트 모듈을 추가하십시오. 콘텐츠 상자에서 단락 스타일을 사용하여 '≡ 메뉴' 사본을 표시합니다. 그런 다음 모든 메뉴 항목을 순서가 지정되지 않은 목록에 배치합니다. 또한 각 페이지 제목에 개별적으로 링크를 추가합니다.

기본 배경색

모듈의 배경 설정으로 이동하여 배경색을 변경합니다.

• 배경색: #ffffff

호버 배경색

마우스를 가져갈 때 이 배경색을 수정합니다.

• 배경색: rgba(255,255,255,0.83)

그라데이션 배경

기본 그라디언트 배경도 추가하십시오.

• 색상 1: rgba(255,255,255,0)
• 색상 2: #ffffff
• 최종 위치: 60%

기본 텍스트 설정

계속해서 디자인 탭으로 이동하여 텍스트 설정을 수정합니다.

• 텍스트 글꼴: 칸드
• 텍스트 글꼴 두께: 굵게
• 텍스트 색상: #021827
• 텍스트 크기: 3vh
• 텍스트 방향: 중앙

호버 텍스트 설정

마우스 오버 시 일부 텍스트 설정을 수정합니다.

• 텍스트 색상: rgba(255,255,255,0)
• 텍스트 크기: 0vh

링크 텍스트 설정

그런 다음 링크 텍스트 설정으로 이동하여 링크 텍스트 색상을 변경합니다.

• 링크 텍스트 색상: #000000

기본 목록 텍스트 설정

기본 목록 텍스트 설정으로 이동하여 원하는 대로 스타일을 지정합니다. 기본 상태에서 텍스트 크기로 '0px'를 사용하고 있는지 확인하십시오.

• 무순 목록 글꼴: Khand
• 정렬되지 않은 목록 글꼴 스타일: 대문자
• 정렬되지 않은 목록 텍스트 정렬: 가운데
• 정렬되지 않은 목록 텍스트 색상: rgba(255,255,255,0)
• 정렬되지 않은 목록 텍스트 크기: 0px
• 순서 없는 목록 줄 높이: 0em
• 정렬되지 않은 목록 스타일 위치: 내부

호버 목록 텍스트 설정

그런 다음, 메뉴 항목이 표시되도록 마우스를 가져갈 때 일부 값을 수정합니다.

• 정렬되지 않은 목록 텍스트 색상: #000000
• 정렬되지 않은 목록 텍스트 크기: 2vh
• 순서 없는 줄 높이: 2.1em

기본 간격

다음 간격 설정으로 이동하여 텍스트 모듈에 모양을 지정합니다.

• 왼쪽 여백: 45vw(데스크톱), 39vw(태블릿), 33vw(전화)
• 오른쪽 여백: 45vw(데스크톱), 39vw(태블릿), 33vw(전화)
• 상단 패딩: 2vw(데스크톱), 4vw(태블릿), 6vw(전화)
• 하단 패딩: 2vw(데스크톱), 4vw(태블릿), 6vw(전화)

호버 간격

호버에서 이러한 동일한 값을 수정합니다.

• 왼쪽 여백: 14vw
• 오른쪽 여백: 14vw
• 탑 패딩: 8vw
• 하단 패딩: 8vw

기본 테두리

테두리 설정으로 이동하여 둥근 모서리 각각의 값이 '0px'인지 확인하십시오.

호버 테두리

둥근 모서리에서 호버 옵션을 활성화하고 왼쪽 상단 및 오른쪽 상단 값을 변경합니다.

• 왼쪽 상단: 50vw
• 오른쪽 상단: 50vw

박스 섀도우

상자 그림자를 사용하여 모듈에 약간의 깊이를 부여하여 계속합니다. 이렇게 하면 메뉴가 페이지에서 눈에 띄지 않게 표시되지 않습니다.

• 상자 그림자 흐림 강도: 1000ms
• 그림자 색상: rgba(0,0,0,0.68)

CSS 클래스

모듈에도 CSS 클래스를 추가하고 있습니다.

• CSS 클래스: dt-menu

전환

마지막으로 전환 설정에서 전환 시간을 줄이십시오.

• 전환 시간: 100ms

예제 #2 다시 만들기

열에 텍스트 모듈 추가

콘텐츠 추가

두 번째 예시로! 여기에서는 다시 단락 텍스트 스타일을 사용하여 '≡ 메뉴'를 추가하고 순서가 지정되지 않은 목록을 사용하여 메뉴 항목을 추가합니다. 또한 각 메뉴 항목에 개별적으로 링크를 추가할 것입니다.

기본 배경색

배경 설정으로 이동하여 배경색을 변경합니다.

• 배경색: #ffffff

호버 배경색

마우스 오버 시 배경색을 수정합니다.

• 배경색: #f71535

기본 텍스트 설정

그런 다음 디자인 탭으로 이동하여 단락 사본의 모양을 일부 변경합니다.

• 텍스트 글꼴: 칸드
• 텍스트 색상: #021827
• 텍스트 크기: 3vh

호버 텍스트 설정

마우스 오버 시 이러한 설정을 수정합니다.

• 텍스트 색상: rgba(255,255,255,0)
• 텍스트 크기: 0vh

링크 텍스트 설정

텍스트 설정으로 이동하여 링크 텍스트 색상을 변경합니다.

• 링크 텍스트 색상: #ffffff

기본 목록 텍스트 설정

정렬되지 않은 목록 항목의 디자인 설정도 변경합니다.

• 무순 목록 글꼴: Khand
• 정렬되지 않은 목록 글꼴 스타일: 대문자
• 정렬되지 않은 목록 텍스트 정렬: 가운데
• 정렬되지 않은 목록 텍스트 색상: rgba(255,255,255,0)
• 정렬되지 않은 목록 텍스트 크기: 0px
• 순서 없는 목록 줄 높이: 0em
• 정렬되지 않은 목록 스타일 위치: 내부

호버 목록 텍스트 설정

마우스를 가져갈 때 이러한 값 중 일부를 수정합니다.

• 정렬되지 않은 목록 텍스트 색상: #ffffff
• 정렬되지 않은 목록 텍스트 크기: 2vh
• 순서 없는 목록 줄 높이: 2.1em

기본 간격

그런 다음 간격 설정으로 이동하여 모듈에 약간의 공간을 제공합니다.

• 오른쪽 여백: 88vw(데스크탑 및 태블릿), 71vw(전화)
• 상단 패딩: 6vw(데스크톱), 10vw(태블릿), 18vw(전화)
• 하단 패딩: 4vw(데스크톱), 10vw(태블릿), 12vw(전화)
• 왼쪽 패딩: 1vw

호버 간격

마우스 오버 시 값을 수정합니다.

• 오른쪽 여백: 59vw
• 탑 패딩: 13vw
• 하단 패딩: 8vw
• 왼쪽 패딩: 1vw
• 오른쪽 패딩: 13vw

국경

그리고 이 사분원 디자인을 만들기 위해 테두리 설정에서 오른쪽 상단 테두리를 변경할 것입니다.

• 오른쪽 상단: 50vw

박스 섀도우

또한 페이지에 깊이를 만들기 위해 상자 그림자를 추가합니다.

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

CSS 클래스

그런 다음 고급 탭에 CSS 클래스를 추가합니다.

• CSS 클래스: dt-menu

전환

그리고 고급 탭에서 전환 시간을 줄여 빠른 전환을 만듭니다.

• 전환 시간: 100ms

시사

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

예 #1

데스크탑

이동하는

예 #2

데스크탑

이동하는

마지막 생각들

이 게시물에서는 Divi의 Mechanic Layout Pack을 사용하여 확장 고정 메뉴를 만드는 방법을 보여 드렸습니다. 만들고 있는 모든 종류의 웹 사이트에서 다시 만들고 사용할 수 있는 두 가지 디자인 예제를 처리했습니다! 매주 디자인 도구 상자에 추가 기능을 추가하려고 노력하는 이 진행 중인 Divi 디자인 이니셔티브를 즐기시기 바랍니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!

Divi에 대해 자세히 알아보고 더 많은 무료 Divi를 받고 싶다면 이메일 뉴스레터와 YouTube 채널을 구독하세요. 그러면 항상 이 무료 콘텐츠를 가장 먼저 알고 혜택을 받을 수 있습니다.