색상 팔레트

색상 필드는 귀하와 공동작업자가 색상 선택기를 사용하여 각 컬렉션 항목의 색상을 지정할 수 있는 컬렉션 필드입니다.

색상 팔레트는 수집 귀하와 귀하의 동료가 색상 선택기를 사용하여 각 컬렉션 항목의 색상을 정의할 수 있는 필드입니다. 이 선택된 색상은 배경 색상, 텍스트 색상, 요소의 경계 음영을 사용자 정의하는 데 활용될 수 있습니다. 컬렉션 목록 또는 컬렉션 페이지.

일반적인 응용
  • 각각 고유한 색상으로 표시되는 블로그 게시물 카테고리와 같은 컬렉션 그룹 디자인
  • 각 태그에 대한 다양한 배경 음영으로 태그를 강조합니다.
  • 라벨의 텍스트 색상 회전
  • 동일한 그룹의 항목을 강조하기 위한 대체 테두리 음영
이 튜토리얼에서는
  • 색상 팔레트 설정
  • 팔레트에 색상 통합하기
  • 색상 팔레트를 사용한 디자인

색상 팔레트 설정

색상 팔레트는 새 컬렉션이나 기존 컬렉션에 포함될 수 있습니다. 컬렉션 설정 내부에서 다음을 누르세요. 새로운 분야 그런 다음 색상 필드.

팔레트에 색상 통합하기

이제 색상 팔레트가 컬렉션 프레임워크에 통합되었으므로 귀하와 공동 작업자는 다음을 입력하여 컬렉션 항목의 색상 필드에 색상을 정의할 수 있습니다. 웹 색상(16진수, RGBA 또는 색상 이름), 또는 색상 선택기 색상을 선택합니다.

 

색상 팔레트를 사용한 디자인

컬렉션 아이템에 색상을 할당하는 동안 해당 색상을 디자인에 통합할 수 있습니다. 컬렉션 목록 또는 컬렉션 페이지의 각 요소는 각 컬렉션 항목에 지정된 색상 값을 통합합니다.

컬렉션 스타일 설정

다음을 통해 컬렉션 목록이나 컬렉션 페이지의 요소에 색상 값을 연결할 수 있습니다. 컬렉션 스타일 설정 에서 설정 패널(D). 다음 중 하나 이상을 선택할 수 있습니다.

  • 컬렉션에서 텍스트 색상을 검색하세요.
  • 컬렉션에서 배경 색조를 검색하세요.
  • 컬렉션에서 경계 색상을 검색하세요.

checkbox 옵션을 선택 취소하여 이러한 설정에 대한 연결을 분리할 수 있습니다.

다양한 텍스트 색상

컬렉션의 색상 팔레트에 지정된 색상 값을 사용하여 요소의 텍스트 색조를 할당하려는 경우:

  1. 요소를 선택하세요
  2. 액세스 설정 패널(D)
  3. 다음을 선택하세요. 다음에서 텍스트 색상 가져오기 옵션
  4. 필드 드롭다운에서 색상 팔레트를 선택하세요.
 

어느 글꼴 색상 스타일링 이 설정을 선택하면 스타일 패널에서 이 요소에 설정된 색상 팔레트 값이 변경됩니다.

다양한 배경 색상

비슷한 방식으로 요소의 배경 색조를 조정할 수 있습니다.

  1. 요소를 선택하세요
  2. 액세스 설정 패널(D)
  3. 다음을 선택하세요. 다음에서 배경색 가져오기 옵션
  4. 필드 드롭다운에서 색상 팔레트를 선택하세요.

어느 배경색 스타일링 스타일 패널에서 이 요소에 설정된 값은 이 요소에 대해 이 설정을 선택하면 색상 팔레트 값으로 동적으로 대체됩니다.

다양한 경계 색상

컬렉션에서 요소의 경계 색상을 검색하려면 먼저 국경 귀하의 요소에 대해:

  1. 요소를 선택하세요
  2. 액세스 스타일 패널(S)
  3. 테두리 스타일 지정
  4. 액세스 설정 패널(D)
  5. 다음을 선택하세요. 다음에서 테두리 색상 가져오기 옵션
  6. 필드 드롭다운에서 색상 팔레트를 선택하세요.

언제든지 스타일 패널에서 테두리의 스타일과 너비를 수정할 수 있습니다. 그럼에도 불구하고 색상은 연결된 색상 팔레트에서 가져오며 스타일 패널에 언급된 모든 색상 값보다 우선합니다.

이완 막
Ewan Mak의 최신 게시물 (모두 보기)