Divi 5 모듈 그룹으로 고유 한 모듈을 구축하십시오

코드 줄을 터치하지 않고 사용자 정의 디비 모듈을 만들고 싶습니까? Divi 5의 새로운 모듈 그룹을 사용하면 이제 여러 요소를 시각적 빌더 내부에서 단일 재사용 가능한 레이아웃으로 결합 할 수 있습니다. 자바 스크립트가 없습니다. PHP 없음. 드래그, 드롭 및 디자인 만하면됩니다.

이 빠른 가이드에서는 Divi의 새로운 그룹을 사용하여 고유 한 모듈을 만드는 방법을 보여 드리겠습니다. 구체적으로 구체적으로 Blurb, 가격 책정 테이블, 증언 또는 상상할 수있는 다른 유형의 모듈을 처음부터 구축하는 방법을 볼 수 있습니다.

참고 : Divi 5는 새로운 웹 사이트에서 사용할 준비가되었지만 기존 사이트를 Divi 5로 변환하는 것은 권장하지 않습니다. 업데이트 프로세스에 대해 확신 할 때 우리에게서 무언가를 볼 수 있습니다.

Divi의 새로운 모듈 그룹은 무엇입니까?

그룹 또는 모듈 그룹은 여러 모듈 및/또는 행을 열 내 단일 장치에 짝을 이루는 새로운 컨테이너 요소입니다. 이것은 여러 개의 작은 요소를 그룹화하고 페이지에서 필요한 곳으로 전체 그룹을 이동할 수 있다는 이점이 있습니다.

모듈 그룹은 문제없이 페이지 전체에서 이동할 수 있으며 Flexbox 및 Loop Builder 기능이 출시 될 때 특히 도움이됩니다. 루프 빌더가 출시되면 그룹을 사용하여 사용자 정의 블로그 레이아웃, 바닥 글 메뉴, 이미지 갤러리 등을 만들 수 있습니다. 따라서 지금은 유용하지만 몇 달 안에 사용하는 것이 더욱 인상적입니다.

중첩 행은 우리가 Divi 5에 추가 된 또 다른 고도로 요청 된 Divi 기능이었습니다. "모듈 그룹"이라는 이름은 모듈 만 그룹화 할 수있는 것처럼 보이지만 그 반대는 사실입니다. 사실, 그룹 내부의 중첩 행을 사용할 수있어 무한 중첩 레이아웃 구조를 구축하고 재사용 가능한 그룹의 일부가 될 수 있습니다.

나만의 디비 모듈을 만드는 방법

모듈 그룹을 사용하면 편집기 내부에서 고유 한 모듈을 만들 수 있습니다. 모듈과 중첩 행을 함께 그룹화하여 더 큰 모듈 중 일부와 비슷한 복잡한 배열을 만들 수 있습니다.

1. 자신만의 blurb 모듈을 만듭니다

내장 된 Blurb 모듈

Blurb 모듈은 많은 Divi 디자인의 필수 요소입니다. 이동 모듈이지만 분해하면 클릭하는 몇 가지가 있습니다. 그게 :

이미지/아이콘, 제목/제목 및 신체 내용. 모듈 그룹을 생성하고 이미지 또는 아이콘, 제목 및 텍스트 모듈과 같은 모듈을 그 안에 배치 할 수 있습니다. 이 세 가지 모듈은 함께 Blurb 모듈에서 사용할 수있는 동일한 컨텐츠를 재현 할 수 있습니다.

Blurb 모듈의 해부학

자신만의 blurb 모듈 그룹 만들기

다음은 왼쪽에 아이콘이있는 Blurb 모듈과 다음을 사용하여 Blurb 모듈의 시각적으로 동일한 복제의 예입니다.

그룹, 내부 행, 열 (1)은 아이콘 모듈이있는 열 (1) 및 제목 및 텍스트 모듈이있는 열 (2).

X- 선은 각각의 해골을보기 위해 켜집니다.

이 배열의 특별한 것은 첫 번째 열이 18% 너비로 설정되고 두 번째 열은 82% 너비를 차지한다는 것입니다 (열 사이징 옵션은 중첩 행 기능 업데이트로 새롭습니다).

이와 같은 모듈을 구축하면 각 개별 요소에 대한 더 많은 디자인 스타일 옵션을 제공하는 이점이 있습니다. Blurb 모듈은 이미지/아이콘 배치를 더 쉽게 만들 수 있지만 트레이드 오프가 있습니다. 원하는 디자인에 가장 가까운 접근 방식을 사용하십시오.

2. 자신의 가격 책정 테이블 모듈을 만듭니다

내장 가격 책정 테이블 모듈

일부 디비 모듈은 훨씬 더 많은 일이 계속되고 있습니다. 가격 책정 테이블 모듈의 경우입니다. 아래에서 볼 수 있듯이 가격 책정 테이블 당 여러 필드가 있습니다.

가격 책정 테이블 모듈의 해부학

나만의 가격 책정 테이블 모듈 그룹 만들기

모듈 그룹 및 개별 모듈을 사용하여 가격 테이블 모듈을 재현하면이 결과를 얻을 수 있습니다.

테이블 당 7 개의 별도 텍스트/옵션 필드에 주목하십시오. 시각적으로 각 테이블에는 세 가지 주요 부품 (제목, 가격 및 세부 사항)이 있습니다. 그룹 내부 에서이 작업을 수행하는 몇 가지 방법이 있지만 아래는 각각 3 개의 중첩 행을 사용했습니다. 거기서부터 각 섹션 내부의 제목 및 텍스트 모듈을 사용하여 가격 책정 테이블을 재현했습니다.

가격 테이블 모듈을 사용하는 데있어 좋은 점은 대부분의 레이아웃을 처리하고 헤드 스타트를 얻는다는 것입니다. 그러나 때로는 특정 일을 원할 때 작업하기가 더 어렵다는 것을 의미합니다. 더 간단한 모듈 로이 가격 책정 테이블 레이아웃을 만들기 위해 추가 작업을 수행하면 더 많은 설계 제어와 자유가 제공됩니다.

3. 자신만의 평가 모듈을 만듭니다

우리의 내장 평가 모듈

Divi의 평가 모듈은 많은 일이 진행되는 또 다른 모듈입니다. 최대 4 개의 다른 텍스트 요소와 한 쌍의 이미지/아이콘 옵션이 포함됩니다.

자신만의 평가 모듈 그룹 생성

증언 모듈을 재현하는 데 가장 시간이 많이 걸리는 측면은 간격이 오른쪽 (특히 여러 중단 점에서)을 얻는 것입니다. 그러나 일단 당신이 그것을 얻으면, 상황은 매우 간단합니다. 그룹 레이아웃 전체에서 우리는 몇 행과 아이콘, 이미지, 헤딩 및 텍스트 모듈을 사용했습니다.

이 모듈 중 일부를 재현하는 데있어 좋은 점은 더 많은 가능성에 자신을 열 수 있다는 것입니다. 더 복잡한 모듈에는 광범위한 CSS 만 조작 할 수있는 의견 레이아웃이 있습니다. 그러나 직접 구축하면 많은 하위 요소를 중심으로 더 많은 자유가 있습니다.

이와 같이 설계 할 때 더 많은 레이아웃 가능성이 열립니다. 예를 들어, 더 큰 그룹 레이아웃 내에서 요소를 완전히 다른 위치로 이동시켜 증언 모듈을 사용하여 불가능한 일 (적어도 쉬운 것)을 수행 할 수 있습니다. 디자인이 약간의 유연성을 요구하는 경우, 이러한 단편 중 일부를 구축하면 애후의 정밀도를 달성하는 데 도움이 될 수 있습니다.

또한 위의 것과 같은 맞춤형 증언 모듈을 만들고 다가오는 루프 빌더를 사용하여 CPT에서 평가를 당기는 아이디어를 좋아합니다. 디자인 자유 + 구조화 된 데이터 및 컨텐츠로 더 빨리 구축 할 수있는 능력을 제공합니다.

사용자 정의 모듈을 전역 요소로 저장하십시오

새 모듈이 올바르게 느껴지면 사이트의 다른 곳에서 사용하기위한 전역 요소로 저장하십시오. 그룹 설정 메뉴를 엽니 다. " 라이브러리로 저장 "옵션을 클릭하십시오.

나중에 쉽게 사용하기 위해 모듈의 이름을 지정할 수있는 모달이 나타납니다. " Global As Save "를 전환하여 Divi 라이브러리에 저장하십시오. 나중에 변경하면 사이트 전체의 모든 사본을 업데이트합니다.

글로벌 요소는 이제 글로벌임을 알 수 있도록 뚜렷한 녹색을 가지게됩니다.

대시 보드> Divi> Divi 라이브러리 에서 저장된 글로벌 요소 및 기타 라이브러리 항목에 액세스 할 수 있습니다. 여기에서 글로벌 요소를 편집하면 사이트 전체에서 업데이트됩니다. 또한 사용 된 페이지에서 글로벌 요소를 직접 편집 할 수 있으며 (SiteWide를 업데이트합니다).

구축 한 모든 사이트의 모듈이 필요하십니까? " Divi Cloud에 저장 "을 전환하십시오. 모듈은 이제 클라우드 라이브러리에 있으며 어디서나 프로젝트를 준비 할 수 있습니다. 도서관 항목은 한 사이트에 물건을 보관하고 Divi Cloud는 사이트에서 사이트로 여행합니다. 빌드 속도를 높이고 일관성을 높이기 위해 둘 다 사용하십시오.

Divi Cloud를 얻으십시오

오늘 새로운 것을 구축하십시오

모듈 그룹은 새로운 힘을 손에 넣었습니다. 독창적이고 필요한 레이아웃을 형성 할 수 있습니다. Blurb 모듈을 다시 시작하여 프로세스가 어떻게 맞는지 확인하십시오. 이런 식으로 Divi를 사용하는 데 익숙해지면 표준 모듈을 사용하거나 직접 만들 수 있기 때문에 더 복잡한 디자인을 만들 수 있습니다.

위에서 다루는 것의 대부분은 그룹이 떨어지기 전에 Divi로 가능했지만 일을 더 쉽게 만듭니다. 특히 Flex와 Loop Builder를 출시 할 때 그룹은 Divi로 디자인의 필수품이됩니다.

레벨 업 준비가 되셨습니까? 새로운 사이트를 잡고 오늘 첫 번째 사용자 정의 모듈을 테스트하십시오.