Divi 플러그인 하이라이트: Divi 위젯 빌더

게시 됨: 2017-12-04

위젯 영역 내에 Divi 모듈과 레이아웃을 배치하고 싶었던 적이 있습니까? 사이드바와 바닥글에 있는 Divi 레이아웃을 생각하는 것만으로도 내 기술 수준을 넘어선 디자인 가능성에 대한 아이디어를 얻을 수 있습니다. 흥미로운 점은 당신의 기술 수준에 관계없이 쉽게 할 수 있다는 것입니다. 어떻게? Divi Widget Builder라는 타사 플러그인 사용.

Divi Widget Builder를 사용하면 위젯 내의 Divi 라이브러리에 있는 모든 Divi 레이아웃을 표시할 수 있습니다. 여기에는 모든 기능과 조정을 포함하여 단일 모듈과 전체 페이지가 포함됩니다. Divi와 Extra 모두에서 작동합니다. 이 기사에서는 Divi Widget Builder를 살펴보고 위젯 영역에 Divi 레이아웃을 추가하는 것이 얼마나 쉬운지 알아볼 것입니다.

퍼블리셔의 웹사이트에서 Divi Widget Builder를 구매할 수 있습니다.

Divi 위젯 빌더 설치 및 활성화

정상적으로 플러그인을 업로드하고 활성화합니다.

플러그인을 활성화하면 라이센스 키를 입력해야 합니다. 대시보드 메뉴에서 Divi , Divi Widget Builder 로 이동하여 라이선스 키를 입력합니다. 플러그인을 사용하는 데 필요한 다른 설정은 없지만 위젯 내에서 사용하려면 Divi 레이아웃이 필요합니다.

디비 라이브러리

Divi Widget Builder 내에서 모든 Divi 레이아웃을 사용할 수 있습니다. 페이지나 포스트처럼 레이아웃을 구축하는 것은 권장하지 않습니다. 예를 들어, 3열 또는 4열 그리드(블로그, 프로젝트, 광고 문구 등)는 사이드바에서 이상하게 보입니다. 단일 열에 레이아웃을 생성하면 쉽게 수정할 수 있습니다. 즉, 사이드바 또는 바닥글을 위해 특별히 레이아웃을 만듭니다.

단일 모듈은 사이드바에서 잘 작동합니다. 예는 다음과 같습니다.

  • 지도
  • 문의 양식
  • 카운트다운 타이머
  • 바 카운터
  • 단추
  • 블로그
  • 로그인
  • 번호 카운터
  • 사람
  • 증명서

레이아웃을 만들고 이 모듈을 배경 오버레이와 함께 사용하고 확장하여 결합하여 정말 흥미로운 위젯을 만드십시오. 하늘이 한계입니다.

레이아웃 만들기

대시보드 메뉴의 Divi , Divi 라이브러리 로 이동하여 레이아웃을 만듭니다. 왼쪽 상단에서 새로 추가를 선택합니다.

레이아웃에 이름을 지정하고 드롭다운 메뉴에서 템플릿 유형을 선택합니다. 아래로 스크롤하여 원하는 경우 템플릿의 범주를 선택할 수 있습니다. 카테고리를 선택하거나 다음 화면에서 새 카테고리를 추가할 수 있는 또 다른 기회가 있습니다. 완료 되면 제출을 클릭합니다.

이제 평소와 같이 레이아웃을 구축하기만 하면 됩니다.

Divi 위젯 빌더 위젯

Divi PB 위젯이라는 새 위젯이 위젯에 추가되었습니다. 이를 보려면 대시보드의 모양 , 위젯 으로 이동하십시오. 위젯 영역(사이드바, 바닥글 또는 사용자가 만든 모든 항목 포함)에 이 위젯을 놓습니다. 위젯 내에 표시할 Divi 라이브러리 항목을 선택할 수 있는 드롭다운 상자를 제공합니다.

두 가지 다른 선택 사항이 있습니다.

라이브러리 항목 제목 표시 – 웹사이트의 사이드바에 레이아웃 이름을 표시합니다. 위젯의 제목처럼 작동합니다. 이름을 숨기려면 선택을 취소하십시오.

여기에 위젯으로 사용할 라이브러리 항목 추가 – 해당 문장( 내 문장이 아니라)에서 '여기'라는 단어를 클릭하면 레이아웃을 만들 수 있는 Divi 라이브러리로 이동합니다. 이 링크가 포함되어 있어 레이아웃을 생성할 위치를 혼동하지 않고 라이브러리에 빠르게 액세스할 수 있다는 점이 마음에 듭니다.

선택을 마쳤으면 저장을 클릭하면 Divi PB 위젯을 배치한 위젯 위치에 새 레이아웃이 적용됩니다. 위젯은 사용자 정의 위젯 영역에서도 작동합니다.

Divi 위젯 빌더 예제

여기에 내가 요리한 몇 가지 꽤 예가 있습니다. 그것들은 간단하지만 그것이 어떻게 작동하는지에 대한 아이디어를 줄 것입니다.

지도

이 예는 사이드바가 있는 블로그 피드를 표시합니다. 사이드바는 왼쪽에 블로그 모듈이 있는 2/3 Divi 레이아웃 내에 추가됩니다.

이 예에서는 단일 지도 모듈을 사용합니다. 레이아웃의 이름을 포함했습니다. 지도 모듈의 스타일을 지정하지 않았으므로 주위에 흰색 상자가 있습니다. 이것은 쉽게 조정됩니다. 모듈을 변경하면 페이지를 새로 고칠 때 해당 변경 사항이 위젯에 반영됩니다.

단순히 Divi 레이아웃 내에 지도를 배치할 수 있지만 사이드바에 배치하면 누군가가 읽고 있는 블로그 게시물에 관계없이 지도가 표시됩니다. Divi 레이아웃을 사용하지 않은 표준 블로그 게시물입니다. 레이아웃을 사용하여 각 게시물에 대한 새 지도를 만들고, 새 위젯 영역을 만들고, 각 게시물에 개별적으로 표시할 지도를 선택할 수 있습니다.

카운트 다운 타이머

이 레이아웃은 여러 카운트다운 타이머 모듈을 사용하여 단일 위젯을 만듭니다. 각각 따로 스타일링 해봤습니다.

모듈은 블로그에서 다루는 각 리그에 대해 하나씩 다음 게임까지의 카운트다운을 보여줍니다. 각 카운트다운 타이머는 리그 로고와 관련된 색상을 사용하고 그라디언트를 포함합니다. 알아요 – NHL과 다른 몇 가지를 생략했습니다. 미안합니다.

포스트 슬라이더

이것은 사이드바에 포스트 슬라이더를 추가합니다. 게시물 슬라이더의 더 읽기 버튼, 점 탐색 및 화살표를 포함했습니다. 나는 또한 그것이 어떻게 맞는지 보기 위해 더 많은 일반 위젯을 추가했습니다.

나에 대해서

이것은 모듈이 아닌 페이지 레이아웃을 사용합니다. Divi와 함께 제공되는 About Me 레이아웃을 사용하여 게시물에서 레이아웃을 만들었습니다(Divi 라이브러리에서 만드는 대신). 모든 것이 단일 열에 있도록 레이아웃을 수정하고 헤더 제목의 글꼴 크기를 줄였습니다. 그런 다음 Divi Widget Builder에서 사용할 수 있도록 레이아웃을 라이브러리에 저장했습니다.

페이지 자체는 Creative Agency라는 Divi Builder의 레이아웃입니다. 왼쪽 사이드바를 제공하고 위젯에 대한 정보 레이아웃을 선택했습니다.

이것은 동일한 레이아웃이지만 표준 WordPress 사이드바를 표시하는 대신 Specialty 섹션을 사용하여 레이아웃을 다시 만들었습니다. 그 결과 페이지에 더 많은 너비를 제공하고 위젯을 Divi 전체 너비 헤더 모듈 아래에 배치할 수 있으므로 표준 WordPress 사이드바보다 훨씬 더 멋진 디자인이 됩니다.

Specialty Section은 한 행에 3개의 열을 허용하므로 4개 대신 3개의 광고 문구를 줄이고 왼쪽 열에 사이드바를 배치했습니다. 나는 특수 섹션 전체 폭을 만든 전각에 왼쪽 사이드 바에서 오른쪽 상단 모서리에있는 디비 글 설정에서 페이지 레이아웃을 변경했습니다.

문의 양식

이것은 Divi Builder와 함께 제공되는 Our Team 레이아웃을 사용합니다. 오른쪽 사이드바를 사용하고 있습니다. 연락처 양식을 표시하는 Divi 위젯 빌더와 함께 사이드바에 모나크 위젯을 배치했습니다.

바닥글 위젯 영역

이것은 바닥글 영역에 3개의 Divi Widget Builder 위젯이 있습니다. 3열 바닥글 레이아웃을 선택하고 3개 영역에 연락처 양식 모듈, 사람 모듈 및 블로그 슬라이더 모듈을 배치했습니다. 이것은 Jason Champagne의 놀라운 Code School 레이아웃 팩입니다. 블로그 게시물의 이미지도 이 레이아웃에서 가져왔습니다. ET 블로그에서 레이아웃을 다운로드할 수 있습니다. Divi용 무료 LMS(숨막히는 학습 관리) 레이아웃 팩 다운로드.

이 바닥글은 내가 게시물로 만든 두 가지 다른 레이아웃을 사용합니다. 둘 다 배경 이미지가 있습니다. 왼쪽의 위젯은 여러 텍스트 모듈, 소셜 팔로우 모듈 및 분할기 모듈을 사용합니다. 소셜 버튼 아래의 메뉴 항목은 클릭 가능한 링크입니다. 또한 오버레이를 사용하여 배경 이미지를 어둡게 합니다. 오른쪽 위젯은 문의 양식 모듈입니다.

Extra와 함께 Divi 위젯 빌더 사용하기

이것은 Extra와 동일한 Our Team 레이아웃입니다. 원래 모듈의 기본 설정을 사용하여 문의 양식을 만들었습니다. 배경을 블렌딩하고 싶어서 배경을 투명하게 만들었습니다. 또한 버튼의 텍스트 색상을 변경하여 어두운 배경에서도 보이도록 했습니다.

라이선스 및 문서

4가지 라이선스를 사용할 수 있습니다.

  • 단일 사이트 $7.00
  • 3개 사이트 $19.00
  • 무제한 사이트 $39.00
  • 평생 $89.00

여기에는 1년의 지원 및 자동 업데이트가 포함됩니다. 문서는 게시자의 웹사이트에서 제공됩니다.

마지막 생각들

Divi Widget Builder는 간단하고 사용하기 쉽습니다. 작업은 위젯 빌더를 사용하는 대신 Divi 레이아웃을 빌드하는 것에서 나옵니다. 위젯 빌더 내에서 레이아웃을 선택하는 것은 더 쉬울 수 없으며 원하는 위젯 영역에 많은 위젯 빌더 위젯을 배치할 수 있는 기능은 많은 Divi 및 Extra 디자인 가능성을 열어줍니다.

작동 중인 플러그인의 개발자 웹사이트에서 몇 가지 예를 보고 싶습니다. 몇 가지 창의적인 사용 사례를 보면 구매자가 이를 사용하고 최대한 활용하는 방법에 대한 아이디어를 얻을 수 있습니다. 위젯 영역 내에 Divi 레이아웃과 모듈을 배치하는 데 관심이 있다면 Divi Widget Builder가 당신이 찾고 있는 플러그인일 수 있습니다.

우리는 당신의 의견을 듣고 싶습니다. Divi 위젯 빌더를 사용해 보셨습니까? 의견에 대해 어떻게 생각하는지 알려주십시오.

robuart/Shutterstock.com을 통한 추천 이미지