Divi 플러그인 하이라이트: Divi 모듈 빌더

Divi Builder에는 레이아웃에 거의 모든 디자인 요소를 추가하는 데 도움이 되는 많은 모듈이 포함되어 있지만 자신만의 모듈을 만들고 싶다면 어떻게 해야 할까요? Divi Module Builder라는 타사 플러그인이 이 기능을 제공합니다.

이 기사에서는 플러그인을 살펴보고 플러그인이 무엇을 할 수 있고 얼마나 사용하기 쉬운지 살펴보겠습니다. Divi 3.0.50 이상이 필요하며 Divi 및 Extra에서 모두 작동합니다. 개발자 웹 사이트: DiviPlugins.com에서 사용할 수 있습니다.

Divi 모듈 빌더 설치

플러그인을 활성화했으면 DMB 활성화 페이지 를 클릭합니다. 또는 대시보드의 Custom Modules 로 이동하여 License 를 클릭하여 이 화면을 볼 수 있습니다.

라이선스 키를 입력하고 라이선스 활성화 를 클릭 합니다 . Custom Modules 라는 새 메뉴가 대시보드에 추가되었습니다. 이 메뉴에서 모듈을 구축하는 데 필요한 모든 것을 찾을 수 있습니다.

모듈 추가

모듈은 사용자 정의 모듈 , 모듈 추가 아래의 대시보드 메뉴에서 생성됩니다. 모듈을 만드는 데 사용할 두 가지 영역이 있습니다. 왼쪽 영역은 필드를 생성할 곳입니다. 오른쪽 영역은 필드에서 사용할 코드를 추가할 곳입니다. 모듈을 표준 또는 전체 너비로 만들 수 있습니다. 초안을 저장하거나 준비가 되면 게시할 수 있습니다. 모듈이 게시되면 Divi Builder에 나타납니다.

필드

모듈은 원하는 만큼 필드를 가질 수 있습니다. 각 필드에는 그 안에 필드 속성이 있습니다. 다음은 각 필드의 속성을 자세히 살펴보겠습니다.

필드 레이블 – 모듈의 콘텐츠 탭에서 필드 제목으로 표시될 레이블입니다.

필드 식별자 – HTML에서 필드를 참조하는 데 사용할 고유 값입니다. 필드 식별자에는 소문자, 숫자 및 밑줄만 사용하십시오.

필드 설명 – 필드 의 목적을 설명하기 위해 고유한 설명을 추가합니다. 이것은 모듈의 콘텐츠 탭에서 입력 아래에 표시됩니다. 이 필드는 선택 사항이지만 사용자를 돕기 위해 정보나 예를 추가하는 것이 좋습니다.

필드 유형 – 사용자에게 표시되는 입력 유형을 결정합니다. 텍스트, 텍스트 영역, 색상, 이미지, 예/아니요 토글 및 아이콘을 포함하여 드롭다운 상자에서 여러 필드 유형을 선택합니다.

디자인 탭 – 모듈의 디자인 내에서 이 필드에 대한 글꼴 컨트롤을 추가합니다. 텍스트 또는 텍스트 영역을 선택하면 이 옵션이 표시됩니다. HTML에 클래스를 추가하여 글꼴 컨트롤을 적용할 요소를 식별해야 합니다.

필드 숨기기 – 사용자가 이 요소의 내용을 제어하지 않고도 HTML 출력에서 ​​요소의 글꼴을 제어할 수 있습니다. 이 옵션은 텍스트 또는 텍스트 영역 필드 유형이 선택된 경우에만 사용할 수 있습니다.

필드 레이블, 식별자, 설명을 추가하고, 필드 유형을 선택하고, 디자인 탭을 활성화하거나, 필드를 숨기도록 선택합니다. 각 필드의 위쪽/아래쪽 화살표를 클릭하여 필드를 재정렬합니다. 각 섹션과 필드는 설명과 예를 제공합니다.

암호

사용자 정의 HTML, PHP, CSS 및 JavaScript를 추가하여 출력을 제어합니다. HTML 필드는 사용자 정의 쿼리와 PHP를 사용할 수 있습니다. 코드를 인식하기 전에 PHP를 활성화해야 합니다. 그렇지 않으면 화면에 코드가 인쇄됩니다. HTML과 PHP 모두 필드 식별자를 사용하여 필드를 참조합니다.

코드 바로 가기는 코드 필드 아래에 버튼으로 제공됩니다. 여기에는 태그와 필드 식별자가 포함됩니다. 필드 식별자를 추가한 다음 클릭하여 코드에 추가할 수 있는 코드 영역 하단에서 사용할 수 있습니다. HTML 식별자는 주황색 버튼으로 표시되고 PHP는 녹색으로 표시됩니다. 바로 가기로 사용 가능한 것보다 더 많이 사용할 수 있지만 개발 시간을 단축하는 데 도움이 됩니다.

모듈 만들기

다음은 모듈을 만드는 간단한 예입니다. 제목은 Divi Builder의 모듈에 표시되는 이름입니다. 필드 레이블, 설명을 추가하고 필드 유형으로 텍스트를 선택하고 필드 식별자를 만들었습니다.

식별자가 HTML 바로 가기에 표시되도록 초안으로 저장했습니다. 다음으로 바로 가기에서 H1 태그를 선택하고 태그 사이에 커서를 놓고 HTML 바로 가기에서 레이블을 선택했습니다. 완료되면 게시를 눌렀습니다. 결과는 사용자가 텍스트를 입력할 수 있는 필드가 있는 모듈이어야 합니다. 출력은 텍스트를 헤더 1로 표시합니다.

이제 모듈이 Divi Builder에 나타납니다. 다른 Divi 모듈처럼 페이지에 추가할 수 있습니다.

콘텐츠 탭에는 레이블과 함께 추가한 필드가 포함되어 있습니다.

모듈은 필드에 입력한 텍스트를 표시합니다. H1으로 표시하기 위해 HTML을 추가했기 때문에 텍스트에는 자동으로 H1 속성이 있습니다. 더 많은 사용자 정의 기능을 포함하도록 디자인 탭을 추가할 수 있습니다. 필드를 올바르게 대상으로 지정하려면 몇 가지 코드가 필요합니다.

모듈

대시보드 메뉴에서 모듈 목록을 볼 수 있습니다. 사용자 정의 모듈 , 모듈 로 이동하십시오. 여기에서 모듈을 편집하거나 삭제할 수 있습니다. 각 모듈에 대해 PHP가 켜져 있는지 꺼져 있는지 보여줍니다. 모듈을 복제하려면 설정 에서 확인해야 합니다 .

사용자 정의 모듈 설정

설정 메뉴는 모듈을 관리할 수 있는 위치를 제공합니다. 게시된 모듈과 초안 모듈을 모두 볼 수 있습니다.

복제할 수 있으므로 다른 모듈에서 사용한 많은 코드가 필요한 모듈에서 시작할 수 있습니다. 또한 PHP를 편집, 비활성화 또는 활성화하고(코드 오류로 인해 편집기가 잠겨 있는 경우에 유용합니다. 이 작업을 수행하고 이 기능을 사용하여 모듈을 편집했습니다) 모듈을 가져오고 내보낼 수 있습니다.

종속성 추가

여기에서 타사 CSS 및 Javascript 종속성을 추가할 수 있습니다. 외부 또는 내부 URL로 추가합니다. 드롭다운 상자에서 CSS 또는 Javascript를 선택하고 이름을 추가한 다음 URL을 추가합니다. 그런 다음 모든 페이지에서 사용할 수 있습니다. Font Awesome을 사용하는 예를 보여줍니다. 이것은 한 위치에서 종속성을 만든 다음 어디에서나 사용할 수 있는 훌륭한 방법입니다.

Divi 모듈 빌더 예제 – 맞춤형 블로그 그리드

예제로 '괜찮은' 모듈을 만드는 대신 개발자가 만든 멋진 예제인 Custom Blog Grid를 보여주고 있습니다(개발자의 웹사이트에서 무료로 다운로드 가능). 여기에는 HTML, PHP 및 CSS의 3가지 필드가 포함됩니다. 다음은 각각을 살펴보겠습니다.

맞춤형 블로그 그리드 모듈

필드 1은 범주라는 레이블이 지정되고 범주를 식별자로 사용하며 필드 유형은 텍스트로 설정됩니다.

필드 2는 흑백 이미지 효과로 표시됩니다. 식별자는 필터이고 필드 유형은 예/아니오 토글입니다. 필터는 CSS에서 생성됩니다.

필드 3은 게시물 제목으로 표시되고 post_title을 식별자로 사용합니다. 필드 유형이 텍스트로 설정되고 디자인 탭이 활성화됩니다. 모듈에서 이 필드에 대한 사용자 정의를 볼 수 있습니다. 이 필드는 HTML에서 H2 클래스가 제공됩니다.

HTML 출력 코드 상자에서 사용할 수 있도록 PHP가 선택되었습니다.

사용자 정의 CSS가 CSS 출력 상자에 추가됩니다.

여기 자바스크립트가 있습니다. 이 플러그인을 최대한 활용하려면 HTML, PHP, CSS 및 Javascript를 잘 이해하고 있어야 합니다. 즉, 개발자를 위한 플러그인입니다.

Divi Builder의 맞춤형 블로그 그리드 모듈

모듈이 게시되면 Divi Builder에서 찾을 수 있습니다.

모듈 및 해당 레이블 내에 표시되는 설정은 선택한 항목에 따라 다릅니다. 이 모듈을 사용하면 카테고리를 추가하고, 흑백 효과를 활성화하고, 콘텐츠 탭에서 게시물 제목을 추가할 수 있습니다. 또한 배경 설정(모듈의 기본값)도 포함합니다.

이 모듈에 대해 디자인 탭이 활성화되어 있습니다. 여기에는 텍스트, 게시물 제목 텍스트, 테두리, 간격 및 애니메이션에 대한 설정이 포함됩니다.

사용자 정의 블로그 그리드 결과

결과는 호버 애니메이션이 있는 블로그 그리드입니다. 이미지 위에 마우스를 올려놓지 않는 한 이미지가 흑백으로 표시되도록 흑백 모드를 활성화했습니다. 나는 이 형태의 호버를 선호합니다. 호버에서 이미지를 가리기 보다는 드러내는 것입니다.

이 모드에서는 흑백 모드를 비활성화하고 제목 글꼴을 변경하고 배경 그라디언트를 추가했습니다. 버튼 변경, 오버레이 추가 등을 위해 코드에 더 많은 조정을 추가할 수 있습니다. 코딩할 수 있다면 상상할 수 있는 거의 모든 작업을 수행할 수 있습니다.

라이선스 및 문서

단일, 무제한 및 평생의 세 가지 라이선스 중에서 선택할 수 있습니다. 무제한 라이선스는 무제한 웹사이트에 적용되며 1년의 업데이트 및 지원을 포함합니다. 평생 무제한 사이트 라이선스에는 평생 업데이트 및 지원이 포함됩니다.

문서는 개발자 웹사이트에서 제공됩니다. 예제 코드는 단계별 지침과 함께 포함되어 있습니다.

마지막 생각들

Divi Module Builder는 많은 잠재력을 지닌 강력한 플러그인입니다. 코드에 대한 좋은 지식이 필요하기 때문에 모든 사람을 위한 것은 아닙니다. 이것은 개발자에게 모듈을 만들고 공유할 수 있는 훌륭한 도구를 제공합니다. 한 사이트에서 다른 사이트로 가져오고 내보낼 수 있다는 점이 마음에 듭니다. 모듈을 사용하는 각 사이트에는 플러그인이 설치되어 있어야 합니다. 코드에 대한 좋은 지식이 있고 자신만의 Divi 모듈을 만드는 데 관심이 있다면 Divi Module Builder를 살펴볼 가치가 있습니다.

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

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