구색 카탈로그

분류 카탈로그는 CMS 컬렉션 또는 전자상거래 컬렉션의 동적 콘텐츠를 통합하고 스타일을 지정하는 두 가지 방법 중 하나입니다(대체 방법은 컬렉션 페이지를 활용하는 것입니다). 사이트의 모든 category 페이지에 분류 카탈로그를 포함할 수 있습니다.

구색 카탈로그를 살펴보기 전에 다른 튜토리얼에서 CMS 및 CMS 컬렉션에 대해 자세히 알아보세요.

• Webflow CMS 소개
• 동적 콘텐츠 개요
• 선택

이 튜토리얼에서는 다음을 알아봅니다.

1. 분류 카탈로그를 포함하는 방법
2. 구색 카탈로그를 컬렉션에 연결하는 방법
3. 구색 카탈로그 스타일을 지정하는 방법
4. 구색 카탈로그의 구조
5. 분류 카탈로그 설정을 구성하는 방법
6. 분류 카탈로그의 구성요소 정보

구색 카탈로그를 통합하는 방법

구색 상품이 포함된 컬렉션을 하나 이상 보유하고 있는 경우 구색 카탈로그를 사이트의 모든 영구 페이지 또는 컬렉션 페이지에 통합할 수 있습니다. 분류 카탈로그를 통합하려면 다음을 수행하십시오.

1. 시작하다 패널 삽입
2. 탭하고 그림을 그립니다. 구색 카탈로그 귀하의 사이트 페이지에

빠른 검색을 사용하여 분류 카탈로그를 포함할 수도 있습니다. 명령 + 이자형 (Mac의 경우) 또는 제어 + 이자형 (윈도우즈에서).

구색 카탈로그를 컬렉션에 연결하는 방법

분류 카탈로그는 컬렉션과 연결될 때까지 유효하지 않습니다. 구색 카탈로그를 컬렉션에 연결하려면:

1. 두 번 탭하세요. 구색 카탈로그 분류 카탈로그 설정을 펼치려면
2. 원하는 컬렉션을 선택하세요. 원천 (예: 작성자, 블로그 게시물, 고객 등)

주목: 분류 카탈로그를 컬렉션에 연결하면 이전에 CMS 패널에서 컬렉션을 공개하지 않은 한 컬렉션 항목 이름이 컬렉션 카탈로그 항목 태그에 표시되지 않습니다. 이 문제를 해결하려면 분류 카탈로그를 컬렉션에 연결하기 전에 CMS 패널에 컬렉션을 노출하십시오.

구색 카탈로그 스타일을 지정하는 방법

컬렉션을 분류 카탈로그에 연결하면 분류 카탈로그는 해당 컬렉션의 모든 항목을 빈 블록으로 표시합니다. 분류 카탈로그에 요소를 추가하고 해당 요소를 컬렉션 필드에 연결할 수 있습니다. 그러면 해당 요소가 컬렉션의 데이터로 자동으로 채워집니다.

고정 및 동적 구성 요소 통합

비어 있는 분류 카탈로그 블록 중 하나에 요소를 추가하면 해당 요소는 각 분류 카탈로그 블록에 복제됩니다. 이는 "고정" 콘텐츠, 즉 컬렉션에서 생성되지 않은 콘텐츠로 인식됩니다.

요소를 컬렉션 필드에 연결하면 요소의 기본 콘텐츠(예: 제목 요소의 "제목"이라는 단어)가 각 컬렉션 항목의 콘텐츠로 자동으로 대체됩니다. 콘텐츠가 CMS 컬렉션에서 제공되므로 "동적" 콘텐츠가 됩니다.

고정 요소는 캔버스에 파란색 윤곽선으로 표시되는 반면 동적 요소(CMS에서 오는 데이터가 있는 요소)는 보라색 윤곽선으로 표시됩니다. 

컬렉션 필드에 요소 연결

고정 요소를 컬렉션 필드에 연결하여 해당 요소의 콘텐츠를 동적으로 수정할 수 있습니다. 요소를 컬렉션 필드에 연결하려면:

1. 다음으로 이동하세요. 패널 삽입
2. 추가 요소 (예: 제목, 단락 등)을 분류 카탈로그에 추가
3. 구색 카탈로그에서 요소를 선택하세요.
4. 로 이동 요소 설정
5. '수신'이라고 표시된 상자를 확인하세요. 텍스트 ~에서 블로그 게시물” (필드 유형 및 컬렉션 이름은 선택한 요소 및 컬렉션에 따라 다를 수 있습니다.)
6. 발견하다 분야 선택 쓰러지 다
7. 선택 수집분야 당신은 다음으로부터 콘텐츠를 받기를 원합니다

각 컬렉션 필드 유형을 관련 요소에 연결하는 방법에 대해 자세히 알아보세요.

컬렉션 필드에서 요소 분리

컬렉션 필드에서 요소를 분리할 수도 있습니다.

1. 구색 카탈로그에서 요소를 선택하세요.
2. 로 이동 요소 설정‍
3. '수신'이라고 표시된 상자를 선택 취소합니다. 텍스트 ~에서 블로그 게시물” (필드 유형 및 컬렉션 이름은 선택한 요소 및 컬렉션에 따라 다를 수 있습니다.)
   • 귀하가 선택한 항목

   동적 측면 구현

   컬렉션 목록(정적이든 동적이든) 내의 요소에 스타일을 적용하면 해당 컬렉션 목록의 모든 항목에 스타일이 반영됩니다. 예를 들어 제목을 컬렉션 필드에 연결하고 녹색 글꼴 색상으로 스타일을 지정하면 해당 컬렉션 목록의 모든 제목은 동일한 녹색 글꼴 색상을 상속합니다.

   당신은 또한 고용할 수 있습니다 대화형 스타일 구성 컬렉션 항목 내의 색상 및 이미지 필드에서 색상 및 배경 이미지를 추출하여 컬렉션 목록을 만듭니다.

   

   컬렉션 목록의 구조적 구성

   

   컬렉션 목록의 주변 래퍼

   기본적으로 컬렉션 목록 래퍼에는 다음이 포함됩니다. 컬렉션 목록 그리고 무효 상태. 페이지 매김이 활성화된 경우 다음으로 구성됩니다. 쪽수 매기기 컨테이너. 래퍼를 복제하여 추가 페이지 매김 컨테이너를 삽입할 수 있는 옵션이 있습니다.

   컬렉션 목록

   그만큼 컬렉션 목록 래퍼 컬렉션 목록 내의 컬렉션 항목을 포함합니다. 이 래퍼에 다른 요소를 추가하는 것은 불가능합니다.

   컬렉션 내의 요소

   그만큼 컬렉션 아이템 컬렉션 목록에 통합하는 특정 콘텐츠를 보관합니다. 여기에 추가된 모든 요소는 목록의 모든 항목에 배포됩니다. 이러한 요소는 컬렉션 필드에 연결되거나 조건부 가시성 특성이 활성화될 때까지 정적으로 유지됩니다. 이러한 수정 사항은 이를 동적 요소로 변환합니다. 동적 요소는 탐색기에서 보라색 아이콘으로 표시됩니다.

   

   무효 상태

   그만큼 비어 있는 상태는 목록에 표시할 항목이 없는 경우 컬렉션 목록을 대체합니다. 기본적으로 "항목을 찾을 수 없습니다"라는 텍스트 블록과 함께 회색 배경이 표시됩니다. 스타일을 수정하고 요소를 늘리거나 교체하여 개인화된 공백 상태를 만들 수 있습니다.

   쪽수 매기기

   페이지 매김은 두 개의 링크 블록으로 구성됩니다. 이전의 버튼과 후속 단추. 이들 각각은 개인화되고 스타일이 지정될 수 있습니다. 컬렉션 목록 페이지 매기기에 대한 통찰력을 얻으세요.

   컬렉션 목록 매개변수 구성

   컬렉션 목록 설정을 통해 컬렉션 목록의 표시 내용과 레이아웃을 조절할 수 있습니다. 컬렉션 목록 설정에 접근하려면:

   1. 선택하세요 컬렉션 목록 래퍼 또는 컬렉션 목록 작업 공간에서
   2. 다음으로 이동하세요. 요소 설정 패널

   

   수집

   여기에서 컬렉션 목록과 짝을 이룰 컬렉션을 지정할 수 있습니다. 컬렉션 목록에 연결할 다른 컬렉션을 선택하기 전에 컬렉션 목록 내의 요소가 현재 컬렉션에 연결되어 있지 않은지 확인하세요.

   사용자 인터페이스 조건

   이 기능을 사용하면 다음 사이를 전환할 수 있습니다. 아이템 상태와 무효의 컬렉션 목록의 두 상태를 모두 편집하는 조건입니다.

   이 기능을 조정해도 그렇지 않다는 점에 유의하십시오. 설립하다 라이브 사이트의 컬렉션 목록 상태. 컬렉션 목록의 실제 상태는 해당 항목에 따라 결정됩니다. 그만큼 무효의 상태는 컬렉션 내에 항목이 없거나 필터링된 경우에만 나타납니다. 컬렉션 목록 필터링에 대해 자세히 알아보세요.

   설계

   컬렉션 목록을 수직 스택으로 유지하거나 레이아웃을 열로 변경할 수 있습니다. 또는 컬렉션 목록에 대한 그리드 디자인을 구현하여 동적 그리드를 형성할 수 있습니다. 이 시나리오에서는 컬렉션 목록을 확인하세요. 설계 설정은 다음과 같이 구성되어 있습니다. 전체 넓이.

   내부자 팁: 컬렉션 목록의 균일한 높이 구조를 구성하려면 Flexbox를 활용하는 것이 좋습니다. 각 컬렉션 항목의 콘텐츠는 다를 수 있으며 Flexbox를 기반으로 하지 않는 열 레이아웃에서는 정렬이 잘못될 수 있습니다.

   필터

   필터를 통합하면 하나 이상의 필터 조건을 충족하는 원하는 컬렉션 항목만 표시할 수 있습니다. 컬렉션 목록 필터링에 대해 더 많은 통찰력을 얻으세요.

   배열 순서

   정렬 순서를 사용하면 특정 필드에 따라 컬렉션 목록을 구성할 수 있습니다. 컬렉션 목록 정렬에 대해 자세히 알아보세요.

   항목 페이지 매김

   컬렉션 목록에 페이지를 매겨 페이지당 설정된 수의 항목을 표시할 수 있습니다. 컬렉션 목록 페이지 매김에 대한 세부 사항을 살펴보세요.

   표시 품목 상한선

   이 기능을 사용하면 컬렉션 목록에 표시되는 항목 수와 컬렉션 목록을 시작하는 항목을 지정할 수 있습니다. 예를 들어 항목 5에서 목록을 시작하고 3개 항목만 표시할 수 있습니다. 결과적으로 목록에는 항목 5, 6, 7이 표시됩니다. 컬렉션 항목 제한에 대해 자세히 알아보세요.

   추가 정보: 페이지 매김이 활성화되지 않은 경우 컬렉션 목록당 최대 100개의 항목과 페이지당 20개의 컬렉션 목록이 적용됩니다. 페이지 매김을 사용하여 컬렉션 목록에 100개 이상의 항목을 표시하는 방법을 이해하세요.

   컬렉션 목록 내의 구성 요소

   컬렉션 목록 항목 내에 구성요소를 삽입하거나 생성하는 옵션이 있습니다. 그런 다음 컬렉션 필드를 구성 요소 속성에 연결하고 구성 요소에 동적 데이터를 사용할 수 있습니다. 컬렉션 목록의 구성 요소 활용에 대해 자세히 알아보세요.