Divi에서 전각 메뉴 모듈에 반응형 로고를 추가하는 방법

인터넷 트래픽의 50% 이상이 모바일 장치에서 발생한다는 사실을 알고 계셨습니까? 즉, 웹사이트의 모바일 버전은 매우 중요하며 누군가가 귀하의 페이지를 방문하는 주요 방법일 수도 있습니다. 웹사이트가 반응형이고 모바일 친화적인지 확인하는 것은 웹사이트 디자인의 필수 단계입니다. 이 튜토리얼에서는 Divi의 내장 반응형 옵션을 사용하여 전폭 메뉴 모듈에 반응형 로고를 추가하는 방법을 보여줍니다. 이렇게 하면 더 큰 화면에 나타날 더 크거나 복잡한 로고와 더 작은 화면에 나타날 더 작거나 간단한 로고를 추가할 수 있습니다.

뛰어들자!

YouTube 채널 구독

엿보기

다음은 우리가 디자인할 내용의 미리보기입니다. 웹사이트의 데스크탑 버전에는 추가 텍스트가 있는 확장된 로고가 있고 로고의 모바일 버전에는 기본 로고 마크만 있습니다.

반응형 로고가 필요한 이유

튜토리얼을 시작하기 전에 웹사이트에 반응형 로고가 필요한 이유를 살펴보겠습니다.

먼저 반응형 로고란 무엇입니까? 반응형 로고는 로고의 변형으로 더 작거나 단순하거나 축약되거나 더 작은 크기에서 더 잘 보이고 가독성이 있도록 재배열될 수 있습니다. 로고에 세부적인 요소가 너무 많으면 작은 크기에서는 제대로 표시되지 않을 수 있습니다. 반응형 로고의 작은 글꼴 크기와 추가 타이포그래피도 작은 화면에서 읽기 어려울 수 있습니다. 웹사이트에 사용자의 화면 크기에 맞춘 반응형 로고를 구현하면 어떤 일이 있어도 브랜드 아이덴티티를 명확하게 표현할 수 있습니다. 반응형 로고의 좋은 예를 보려면 이 웹사이트를 살펴보세요!

시작하는 데 필요한 것

먼저 Divi 테마를 설치 및 활성화하고 웹사이트에 최신 버전의 Divi가 있는지 확인합니다. 다음으로, 최소한 두 가지 버전의 로고가 있는지 확인하십시오. 하나는 사이트의 데스크톱 보기용이고 다른 하나는 모바일 보기용입니다. 마지막으로 Divi's High School 레이아웃 팩의 머리글 및 바닥글 템플릿을 다운로드합니다.

이제 시작할 준비가 되었습니다!

Divi에서 전각 메뉴 모듈에 반응형 로고를 추가하는 방법

머리글 및 바닥글 레이아웃 가져오기

사이드바의 Divi 메뉴에서 테마 빌더로 이동합니다. 이식성 아이콘을 선택하여 고등학교 머리글 및 바닥글 레이아웃을 가져옵니다. 가져오기 탭을 선택하고 레이아웃 파일을 선택합니다. 그런 다음 Divi 테마 빌더 템플릿 가져오기를 선택합니다.

헤더를 편집하고 테마 빌더에 반응형 로고를 추가합니다. 헤더를 편집하려면 연필 아이콘을 클릭하십시오.

전체 너비 메뉴 모듈 만들기

전각 섹션 추가

원래 메뉴는 표준 메뉴 모듈로 구축되었으므로 전체 너비 메뉴 모듈을 추가하려면 레이아웃을 수정해야 합니다. 먼저 기존 메뉴 아래의 전체 헤더에 전체 너비 섹션을 추가합니다.

전체 너비 섹션 설정에서 고급으로 이동한 다음 스크롤 효과로 이동합니다.

• 고정 위치: 상단에 고정

다음으로 배경색을 추가합니다.

• 배경색: #f5f0eb

끈적 끈적한 배경에 다른 색상을 추가하십시오.

• 고정 배경색: #ffffff

전각 메뉴 모듈 추가

이제 전체 너비 메뉴 모듈을 추가해 보겠습니다.

모듈 설정을 열고 배경을 제거하십시오.

원본 메뉴의 모양을 쉽게 복제하기 위해 스타일 복사 기능을 사용하여 일부 사용자 정의 설정을 복사할 수 있습니다. 원래 메뉴에 대한 설정을 연 다음 메뉴 텍스트 스타일을 마우스 오른쪽 버튼으로 클릭하고 메뉴 텍스트 스타일 복사를 선택합니다.

복사가 완료되면 전각 메뉴 모듈에 대해 세 개의 점을 클릭한 다음 메뉴 텍스트 스타일 붙여넣기를 선택합니다.

이제 드롭다운 메뉴 설정으로 동일한 단계를 반복합니다. 원래 메뉴에 대한 설정을 연 다음 드롭다운 메뉴 스타일을 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴 스타일 복사를 선택합니다. 전각 메뉴 모듈의 점 3개를 클릭한 다음 드롭다운 메뉴 스타일 붙여넣기를 선택합니다.

아이콘 스타일에 대해 한 번 더 반복합니다. 원래 메뉴에 대한 설정을 연 다음 아이콘 스타일을 마우스 오른쪽 버튼으로 클릭하고 아이콘 스타일 복사를 선택합니다. 전각 메뉴 모듈의 점 세 개를 클릭한 다음 아이콘 스타일 붙여넣기를 선택합니다.

텍스트 정렬을 오른쪽으로 설정합니다.

• 텍스트 정렬: 오른쪽

디자인에서 로고 최대 높이를 설정한 다음 크기 조정을 선택합니다.

• 로고 최대 높이: 50px

사용자 정의 CSS 아래의 메뉴 링크 섹션에 다음 CSS를 추가하십시오.

padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;

마지막으로 위쪽 및 아래쪽 패딩을 설정합니다.

• 패딩 탑: 10px
• 패딩-하단:10px

이제 원래 메뉴 섹션을 삭제하십시오.

반응형 로고 추가

이제 반응형 로고를 추가합니다. 고맙게도 Divi는 내장된 반응형 옵션으로 이것을 쉽게 만듭니다.

일반에서 로고 설정을 열고 데스크탑 버전의 로고를 업로드하십시오.

반응형 옵션을 사용하려면 전화 아이콘을 선택한 다음 모바일 로고를 반응형 로고로 바꿉니다.

미리 만들어진 레이아웃으로 새 페이지 만들기

반응형 로고가 있는 전체 너비 메뉴를 보려면 Divi 라이브러리에서 미리 만들어진 레이아웃으로 새 페이지를 만들어 보겠습니다. 이 디자인의 경우 High School Layout Pack의 High School 홈 페이지를 사용하여 머리글과 바닥글을 일치시킵니다.

웹사이트에 새 페이지를 추가하고 제목을 지정한 다음 Divi Builder 사용 옵션을 선택합니다. 머리글 및 바닥글 레이아웃을 전역 머리글 및 바닥글로 가져왔으므로 이 페이지의 기본 레이아웃을 사용합니다.

이 예에서는 Divi 라이브러리에서 미리 만들어진 레이아웃을 사용하므로 레이아웃 찾아보기를 선택합니다.

고등학교 홈페이지 레이아웃을 검색하여 선택합니다.

이 레이아웃 사용을 선택하여 페이지에 레이아웃을 추가합니다.

최종 결과

이제 최종 디자인을 살펴보겠습니다.

마지막 생각들

모바일 친화적이고 반응이 빠른 웹사이트를 갖는 것이 그 어느 때보다 중요합니다. 그리고 Divi에 내장된 반응형 옵션 덕분에 그 어느 때보다 쉽게 ​​구축할 수 있습니다! 반응형 로고를 사용하면 화면 크기에 관계없이 브랜드 아이덴티티가 항상 명확해집니다. Divi의 반응형 옵션에 대해 자세히 알아보려면 반응형 평가 콘텐츠에 대한 이 자습서를 확인하십시오. 반응형 디자인을 웹사이트에 어떻게 구현했습니까? 댓글에서 여러분의 생각을 듣고 싶습니다!