Divi Builder에서 전폭 탐색 모듈을 사용하는 방법

Divi의 전체 너비 메뉴 모듈을 사용하면 페이지의 아무 곳에 나 탐색 메뉴를 배치 할 수 있습니다. 이는 페이지에 두 번째 페이지 메뉴를 추가하는 데 사용되거나 빈 페이지 기능과 함께 사용되어 기본 탐색을 페이지 하단으로 이동할 수 있습니다. 예를 들어, 큰 시작 이미지를 가진 사람들을 수용하기 위해 메뉴를 첫 번째 섹션 아래로 이동할 수 있습니다. 이렇게하면 기본적으로 헤더 탐색이 빌더를 사용하여 페이지에서 이동할 수 있습니다!

페이지에 전체 화면 메뉴 모듈을 추가하는 방법

전체 너비 메뉴 모듈을 페이지에 추가하려면 먼저 Divi Builder로 이동해야 합니다. 일단 디비 테마 귀하의 사이트 웹, 당신은 버튼을 볼 것입니다 Divi Builder 사용 새 페이지를 만들 때마다 게시물 편집기 위에 있습니다. 이 버튼을 클릭하여 Divi Builder를 활성화하고 모든 Divi Builder 모듈에 액세스하십시오. 그런 다음 버튼을 클릭하십시오 비주얼 빌더 사용 시각적 모드에서 생성기를 시작합니다. 버튼을 클릭 할 수도 있습니다. 비주얼 빌더 사용 검색할 때 사이트 웹 WordPress 대시보드에 로그인한 경우 포그라운드에서.

Visual Builder에 들어가면 회색 더하기 버튼을 클릭하여 페이지에 새 모듈을 추가 할 수 있습니다. 새로운 전각 모듈은 전각 섹션 내에 만 추가 할 수 있습니다. 새 페이지를 시작하는 경우 먼저 페이지에 전체 너비 섹션을 추가하는 것을 잊지 마십시오. Divi 섹션 요소를 사용하는 방법에 대한 훌륭한 자습서가 있습니다.

모듈 목록에서 전체 너비 메뉴 모듈을 찾아 클릭하여 페이지에 추가하십시오. 모듈 목록을 검색 할 수 있습니다. 즉, "Fullwith menu"또는 "full-width menu"(버전에 따라 다름)라는 단어를 입력 한 다음 Enter를 클릭하여 자동으로 전체 너비 메뉴 모듈을 검색하고 추가 할 수 있습니다. ! 모듈이 추가되면 모듈 옵션 목록이 표시됩니다. 이러한 옵션은 세 가지 주요 그룹으로 구분됩니다. 내용 , 임신 et 고급 .

사용 사례 예 : 페이지 헤더 아래에 전체 너비 메뉴 추가

이 예에서는 페이지의 헤더 섹션 아래에 전체 너비 메뉴를 추가하는 방법을 보여 드리겠습니다.

다음은 그 예이다 :

이 새로운 전체 페이지 메뉴는 기본 기본 탐색 메뉴를 대체하므로 전체 너비 메뉴 외에 기본 탐색 메뉴가 페이지 상단에 나타나지 않도록 빈 페이지 템플릿을 선택해야합니다. 추가하겠습니다.

페이지 템플릿을 편집하려면 페이지 편집기로 이동하여 오른쪽 사이드 바의 페이지 속성 영역에서 "빈 페이지"템플릿을 선택합니다.

이 모듈은 이미 존재하는 메뉴를 표시하므로 전체 너비 메뉴 모듈에 추가하기 전에 메뉴를 이미 생성 한 것이 중요합니다.

메뉴를 만든 후에는 시각적 빌더를 사용하여 페이지의 헤더 섹션 바로 아래에 전체 너비 섹션을 추가하십시오. 그런 다음 섹션에 전체 너비 메뉴 모듈을 추가합니다.

다음과 같이 전체 메뉴 설정을 업데이트하십시오.

콘텐츠 옵션

메뉴 : [모듈에서 사용해야하는 메뉴 선택] 컨텍스트 : # 333333

디자인 옵션

텍스트 색상 : 밝은 텍스트 방향 : 중앙 메뉴 글꼴 : Roboto 메뉴 글꼴 크기 : 20px

즉입니다!

비결 : 고급 탭의보기 옵션을 사용하여 모바일에서이 메뉴를 숨기고 헤더 위에 다른 메뉴를 표시하여 모바일 사용자가 페이지를 아래로 스크롤하지 않고도 메뉴를 볼 수 있도록 할 수 있습니다. .

전폭 메뉴 내용 옵션

콘텐츠 탭에서 텍스트, 이미지 및 아이콘과 같은 모듈의 모든 콘텐츠 요소를 찾을 수 있습니다. 제어하는 모든 것 무엇 이 탭에는 모듈에 항상 표시됩니다.

메뉴

모듈에서 사용할 메뉴를 선택합니다. 페이지를 사용하여 새 메뉴를 만들 수 있습니다. 외관> 메뉴 WordPress 대시 보드에서. 새 메뉴를 만들 때마다이 드롭 다운 메뉴에서 메뉴를 선택할 수 있습니다.

배경 색상

기본적으로 메뉴 모듈에는 흰색 배경색이 있습니다. 메뉴 배경에 다른 색상을 사용하려면 여기에서 색상 선택기를 사용하여 선택할 수 있습니다.

드롭 다운 메뉴 배경색

기본적으로 메뉴 모듈의 드롭 다운 메뉴는 이전 설정에서 정의한 배경색을 상속합니다. 드롭 다운 메뉴에 고유 한 색상을 지정하려면이 설정을 사용하여 사용자 정의 색상을 선택할 수 있습니다.

모바일 메뉴 배경색

모바일에서 메뉴 모듈은 다른 디자인으로 변형되어 모바일에 더 적합합니다. 데스크톱과는 별개로 모바일 드롭 다운 메뉴의 배경색을 제어 할 수 있습니다.

관리 라벨

쉽게 식별 할 수 있도록 생성자의 모듈 레이블이 변경됩니다. Visual Builder에서 WireFrame보기를 사용하면 이러한 레이블이 Divi Builder 인터페이스의 모듈 블록에 나타납니다.

전폭 메뉴 디자인 옵션

디자인 탭에서 글꼴, 색상, 크기 및 간격과 같은 모듈에 대한 모든 스타일 옵션을 찾을 수 있습니다. 모듈의 모양을 변경하는 데 사용할 탭입니다. 각 Divi 모듈에는 무엇이든 변경하는 데 사용할 수있는 긴 디자인 설정 목록이 있습니다.

열린 하위 메뉴

기본적으로 모든 하위 메뉴는 기본 메뉴 표시 줄 아래에 드롭 다운 메뉴로 열립니다. 페이지 하단 근처에 메뉴를 배치하고 메뉴에 긴 드롭 다운 메뉴가 포함 된 경우 메뉴가 브라우저 창을 넘어 확장되지 않도록 메뉴 모듈 위에 해당 메뉴를 열 수 있습니다.

전체 너비 메뉴 링크 만들기

기본적으로 메뉴 모듈이있는 최상위 링크는 기본 콘텐츠 너비 내에 배치됩니다. 이 제한을 제거하고 링크가 화면 맨 왼쪽부터 시작하여 페이지의 전체 너비로 실행되도록하려면이 옵션을 활성화 할 수 있습니다.

드롭 다운 메뉴 라인의 색상

드롭 다운 메뉴에서 링크는 1 픽셀 선으로 구분됩니다. 이 행의 색상을 사용자 정의하려면이 설정의 색상 선택기를 사용하여 사용자 정의 색상을 선택할 수 있습니다.

텍스트 색상

여기에서 텍스트 값을 선택할 수 있습니다. 어두운 배경에서 작업하는 경우 텍스트가 켜져 있어야합니다. 밝은 배경으로 작업하는 경우 텍스트가 어두워 야합니다.

텍스트 방향

모듈에서 텍스트가 정렬되는 방식을 제어합니다. 왼쪽, 오른쪽 및 가운데 중에서 선택할 수 있습니다.

활성 링크 색상

활성 링크의 색상이 메뉴 모듈에서 강조 표시되어 사용자에게 현재 위치를 표시합니다. 이 설정을 사용하여 이러한 활성 링크에 사용되는 강조 색상을 변경할 수 있습니다.

드롭 다운 메뉴의 텍스트 색상

기본적으로 모듈 드롭 다운 메뉴의 텍스트는 기본 메뉴 텍스트의 색상을 상속합니다. 그러나 사용자 정의 드롭 다운 메뉴 배경색을 정의한 경우이 색상을 변경할 수 있습니다.

모바일 메뉴 텍스트의 색상

기본적으로 모듈 드롭 다운 메뉴의 텍스트는 기본 메뉴 텍스트의 색상을 상속합니다. 그러나 사용자 정의 모바일 메뉴 배경색을 설정 한 경우이 색상을 변경할 수 있습니다.

메뉴 글꼴

드롭 다운 메뉴에서 원하는 글꼴을 선택하여 메뉴 글꼴의 글꼴을 변경할 수 있습니다. Divi에는 Google Fonts에서 제공하는 수십 가지 훌륭한 글꼴이 함께 제공됩니다. 기본적으로 Divi는 페이지의 모든 텍스트에 Open Sans 글꼴을 사용합니다. 굵게, 기울임 꼴, 대문자 및 밑줄 옵션을 사용하여 텍스트 스타일을 사용자 지정할 수도 있습니다.

글꼴 크기 메뉴

여기에서 메뉴 글꼴의 크기를 조정할 수 있습니다. 범위 슬라이더를 드래그하여 텍스트 크기를 늘리거나 줄이거 나 슬라이더 오른쪽에있는 입력 필드에 원하는 텍스트 크기 값을 직접 입력 할 수 있습니다. 입력 필드는 다양한 측정 단위를 지원합니다. 즉, 크기 값에 따라 "px"또는 "em"을 입력하여 단위 유형을 변경할 수 있습니다.

메뉴 텍스트의 색상

기본적으로 Divi의 모든 텍스트 색상은 흰색 또는 진한 회색으로 나타납니다. 디지털 텍스트의 색상을 변경하려면이 옵션을 사용하여 색상 선택기에서 원하는 색상을 선택하십시오.

메뉴 문자 간격

문자 간격은 각 문자 사이의 간격에 영향을줍니다. 숫자 텍스트에서 각 문자 사이의 간격을 늘리려면 범위 슬라이더를 사용하여 간격을 조정하거나 슬라이더 오른쪽의 입력 필드에 원하는 간격 크기를 입력합니다. 입력 필드는 다양한 측정 단위를 지원합니다. 즉, 크기 값에 따라 "px"또는 "em"을 입력하여 단위 유형을 변경할 수 있습니다.

메뉴 라인의 높이

줄 높이는 숫자 텍스트의 각 줄 사이의 간격에 영향을줍니다. 각 줄 사이의 간격을 늘리려면 범위 슬라이더를 사용하여 간격을 조정하거나 입력 필드에 원하는 간격 크기를 입력합니다. 커서 오른쪽에 있습니다. 입력 필드는 다양한 측정 단위를 지원합니다. 즉, 크기 값에 따라 "px"또는 "em"을 입력하여 단위 유형을 변경할 수 있습니다.

고급 전폭 메뉴 옵션

고급 탭에는 사용자 정의 CSS 및 HTML 속성과 같이 숙련 된 웹 디자이너가 유용하다고 생각할 수있는 옵션이 있습니다. 여기에서 모듈의 여러 요소에 사용자 정의 CSS를 적용 할 수 있습니다. 또한 사용자 정의 CSS 클래스 및 ID를 모듈에 적용 할 수 있으며 이는 하위 테마의 style.css 파일에서 모듈을 사용자 정의하는 데 사용할 수 있습니다.

CSS ID

이 모듈에 사용할 선택적 CSS ID를 입력하십시오. ID를 사용하여 사용자 정의 CSS 스타일을 만들거나 페이지의 특정 섹션에 연결할 수 있습니다.

CSS 클래스

이 모듈에 사용할 선택적 CSS 클래스를 입력하세요. CSS 클래스를 사용하여 사용자 정의 CSS 스타일을 만들 수 있습니다. 공백으로 구분하여 여러 클래스를 추가할 수 있습니다. 이러한 클래스는 Divi 하위 테마 또는 페이지나 웹사이트에 추가하는 사용자 정의 CSS 스타일시트에서 사용할 수 있습니다. 사이트 웹 Divi 테마 옵션 또는 Divi Builder 페이지 설정을 사용합니다.

맞춤 CSS

사용자 정의 CSS는 모듈 및 모듈의 내부에 적용 할 수도 있습니다. 사용자 정의 CSS 섹션에는 사용자 정의 CSS 스타일 시트를 각 요소에 직접 추가 할 수있는 텍스트 필드가 있습니다. 이러한 설정의 CSS 항목은 이미 스타일 태그로 래핑되어 있습니다. 따라서 세미콜론으로 구분 된 CSS 규칙을 입력하십시오.

드롭 다운 메뉴의 애니메이션

드롭 다운 메뉴가 활성화 된 경우 사용할 여러 애니메이션 중에서 선택할 수 있습니다. 기본적으로 애니메이션은 페이드로 설정되어 있지만 확장, 드래그 또는 뒤집기로 변경합니다.

시계

이 옵션을 사용하면 모듈이 표시되는 장치를 제어 할 수 있습니다. 태블릿, 스마트 폰 또는 데스크톱에서 개별적으로 모듈을 비활성화하도록 선택할 수 있습니다. 다른 장치에서 다른 모드를 사용하거나 페이지에서 특정 요소를 제거하여 모바일 디자인을 단순화하려는 경우 유용합니다.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”플랫” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI 테마 다운로드 [/vcex_button][/vc_column][vc_column 너비=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” 레이아웃=”확장” align=”center” font_family = ”Raleway” font_weight=”700″ style=”플랫” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]다운로드 TEMPLATES DIVI[/vcex_버튼][/vc_열][/vc_row]

Divi Builder 전체 너비 탐색 모듈을 사용하는 방법