Divi 페이지 디자인에 기본 메뉴 모음을 포함하는 방법

탐색은 웹사이트에서 사용자 경험의 중요한 부분입니다. 방문자가 미학을 타협하지 않고 웹사이트를 원활하게 탐색할 수 있도록 하는 것이 중요합니다. 기본적으로 WordPress 기본 메뉴 표시줄은 모든 페이지의 상단에 배치되며 따르기로 선택한 페이지 디자인과 별개로 간주됩니다. 그러나 대부분의 경우 전체 페이지 디자인에 메뉴를 포함하면 놀라운 결과를 얻을 수 있습니다. 웹 사이트에 보다 일관된 모양과 느낌을 제공합니다.

이 게시물에서는 Divi 페이지 디자인에 기본 메뉴 모음을 포함하는 방법을 보여 드리겠습니다. 이것은 기본 메뉴가 일반적으로 표시되는 방식에 대한 간단하지만 동적인 변경으로 모든 Divi 프로젝트에 고유한 모양을 가져옵니다.

가자!

YouTube 채널 구독

시사

다양한 화면 크기에서 최종 결과를 살펴보는 것으로 시작해 보겠습니다.

테마 커스터마이저 설정

테마 커스터마이저로 이동

디자인 구축을 시작하기 전에 테마 사용자 지정 프로그램의 몇 가지 변경 사항부터 시작하겠습니다. WordPress 대시보드 > 모양 > 사용자화 로 이동합니다.

배경 이미지 저장

상단에서 기본 메뉴 모음을 분리할 것이므로 일반적으로 차지하는 공간을 덮을 무언가가 필요합니다. 다음 배경 이미지를 사용하므로 컴퓨터에 저장하세요.

일반 설정에 배경 이미지 업로드

그런 다음 일반 설정 > 배경으로 이동하여 웹사이트의 배경에 이미지를 업로드합니다.

• Strech 배경 이미지: 사용
• 배경 위치: 고정

기본 메뉴 모음 설정

또한 준비된 기본 메뉴 모음을 Divi 디자인과 병합할 것입니다. 그렇게 하려면 먼저 기본 메뉴 모음 설정을 수정해야 합니다. 머리글 및 탐색 > 기본 메뉴 모음으로 이동하여 다음 설정을 사용합니다.

• 로고 최대 높이: 100
• 텍스트 크기: 18
• 문자 간격: -1
• 글꼴: Poppins
• 텍스트 색상: #333333
• 활성 링크 색상: #f55c83
• 배경색: rgba(255,255,255,0)
• 드롭다운 메뉴 배경색: #FFFFFF

새 페이지 추가

페이지 맞춤 CSS

기본 메뉴 표시줄이 페이지 디자인과 겹치도록 하려면 약간의 CSS 코드가 필요합니다. 겹침을 전체 웹사이트에 적용할지 아니면 특정 페이지에만 적용할지 선택할 수 있습니다. 한 페이지에만 추가하려면 페이지 설정에 다음 CSS 코드를 추가하세요.

#main-header {
margin-top: 140px;
}

새 섹션 추가

배경색

디자인을 시작하겠습니다! 새 페이지를 추가하고 Visual Builder로 전환한 다음 첫 번째 섹션을 추가하십시오. 다음 섹션 설정을 열고 배경색으로 'rgba(255,255,255,0.81)'를 추가합니다. 이렇게 하면 웹사이트 배경 이미지가 표시됩니다.

간격

계속해서 간격 설정으로 이동하여 다음 사용자 지정 여백 및 패딩을 추가합니다.

• 상단 및 하단 여백: 100px
• 왼쪽 및 오른쪽 여백: 60px
• 상단 패딩: 135px
• 하단 패딩: 0px

둥근 모서리

섹션의 각 모서리에도 '30px'를 추가하십시오.

국경

그런 다음 섹션에 상단 테두리를 추가합니다.

• 상단 테두리 너비: 35px
• 상단 테두리 색상: #333333

박스 섀도우

마무리하려면 매우 미묘한 상자 그림자를 추가하십시오.

• 상자 그림자 흐림 강도: 61px
• 상자 그림자 확산 강도: -13px

행 #1 추가

열 구조

행과 모듈을 추가할 시간입니다! 동일한 크기의 열 두 개를 사용하여 첫 번째 행을 추가합니다.

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 크기 조정 설정을 변경합니다.

• 이 행을 전체 너비로 만들기: 예
• 열 높이 균등화: 예

간격

다음에 맞춤 패딩을 추가합니다.

• 상단 패딩: 250px(데스크톱), 50px(태블릿 및 휴대폰)
• 하단 패딩: 200px(데스크톱), 100px(태블릿), 50px(전화)
• 열 1 왼쪽 패딩: 50px(데스크톱), 0px(태블릿 및 휴대전화)

열 1에 제목 텍스트 모듈 추가

H1 텍스트 설정

이제 모듈 추가를 시작할 수 있습니다. 새 제목 텍스트 모듈을 추가하여 첫 번째 열부터 시작하겠습니다.

• 제목 글꼴: Poppins
• 제목 글꼴 두께: 중간
• 제목 텍스트 크기: 120px(데스크톱), 80px(태블릿), 58px(전화)

사본의 일부에 다른 색상 추가

텍스트 탭으로 전환하고 스팬 태그를 사용하여 선택한 단어에 색상을 추가하여 제목에 있는 단어의 색상을 쉽게 변경할 수 있습니다.

열 1에 설명 텍스트 모듈 추가

텍스트 설정

이전 텍스트 모듈 바로 아래에 다음 텍스트 설정을 사용하여 설명 텍스트 모듈을 추가하십시오.

• 텍스트 글꼴: Poppins
• 텍스트 글꼴 두께: 일반
• 텍스트 크기: 20px(데스크톱), 15px(태블릿 및 휴대폰)
• 텍스트 줄 높이: 2em

간격

이 텍스트 모듈에는 추가 여백이 필요합니다.

• 상단 및 하단 여백: 50px

열 1에 버튼 모듈 추가

버튼 설정

이 열의 마지막 모듈은 버튼 모듈입니다. CTA 사본을 추가한 후 버튼 스타일을 변경합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 색상: #FFFFFF
• 그라디언트 색상 1: #f45085
• 그라디언트 색상 2: #f88c7e
• 기울기 방향: 137deg
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 40px
• 버튼 글꼴: Poppins
• 버튼 글꼴 두께: 일반
• 글꼴 스타일: 대문자

간격

다음으로 간격 설정을 열고 버튼에 여백과 패딩을 추가합니다.

• 하단 여백: 100px(데스크톱), 20px(태블릿 및 휴대폰)
• 상단 및 하단 패딩: 15px
• 왼쪽 및 오른쪽 패딩: 50px

박스 섀도우

마지막으로 매우 미묘한 상자 그림자를 사용하여 페이지에 깊이를 더할 것입니다.

• 상자 그림자 흐림 강도: 55px
• 상자 그림자 확산 강도: -4px
• 그림자 색상: rgba(84,84,84,0.25)

2열에 이미지 모듈 추가

이미지 저장 및 업로드

두 번째 열에는 이미지 모듈만 포함됩니다. 우리는 Divi의 디지털 마케팅 레이아웃 팩의 일부인 모형을 사용하고 있습니다. 계속해서 아래 이미지를 컴퓨터에 저장하십시오. 그런 다음 두 번째 열의 이미지 모듈에 추가합니다.

행 #2 추가

열 구조

두 번째 행을 추가할 시간입니다! 다음 열 구조를 선택하십시오.

열 1 배경색

그런 다음 행 설정을 열고 열 1 배경색으로 '#FFFFFF'를 추가합니다.

복사 버튼 그라데이션 배경

우리는 시간을 절약하고 이미 Button Module에 사용한 그래디언트를 복사할 것입니다. 그렇게 하려면 버튼 모듈을 열고 버튼 설정으로 이동하여 그라디언트 배경을 마우스 오른쪽 버튼으로 클릭하고 복사합니다.

2열에 그라데이션 배경 붙여넣기

그런 다음 행 설정으로 돌아가 두 번째 열에 그라데이션 배경을 붙여넣습니다.

3열 배경색

세 번째 열에는 '#FFFFFF' 배경색을 사용하고 있습니다.

사이징

다음으로 크기 조정 설정으로 이동하여 설정을 변경합니다.

• 사용자 정의 너비 사용: 예
• 맞춤 너비: 2600px
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

간격

추가 패딩도 필요합니다.

• 상단 및 하단 패딩: 0px
• 열 상단 및 하단 패딩: 30px

박스 섀도우

마지막으로 미묘한 상자 그림자를 사용합니다.

• 상자 그림자 흐림 강도: 61px
• 상자 그림자 확산 강도: -20px

Blurb 모듈 #1 추가

아이콘 선택

총 3개의 Blurb 모듈이 필요합니다. 하나부터 시작하여 시간을 절약하기 위해 나중에 복제합니다. 계속해서 첫 번째 열에 새 Blurb 모듈을 추가하십시오. 콘텐츠를 추가한 후 원하는 아이콘을 선택합니다.

아이콘 설정

그에 따라 아이콘 설정을 변경합니다.

• 아이콘 색상: #f55c83
• 아이콘 배치: 왼쪽
• 아이콘 글꼴 크기 사용: 예
• 아이콘 글꼴 크기: 88px(데스크톱 및 태블릿), 50px(전화)

제목 텍스트 설정

다음으로 제목 텍스트 설정을 열고 몇 가지를 변경합니다.

• 제목 글꼴: Poppins
• 제목 글꼴 두께: 중간
• 제목 텍스트 크기: 34px(데스크톱 및 태블릿), 23px(전화)

본문 설정

본문도 수정해야 합니다.

• 본문 글꼴: Poppins
• 본문 글꼴 두께: 일반
• 본문 텍스트 크기: 16px(데스크톱), 14px(태블릿 및 휴대폰)
• 바디 라인 높이: 2em

간격

그리고 더 미학적으로 매력적인 디자인을 만들려면 패딩을 추가하세요.

• 상단 패딩 및 하단 패딩: 100px
• 왼쪽 및 오른쪽 패딩: 50px(데스크톱 및 태블릿), 10px(전화)

Blurb 모듈을 두 번 복제하고 나머지 열에 배치

계속해서 Blurb 모듈을 두 번 복제하십시오. 그렇게 한 후 나머지 열에 배치하십시오.

열 2의 Blurb 모듈 변경

아이콘 색상 변경

세 번째 Blurb 모듈은 변경이 필요하지 않지만 두 번째 모듈은 변경이 필요합니다. 아이콘 색상을 흰색으로 변경하여 시작합니다.

텍스트 색상 변경

다음으로 텍스트 설정을 열고 텍스트 색상을 '밝음'으로 변경합니다.

고정 탐색 비활성화

기본 메뉴 모음이 디자인 내에서 제자리를 유지하도록 하려면 고정 탐색 모음도 비활성화해야 합니다. 그렇게 하려면 WordPress 대시보드 > Divi > 테마 옵션 > '고정 탐색 모음' 옵션을 비활성화하고 설정을 저장합니다 .

시사

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

마지막 생각들

이 게시물에서는 전체 Divi 페이지 디자인에 기본 메뉴 모음을 창의적으로 포함하는 방법을 보여주었습니다. 이 접근 방식은 웹 사이트에서 보다 일관된 모양과 느낌을 만드는 데 도움이 됩니다. 우리는 처음부터 예제도 만들었습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!