Divi에서 블로그 템플릿에 고정 카테고리 메뉴를 추가하는 방법

게시 됨: 2019-11-09

카테고리 메뉴는 모든 블로그에 추가할 수 있습니다. 그들은 블로거에게 다양한 종류의 주제를 선보일 수 있는 기회를 제공하여 독자가 관심 있는 내용을 빠르고 쉽게 찾을 수 있도록 합니다. 따라서 웹 사이트의 모든 블로그 관련 템플릿에 잘 디자인된 카테고리 메뉴가 있어야 합니다.

이 튜토리얼에서는 Divi의 테마 빌더를 사용하여 블로그에 고정 카테고리 메뉴를 추가하는 방법을 보여 드리겠습니다. Divi Builder를 사용하여 고정 카테고리 메뉴를 만드는 방법과 블로그를 구성하는 사이트의 다양한 템플릿에 카테고리 메뉴를 추가하는 방법을 다룹니다.

시작하자.

엿보기

포스트 템플릿에 추가된 스티커 카테고리 메뉴는 다음과 같습니다.

다음은 모바일에서 하단 고정 카테고리 메뉴입니다.

다음은 카테고리 페이지 템플릿의 카테고리 메뉴입니다.

다음은 게시물 슬라이더 아래에서 시작하여 스크롤 시 페이지 상단에 고정되는 고정 카테고리 메뉴를 사용하여 생성할 빠르고 쉬운 블로그 템플릿입니다.

무료로 템플릿 다운로드

이 튜토리얼의 고정 카테고리 메뉴가 있는 템플릿을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. 당신은 iresubscribedi하거나 추가 이메일을받지 않습니다.

파일 다운로드
무료로 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 테마 빌더 이식성 옵션을 사용하여 json 파일 중 하나를 Divi 테마 빌더에 추가하기만 하면 됩니다.

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

  1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
  2. 테마 빌더 팩 #6을 다운로드하여 새로운 디자인을 시작하세요.

그 후, 당신은 갈 준비가되었습니다.

YouTube 채널 구독

블로그 템플릿에 고정 보조 카테고리 메뉴 추가하기

테마 빌더 팩 #6 업로드

이 튜토리얼에서는 Theme Builder Pack #6을 사용할 것입니다. 블로그 게시물에서 팩을 다운로드하면 WordPress 대시보드로 이동하여 Divi > Theme Builder로 이동합니다.

그런 다음 오른쪽 상단의 이식성 아이콘을 클릭합니다. 이식성 팝업에서 가져오기 탭을 선택하고 Divi-Theme-Builder-Pack-6-All.json 파일을 선택합니다. 그런 다음 "Divi 테마 빌더 템플릿 가져오기" 버튼을 클릭합니다.

그러면 모든 템플릿을 테마 빌더로 가져옵니다.

이제 카테고리 메뉴를 만들 준비가 되었습니다.

WordPress에서 새 카테고리 메뉴 만들기

카테고리 메뉴는 WordPress의 일반 메뉴처럼 만들 수 있습니다. WordPress 대시보드에서 모양 > 메뉴로 이동합니다. 새 메뉴 만들기 링크를 클릭하고 메뉴에 이름을 지정한 다음 "메뉴 만들기" 버튼을 클릭합니다.

메뉴 항목에서 카테고리 토글을 열고 메뉴에 추가하려는 모든 카테고리/페이지를 선택합니다. 카테고리 토글에 표시할 카테고리 항목에 대해 카테고리가 이미 생성되어 있는지 확인하십시오. 카테고리 메뉴 항목은 특정 게시물 카테고리의 카테고리 페이지로 리디렉션됩니다.

포스트 템플릿의 본문 영역에 고정 카테고리 메뉴를 디자인합니다.

카테고리 메뉴가 생성되면 카테고리 메뉴를 디자인할 차례입니다. 이렇게 하려면 템플릿 중 하나의 본문 영역에 추가해야 합니다. 나중에 블로그와 관련된 다른 템플릿에도 카테고리 메뉴를 추가할 예정이지만, 지금은 모든 글(또는 글 템플릿)에 대한 템플릿에 추가해 보겠습니다.

신체 영역 템플릿 레이아웃 편집기 열기

Theme Builder 인터페이스에서 "All Posts"에 이미 할당된 템플릿을 찾고 Custom Body Area에서 편집 아이콘을 클릭합니다.

템플릿 상단에 새 섹션 및 행 추가

템플릿 레이아웃 편집기에서 1열 행이 있는 새 섹션을 만들고 레이아웃 맨 위로 드래그합니다.

섹션 사용자 정의

모듈을 추가하기 전에 섹션 설정을 열고 다음과 같이 배경과 패딩을 지정하십시오.

  • 배경색: #f92c8b
  • 패딩: 1vw 상단, 1vw 하단

행 사용자 정의

다음으로 행 설정을 다음과 같이 업데이트합니다.

  • 배경 그라데이션 왼쪽 색상: #f92c8b
  • 배경 그라데이션 오른쪽 색상: #ffd625
  • 기울기 방향: 90deg
  • 패딩: 0px 상단, 0px 하단
  • 둥근 모서리: 20px

메뉴 모듈 추가

1열 행 안에 새 메뉴 모듈을 추가합니다.

그런 다음 드롭다운 메뉴에서 이전에 만든 범주 메뉴를 선택합니다. 선택하면 메뉴 항목이 메뉴에 나타납니다.

템플릿에 맞는 디자인 메뉴 모듈

행 배경색이 표시되도록 기본 배경색을 삭제합니다.

다음 디자인 설정을 업데이트합니다.

  • 스타일: 중심
  • 메뉴 글꼴: Ubuntu
  • 메뉴 글꼴 두께: 굵게
  • 메뉴 글꼴 스타일: TT(대문자)
  • 메뉴 텍스트 색상: #ffffff
  • 메뉴 문자 간격: 2px
  • 메뉴 줄 높이: 2em
  • 드롭다운 메뉴 배경색: #ffffff
  • 드롭다운 메뉴 선 색상: #f92c8b

  • 드롭다운 메뉴 텍스트 색상: #222222
  • 모바일 메뉴 텍스트 색상: #222222
  • 햄버거 메뉴 아이콘 색상: #ffffff
  • 햄버거 메뉴 아이콘 글꼴: 40px
  • 폭: 90%
  • 모듈 정렬: 중앙

섹션 및 행 가시성

메뉴 드롭다운이 숨겨지지 않도록 하려면 섹션과 행의 가시성을 확인하고 표시되도록 설정해야 합니다. 또한 페이지의 다른 모든 콘텐츠보다 전체 메뉴 순서를 유지하려면 z 인덱스에 높은 숫자를 지정해야 합니다. 이것은 모바일의 드롭다운 메뉴와 고정 메뉴의 가시성을 극대화하는 데 필요합니다.

섹션 설정을 열고 다음을 업데이트합니다.

  • 수평 오버플로: 표시
  • 수직 오버플로: 표시
  • Z-인덱스: 999

행 설정을 열고 다음을 업데이트합니다.

  • 수평 오버플로: 표시
  • 수직 오버플로: 표시

섹션(메뉴 포함)을 끈적하게 만들기

물론 선택 사항이지만 고정 카테고리 메뉴를 만들려면 섹션 설정을 열고 다음 사용자 지정 CSS를 기본 요소에 추가합니다. 

position: -webkit-sticky !important;
position: sticky !important;
top: 0px;

섹션을 복제하여 하위 카테고리 메뉴 만들기

모바일에서 더 나은 사용자 경험을 위해 페이지 하단에 고정되는 또 다른 카테고리 메뉴를 만들 수 있습니다. 메뉴를 만들려면 방금 만든 메뉴가 포함된 섹션을 복제하기만 하면 됩니다.

모바일용 하단 고정 메뉴 최적화

하단 위치 지정으로 고정 CSS를 업데이트합니다.

이 메뉴는 모바일에서 "고정"하기 위해서만 필요하므로 섹션 설정을 열고 데스크톱용 맞춤 CSS를 삭제합니다. 그런 다음 태블릿 탭 아래에 다음 사용자 지정 CSS를 추가합니다. 

position: -webkit-sticky !important;
position: sticky !important;
bottom: 0px;

하단 카테고리 메뉴의 드롭다운 메뉴 방향 변경

메뉴는 모바일에서 화면 하단에 위치하므로 드롭다운 메뉴의 방향을 변경합니다.

  • 드롭다운 메뉴 방향: 위쪽

"카테고리" 메뉴 레이블 추가

모바일 메뉴 아이콘 옆에 레이블을 추가하려면 메뉴 설정의 고급 탭에서 다음 사용자 정의 CSS를 Before 요소에 추가합니다. 

position: absolute !important;
color: #ffffff!important;
font-size: 16px;
content: "Categories";
line-height: 2em;
left: 50%;
margin-left: -110px;

지금까지 모바일에서 본 메뉴는 이렇습니다.

모바일에서 상위 메뉴 숨기기

모바일에서 헤더가 과밀하지 않게 하려면 휴대전화와 태블릿에서 상단 메뉴를 비활성화하세요. 이렇게 하면 바탕 화면의 맨 위 고정 메뉴만 표시됩니다.

두 메뉴/행을 모두 Divi 라이브러리에 저장합니다.

레이아웃에 대한 두 개의 카테고리 메뉴 생성을 완료했습니다. 다른 템플릿에 쉽게 추가할 수 있도록 Divi 라이브러리에 저장할 수 있습니다. 상위 메뉴를 저장하려면 섹션 메뉴에서 "라이브러리에 추가" 아이콘을 선택합니다. 그런 다음 레이아웃 이름을 지정하고 "라이브러리에 저장" 버튼을 클릭합니다.

동일한 과정을 반복하여 하단 메뉴도 라이브러리에 저장합니다. 기억할 수 있는지 확인하고 이름을 지정하십시오.

블로그 게시물 템플릿의 최종 결과

새로운 고정 카테고리 메뉴가 적용된 라이브 게시물이 어떤 모습인지 확인해 보겠습니다.

데스크탑 보기(상위 메뉴)

모바일 보기(하단 메뉴)

카테고리 페이지 템플릿에 고정 보조 카테고리 메뉴 추가

메뉴 섹션이 Divi 라이브러리에 추가되었으므로 모든 템플릿 레이아웃에 추가할 수 있습니다. 카테고리 메뉴를 추가할 다음 템플릿은 카테고리 페이지 템플릿입니다.

카테고리 페이지 템플릿의 본문 영역 편집

"모든 카테고리 페이지"에 할당된 템플릿을 찾아 사용자 정의 바디 영역에서 편집 아이콘을 클릭합니다.

라이브러리에서 상위 카테고리 메뉴 추가

템플릿 레이아웃 편집기 내에서 파란색 더하기 아이콘을 클릭하여 새 섹션을 추가합니다. 그런 다음 라이브러리에서 추가 탭을 선택하고 목록에서 상위 범주 메뉴를 선택합니다.

그런 다음 섹션을 템플릿 레이아웃의 맨 위로 이동합니다.

라이브러리에서 하단 카테고리 메뉴 추가

그런 다음 클릭하여 레이아웃 맨 아래에 새 섹션을 추가합니다. 그런 다음 라이브러리에서 하단 카테고리 메뉴를 추가합니다.

메뉴의 활성 링크 색상 업데이트

이 템플릿의 경우 메뉴 항목이 이 템플릿을 사용하는 카테고리 페이지에 대한 링크를 보유하므로 활성 링크 색상을 업데이트하는 것이 좋습니다. 상단 메뉴 설정을 열고 다음을 업데이트하십시오.

  • 활성 링크 색상: #4160fd

이제 카테고리 페이지를 방문하면 활성 링크가 파란색으로 표시됩니다.

카테고리 페이지 템플릿의 최종 결과

블로그 페이지 템플릿에 고정 카테고리 메뉴 추가

웹 사이트의 블로그 페이지에 고정 카테고리 메뉴를 추가할 수도 있습니다. 블로그 페이지는 기본적으로 블로그의 홈 ​​페이지이며 일반적으로 모든 블로그 게시물의 피드를 표시합니다. Divi 테마 빌더를 사용하면 블로그 페이지용 템플릿을 만들고 카테고리 메뉴를 쉽게 추가할 수 있습니다.

블로그 템플릿 만들기

먼저 카테고리 페이지 템플릿을 복제합니다.

그런 다음 블로그에 복제 템플릿을 할당합니다.

블로그 템플릿의 사용자 정의 본문을 편집합니다.

블로그 템플릿 레이아웃 사용자 지정

템플릿 레이아웃 편집기를 사용하여 블로그 템플릿을 디자인합니다. 지금은 페이지 상단에 멋진 전체 너비 게시물 슬라이더를 지정해 보겠습니다. 이렇게 하려면 새 전체 너비 섹션을 만듭니다.

전각 포스트 슬라이더 추가

그런 다음 섹션에 전폭 포스트 슬라이더 모듈을 추가합니다.

"현재 페이지에 대한 게시물"을 가져오도록 콘텐츠를 설정합니다. 그런 다음 블로그 페이지에 적합한 동적 콘텐츠를 가져오는지 확인합니다.

다음과 같이 전폭 포스트 슬라이더 설정을 업데이트합니다.

  • 제목 글꼴: Ubuntu
  • 제목 글꼴 두께: 중간
  • 본문 글꼴: Ubuntu

게시물 슬라이더 아래에서 메뉴 이동

이 레이아웃의 경우 상단 고정 카테고리 메뉴가 슬라이더 아래에 위치하도록 게시물 슬라이더를 페이지 상단으로 드래그합니다.

게시물(또는 블로그) 페이지 생성 및 할당

WordPress에 지정된 블로그 페이지가 있는지 확인하십시오. 이렇게 하려면 설정 > 읽기로 이동합니다. 그런 다음 홈페이지 표시의 경우 정적 페이지를 선택합니다. 그런 다음 게시물 페이지에 사용할 페이지를 선택합니다.

블로그 페이지 템플릿의 최종 결과

카테고리 메뉴가 페이지 상단에 도달하면 어떻게 고정되는지 확인하십시오.

마지막 생각들

고정 카테고리 메뉴는 블로그를 다음 단계로 끌어올릴 수 있습니다. 하나를 구축하는 것은 실제로 Divi Builder를 사용하는 것입니다. 테마 빌더를 사용하면 사이트의 원하는 위치에 메뉴를 쉽게 추가할 수 있습니다. 또한 모바일용 고정 메뉴를 별도로 만들어 사용자에게 최상의 경험을 제공할 수도 있습니다. 바라건대 이것은 자신의 블로그나 다음 프로젝트에 유용할 것입니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!