Divi 5의 루프 빌더 및 Paglination 모듈을 함께 사용하는 방법

선택된 포스트 컨텐츠의 정적 목록은 선택된 게시물 세트를 표시하는 경우 괜찮습니다. 그러나 종종 사용자가 원래 루프 쇼보다 더 많은 콘텐츠에 액세스 할 수 있기를 원합니다. 처음에 콘텐츠로드의 양을 결정하고 독자에게 배치 사이를 분명하게 이동할 수있는 방법을 제공하려고합니다. 여기에서 Divi 5의 루프 빌더 및 Pagination 모듈이 완벽한 쌍을 만드는 곳입니다.

이 게시물은 각 작동 방식을 안내하고 연결하는 방법을 보여줍니다. 결국, 적절한 페이지 매김으로 루프 레이아웃을 구축하는 방법을 알 수 있습니다.

Divi 5의 루프 빌더를 만나십시오

루프 빌더는 Divi 5의 가장 큰 업그레이드 중 하나입니다. 이전 블로그 모듈이 할 수없는 자유를 제공합니다. 모든 요소는 "루프"컨테이너가 될 수 있습니다. 즉, Divi는 각 게시물, 제품 또는 쿼리와 일치하는 사용자 정의 게시물 유형에 대해 자동으로 반복됩니다.

사전 디자인 된 게시물 목록이 붙어있는 대신 하나의 "템플릿"항목을 루프로 설계합니다. Divi는 각 결과마다이를 사용하여 루프의 쿼리에서 동적 컨텐츠를 교환합니다. 이것은 다음과 같습니다.

• 게시물 데이터에서 가져 왔습니다
• 주요 이미지
• 맞춤형 필드
• 전체 게시물 또는 제품에 대한 링크

블로그 특정 모듈뿐만 아니라 모든 모듈을 사용 하여이 데이터를 표시 할 수 있습니다. 최신 코스 목록을 보여주는 멋진 Blurb 모듈을 원하십니까? 완료. WooCommerce 품목에 맞는 맞춤형 제품 카드 레이아웃이 필요하십니까? 또한 완료되었습니다.

디자인과 컨텐츠 구조를 직접 구축하기 때문에 유연합니다. Divi는 반복을 처리합니다.

블로그 모듈에서 루프 빌더로 전환한다는 것은 표준 템플릿에서 완전히 사용자 정의 가능한 레이아웃 시스템으로 이동하는 것을 의미합니다. 나는 그것으로 건축을 정말 즐겼다.

Pagination 모듈을 만나십시오

Pagination은“결과를 페이지로 나누는 것”이라고 말하는 멋진 방법입니다. 단일 페이지에 모든 항목을 버리는 대신 더 작은 세트로 나눕니다. 도움이됩니다.

• 페이지로드 시간
• 가독성
• 스캔 가능성

Divi 5의 Pagination Module은 정확히 그 일을하지만 일부는 스마트 통합으로 수행합니다. 블로그 게시물에만 연결되어 있지 않습니다. 대신 페이지에 구축 한 루프에 연결할 수 있습니다.

사용자 정의 할 수있는 라벨을 통해 두 가지 탐색 요소 (예약 및 다음 링크)를 추가하여 작동합니다. 현재 세트를 지나서 이전 항목이있는 경우 "이전"(또는 선택한 텍스트)이 활성화됩니다. 최신 항목이 있으면 "최신"이 활성화됩니다.

루프 + 페이지 매김 레이아웃 구축

전체 설정을 통해 실행합시다. 이 예제는 그 아래에 페이지 매김이있는 사용자 정의 루프를 원한다고 가정합니다. 다음은 루프를 표시 할 Flex 레이아웃입니다. 아래에 완전히 제작 된 레이아웃을 다운로드 할 수 있습니다.

카드의 너비와 플렉스 키가 ~ 50%로 설정되어 있으므로 루프 카드가 플렉스 줄 자체에있을 때 컨테이너 내부의 전체 너비가됩니다.

1 단계 : 루프 컨테이너를 만듭니다

페이지에 섹션을 추가하십시오. 그 안에 반복하려는 모듈을 추가하십시오. 이것은 단일 모듈 (같은 모듈) 또는 열이나 그룹의 여러 모듈의 더 복잡한 레이아웃 일 수 있습니다.

컨테이너를 선택한 상태에서 설정을 열고 루프 옵션을 활성화하십시오.

데이터 소스를 선택하십시오. 루프가 실행되는 "쿼리"입니다.

먼저 쿼리 유형을 선택하십시오. 웹 사이트의 구성에 따라 다음 옵션이 표시 될 수 있습니다.

• 게시물 유형 (블로그 게시물 또는 '프로젝트'와 같은 사용자 정의 게시물 유형)
• 용어 (카테고리 및 분류)
• 사용자 (저자와 같은 사이트 사용자 목록 반환)
• 리피터 필드 (루프 내에서 루프를 생성하기 위해 플러그인으로 생성 된 사용자 정의 필드)

다음으로, 위에서 선택한 쿼리 유형에 따라 더 구체적으로 가능할 수 있습니다. "게시 유형"을 선택하면 다음과 같은 게시물 유형을 사용할 수 있습니다.

• 블로그 게시물
• 프로젝트
• 제품
• CPT가 무엇이든 스스로 맞춤 제작

거기에서 루프에 나타나야 할 내용으로 더 구체적으로 얻을 수 있습니다. 당신은 할 수 있습니다 :

• 특정 카테고리 또는 태그가있는 항목을 포함하십시오
• 특정 범주 또는 태그가있는 항목을 제외하십시오
• 특정 항목 포함 (게시물 ID)
• 특정 항목 제외 (게시물 ID)
• 자신의 메타 쿼리 구축 (사용자 지정 필드 데이터를 기반으로 포함/제외를 생성하는 데 유용함).
• 일치하는 쿼리 순서를 설정합니다 (알파벳 및 내림차순과 같은)
• 페이지 당 항목 값 컨트롤 루프에 표시되는 수
• 오프셋 후,주기 후반에 루프를 시작하려는 경우
• 끈적 끈적한 게시물을 무시하십시오

이것이 우리의 예가이 시점을 보는 방식입니다. 우리는 루프를 만들어 블로그 게시물 유형에 할당했습니다. 디스플레이 제한을 3으로 설정했습니다.

이제 동적 루프 컨텐츠와 하이퍼 링크를하려는 다양한 텍스트 필드 및 항목을 할당해야합니다.

2 단계 : 루프 내부에 동적 컨텐츠를 추가하십시오

다음 작업은 각 루프 모듈을 클릭하고 정적 텍스트 또는 이미지를 동적 컨텐츠 필드로 바꾸는 것입니다. 예를 들어:

• 텍스트 모듈에서 동적 컨텐츠 선택기에서 "게시물 제목"을 선택하십시오.
• 이미지 모듈에서 "주요 이미지"를 선택할 수 있습니다.
• 버튼 모듈에서 "Post URL"으로 링크를 설정하십시오.
• 전체 루프 컨테이너에서 "Post URL"에 대한 링크도 설정합니다.

이것은 Divi에게 각 루프 된 항목에 대한 올바른 컨텐츠를 가져 오라고 지시합니다.

기억하십시오. 루프 내부의 모든 것이 각 결과에 대해 반복됩니다. 비 루프 컨텐츠 (제목, 광고 또는 CTA)를 외부로 유지하십시오. 동적 데이터와 연결되지 않은 루프에 컨텐츠가있는 경우 루프의 모든 항목은 해당 as (예제 카드 오른쪽 하단의 "읽기 →"텍스트와 같이)를 표시합니다.

3 단계 : 페이지 매김 모듈을 추가하십시오

루프 섹션 아래에 새 행을 추가하십시오. 페이지 매김 모듈을 삽입하십시오. 모듈의 설정에서 대상 필드를 찾으십시오. 이를 사용하여 페이지의 드롭 다운 루프 목록에서 루프를 선택하십시오. 이것은 Pagination 컨트롤을 해당 특정 루프에 연결합니다. 전문가 팁 : 관리자 라벨을 사용하는 경우 올바른 대상을 선택하는 것이 더 쉽습니다. 이것은 상호 작용에도 적용됩니다.

"이전"및 "다음"에 대한 레이블을 사용자 정의하십시오. 최소한의 스타일을 위해 "이전 게시물 / 최신 게시물", "뒤 / 전진"또는 "← / →"를 사용할 수 있습니다.

핵심은 Pagination 모듈이 제어하는 ​​루프 외부에 앉아 있어야한다는 것입니다. 그와 오른쪽 대상에 할당되도록하십시오 (같은 페이지/템플릿에 여러 루프가있는 경우).

4 단계 : 상호 작용을 테스트하십시오

페이지를 저장하고 미리보기. "이전"을 클릭하여 다음 루프 항목 세트로 이동하십시오.

루프 페이지를 식별하는 쿼리 매개 변수로 URL이 어떻게 변경되는지 확인하십시오. 또한 루프 컨텐츠 만 셔플/변경 (헤더, 바닥 글 및 사이드 바) 만 동일하게 유지해야합니다.

이 루프 레이아웃을 얻으십시오

이 레이아웃을 해부하고 직접 구축되는 방법을보고 싶습니까? 여기에서 다운로드하십시오!

폴더를 압축 해제하면 Divi 라이브러리로 이동하여 파일을 업로드하십시오. 업로드되면 작업중 인 모든 페이지에 섹션을 추가 할 수 있습니다.

파일을 다운로드하십시오

무료로 다운로드하십시오

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

다운로드

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

더 역동적 인 디비를 즐기십시오

Divi 5의 루프 빌더 및 Pagination 모듈은 유연성이 큰 도약입니다. 루프 빌더는 이전 모듈의 강성 디자인에서 해방되므로 동적 콘텐츠로 고유 한 반복 레이아웃을 구축 할 수 있습니다. Pagination 모듈은 이러한 레이아웃을 사용자 친화적 인 청크로 나누어 빠르고 관리 할 수 ​​있도록합니다.

다른 새로운 Divi 5 기능 (Flexbox, Interactions, HSL Color Controls)과 쌍을 이루는 루프 빌더 및 페이지 매김 모듈은 그 어느 때보 다 강력합니다. 이 모든 것을 사용하여 놀라운 페이지 디자인을 만들 수 있습니다.

첫 페이지에 진출한 루프를 구축 한 후에는 블로그, 제품 그리드, 포트폴리오 또는 구성 해야하는 컨텐츠 유형에서 접근 방식을 재사용하는 것이 얼마나 쉬운 지 볼 수 있습니다.