Divi 5의 루프 빌더로 사용자 정의 블로그 게시물 루프를 만드는 방법

귀하의 브랜드는 정적 레이아웃에 의해 제약을받지 않아야하므로 Divi 5가 계속 발전함에 따라 전체 유연성을 제공하는 것을 목표로합니다. Divi 5의 새로운 루프 빌더는 그 방향의 큰 단계입니다. 항목을 한 번 디자인하고 동적 그리드 또는 목록으로 반복 할 수 있습니다.

이 튜토리얼에서는 사용자 정의 블로그 게시물 루프를 설정하는 방법을 보여줍니다. 목록을 설계하고, 동적 필드를 연결하고, 쿼리를 설정하고, 깨끗한 그리드 또는 목록의 레이아웃을 개선 할 수 있습니다. 그것에 가자!

Divi 5의 루프 빌더는 무엇입니까?

Divi 5의 루프 빌더를 사용하면 원하는만큼 많은 Divi 모듈을 사용하여 Visual Builder에 단일 "카드"레이아웃을 설계 한 다음 Divi는 표시하려는 각 항목에 대해 반복됩니다.

YouTube 채널을 구독하십시오

열에서 루프 요소를 활성화하고 쿼리 (게시물, 프로젝트, 약관 또는 사용자와 같은 사용자 정의 게시물 유형)를 설정하고 제목, 주요 이미지, 카테고리, 사용자 정의 필드 및 버튼과 같은 동적 필드를 맵핑하십시오. 요소를 재정렬하고 간격을 제어하며 모든 것이 글로벌 스타일을 물려받을 수 있습니다.

결과적으로 추가 플러그인이나 사용자 정의 코드없이 시스템과 일치하는 반응 형 재사용 가능한 목록이 있습니다.

루프 빌더의 작동 방식

컨텐츠 탭을 열고 루프를 활성화하여 모든 섹션, 행, 열 또는 모듈에서 루프 모드를 켜질 수 있습니다.

이 시점부터 Divi는 설정과 일치하는 각 게시물의 요소를 자동으로 반복합니다.

실제 컨트롤이 들어오는 곳이 있습니다. 루프 설정에서는 다음과 같습니다.

• 쿼리 유형 : 기본 게시물 쿼리 또는 메타 쿼리 중에서 선택, 카테고리별로 필터링, 태그, 사용자 지정 필드 또는 기타 메타 데이터.
• 게시물 유형 : 블로그 게시물에서 제품, 사용자 정의 게시물 유형에 이르기까지 표시 할 콘텐츠 유형을 선택하십시오.
• 특정 용어가있는 게시물 만 포함합니다. 특정 범주, 태그 또는 기타 분류 용어와 일치하는 게시물 만 표시하십시오.
• 특정 용어로 게시물을 제외하십시오. 선택한 범주, 태그 또는 용어와 일치하는 게시물을 제거하십시오.
• 특정 게시물 만 포함 : 포함 할 개별 게시물을 선택하십시오.
• 특정 게시물 제외 : 루프에서 원하지 않는 개별 게시물을 숨 깁니다.
• 메타 쿼리 : 나타나는 것을 제어하기 위해 사용자 정의 필드 조건을 추가하십시오.
• 주문 : 결과가 날짜, 제목, 메뉴 순서 또는 사용자 정의 필드 값별로 정렬되는지 여부를 선택하십시오.
• 순서 : 오름차순 또는 내림차순 순서가 표시됩니다.
• 페이지 당 게시물 : 페이지 매김 전에 게시물 표시 수를 결정합니다.
• 사후 오프셋 : 처음부터 특정 수의 게시물을 건너 뛰고 특집 섹션이있는 중복을 피하기 위해 편리합니다.
• 끈적 끈적한 게시물을 무시하십시오 : 끈적 끈적한 게시물이 우선 순위가되거나 일반 게시물처럼 취급되는지 여부를 선택하십시오.

쿼리를 정의하면 Divi는 레이아웃과 스타일링을 동일하게 유지하면서 각 엽서를 올바른 콘텐츠로 자동으로 채우십시오. 당신은 카드가 어떻게 보이는지에 중점을두고 Divi는 인구와 반복을 처리합니다. 단일 패널에서 모든 것이 제어되면 수동 편집없이 블로그 목록을 업데이트하는 데 몇 가지 설정이 필요합니다.

Divi 5의 루프 빌더에 대한 모든 것을 배우십시오

Divi 5로 사용자 정의 블로그 게시물 루프 작성

루프 빌더로 사용자 정의 블로그 게시물 루프를 구축하려면 두 부분이 있습니다. 먼저 엽서 레이아웃을 설계하여 내용이 나타나는 내용과 모양을 정확히 선택합니다. 그런 다음 해당 디자인을 루프 안에 넣으므로 Divi는 표시하려는 모든 게시물에 대해 자동으로 반복됩니다.

카드 레이아웃부터 시작하여 루프를 설정하여 단계별로 진행할 것입니다.

시작하기 전에

블로그 모듈에서 루프 빌더로 이동하고 이미 블로그 목록 페이지가있는 경우 루프 레이아웃 생성으로 건너 뛸 수 있습니다. 그렇지 않다면 다음은 빠른 설정입니다.

1. 블로그 페이지를 추가하십시오

WordPress 대시 보드에서 페이지로 이동하십시오> 새로운 추가 , 이름을 "블로그"로 이동하여 게시하십시오.

이 페이지는 게시물의 기본 허브가됩니다.

2. WordPress 설정에서 블로그 페이지를 설정하십시오

설정> 읽기 에서 정적 페이지를 선택하십시오. 홈페이지를 집 에 할당하고 새 블로그 페이지를 게시물 페이지에 할당하십시오.

별도의 홈페이지 및 블로그 목록 페이지를 사용하는 경우에만 필요합니다.

3. 테마 빌더 템플릿을 만듭니다

다음으로 블로그 목록 페이지에 새 템플릿을 만들게됩니다. 이미 하나가 있다면 사용자 정의 할 수 있습니다. 최신 Divi 5 버전을 사용하여 루프 빌더에 액세스하십시오.

Divi> 테마 빌더 에서 새 템플릿 추가> 새 템플릿 빌드를 클릭하십시오.

블로그 페이지에 할당하고 템플릿 생성을 클릭하십시오.

블로그 게시물 목록 페이지를 디자인하려면 사용자 정의 본문 추가> 사용자 정의 본문 구축을 클릭하십시오.

이제 Divi Builder에 들어가서 루프 레이아웃 구축을 시작할 것입니다.

1. 레이아웃을 가져옵니다

레이아웃으로 시작하면 많은 시간을 절약하고 처음부터 일관된 디자인을 유지하는 데 도움이 될 수 있습니다. 이 튜토리얼의 경우 브랜딩에 마케팅 대행사 블로그 페이지 레이아웃을 사용하고 있습니다.

동일하게 선택하거나 작업하기에 좋은 기반을 제공하는 레이아웃을 가져올 수 있습니다. 템플릿에 있으면 처음부터 모든 것을 구축하는 대신 필요에 적응할 수있는 기성품 구조가 있습니다.

2. 하나의 블로그 게시물 카드를 디자인하십시오

루프 빌더의 유연성이 실제로 나오는 곳입니다. 블로그 모듈의 고정 레이아웃에 고정되는 대신 우체국의 고정 레이아웃과 엽서가 어떻게 정리되는지 정확하게 결정합니다.

템플릿에 새 섹션을 추가하십시오. 사전 디자인 된 구조에서 선택하거나 원 열 옵션을 사용하여 직접 만들 수 있습니다.

이 예에서는 3 열 행 구조 섹션을 선택해 봅시다.

첫 번째 열에서는 엽서를 만들 것입니다. 모듈 그룹을 사용하여 모든 요소를 ​​유지하겠습니다.

그런 다음 특집 이미지의 이미지 모듈, 게시물 제목의 제목 모듈 및 발췌 용 텍스트 모듈을 추가하십시오. 또한 메타 정보와 더 읽기 버튼을 추가하여 방문자가 전체 게시물로 클릭 할 수 있습니다.

기본 구조가 있으면 카드 디자인을 사용자 정의하여 브랜드에 맞습니다. 색상, 글꼴, 간격 및 독특한 시각적 세부 사항을 조정합니다.

3. 행 랩핑을 활성화합니다

카드가 다른 화면 크기의 행으로 깔끔하게 표시되도록하려면 Flex 랩핑을 활성화 할 수 있습니다. 기본 행을 선택하고 디자인 탭을 엽니 다.

레이아웃으로 이동하십시오. 레이아웃 스타일이 Flex로 설정되어 있는지 확인하십시오.

필요한 경우 카드가 새 라인으로 이동할 수 있도록 레이아웃 포장을 활성화 한 다음 디자인에 가장 적합한 래핑 정렬을 선택하십시오.

4. 루프를 켜십시오

이제 모든 자동으로 만드는 단계가 온다. 카드 열을 선택하십시오.

그런 다음 컨텐츠 탭에서 루프 옵션을 켭니다. 루프가 활성화되면 Divi는 쿼리 설정을 충족하는 각 게시물에 대한 카드 디자인을 반복합니다.

이 레이아웃의 경우 다음을 설정했습니다.

• 게시물 유형 : 게시물
• 페이지 당 게시물 : 10
• 주문 : 날짜
• 주문 : 하강 (최신 첫 번째)
• 사후 오프셋 : 0 (최신부터 시작하여 모두 표시)
• 끈적 끈적한 게시물을 무시하십시오 : 예

이 작은 조정은 그리드가 원하는 순서대로 원하는 게시물을 정확하게 표시하는지 확인합니다. 레이아웃을 다른 요구에 맞게 조정하기 위해 언제든지 이러한 값을 변경할 수 있습니다.

5. 동적 컨텐츠를 추가하십시오

루프에 생명을 불어 넣는 마지막 단계는 카드의 각 모듈을 라이브 포스트 데이터에 연결하는 것입니다. 이것이 정적 카드를 자동화 된 항상 최신 명 목록으로 바꾸는 것입니다. 예를 들어:

• 이미지 모듈을 게시물의 주요 이미지에 연결하십시오.
• 제목 모듈을 게시물 제목에 연결하십시오.
• 텍스트 모듈을 게시물 발췌문에 연결하십시오.
• 더 읽기 버튼을 Post URL에 연결하십시오.

루프가 루프되면 Divi는 자리 표시 자 콘텐츠를 루프의 각 게시물에 대한 올바른 데이터로 대체합니다.

특집 이미지를 설정하려면 이미지 모듈을 열고 이미지 옵션 위로 가져 가서 동적 컨텐츠 아이콘을 클릭하십시오. 루프 추천 이미지를 선택하면 모든 관련 이미지가 즉시 채워집니다.

게시물 제목, 게시 날짜, 발췌문 및 표시하려는 다른 필드에 대해서는 반복하십시오.

모듈의 동적 컨텐츠 아이콘을 클릭하면 전체 루프 특정 옵션이 표시됩니다. 당신은 제목과 이미지에만 국한되지 않습니다. 게시 날짜, 수정 날짜, 저자 이름, 댓글 수, 카테고리, 태그 및 사용자 정의 필드를 표시 할 수도 있습니다.

이것은 당신의 엽서가 당신이 원하는만큼 최소한이거나 상세 할 수 있음을 의미합니다. 깨끗하고 이미지 중심의 그리드, 콘텐츠가 풍부한 레이아웃을 구축하거나 틈새 커스텀 포스트 유형 필드를 강조 표시하십시오. 한 번 디자인하면 Divi는 전체 루프 전체에서 정확하고 일관성을 유지합니다.

6. 템플릿을 저장하고 미리보기를 저장하십시오

모든 것이 제대로 보이면 최종 조정을하고 Divi Builder 및 Theme Builder의 변경 사항을 저장하십시오 .

루프가 작동하는 것을 보려면 페이지를 미리보십시오. 완성 된 블로그 목록 페이지는 다음과 같습니다.

블로그 모듈에는 한계가 있었으며 루프 빌더는 그렇지 않습니다

블로그 모듈이 잘 작동 했으므로 왜 루프 빌더를 추진합니까? “미세”는 고정 된 것을 의미하기 때문입니다. 블로그 모듈은 템플릿에 잠겨 있었지만 루프 빌더는 빈 캔버스를 제공합니다. 레이아웃, 순서, 스타일 및 Divi 루프를 자동으로 선택합니다.

그것이 진짜 교대입니다 : 당신은 다른 사람의 템플릿을 조정하는 것이 아니라 자신의 디자인을 설계하고 있습니다. 다시 한 번 실천하고 일반적인 블로그 모듈 구조와 다른 레이아웃을 설계합시다.

먼저 1 열 행과 섹션을 추가하십시오. 크기를 조정하고 행에 플렉스 및 플렉스 포장이 활성화되어 있는지 확인하십시오.

이 행에는 블로그 카드가 포함됩니다. 이제 열 안쪽에 다른 중첩 행을 추가하여 왼쪽의 이미지와 오른쪽에있는 게시물의 메타 데이터를 사용하여 카드 구조를 만듭니다.

원하는대로 구조를 정확하게 설계하십시오. 블로그 모듈 시퀀스를 따라갈 필요가 없습니다. 지금은 왼쪽 열을 비워 두십시오. 특집 이미지를 열의 배경 이미지로 추가하겠습니다.

블로그 목록 카드를 사용자 정의하십시오.

디자인> 레이아웃> 수직 간격 옵션의 오른쪽 열에서 모듈 그룹의 수직 간격을 수정할 수도 있습니다.

다음으로 루프 옵션을 활성화합니다. 부모 행에서 첫 번째 열을 선택하십시오.

다시, 우리는 동적 컨텐츠를 루프합니다. 이미지부터 시작하여 왼쪽 열의 배경 옵션으로 이동하면 나머지는 동일합니다.

이것은 목록 스타일의 블로그 루프입니다. 이제 이것을 그리드로 변환하려면 열의 너비를 변경하십시오. 우리는 행에 플렉스 포장을 활성화하기 때문에 크기를 바꿀 때 카드가 스스로 감싸게됩니다.

이로 인해 이미지가 너무 커지면 발췌를 제거하고 행의 열 구조를 변경하며 수평 간격을 0으로 조정할 수도 있습니다.

그리고 당신의 그리드도 준비된 것처럼 마찬가지입니다.

이 예제는 루프 빌더가 가능하게하는 것을 엿볼 수 있습니다. 실제 테이크 아웃은 더 이상 소수의 사전 설정 레이아웃에만 국한되지 않는다는 것입니다. 엽서의 모든 부분은 당신의 것이 당신의 것이며, 스타일 및 재구성하는 것입니다. Divi는 자동으로 반복하는 것을 관리합니다. 이러한 유연성은 간단한 블로그 목록을 귀하의 사이트를 위해 설계된 느낌으로 바꾸는 것입니다.

Pagination 모듈을 사용하십시오

루프 쿼리에서 페이지 당 게시물을 제한하면 독자가 나머지를 볼 수있는 방법을 원할 것입니다. 그리드 아래에 Pagination 모듈을 추가하고 대상 루프를 루프를 활성화 한 요소로 설정하십시오. 전체 연습을 보려면 Divi 5의 루프 빌더 및 Pagination 모듈 사용 방법을 참조하십시오. 자습서를 읽으십시오.

블로그 템플릿을 다운로드하십시오

블로그 템플릿 내부의 그리드를 실험하려면 아래 튜토리얼에서 사용 된 템플릿을 다운로드하십시오. 이를 가져 오려면 Divi 테마 빌더로 이동하십시오. 오른쪽 모서리의 가져 오기/내보내기 아이콘을 사용하여 이들을 가져올 수 있습니다.

파일을 다운로드하십시오

무료로 다운로드하십시오

Divi 뉴스 레터에 가입하면 Ultimate Divi Landing Page Layout Pack의 사본과 다른 놀라운 무료 Divi Resources, Tips 및 Tricks를 이메일로 보내 드리겠습니다. 따라 오면 당신은 곧 Divi Master가 될 것입니다. 이미 구독 한 경우 아래의 이메일 주소를 아래에 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

당신은 성공적으로 구독했습니다. 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하려면 이메일 주소를 확인하십시오!

오늘 Divi 5에서 사용자 정의 블로그 게시물 루프 구축

Divi 5의 루프 빌더 이전에 진정한 맞춤형 블로그 게시물 루프를 만드는 것은 종종 엄격한 템플릿으로 레슬링을하거나 모든 작은 변경에 대한 사용자 정의 코드를 작성하는 것을 의미했습니다. 이제 그것은 처음부터 끝까지 시각적 인 과정입니다. 카드를 한 번 디자인하고 모듈을 라이브 포스트 데이터에 연결하고 Divi가 나머지를 처리하도록합니다.

블로그 모듈의 한도를 중심으로 작업 한 경우 Loop Builder는 기다리고있는 업그레이드입니다. 다음 프로젝트에서 시도해보고 원하는 방식으로 정확하게 보이는 블로그 (또는 제품, 이벤트 또는 목록)를 만드는 것이 얼마나 쉬운 지 확인하십시오!