Divi에서 Blurb 모듈을 바닥글 항목으로 사용할 수 있도록 하는 방법

Rifat Jan 28, 2022

Blurb 모듈은 Divi 바닥글에 대한 탁월한 옵션입니다. 다양한 레이아웃으로 사진이나 아이콘을 표시할 수 있으며 몇 가지 사용자 정의 옵션이 있습니다. 또한 링크와 아이콘을 결합하여 세련된 발사체를 만드는 데 큰 도움이 됩니다. 다행히 Divi 블러브 모듈을 사용하면 이러한 유형의 링크를 쉽게 생성할 수 있습니다. 이 튜토리얼에서는 Divi 바닥글에 블러브 모듈을 통합하는 방법을 살펴보겠습니다.

디자인 미리보기

디자인을 시작하기 전에 바닥글이 어떻게 보이는지 살펴보겠습니다.

템플릿 업로드

오늘의 튜토리얼에서는 Divi의 인공 지능 레이아웃 팩 머리글과 바닥글을 사용합니다. 먼저 대시보드로 이동하여 Divi 로 이동합니다.

이제 새 Divi 바닥글을 수정할 수 있습니다. 백 엔드에서 바닥글을 업데이트하거나 프런트 엔드의 Visual Builder에서 선택할 수 있습니다. 헤더에는 기본적으로 빌더에서 열리는 사용자 지정 메뉴가 포함되어 있으므로 백 엔드에서 바닥글을 업데이트하겠습니다.

바닥글로서의 Blurb 모듈

우리가 하는 리소스 섹션의 링크를 업데이트할 것입니다. 원하는 링크를 가져와 아이콘으로 표시합니다. 첫 번째 제목을 사용하고 링크 수를 최소한으로 유지하겠습니다. 나머지를 만들기 위해 복제하기 전에 첫 번째 것을 장식할 것입니다.

리소스 열을 제거합니다.

이제 이것을 2열 레이아웃으로 바꾸십시오. 따라서 우리의 블러브 모듈이 바닥글을 디자인하는 데 하나의 열만 있으면 됩니다.

마지막으로 링크가 포함된 텍스트 모듈을 제거합니다. 제목 모듈만 필요합니다.

이제 영역 위로 마우스를 가져가서 Blurb 모듈을 추가하십시오.

Blurb 모듈 설정

헤드라인, 본문 및 사진이 모두 광고문안 모듈에 포함됩니다. 제목이 링크 역할을 합니다. 본문에 짧은 설명을 사용할 수 있습니다. 이 자습서의 목적을 위해 제거하겠습니다. 그것을 활용한다면 텍스트를 가능한 짧게 유지하고 소수의 광고 문구만 활용하는 것이 좋습니다. 이미지 대신 아이콘을 사용하겠습니다.

링크 이름을 변경하고 본문을 삭제했습니다. 그런 다음 이미지 및 아이콘에서 아이콘 사용을 선택합니다. 그런 다음 아이콘 선택기에서 아이콘을 선택합니다. 링크 섹션에서 제목 링크 URL 영역에 URL을 입력합니다. 나머지 링크 설정은 그대로 두어야 합니다. 이것이 우리가 이 탭으로 할 유일한 것입니다.

  • 제목: 링크 이름
  • 아이콘: 더블 렌치
  • 제목 링크 URL: 귀하의 링크

디자인 탭에서 아이콘 색상을 설정합니다. 이미지/아이콘 배치를 왼쪽으로 설정합니다.

  • 아이콘 색상: #db0eb7
  • 이미지/아이콘 배치: 왼쪽

이미지/아이콘 너비에서 전화를 선택합니다.

  • 전화 이미지/아이콘 너비: 15px

이미지/아이콘 테두리 너비를 1px로 설정하고 색상을 #39c0ed로 설정합니다.

  • 이미지/아이콘 테두리 너비: 1px
  • 이미지/아이콘 테두리 색상: #39c0ed

이미지/아이콘 패딩의 4면 모두에 패딩을 추가하십시오.

  • 이미지/아이콘 패딩: 10px(위, 아래, 왼쪽, 오른쪽)

제목 텍스트를 변경합니다.

  • 제목 글꼴: Archivo
  • 제목 텍스트 색상: #ffffff

상단 텍스트를 가운데로 설정합니다.

블러브 모듈의 간격 섹션으로 스크롤하고 왼쪽 패딩을 추가합니다.

  • 데스크탑 패딩, 왼쪽: 17vh
  • 폰 패딩, 왼쪽: 7vh

고급 탭

그 다음에는 제목에 몇 가지 사용자 정의 CSS를 적용하여 아이콘과 함께 중앙에 배치합니다.

  • 고급 탭 Custom CSS Blurb Title: padding-top:12px

블러브 모듈 복제

다음으로 Duplicate Module 버튼을 세 번 클릭하여 블러 모듈을 세 번 복제합니다. 이렇게 하면 바닥글 요소에 대한 텍스트 링크 대신 광고 문구 모듈을 사용할 수 있습니다.

이제 해당 모듈의 아이콘과 텍스트를 변경합니다.

최종 디자인

다음은 두 데스크탑 레이아웃의 바닥글에 있는 Divi 블러브 모듈을 살펴보겠습니다.

마지막 생각들

이것으로 Divi 바닥글의 바닥글 항목에 대해 광고 문구 모듈을 사용하는 방법에 대한 논의가 끝났습니다. Blurbs는 하이퍼링크에 대한 탁월한 가능성입니다. 사용이 간편하고 이미지 및 아이콘에 대한 다양한 사용자 정의 가능성을 제공합니다. 예를 들어 테두리가 있거나 없는 아이콘을 사용할 수 있으며 원하는 만큼 크게 만들 수 있습니다. 여기에서 선택한 기호는 헤더 메뉴의 디자인을 잘 보완합니다.