블로그 모듈 대 Divi 5의 루프 빌더 사용

블로그 모듈은 박스에서 작동하는 Divi의 내장 피드 생성기입니다. 타이틀, 이미지, 발췌 및 메타 데이터에 대한 토글이있는 게시물을 나열하는 빠른 방법을 제공합니다.

Divi 5의 새로운 루프 빌더는 다른 접근 방식을 취합니다. 모든 모듈로 항목을 디자인 한 다음 동적 콘텐츠를 공급합니다. 두 도구 모두 루프 컨텐츠를 표시하지만 각각은 다른 시나리오에서 빛납니다. 시간을 절약하고 좌절을 방해하는시기를 아는 것. 둘을 비교해 봅시다.

YouTube 채널을 구독하십시오

미니 용어집

이것은 루프 빌더의 개념을 처음 접하는 초보자를위한 짧은 용어입니다.

• CPT (Custom Post Type) : 제품 또는 코스와 같은 사용자 정의 콘텐츠 유형. 게시물처럼 작동하지만 고유 한 필드를 가질 수 있습니다.
• 사용자 정의 필드 : 게시물, 페이지 또는 CPT에 추가 된 필드. 음식 메뉴의 예로는 가격, 등급, 글루텐/알레르기 선언 및 매운 수준이 포함될 수 있습니다.
• 리피터 필드 : 개별 게시물 내부에 항목 목록을 저장하는 필드. 사용자 정의 콘텐츠에 유효 할 수있는 하위 목록에 대해 생각해보십시오.
• 필드 플러그인 : ACF 는 일반적인 선택이지만 포드 , 메타 박스 , ACPT 및 툴셋 도 작동합니다.

세부 사항 중 일부에서 길을 잃으면이 용어집을 다시 참조하십시오. 그러나 우리는 길을 따라 당신을 위해 일을 단순하게 만들 것입니다.

블로그 모듈과 함께 간단한 게시물 및 게시물 유형 피드 표시

블로그 모듈은 인식 가능한 블로그 패턴을 위해 구축되었습니다. 그것은 일반적인 요소를 가정하고 쇼를 전환하고 설정을 빠르게 유지하고 결정을 간단하게 유지할 수 있습니다.

WordPress에서 블로그 게시물이 어떻게 작동하는지 생각해보십시오. 모든 게시물은 블로그 컨텐츠로 인식 할 수있는 특정 공통 요소를 공유합니다. 이러한 공유 특성에는 다음이 포함됩니다.

1. 1. 게시물 제목
   2. 주요 이미지
   3. 게시 컨텐츠
   4. URL 슬러그
   5. 작가
   6. 카테고리
   7. 그리고 더

블로그 모듈은 기존 게시물을 염두에두고 설계되었습니다. 타이틀은 게시물이 무엇을 다루는지 알려줍니다. 주요 이미지는 시각적 추첨을 추가합니다. ExcerPts 컨텐츠를 미리 봅니다. 메타 데이터는 누가 그것을 썼는지 그리고 언제 썼다고 말합니다.

Divi의 블로그 모듈은 이러한 요소와 자동으로 동기화됩니다. 당신은 그것을 페이지에 떨어 뜨려 보여줄 것을 선택합니다. 피드에는 사용자 정의 쿼리 작업이 전혀 없습니다 (표시되는 내용을 제한하지 않으려면 쿼리 도구가 내장되어 있습니다).

토글 접근법은 변화를 고통스럽게 만듭니다. 저자를 숨길 수는 있지만 날짜를 유지하거나 이미지를 표시하거나 발췌문을 건너 뛸 수 있습니다. 작은 결정은 빠른 결과를 산출합니다.

사용자 정의 게시물 유형 : 제한이지만 기능적입니다

블로그 모듈은 일반 게시물을 표시하고 사용자 정의 게시물 유형을 올바르게 등록 할 수 있습니다.

CPT가 표준 포스트 필드를 반영 할 때 블로그 모듈은 잘 작동합니다. 실제 사용자 정의 데이터가 필요할 때 제한됩니다. 따라서 팀원 CPT는 상황이 단순하게 유지되면 작동합니다.

• 이름은 제목에 맵핑됩니다.
• 헤드 샷/아바타는 특집 이미지에 맵핑됩니다.
• 컨텐츠에 바이오지도.

블로그 모듈은이 상황을 쉽게 처리합니다.

맞춤형 필드

기본 게시물이 공유하지 않는 모든 필드로 제한이 나타납니다.

소셜 링크, 인증 또는 수년간의 경험은 기본 WordPress 블로그 게시물에있는 표준 필드를 위해 구축 되었기 때문에 블로그 모듈에는 나타나지 않습니다. 모듈에는 해당 사용자 정의 필드에 대한 토글이 없습니다.

맞춤형 레이아웃

레이아웃 제어도 약간 제한됩니다. 모듈은 고정 구조 내부의 요소를 고정 순서로 포장합니다. 사용자 정의 CSS를 사용하지 않으면 제목과 이미지를 재정렬 할 수 없습니다. Flexbox 또는 Block을 통해 각 블로그 카드의 레이아웃을 관리 할 수는 있지만 하위 항목 (카드)에는 Child Flexbox 제어를위한 크기 조정 설정이 없습니다 (적합하거나 성장하기 위해 수축하거나 성장할 수 있음).

블로그 모듈은 표준 카드 레이아웃에 우수하고 빠릅니다. 약간의 창의적인 버그를 얻는다면 더 많은 맞춤을 찾고있을 수 있습니다.

루프 빌더를 사용하는 사용자 정의 게시물 유형 + 사용자 정의 필드

Divi의 루프 빌더는 동적 컨텐츠를 표시하는 다른 접근 방식을 제공합니다. 미리 정해진 요소가있는 단일 모듈의 제약 조건 내에서 작동하는 대신, 루프 빌더를 사용하면 구상 한대로 정렬 된 개별 디비 모듈에서 컨텐츠 디스플레이를 구성 할 수 있습니다.

루프 빌더를 사용하려면 더 많은 생각과 준비가 필요하지만 블로그 모듈과 함께하는 방식에는 제한되지 않습니다. 블로그 모듈을 사용하면 기존 제약 조건 내에서 작업하고 사전 결정된 옵션을 최대한 활용합니다. 루프 빌더를 사용하면 빈 캔버스로 시작하여 Divi 모듈의 조합을 사용하여 필요한 것을 정확하게 구성합니다.

루프 빌더의 작동 방식

루프 빌더는 단일 모듈이 아닙니다. 선택한 모듈이있는 컨테이너입니다. 컨테이너가 "루프"로 설정되면 각 일치 결과에 대해 자체적으로 반복됩니다. 컨테이너 내부에는 이미지, 제목, 텍스트 및 버튼 모듈을 배치 할 수 있습니다.

각 모듈의 내용을 올바른 토큰에 바인딩합니다. Divi의 UI는 이것을 매우 간단하게 만듭니다. 이미지는 특집 이미지를 가리 킵니다. 제목은 제목을 가리 킵니다. 버튼은 Post URL로 연결됩니다.

이 모듈 식 접근법은 구조 및 간격 제어를 제공합니다. 제목 위 또는 제목 옆에 이미지를 넣을 수 있습니다. 두 개의 사용자 정의 필드에 두 개의 텍스트 블록을 추가 할 수도 있습니다. 이렇게하면 모듈을 통해 미리 구성된 카드가 아닌 필요한 카드를 만들 수 있습니다.

사용자 정의 게시물 유형 및 사용자 정의 필드가 포함 된 예

몇 가지 빠른 시나리오 로이 콘크리트를 만들어 봅시다. 우리는 패턴을 유지하고 필드를 교환 할 것입니다. 이전 예제의 카드 디자인을 사용하여 사용자 정의 게시물 유형 및 사용자 정의 필드를 사용하여 어떻게 조정할 수 있는지 살펴 보겠습니다.

먼저 표준 블로그 게시물에 대한 사용자 정의 루프를 작성하십시오. 제목, 카테고리, 게시 날짜 및 기능 이미지의 표준 필드와 함께 스탠드 게시물 '게시물 유형'을 사용하십시오. 디자인의 각 모듈에 각각을 매핑하십시오. 이들은 표준 포스트 필드를 사용하지만 고유 한 레이아웃으로 배열됩니다.

우리는 간단한 부동산 목록을 위해 비슷한 일을 할 수 있습니다. 동일한 카드 레이아웃을 사용하여 제목 제목, 침실, 욕실 및 속성 설명에 할당 된 텍스트 모듈 및 URL 목록에 바인딩 된 버튼으로 맞춤형 게시물 유형에서 콘텐츠를 채울 수 있습니다.

최종 결과는 블로그 카드처럼 보이지만 루프 빌더의 기능을 사용하여 사용자 정의 필드 및 사용자 정의 게시물 유형에서 컨텐츠를 할당합니다.

CPT에 대한이 모든 이야기, 어떻게 만드나요? ACF (Advanced Custom Fields) 가 여기에서 선택합니다. 포드, 메타 박스, ACPT 및 도구 세트는 루프 빌더를 읽을 수있는 필드를 만듭니다. 예산, 경험 및 스택에 맞는 것을 사용하십시오.

부동산 웹 사이트의 메모 : IDX에서 목록을 CPT로 WordPress로 가져 오는 전용 플러그인을 사용하고 싶을 것입니다. 이렇게하면 신선한 데이터와 최소한의 수동 작업이 있습니다 (매일 아침 수동으로 속성을 입력하고 싶지는 않습니다).

맞춤형 레이아웃 용 Flexbox

Flexbox는 루프 빌더와 자연스럽게 쌍을 이룹니다. 사용자 정의 CS가없는 깨끗하고 반응이 좋은 구조를 위해 두 레벨로 사용할 수 있습니다.

먼저 외부 루프 컨테이너를 스타일링하십시오. 루프 부모 컨테이너를 선택하십시오. 플렉스 레이아웃을 켭니다. 행으로 방향을 설정하십시오. 여러 개의 플렉스 줄을 원하는 경우 랩을 활성화하십시오. 항목 간 간격을 제어하도록 간격을 설정하십시오. 그런 다음 사이징 옵션을 사용하여 루프가있는 하위 컨테이너의 크기를 조정하십시오. 컨테이너 플렉스 컨트롤과 하위 플렉스 컨트롤 사이의 루프 요소에 대한 반응이 좋고 매력적인 레이아웃을 만들 수 있습니다.

둘째, 내부 카드 레이아웃을 스타일링하십시오. 루프 항목 내부의 루트 컨테이너 (예 : 열 또는 그룹 모듈)를 선택하십시오. 레이아웃 옵션에서 일부 요소를 나란히 원하는 경우 Flex 방향을 행으로 설정하십시오. 이미지 모듈의 너비를 컨테이너의 공간의 약 절반을 차지하도록 설정하십시오. 텍스트 영역 (이 경우 다양한 모듈이있는 그룹 컨테이너)이 나머지를 채우게하십시오 (그룹 모듈 크기 옵션을 채우기 위해 성장).

원하는대로 다양한 컨테이너 나 모듈을 정리할 수 있습니다. 당신은 미리 구성된 레이아웃에 잠겨 있지 않습니다. 여기서 제목을 왼쪽 그룹에 넣고 오른쪽 그룹을 Flex 열로 설정했습니다. 이것은 우리에게 미묘하지만 독특한 레이아웃의 변화를 제공합니다. 실제로 가능성이 부족하지 않습니다.

프로젝트에 적합한 도구를 선택합니다

이것은 원시 기능에 관한 것이 아니라 올바른 착용감을 찾는 것입니다. 요구 사항을 충족하는 가장 빠른 경로를 선택하십시오. 필요할 때 도구를 전환하십시오. 때로는 블로그 모듈이 트릭을 수행하지만 루프 빌더가없는 강력한 피벗이 있습니다.

블로그 모듈이 이상적인 경우

콘텐츠가 표준 게시물 패턴을 따를 때 블로그 모듈에 도달하십시오. 제목, 주요 이미지, 발췌 및 기본 메타는 달콤한 지점입니다. 기본 뉴스 사이트, 회사 업데이트 및 간단한 포트폴리오가 자격이 있습니다. 방문객들은 기존의 레이아웃을 기대하며 최소한의 설정으로 신뢰할 수있는 솔루션을 원할 수 있습니다.

블로그 모듈을 사용하면 몇 분 안에 작업 피드를 배송 할 수 있습니다. 움직이는 부품이 줄어들면 물건을 깨뜨릴 기회가 줄어들거나 혼란스러워집니다.

"루프"개념에서 여전히 손실 될 수있는 비 기술적 사용자는 여전히 블로그 모듈에 크게 의존합니다. 훌륭한 도구이며 절대적으로 사용해야합니다.

루프 빌더가 필수화되면

게시물이없는 필드가 필요하거나 카드 구조가 재고 패턴과 일치하지 않을 때 루프 빌더를 사용하십시오. 전자 상거래, 부동산 및 교육은 더 많은 사용자 정의가 필요한 경향이있는 전형적인 산업입니다. 각각은 사용자 정의 필드에 사는 세부 사항이 필요합니다. 더 많은 콘텐츠 또는 더 많은 유형의 콘텐츠로 작업 할 때 레이아웃에는 더 많은 유연성이 필요합니다.

콘텐츠 관계가 복잡해지면 루프 빌더를 사용하십시오. 게시 유형을 하나의보기로 혼합하고 리피터의 콘텐츠를 표시해야 할 수도 있습니다.

Divi 5로 자신의 블로그 모듈 레이아웃을 구축하십시오

Divi의 블로그 모듈은 여전히 ​​표준 피드를 배송하는 가장 빠른 방법입니다. 루프 빌더는 사용자 정의 카드, 맞춤형 필드 및 리피터를 잠금 해제합니다. 루프 빌더는 생각하는 정확한 레이아웃과 디자인으로 사용자 정의 및 성형 할 수 있으며 블로그 모듈에는 몇 가지 제한 사항이 있습니다.

이 결정의 가장 중요한 부분은 툴킷에 두 가지를 유지하고 작업을 기반으로 선택할 수 있다는 것입니다. Divi 5는 함께 모여서 그 어느 때보 다 강력하고 안정적입니다. 사용하지 않았다면 다음 웹 사이트에서 시도해보십시오. 공개 베타는 바로 모퉁이에 있으며, 이는 기존의 디비 사이트가 기존 웹 사이트의 마이그레이션을 테스트하기 위해 가깝다는 것을 의미합니다.

Divi 5에 대해 Divi 5Learn을 더 다운로드하십시오