Divi Fullwidth Menu 모듈의 장바구니 및 검색 아이콘을 사용자 정의하는 방법을 알고 싶습니까?
당신의 메뉴 사이트 웹 당신의 가장 중요한 부분 중 하나입니다 사이트 웹 사용자가 탐색하는 방식에 직접적인 영향을 미칠 수 있기 때문입니다. 내용.
잘 디자인된 메뉴 모음은 탐색을 단순화하고 주요 페이지를 강조 표시하며 전반적인 사용자 경험을 개선함으로써 큰 차이를 만들 수 있습니다.
Divi의 "전체 너비 메뉴" 모듈은 원하는 대로 장바구니 및 검색 아이콘을 사용자 정의할 수 있도록 하여 뛰어난 유연성을 제공합니다.
이 튜토리얼에서는 장바구니 및 검색 아이콘에 대해 서로 다른 스타일의 "전폭 메뉴" 모듈에 대한 세 가지 다른 디자인을 보여 드리겠습니다.
시작하자!
측량
다음은 우리가 디자인할 내용의 미리보기입니다.
첫 번째 디자인
첫 번째 디자인의 경우 중앙에 있는 메뉴 구조를 선택하여 아이콘 중 하나를 왼쪽에 배치하고 다른 하나를 오른쪽에 배치합니다. 또한 호버에서 색상을 변경합니다.
두 번째 디자인
두 번째 디자인의 경우 두 개의 아이콘을 오른쪽에 배치하고 마우스를 가져갈 때 색상을 변경합니다.
세 번째 디자인
세 번째 디자인의 경우 추가 CSS를 사용하여 아이콘을 사용자 정의합니다.
Divi의 "전각 메뉴" 모듈의 장바구니 및 검색 아이콘 사용자 정의
전역 헤더 생성
세 가지 메뉴 디자인 각각에 대해 테마 디비의.
이렇게 하려면 WordPress 대시보드에서 Divi > 테마 빌더
그런 다음 클릭 전역 헤더 추가
그런 다음 선택 전역 헤더 빌드
새 전체 너비 섹션을 삽입합니다.
그런 다음 이전 섹션을 삭제합니다.
모듈 삽입 전폭 메뉴.
메뉴에서 로고를 업로드하십시오.
이제 계속할 준비가 되었습니다.
첫 번째 디자인
첫 번째 디자인은 Divi의 내장 호버 효과를 통합하여 호버 시 텍스트 및 아이콘의 색상을 변경합니다. 시작하자.
또한보십시오: Divi: 메뉴 모듈에 햄버거 아이콘을 추가하는 방법
모듈 설정을 열고 배경을 추가하여 시작하십시오.
- 배경: #fbf9f4
탭으로 이동 디자인 로고 레이아웃을 선택합니다.
- 스타일: 인라인 중심 로고
이제 일부 메뉴 텍스트 설정을 변경해 보겠습니다.
- 활성 링크 색상: #09148c
- 메뉴 글꼴: Ruby
- 메뉴 글꼴 두께: 굵게
- 글꼴 스타일: TT 및 U (대문자 및 밑줄)
다음으로 메뉴의 글자색, 글자크기, 글자간격을 설정합니다.
- 메뉴 텍스트 색상: #000000
- 메뉴 텍스트 크기: 21px
- 문자 간격: 1px
이 메뉴에 호버 효과를 추가하고 싶으므로 호버 시 메뉴 텍스트의 색상을 변경합니다. 마우스 오버 시 다른 메뉴 텍스트 색상을 설정합니다.
- 메뉴 텍스트 색상(호버): #b70018
그런 다음 설정으로 이동하십시오. 드롭 다운 메뉴 탭 아래 디자인.
- 드롭다운 메뉴 배경색: #fbf9f4
- 드롭다운 메뉴 선 색상: #b70018
- 메뉴 텍스트 색상: #000000
드롭다운 메뉴의 텍스트 색상도 마우스 오버 시 변경되기를 원하므로 이 설정에 대한 마우스 오버 옵션을 선택하고 다른 텍스트 색상을 설정합니다.
- 드롭다운 메뉴 텍스트 색상(호버): #b70018
- 드롭다운 메뉴 활성 링크 색상: #b70018
- 모바일 메뉴 배경색: #fbf9f4
- 모바일 메뉴 텍스트 색상: #000000
다시 말하지만, 모바일 메뉴의 텍스트 색상이 마우스를 가져갈 때 변경되기를 원합니다. 이 설정에 대한 호버 옵션을 선택한 다음 호버 시 다른 텍스트 색상을 설정합니다.
- 모바일 메뉴 텍스트 색상(호버): #b70018
장바구니 및 검색 아이콘 사용자 정의
이제 장바구니 및 검색 아이콘을 추가하고 사용자 정의해 보겠습니다. 탭 아래 내용로 이동 요소 장바구니 아이콘과 검색 아이콘을 활성화합니다.
- 장바구니 아이콘 표시: 예
- 검색 아이콘 표시: 예
탭으로 돌아가기 디자인 아이콘 설정을 엽니다. 각 아이콘은 마우스 오버 시 검은색과 빨간색이 됩니다. 먼저 색상을 검정색으로 설정합니다.
- 장바구니 아이콘 색상: #000000
- 검색 아이콘 색상: #000000
- 햄버거 메뉴 아이콘 색상: #000000
그런 다음 호버 아이콘을 선택하고 호버에 색상을 추가합니다.
- 장바구니 아이콘 색상(호버): #b70018
- 검색 아이콘 색상(호버): #b70018
- 햄버거 메뉴 아이콘 색상(호버): #b70018
아이콘 크기를 설정합니다.
- 장바구니 아이콘 글꼴 크기: 25px
- 검색 아이콘 글꼴 크기: 25px
섹션으로 이동 간격, 상단 및 하단 패딩을 설정합니다.
- 패딩(상단 및 하단): 5px
마지막으로 메뉴 모듈의 상단과 하단에 테두리를 추가합니다. 테두리 설정을 엽니다.
- 상단 테두리 너비: 3px
- 하단 테두리 너비: 3px
최종 디자인
그리고 여기 우리의 최종 디자인이 있습니다.
두 번째 디자인
두 번째 디자인은 Divi에 내장된 호버 효과를 사용하여 호버 시 메뉴 아이콘과 텍스트의 크기를 변경합니다. 시작하자.
먼저 메뉴 모듈에 배경 그라디언트를 추가합니다. 그라디언트에는 XNUMX개의 정지점이 있으며 설정은 다음과 같습니다.
- 그라데이션 중지:
- 0%: RGBA(255,255,255,0)
- 23%: RGBA(252,199,76,0.65)
- 82%: RGBA(232,119,255,0.32)
그라디언트 유형 및 그라디언트 위치를 설정합니다.
- 그라디언트 유형: 원추형
- 그라데이션 위치: 하단
그런 다음 탭으로 이동 디자인 레이아웃을 설정합니다(레이아웃).
- 스타일: 중앙
섹션으로 이동 텍스트 메뉴 메뉴 텍스트 디자인을 사용자 정의합니다.
- 활성 링크 색상: #FFFFFF
- 글꼴 메뉴: Syne
- 글꼴 두께: 굵게
- 메뉴 글꼴 스타일: TT(대문자)
- 텍스트 색상 메뉴: #FFFFFF
이제 메뉴 텍스트 크기와 문자 간격을 설정합니다.
- 메뉴 텍스트 크기: 20px
- 메뉴 문자 간격: 2px
마우스를 가져갈 때 메뉴 텍스트 크기가 커지기를 원하므로 호버 옵션을 선택합니다.
- 메뉴 텍스트 크기: 22px
그런 다음 드롭다운 메뉴에서 디자인 설정을 변경합니다.
- 드롭다운 메뉴 배경색: #fcda90
- 드롭다운 메뉴 선 색상: #FFFFFF
- 텍스트 색상 메뉴: #FFFFFF
- 드롭다운 메뉴 활성 링크 색상: #FFFFFF
모바일 메뉴 배경 및 텍스트 색상을 설정합니다.
- 모바일 메뉴 배경색: #fcda90
- 모바일 메뉴 텍스트 색상: #FFFFFF
장바구니 및 검색 아이콘 사용자 정의
이제 메뉴 아이콘을 사용자 정의하기 시작하겠습니다. 이동 요소 탭 아래 내용 장바구니 아이콘과 검색 아이콘을 활성화합니다.
- Sow 장바구니 아이콘 : 예
- 검색 아이콘 표시: 예
탭으로 돌아가기 디자인 아이콘 설정을 엽니다.
- 장바구니 아이콘 색상: #ffffff
- 검색 아이콘 색상: #ffffff
- 햄버거 메뉴 아이콘 색상: #ffffff
아이콘은 마우스 오버 시 짙은 주황색으로 표시됩니다. 표지 옵션을 선택하고 색상을 설정합니다.
- 장바구니 아이콘 색상(호버): #fcac00
- 검색 아이콘 색상(호버): #fcac00
- 햄버거 메뉴 아이콘 색상(호버): #fcac00
다음으로 장바구니 및 검색 아이콘의 글꼴 크기를 설정합니다.
- 장바구니 아이콘 글꼴 크기: 25px
- 검색 아이콘 글꼴 크기: 25px
호버 시 아이콘 크기를 늘리려면 호버 옵션을 선택합니다.
- 장바구니 아이콘 글꼴 크기(호버): 30px
- 검색 아이콘 글꼴 크기(호버): 30px
마지막으로 섹션으로 이동 간격 상단 및 하단 패딩을 설정합니다.
- 패딩(상단 및 하단): 5px
최종 디자인
다음은 두 번째 메뉴 레이아웃의 최종 디자인입니다.
세 번째 디자인
최종 디자인을 위해 사용자 정의 CSS를 사용하여 장바구니 아이콘 뒤에 배경 원을 추가합니다.
읽기 : Divi: 고정되고 확장 가능한 호버 메뉴를 만드는 방법
시작하자.
먼저 모듈에 배경색을 추가합니다.
- 배경: #efb6ac
그런 다음 탭으로 이동 디자인 옵션을 열고 텍스트 메뉴.
- 활성 링크 색상: #e84322
- 메뉴 글꼴: Cinzel
- 글꼴 두께 메뉴: 매우 굵게
마우스를 가져갈 때 메뉴 텍스트 색상이 변경되기를 원합니다. 먼저 메뉴 텍스트 색상을 설정합니다.
- 텍스트 색상 메뉴(데스크톱): #e7644a
호버 아이콘을 클릭하고 호버 텍스트 색상을 설정합니다.
- 메뉴 텍스트 색상(호버): #e84322
다음으로 메뉴 텍스트 크기와 글자 간격을 설정합니다.
- 메뉴 텍스트 크기: 21px
- 메뉴 문자 간격: 1px
또한 호버 시 문자 간격이 확장되기를 원하므로 설정에서 호버 옵션을 선택합니다.
- 메뉴 문자 간격: 2px
텍스트 정렬을 왼쪽으로 설정합니다.
- 텍스트 정렬: 왼쪽
그런 다음 드롭다운 메뉴에서 다음 설정을 변경합니다.
- 드롭다운 메뉴 배경색: #efb6ac
- 드롭다운 메뉴 선 색상: #e7644a
- 드롭다운 메뉴 텍스트 색상
- 데스크탑: #e7644a
- 호버: #e84322
- 드롭다운 메뉴 활성 링크 색상: #e84322
모바일 메뉴 배경 및 텍스트 색상을 설정합니다.
- 모바일 메뉴 배경색: #efb6ac
- 모바일 메뉴 텍스트 색상:
- 데스크탑: #e7644a
- 호버: #e84322
장바구니 및 검색 아이콘 사용자 정의
먼저 요소 탭 아래 내용 장바구니 아이콘과 검색 아이콘을 활성화합니다.
- 장바구니 아이콘 표시: 예
- 쇼핑 아이콘 표시: 예
그런 다음 탭으로 돌아가십시오. 디자인 아이콘 설정을 엽니다. 아이콘 색상을 설정합니다.
- 장바구니 아이콘 색상: #e7644a
- 검색 아이콘 색상: #e7644a
- 햄버거 메뉴 아이콘 색상: #e7644a
이 아이콘의 색상은 마우스를 가져가면 변경됩니다. 호버 옵션을 활성화하고 색상을 설정합니다.
- 장바구니 아이콘 색상(호버): #e84322
- 검색 아이콘 색상(호버): #e84322
- 햄버거 메뉴 아이콘 색상(호버): #e84322
또한 마우스를 가져갈 때 아이콘 크기가 커지기를 원합니다. 먼저 아이콘 글꼴 크기를 설정합니다.
- 장바구니 아이콘 글꼴 크기: 22px
- 검색 아이콘 글꼴 크기: 22px
그런 다음 마우스를 가져갈 때 아이콘의 글꼴 크기를 설정합니다.
- 장바구니 아이콘 글꼴 크기(호버): 26px
- 검색 아이콘 글꼴 크기(호버): 26px
그런 다음 섹션으로 이동하십시오. 간격 상단 및 하단 패딩을 추가하십시오.
- 패딩(상단 및 하단): 5px
마지막으로 전체 헤더에 사용자 정의 CSS를 추가하여 장바구니와 검색 아이콘 뒤에 원을 추가할 수 있습니다.
메뉴 모듈 디자인과 일치하도록 이 CSS를 사용자 정의할 수 있습니다.
헤더 템플릿 설정을 연 다음 탭으로 이동합니다. Advnaced 다음 사용자 정의 CSS를 삽입하십시오.
.et_pb_menu__icon.et_pb_menu__cart-button,
.et_pb_menu__icon.et_pb_menu__search-button {
padding: 2% 2% 2% 2%;
background-color:#F7D5C2;
border-radius: 50%;
}
최종 디자인
이로써 세 번째이자 마지막 메뉴 레이아웃의 디자인이 완료되었습니다.
최종 결과
이제 세 가지 다른 메뉴의 최종 디자인을 살펴보겠습니다.
첫 번째 디자인
지금 DIVI를 다운로드하세요!!!
두 번째 디자인
세 번째 디자인
지금 DIVI를 다운로드하세요!!!
결론
Divi의 메뉴 모듈과 장바구니, 검색 아이콘은 쉽게 사용자 정의하여 귀하의 고유한 레이아웃과 디자인을 만들 수 있습니다. 사이트 웹.
호버 효과 및 사용자 정의 CSS와 같은 내장 Divi 설정을 사용하여 메뉴 모듈의 모양을 쉽게 향상시킬 수 있습니다.
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.
주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
