플러그인 없이 다른 Divi 모듈 안에 Divi 모듈 또는 행을 삽입하는 방법

잠시 동안 Divi 사용자였다면 다른 모듈 안에 Divi 모듈(또는 행)을 삽입하는 생각을 했을 것입니다. 대부분의 경우 Divi를 능숙하게 사용할 줄 안다면 이런 종류의 것은 별로 필요하지 않습니다. Divi 모듈은 이미 기능과 내장된 디자인 설정으로 가득 찬 강력한 요소입니다. 그러나 때로는 Divi를 사용하여 두 개의 모듈을 디자인한 다음 하나를 다른 모듈에 삽입하여 이러한 기능을 향상시키는 것이 좋습니다. 이에 대한 한 가지 좋은 예는 (연락처 양식과 같은) 모듈을 토글 모듈에 삽입하여 토글을 클릭할 때 양식이 표시되도록 하는 것입니다.

이 튜토리얼에서는 Divi 모듈 또는 행을 다른 Divi 모듈에 삽입하는 방법을 공유할 것입니다. 이렇게 하려면 JQuery의 몇 가지 작은 스니펫을 추가해야 합니다. 코드가 준비되면 Divi Builder를 사용하여 삽입/이동하려는 요소와 해당 요소를 넣을 모듈을 대상으로 하는 적절한 CSS 클래스를 추가할 수 있습니다.

시작하자!

엿보기

다음은 이 자습서에서 구축할 예제를 간략하게 살펴보겠습니다.

토글 모듈 내부의 문의 양식

Blurb 모듈 내부의 토글 모듈 및 버튼 모듈(오른쪽 열)

토글 모듈 내부의 Divi 행

무료로 레이아웃 다운로드

이 튜토리얼의 레이아웃을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

YouTube 채널 구독

섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.

가져오기 버튼을 클릭합니다.

이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.

그런 다음 가져오기 버튼을 클릭합니다.

완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다.

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. "처음부터 빌드" 옵션을 선택합니다.

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

염두에 두어야 할 사항

이 튜토리얼의 경우 이 프로세스에서 사용하려는 모든 모듈의 스타일을 지정하는 프로세스는 여전히 Divi Builder 내장 설정을 사용하여 시각적으로 수행할 수 있으므로 그 부분은 여러분에게 맡기겠습니다. 다른 모듈 내부에 모듈/행을 삽입하기 위해 각 Divi 요소에 올바른 CSS 클래스와 HTML을 적용하는 방법에 더 집중할 것입니다.

시각적 Divi Builder에서 편집하는 동안이 아니라 라이브 페이지에서만 최종 결과를 볼 수 있음을 명심하십시오. 즉, Divi로 모듈을 디자인할 수 있지만 페이지의 라이브 버전을 볼 때까지 빌더에서 별도로 유지됩니다.

text/html을 추가할 수 있는 모듈 내부에만 모듈이나 행을 삽입할 수 있습니다.

또한 나중에 설명하겠지만 열 또는 섹션 내에서 가질 수 있는 인스턴스(다른 모듈에 삽입되는 모듈 또는 행)의 수에는 특정 제한이 있습니다. 모듈을 다른 모듈에 삽입할 때 열당 하나의 "대상" 모듈(모듈은 삽입하려는 모듈을 보유함)로 제한됩니다. 또한 행을 다른 모듈에 삽입할 때 섹션당 하나의 "대상" 모듈로 제한됩니다. 이것은 어떤 의미에서는 제한 사항이지만 필요할 때 페이지에 여러 인스턴스를 가질 수 있는 옵션을 제공합니다.

1부: Divi 모듈을 다른 모듈에 삽입하는 방법

이 자습서의 첫 번째 부분에서는 Divi 모듈을 다른 모듈에 삽입하는 방법을 보여 드리겠습니다. 먼저 Toggle Module 내부에 Contact Module을 추가하는 방법을 보여드리겠습니다. 그런 다음 Blurb 모듈 내부에 Toggle 모듈과 Button 모듈을 추가하는 방법을 보여드리겠습니다.

예 1: 토글 모듈 내부에 연락처 양식 모듈 삽입

새 행 추가

시작하려면 섹션에 새로운 1열 행을 추가하십시오.

토글 모듈 추가(대상 모듈)

열 내부에 토글 모듈을 추가합니다.

이 예에서는 대상 모듈로 참조할 수 있는 이 Toggle 모듈 내부에 모듈을 삽입하려고 합니다. 기술적으로 실제 대상은 Toggle Module의 본문 내용(텍스트/HTML을 추가할 수 있는 곳) 안에 있습니다. 대상 위치를 지정하려면 이식 가능한 모듈(삽입하려는 모듈)의 대상 위치 역할을 할 필수 CSS 클래스와 함께 새 div 를 삽입해야 합니다.

토글 설정의 콘텐츠 탭에서 본문에 다음 HTML을 추가합니다. HTML을 삽입하기 전에 텍스트 탭을 클릭해야 합니다.

<div class="divi-module-destination"></div>

문의 양식 모듈(휴대용 모듈) 추가

다음으로 Toggle Module에 삽입할 모듈을 추가해야 합니다. 이 예에서는 Toggle Module의 본문에 Contract Form Module을 삽입할 것입니다. 대상 모듈과 동일한 열에 새 "휴대용" 모듈을 추가하는 것이 중요합니다.

이렇게 하려면 토글 모듈 바로 아래에 새 문의 양식 모듈을 추가합니다.

연락처 양식(삽입하려는 모든 모듈의) 설정에서 고급 탭을 클릭하고 다음 CSS 클래스를 추가합니다.

• CSS 클래스: divi-portable-module

열 클래스 추가

다음으로 두 모듈을 모두 포함하는 열에 사용자 정의 클래스를 추가해야 합니다. 열 설정을 열고 다음 CSS 클래스를 추가합니다.

• CSS 클래스: 부모 열

코드 추가

이 작업을 수행하는 데 필요한 코드는 매우 짧고 간단합니다. 기본적으로, 우리는 "클래스와 사업부 내에서 그 모듈의 각 상위 열 (클래스"부모 - 열 "과 하나)을 가지는 클래스"디비 휴대용 모듈 "각 모듈을 찾을 수 JQuery와 사용하고 추가 할 divi-module-destination”.

이 코드에는 버튼 모듈을 다른 모듈에 삽입하는 스니펫과 Divi 행을 모듈에 삽입하는 스니펫도 포함되어 있습니다.

코드를 추가하려면 문의 양식 모듈 아래에 새 코드 모듈을 추가하십시오.

필요한 코드를 붙여넣기 전에 JS를 HTML에 포함하는 데 필요한 스크립트 태그를 코드 상자 안에 추가하세요.

그런 다음 스크립트 태그 사이에 다음 코드를 붙여넣습니다.

(function ($) {
  $(document).ready(function () {

    // Option #1: Move Divi Module(s) into a Module
    // Limit: One Instance per Column
    // Use following code if you want to move 
    // a module inside another module. Each column with the
    // class 'parent-column' will append any module(s)
    // with the class 'divi-portable-module' to the div
    // with the class 'divi-module-destination'.
    // Only one instance of 'divi-module-destination' should
    // be added per column.
    $('.divi-portable-module').each(function () {
      $(this).closest('.parent-column').find('.divi-module-destination').append($(this));
    });
    
    // Buttons: Insert Button Module(s) into a Module
    // Adding a custom CSS class to a button module
    // is applied to the 'a' tag which is a child element
    // of the module wrapper. This code makes sure to append
    // the entire button module wrapper (the parent element)
    // as well. This functionality is the same as option #3 above.
    // Siimply use the class 'divi-portable-button' on a button module
    // instead of 'divi-portable-module'.
    $('.divi-portable-button').parent().each(function () {
      $(this).closest('.parent-column').find('.divi-module-destination').append($(this));
    });

    // Option #2: Move Divi Row(s) into a Module
    // Limit: One Instance per Section
    // Use the following code if you want to move 
    // a row inside a module on more than one section
    // of a page. Each section with the
    // class 'parent-section' will append any row(s)
    // with the class 'divi-portable-row' to the div
    // with the class 'divi-row-destination'.
    // Only one instance of 'divi-row-destination' should
    // be added per section.
    $('.divi-portable-row').each(function () {
      $(this).closest('.parent-section').find('.divi-row-destination').append($(this));
    });

  });
})(jQuery);

기능 이해

백엔드의 Divi Builder 내부에서 모듈은 별도로 유지됩니다. 그러나 프론트엔드의 라이브 페이지에서 결과를 보면 Toggle 모듈에 문의 양식이 삽입된 것을 볼 수 있습니다.

라이브 페이지의 코드를 살펴보면 Contact Form Module이 "divi-module-destination" 클래스가 있는 div 내부에 성공적으로 삽입되었음을 알 수 있습니다.

모듈 스타일링

앞서 언급했듯이 모듈은 백엔드 Divi Builder에서 별도의 상태로 유지됩니다. 그러나 각각에 추가한 스타일은 계속 적용됩니다. 따라서 Divi Builder를 사용하여 대상 모듈과 휴대용 모듈 모두의 업데이트 스타일을 자유롭게 추가할 수 있습니다.

참고: 경우에 따라 대상 모듈(현재 상위 모듈)의 스타일이 삽입된 모듈에 적용될 수 있습니다. 이 경우 삽입된 모듈의 설정을 업데이트하여 해당 스타일을 재정의할 수 있어야 합니다.

결과

다음은 라이브 페이지를 볼 때의 최종 결과입니다.

예 2: Blurb 모듈 내부에 토글 모듈 삽입

다음 예에서는 Blurb 모듈 내부에 Toggle 모듈을 삽입할 것입니다. 과정은 이전과 동일합니다. 코드 조각은 열당 하나의 대상 모듈 사용을 제한합니다. 즉, 대상 모듈에 추가할 수 있는 "divi-portable-module" 클래스가 있는 여러 개의 이식 가능한 모듈을 가질 수 있지만, 당 "divi-module-destination" 클래스가 있는 div의 인스턴스는 하나만 가질 수 있습니다. 열.

이를 보여주기 위해 동일한 행의 다른 열에 있는 다른 모듈 그룹에 대해 동일한 프로세스를 반복하겠습니다.

행에 새 열 추가

먼저 기존 행에 새 열을 추가합니다.

열 클래스 추가

첫 번째 열에서 했던 것처럼 새 열에 다음 CSS 클래스를 지정합니다.

• CSS 클래스: 부모 열

Blurb 모듈(대상 모듈) 추가

새 열 안에 대상 모듈 역할을 할 설명 모듈을 추가합니다.

광고 문구의 본문 안에 이식 가능한 모듈을 삽입할 위치(이 경우 모의 본문 텍스트 아래)에 "divi-module-destination" 클래스와 동일한 div 가 포함된 다음 HTML을 붙여넣습니다.

<div class="divi-module-destination"></div>

토글 모듈 추가(휴대용 모듈)

우리는 광고 문구에 토글 모듈을 추가하고 싶기 때문에 광고 문구와 동일한 열 내에 새 토글 모듈을 만듭니다.

그런 다음 Toggle 모듈에 다음 CSS 클래스를 추가하여 광고문안으로 이동/삽입하려는 모듈로 지정합니다.

• CSS 클래스: divi-portable-module

결과

이제 라이브 페이지를 확인하여 결과를 확인하십시오. 이제 토글이 블러브 모듈 내에 있습니다.

예 3: Blurb 모듈 내부에 버튼 모듈 삽입

이 다음 예제에서는 버튼 모듈을 이전 예제와 동일한 블러브 모듈에 삽입할 것입니다. 일반적으로 다른 모듈에 대해 동일한 프로세스를 반복하여 새 휴대용 모듈을 광고 문구에 추가합니다. 그러나 버튼 모듈은 백엔드에서 약간 다르게 빌드되기 때문에 버튼 모듈에 다른 클래스를 추가해야 합니다.

버튼 모듈 추가(휴대용 모듈 #2)

이렇게 하려면 이미 광고 문구에 삽입된 토글 모듈 아래에 새 버튼 모듈을 추가합니다.

그런 다음 버튼 모듈에 다음 CSS 클래스를 추가합니다.

• CSS 클래스: divi-portable-button

결과

이제 라이브 페이지에서 결과를 확인하세요. 이제 Blurb 모듈에 토글 모듈과 버튼 모듈이 포함됩니다.

다음은 "destination" div가 있는 모듈 내부에 버튼 모듈을 삽입하는 데 사용되는 해당 코드입니다. 이 코드 조각과의 주요 차이점은 버튼 클래스 "divi-portable-button"의 부모 요소(뒤에 있는 버튼 래퍼 div )를 대상으로 한다는 것입니다.

2부: Divi 행을 모듈에 삽입하는 방법

모듈 내부에 전체 행(또는 행)을 삽입하려는 경우 프로세스는 모듈을 다른 모듈에 삽입하는 것과 매우 유사합니다. 대상 모듈과 삽입하려는 이식 가능한 행이 포함된 섹션에 "parent-section" 클래스를 추가해야 합니다. "divi-row-destination" 클래스가 있는 div 를 대상 모듈에 추가해야 합니다. 그리고 대상 모듈에 삽입하려는 행에 "divi-portable-row" 클래스를 추가해야 합니다.

방법은 다음과 같습니다.

섹션 추가

먼저 페이지에 새 일반 섹션을 추가합니다.

섹션 설정의 고급 탭에서 다음 CSS 클래스를 추가합니다.

• CSS 클래스: 상위 섹션

대상 모듈에 대한 행 추가

대상 모듈을 보관할 새 1열 행을 추가합니다.

토글 모듈 추가(행 대상 모듈)

이 예에서는 Toggle 모듈 내부에 행을 삽입합니다. 따라서 행에 새 Toggle 모듈을 추가하십시오.

Toggle Module은 대상 모듈이므로 토글 설정을 열고 본문 콘텐츠에 다음 HTML을 추가합니다.

<div class="divi-row-destination"></div>

이식 가능한 행 만들기

이제 대상 모듈이 준비되었으므로 이전 행 아래에 새 행을 추가합니다. 이것은 Toggle 모듈에 삽입할 이동식 행으로 사용됩니다.

콘텐츠로 행 채우기

이 시점에서 Divi Builder를 사용하여 원하는 콘텐츠/모듈로 행을 채울 수 있습니다. 행 내부에 있는 모든 항목은 결국 토글 모듈에 삽입된다는 점에 유의하십시오.

행에 클래스 추가

그런 다음 행의 설정을 열고 다음 CSS 클래스를 제공하여 Toggle 모듈에 삽입하려는 행으로 지정합니다.

• CSS 클래스: divi-portable-row

작동 원리

참고로 백엔드에서 Divi Builder를 사용하여 레이아웃을 편집할 때 행은 모듈과 분리된 상태로 유지됩니다. 그러나 Toggle Module 내부에 행을 삽입하는 기능이 있습니다.

결과

결과를 보려면 라이브 페이지를 확인하고 토글 모듈을 엽니다. 이제 전체 행이 포함됩니다.

다음은 이를 가능하게 하는 해당 코드 스니펫입니다. 사용 중인 해당 클래스를 확인하십시오.

모듈 내부에 여러 행 삽입

섹션당 대상 모듈의 하나의 인스턴스(즉, "divi-row-destination" 클래스가 있는 div )를 유지하는 한 동일한 클래스 "divi-portable-row"를 지정하기만 하면 해당 대상에 여러 행을 삽입할 수 있습니다. ".

예를 들어, 이전에 만든 메뉴 항목이 있는 행 위에 갤러리 모듈이 있는 다른 행을 추가할 수 있습니다. 그런 다음 행에 동일한 클래스 "divi-portable-row"를 지정하십시오.

"divi-portable-row" 클래스가 있는 두 행 모두 토글 모듈에 삽입됩니다.

플러그인/단축코드 사용

비슷한 기능을 하고 더 많은 유연성이나 옵션을 제공하는 플러그인을 찾고 있다면 마켓플레이스에서 짧은 코드를 사용하여 페이지에 모든 Divi 레이아웃을 포함할 수 있는 Divi용 Shortcodes 플러그인을 확인할 수 있습니다. 플러그인을 설치하면 Divi 라이브러리에 저장한 각 레이아웃에 대해 삽입 가능한 단축 코드가 생성됩니다.

마지막 생각들

대부분의 경우 특별한 필요가 없는 한 모듈이나 행을 다른 모듈에 삽입할 필요가 없습니다. 일반적으로 이러한 유형의 작업을 수행하지 않고도 필요한 레이아웃/디자인을 얻을 수 있습니다. 그러나 플러그인에 의존하지 않고도 이 작업을 수행할 수 있는 간단한 방법을 찾고 있는 사용자에게는 이 솔루션이 유용할 것입니다.

또한 가능한 모든 응용 프로그램을 생각하십시오!

댓글로 여러분의 의견을 기다리겠습니다.

건배!