블로그 게시물, 제품 또는 사용자 정의 포스트 유형과 같은 동적 콘텐츠를 완전히 사용자 정의 레이아웃에서 표시하고 싶으십니까? Beaver Builder의 루프 모듈을 사용하면 가능합니다.

Beaver Temer 1.5 및 Beaver Builder 2.9에 도입 된 루프 모듈은 표준 비버 빌더 모듈을 사용하여 반복 가능한 레이아웃을 설계 할 수있는 강력한 도구입니다. 블로그, 포트폴리오, 이벤트 목록 또는 WooCommerce Shop을 구축하든이 모듈은 동적 컨텐츠로 전체 설계 제어 기능을 제공합니다.

이 안내서에서는 루프 모듈을 사용하여 사이트의 디자인, 성능 및 유연성을 향상시키는 현대적이고 동적 레이아웃을 구축하는 방법을 세분화합니다.

루프 모듈은 무엇입니까?

루프 모듈은 쿼리 된 컨텐츠를 통해 루프하고 생성 한 레이아웃을 사용하여 표시하는 유연한 컨테이너입니다. 기본 WordPress 템플릿에 의존하는 대신 모듈, 필드 연결 및 조건부 로직을 사용하여 고유 한 사용자 정의 설계를 구축 할 수 있습니다.

루프 모듈은 블로그 게시물이나 사용자 정의 게시물 유형에만 국한되지 않으므로 다양한 동적 컨텐츠를 처리 할 수 ​​있습니다. 다음은 사용자 정의 레이아웃을 만들고 사이트를 향상시키는 데 사용할 수있는 몇 가지 강력한 방법입니다.

• WooCommerce 범주 또는 태그 - 분류 쿼리 소스를 사용하여 개별 제품 페이지에 관련 제품 범주 또는 태그를 표시합니다.
• 사용자 정의 콘텐츠 그리드 - "팀을 만나기"또는 서비스 목록과 같은 페이지에서 ACF 리피터 쿼리 소스를 사용하여 팀원 또는 평가와 같은 동적 콘텐츠를 표시합니다.
• 관련 게시물 - ACF 관계 쿼리 소스를 사용하여 단일 게시물 페이지의 관련 블로그 컨텐츠를 특징으로하여 참여를 높이고 이탈률을 줄입니다.

루프의 각 항목은 사용자 정의 디자인을 사용하고 게시물 제목, 주요 이미지, 발췌 등과 같은 동적 데이터를 가져옵니다.

루프 모듈의 주요 기능

루프 모듈에는 유연한 컨텐츠가 풍부한 페이지를 구축하는 데 이상적인 기능으로 가득합니다.

• 모든 게시물 유형의 쿼리 동적 컨텐츠 (표준 또는 사용자 정의)
• 루프 레이아웃 내부에서 비버 빌더 모듈을 사용하십시오
• 연결 필드를 동적으로 연결하십시오 (예 : 제목, 주요 이미지, Post Meta)
• 그리드, 목록 또는 회전 목마와 같은 여러 레이아웃 유형 중에서 선택하십시오.
• 사용자 경험을 향상시키기 위해 필터와 페이지 매김을 추가하십시오

이 사용자 정의 및 자동화의 조합을 사용하면 HTML, PHP 또는 CSS를 작성하지 않고 고급 레이아웃을 만들 수 있습니다.

사용자 정의 루프를 구축하는 방법

루프 모듈로 사용자 정의 콘텐츠 레이아웃을 만드는 것은 간단하고 유연하며 코드가 필요하지 않습니다. 기성품 레이아웃으로 시작하든 처음부터 직접 구축하든 루프 모듈은 동적 컨텐츠가 표시되는 방식을 완전히 제어 할 수 있습니다.

루프 모듈 사전 설정 레이아웃 옵션

먼저 루프 모듈을 페이지로 드래그하면 목록, 열, 카테고리 및 제품 카테고리와 같은 사전 설정 레이아웃 중에서 선택하라는 메시지가 표시됩니다.

사전 설정 레이아웃은 완전히 사용자 정의 할 수있는 사전 정리 된 모듈을 제공하여 헤드 스타트를 제공합니다. 루프 설정을 필요에 맞게 조정하고 기존 모듈을 재 배열 또는 제거하고 새 모듈을 추가하여 레이아웃을 미세 조정하십시오. 이 기성품 디자인은 세련되고 반응 형 컨텐츠 표시를 더 빠르게 만드는 데 도움이됩니다.

빈 레이아웃으로 처음부터 구축하십시오

완전히 관습을 만드는 것을 선호합니까? 빈 레이아웃 옵션을 선택하고 다음 단계를 따르십시오.

1. 루프 모듈을 페이지에 추가하거나 Beaver Builder 편집기에 게시하십시오.
   
2. 빈 루프 컨테이너로 시작하려면 빈 레이아웃을 선택하십시오 .
   
3. 블로그 게시물, WooCommerce 제품, ACF 리피터 필드 또는 사용자 정의 게시물 유형과 같이 표시 할 컨텐츠를 정의하도록 루프 설정을 구성하십시오 .
   
4. 모듈을 루프 컨테이너로 드래그하여 레이아웃을 처음부터 구축하십시오. 제목, 사진, 아이콘, 버튼 등과 같이 필요한 비버 빌더 모듈을 추가하십시오.
   
5. 필드 연결을 사용하여 각 루프 항목에 대한 제목, 이미지, 가격 또는 사용자 정의 필드와 같은 동적 콘텐츠를 가져옵니다.
   
6. Beaver Builder의 드래그 앤 드롭 도구를 사용하여 모듈을 정렬하고 스타일링하십시오 .

이 설정은 Total Control을 원하는 고급 사용자 또는 디자이너에게 적합합니다.
이를 사용하여 사용자 정의 블로그 레이아웃, 제품 그리드 또는 팀 디렉토리를 구축 할 필요가 없습니다.

레이아웃 제어를 위해 상자 모듈을 사용하십시오

박스 모듈은 레이아웃 정밀도 및 스타일 유연성에있어 루프 모듈의 필수 동반자입니다.

• 루프 모듈을 박스 모듈 내부로 감고 외부 컨테이너의 너비, 패딩, 마진 및 배경 스타일을 관리하십시오. 이를 통해 전체 페이지 레이아웃 내에 루프 컨텐츠가 어떻게 있는지를 완전히 제어 할 수 있습니다.
• 루프 내부의 상자 모듈을 둥지하여 각 루프 항목의 내부 컨텐츠를 그룹화하십시오. 이 설정을 사용하면 CSS 그리드 또는 Flexbox 와 같은 고급 레이아웃 기술을 활용할 수 있습니다. 예를 들어, 각 루프 항목 내에 2 열 레이아웃을 만들 수 있습니다. 간격 및 정렬을 완전히 제어하여 왼쪽에 이미지와 오른쪽에 텍스트를 놓습니다.

Box 모듈을 사용하면 전략적으로 깨끗하고 반응 형 디자인을 유지하면서 동적 컨텐츠의 시각적 구조를 향상시킵니다.

쿼리 설정 : 어떤 콘텐츠가 표시됩니까?

루프 모듈의 컨텐츠 탭을 사용하면 루프 컨텐츠가 다음과 같이 표시되는 방법을 제어 할 수 있습니다.

• 게시물 유형 (게시물, 페이지, CPT, 제품 등)을 선택하십시오.
• 분류, 카테고리, 태그 또는 저자에 의한 필터
• 게시물 상태 또는 날짜에 따라 콘텐츠를 표시합니다
• 오프셋, 순서 정렬 및 우편 제한을 설정하십시오

여기에는 쿼리 소스, 표시 할 항목 수, 주문 및 고급 필터 옵션이 포함됩니다.

쪽수 매기기

Pagination 탭을 사용하면 내비게이션 및 사용자 경험을 향상시키기위한 여러 페이지에 컨텐츠가 나누어지고 표시되는 방법을 제어 할 수 있습니다.

• 번호 : 게시물 아래에 번호가 매겨진 링크를 표시합니다. 숫자를 클릭하면 해당 게시물 세트가있는 새 페이지가로드됩니다.
• 스크롤 : 사용자가 스크롤하여 추가 게시물을 자동으로로드하여 컨텐츠를 단일 페이지에 보관합니다.
• 없음 : 페이지 매김을 비활성화합니다. 이 옵션을 사용하여 내비게이션 제어없이 제한된 수의 게시물 (최신 3 개)을 표시하십시오.
• 페이지 당 게시물 : 페이지 당 얼마나 많은 항목 수를 설정합니다. 기본값은 10입니다.

이 옵션은 레이아웃 및 사용자 상호 작용 목표로 컨텐츠 전달을 조정하는 데 도움이됩니다.

필드 연결이있는 동적 데이터

루프 레이아웃 내부에서 필드 연결을 사용하여 다음과 같은 게시물 데이터를 동적으로 가져올 수 있습니다.

• 게시물 제목
• 주요 이미지
• 발췌 또는 전체 콘텐츠
• 맞춤형 필드
• 저자, 날짜, 카테고리, 태그

동적 컨텐츠를 지원하는 모든 모듈 (제목, 사진, 버튼, HTML 등)은 게시물 데이터에 연결할 수 있습니다.

고급 스타일링 및 조건부 논리

다른 게시물 유형을 다르게 스타일링하거나 조건에 따라 요소를 표시/숨기고 싶습니까? 루프 모듈은 조건부 로직 및 사용자 정의 CSS 클래스를 지원합니다.

예를 들어, 당신은 다음을 수행 할 수 있습니다.

• 사용자 정의 필드가 비어 있으면 버튼을 숨 깁니다
• 추천 게시물에 배지를 추가하십시오
• 게시물 카테고리에 따라 다른 색상이나 스타일을 적용하십시오

이를 통해 사용자 경험을 미세 조정하고 콘텐츠에서 일관된 브랜딩을 유지할 수 있습니다.

실제 루프 모듈 사용 사례

Beaver Builder의 루프 모듈은 엄청나게 다재다능하므로 디자인 요구에 맞는 레이아웃에 동적 컨텐츠를 표시 할 수 있습니다. 다음은 사용하는 몇 가지 강력한 방법입니다.

• 블로그 아카이브 : 특집 이미지와 발췌문이있는 시각적으로 매력적인 그리드 또는 최신 블로그 게시물 목록을 만듭니다.
• WooCommerce 제품 : 동적 가격, 이미지 및 카트 추가 버튼이있는 맞춤형 그리드로 WooCommerce 제품을 전시합니다.
• 포트폴리오 쇼케이스 : 브랜드 스타일을 반영하는 유연한 레이아웃으로 프로젝트 또는 사례 연구를 강조하십시오.
• 평가 : 사용자 정의 게시물 유형에서 클라이언트 평가를 표시하고 웹 사이트 디자인과 일치하도록 스타일을 표시합니다.
• 이벤트 목록 : 날짜, 위치 및 이벤트 설명과 함께 다가오는 이벤트 또는 웹 세미나를 연대순으로 나열합니다.
• 팀원 : 팀에 사진, 이름, 제목 및 BIOS를 소개합니다. 각 항목을 자세한 프로필 페이지에 묶습니다.
• 부동산 목록 : 사용자 정의 게시물 유형을 사용하여 부동산 이미지, 가격 및 주요 세부 정보가 포함 된 부동산 목록을 제시합니다.
• 코스 카탈로그 : 온라인 코스 또는 워크샵 카탈로그를 표시하고 제목, 설명 및 등록 링크가 완성됩니다.
• 작업 목록 : 제목, 위치 및 간단한 역할 요약을 포함하는 동적 목록이있는 맞춤형 작업 보드를 구축하십시오.
• 레시피 인덱스 : 이미지, 제목 및 설명이 포함 된 레시피 모음을 제공합니다.

이러한 사용 사례는 Beaver Builder에서 루프 모듈의 다양성을 보여줍니다. 다양한 산업 및 웹 사이트에서 사용하여 역동적이고 매력적이며 맞춤형 콘텐츠 레이아웃을 만들 수 있습니다.

최종 생각 : 루프 모듈을 사용하는 이유는 무엇입니까?

Beaver Builder의 루프 모듈은 완전한 맞춤형 동적 레이아웃을 쉽게 만들 수있는 힘을 제공합니다. 블로그, 상점 또는 복잡한 콘텐츠 디렉토리를 구축하든이 모듈을 사용하면 워크 플로우를 시각적으로 유지하고 코드없이 유지하는 동시에 데이터가 표시되는 방법을 제어 할 수 있습니다.

Beaver Builder를 사용하여 최신 사용자 정의 WordPress 사이트를 구축하는 것이 진지한 경우, 루프 모듈은 툴킷에 필수품입니다. 여기에서 전체 루프 모듈 문서를 살펴보십시오.