Divi 플러그인 하이라이트 – Divi Breadcrumbs 모듈

웹 사이트를 탐색할 때 찾는 탐색 도구 중 하나는 이동 경로입니다. 탐색 계층 구조 내에서 현재 위치를 보여주고 구조 내에서 다른 기사를 쉽게 찾을 수 있도록 하는 데 유용합니다. Breadcrumbs는 Divi Breadcrumbs Module이라는 플러그인을 사용하여 Divi에 추가할 수 있습니다.

Divi Breadcrumbs Module은 위치 기반 이동 경로를 생성하는 CodeCrater의 타사 플러그인입니다. 즉, 현재 읽고 있는 페이지 카테고리의 계층 구조를 보여줍니다. 또한 계층 구조의 각 요소에 대한 링크를 제공하므로 각 범주에 대한 최신 게시물을 쉽게 볼 수 있습니다. 이동 경로는 사용자 정의가 가능합니다.

Breadcrumbs 모듈을 사용하면 Divi Builder를 사용하는 개별 페이지 및 게시물에 이동 경로를 배치할 수 있습니다. Extra 및 Divi Builder 플러그인에서도 작동합니다. 이 플러그인 하이라이트에서는 Divi와 Extra의 플러그인을 살펴보고 사용자 정의할 수 있는 몇 가지 방법을 살펴보겠습니다.

이동 경로를 사용하는 이유

이동 경로는 범주 계층 구조를 보여주는 흔적을 남기며 탐색을 개선하는 좋은 방법입니다. 공간을 많이 차지하지 않으며 사용자가 콘텐츠를 탐색하기 위해 수행해야 하는 작업의 수를 줄이고 단순화할 수 있습니다. 이는 포함된 범주가 많은 경우 특히 중요합니다.

Divi Breadcrumbs 모듈은 웹사이트에 대한 계층 정보를 Google에 제공하여 SEO를 개선합니다. 즉, 순위를 매기고 싶은 카테고리의 키워드를 선택해야 합니다. 이것은 또한 디자이너가 이해하기 쉬운 카테고리 이름을 사용하도록 강요합니다.

이동 경로는 UX와 UI를 모두 개선합니다. 표준 메뉴 탐색을 대신해서는 안 되지만 관심을 불러일으키고 방문자를 사이트에 더 오래 머물게 할 수 있습니다.

Divi 이동 경로 모듈

정상적으로 플러그인을 업로드하고 활성화합니다. 모듈은 Hollywood Cerise라는 밝은 빨간색으로 표시됩니다. 많은 이동 경로 플러그인에는 Yoast 플러그인에서 이동 경로를 가져오기 때문에 Yoast가 필요하지만 Divi Breadcrumbs 모듈에는 Yoast가 필요하지 않습니다. 대신 자체 이동 경로를 생성합니다. 따라서 다른 플러그인이 필요하지 않습니다.

콘텐츠 설정에는 홈 이동 경로 숨기기, 나만의 홈 이동 경로 텍스트 추가, 구분 기호 아이콘 선택(12개 선택 중), 현재 페이지 숨기기, 배경 설정 및 관리자 레이블이 포함됩니다. 디자인 설정에는 아이콘, 텍스트 및 링크의 스타일과 표준 간격 옵션이 포함됩니다.

Divi 이동 경로 모듈 예제

이미지가 있는 게시물 제목 모듈, 이동 경로 모듈 및 기사의 텍스트 모듈이 있는 기본 기사 레이아웃입니다. 이동 경로 설정을 기본값으로 두었습니다.

이것이 기본 설정으로 모듈이 보이는 방식입니다. 홈 및 펜싱에 대한 링크는 클릭할 수 있음을 나타내기 위해 파란색으로 표시됩니다. 이동 경로는 왼쪽, 중앙 또는 오른쪽에 배치할 수 있습니다.

이 예에서는 이동 경로를 중앙에 배치하고 그라데이션 배경을 추가하고 기사 제목(14포인트)과 링크(12포인트)의 글꼴 크기를 늘렸습니다. 텍스트는 흰색입니다. 그라디언트 위에 인쇄되었으므로 동일한 색상으로 만들었습니다. 나는 또한 줄 구분자를 변경했습니다. 일반 게시물에서는 그라데이션 배경이 있는 이동 경로에 주의를 기울이지 않겠지만, 이것은 여러분이 할 수 있는 것을 보여줍니다.

전각 메뉴 아래에 이동 경로 추가하기

빵 부스러기를 추가하는 가장 좋은 위치는 페이지 상단입니다. 이 예에서는 전각 메뉴를 사용하여 게시물을 만들고 전각 섹션과 표준 섹션 모두에 대해 패딩과 여백을 0으로 설정했습니다. 계층 구조를 표시하기 위해 범주를 포함했습니다.

전각 메뉴에 맞게 이동 경로의 글꼴 색상을 변경했지만 눈에 띄지 않도록 부드럽게 했습니다. 구분 기호를 화살표로 변경하고 이동 경로 탐색에서 홈과 현재 페이지를 제거했습니다.

이동 경로는 위 이미지의 범주와 동일한 내장 구조를 따릅니다. 기사 자체에도 해당 카테고리가 포함되지만 계층 구조는 없습니다. 동일한 카테고리를 여러 번 표시하지 않으려면 제목에서 제거할 수 있습니다.

이 예에서는 배경색을 행에 배치하고 전체 너비로 만들고 메뉴에 압도되지 않도록 글꼴 색상을 변경하고 문자 간격에 1픽셀을 추가했습니다. 작은 변화가 큰 차이를 만들 수 있습니다.

행 대신 이동 경로 모듈 내의 배경을 사용하는 동일한 설정입니다. 너비를 줄이기 위해 패딩을 추가했습니다. 분리되어 보이지만 위의 메뉴에 연결된 작은 요소를 만드는 것이 좋습니다.

구분 기호 스타일링

구분 기호에는 스타일 지정 기능도 있습니다. 글꼴 스타일, 크기, 색상, 간격 및 높이를 변경합니다. 구분 기호 옵션과 스타일 지정 기능 사이에서 웹사이트 브랜딩과 일치하도록 구분 기호를 쉽게 만들 수 있습니다.

이 예에서는 구분 기호에 자주색의 기본 글꼴과 20의 글꼴 크기를 사용합니다.

다음은 구분 기호에 조지아 글꼴이 있는 동일한 구분 기호입니다. 구분 기호의 글꼴을 변경하는 것만으로도 새로운 모양을 얻을 수 있습니다.

다음은 Black Ops One 글꼴을 사용하는 동일한 구분 기호입니다. 더욱 대담하고 돋보입니다.

이것은 4픽셀의 줄 간격을 가진 20포인트 글꼴의 Droid Serif입니다. 나는 글꼴을 진한 빨간색으로 만들었습니다.

글꼴 선택에 따라 점의 모양도 바뀝니다. 이것은 24 포인트의 Passion One입니다. 독특한 것을 만들기 위해 글꼴, 색상 및 크기를 실험하는 데 시간을 할애할 가치가 있습니다. 표준 스타일 컨트롤을 사용하면 쉽게 할 수 있습니다.

Extra와 함께 Divi Breadcrumbs 모듈 사용

Divi Breadcrumbs Module은 Extra 및 Divi Builder 플러그인과 함께 작동합니다. 오른쪽 이미지 아래에 빵 부스러기가 있는 Extra를 살펴보세요. 빵 부스러기가 화면 상단의 제목에서 너무 멀리 떨어져 있기 때문에 게시물의 이름을 포함했습니다. 막대 구분 기호를 사용합니다.

이상적으로는 이동 경로가 페이지 상단에 있어야 합니다. 내 페이지 레이아웃에서 이동 경로 모듈이 맨 위에 있습니다. 이미지 아래에 표시되는 이유는 Extra에서 추천 이미지를 표시하도록 허용하기 때문입니다.

이 예에서는 레이아웃 내에 이미지를 배치하고 섹션을 상단 패딩이 0으로 설정하도록 설정했습니다. 현재 게시물을 제거하고 구분 기호를 빨간색으로 만들었습니다.

라이선스, 업데이트, 지원

플러그인은 귀하와 귀하의 클라이언트를 위해 무제한 웹사이트에 설치할 수 있습니다. 업데이트는 평생 동안입니다. 여기에는 6개월의 지원이 포함됩니다.

• 구매하려면 여기를 클릭하십시오: Divi Breadcrumbs 모듈

마지막 생각들

Breadcrumb's는 누락되었을 때 알아차리는 작은 것들 중 하나입니다. 올바르게 설계된 경우 사용자가 필요로 할 때 거기에 있고 필요하지 않을 때 방해가 되지 않습니다. Divi Breadcrumbs 모듈은 Divi 페이지와 게시물에 추가할 수 있는 좋은 방법이며 사이트 브랜딩에 맞게 쉽게 스타일을 지정할 수 있습니다. 간단하고 직관적입니다.

Divi 레이아웃에 이동 경로를 추가하는 데 관심이 있다면 Divi Breadcrumbs 모듈이 필요한 플러그인일 수 있습니다.

여러분의 의견을 듣고 싶습니다! Divi Breadcrumbs 모듈을 사용해 보셨습니까? 아래 의견에 귀하의 경험에 대해 알려주십시오.

Yevgenij_D/Shutterstock.com을 통한 주요 이미지