브랜드 색상 사용.
섹션, 텍스트, 버튼에 브랜드 색상을 적용하세요. 모든 페이지가 같은 사이트에 속한 것처럼 보입니다. DXPR Builder의 모든 색상 필드는 테마 팔레트를 견본으로 보여줍니다. 코드를 추측하는 대신 브랜드 색상을 고르세요. 예시에서는 섹션에 기본 브랜드 색상과 흰색 텍스트를 적용합니다.
이 비디오는 아래 단계를 따릅니다. 섹션에 브랜드 견본 색상을 입히고 텍스트를 흰색으로 만듭니다.
시작하기 전에
- 브랜드 색상은 테마에 있습니다. DXPR Theme에서는 다음에서 설정하세요: Appearance > Settings > DXPR Theme (
/admin/appearance/settings/dxpr_theme), Colors 패널에서. - DXPR Builder는 해당 팔레트의 서로 다른 처음 10가지 색상을 견본으로 보여줍니다.
섹션에 색상 적용
- 섹션에 마우스를 올리고 More(을)를 연 뒤 Settings(을)를 고르세요.
- 다음 패널을 여세요: Style.
- 다음의 색상 버튼을 클릭하세요: Background. 견본과 함께 색상 선택기가 열립니다.
- 기본 브랜드 견본을 클릭하세요.
- 색상 버튼을 클릭하세요: Font color에서 흰색을 고르세요.
- 다음을 클릭하세요: Save. 단락 텍스트는 흰색으로 바뀌고, 제목은 테마의 제목 색상을 유지합니다.
- 제목도 흰색으로 만들려면 다음의 Settings을 여세요. 해당 Text 요소에서: Font color에 흰색을 고르세요. 해당 Style 패널에서, 그리고 Save(을)를 클릭하세요.
결과 화면
섹션이 브랜드 색상으로 채워지고, 단락 텍스트와 제목이 흰색으로 바뀝니다. 모든 색상 필드에 같은 견본이 나타납니다. 여기에는 Style 및 Hover style 패널, 그리고 Start color와 End color가 들어 있습니다. 이 둘은 섹션 Gradient 배경용입니다.
팔레트 바깥의 색상을 쓰려면 선택기의 텍스트 필드에 코드를 입력하세요. 예: #2196F3. 투명한 색상을 만들려면 불투명도 슬라이더를 움직이세요. Clear(은)는 색상을 지웁니다.
색상을 테마에 연결된 상태로 유지
견본은 색상 코드를 요소에 복사합니다. 나중에 테마 팔레트를 바꾸어도 해당 요소는 이전 색상을 유지합니다.
요소가 팔레트를 따르게 하려면 대신 색상 클래스를 쓰세요. 요소의 Settings(을)를 열고 HTML classes 아래에서 칩을 고르세요:
| 칩 | 기능 |
|---|---|
| Primary background, Secondary background 등 | 테마의 Bootstrap 색상 |
| Primary text color, Secondary text color 등 | 테마의 Bootstrap 텍스트 색상 |
| Background color: DXPR Theme primary | DXPR Theme Primary 색상과 어울리는 텍스트 색상 |
| Text color: DXPR Theme accent1 | 텍스트용 DXPR Theme Secondary 색상 |
다음 칩은 특정 경우에만 나타납니다: DXPR Theme 칩은 DXPR Theme이 활성화된 경우에만 나타납니다.
요소별 색상 필드
| 위치 | 색상 적용 대상 |
|---|---|
| Style 패널: Font color, Border color, Background | 요소 자체 |
| Hover style 패널: 같은 필드 | 포인터가 위에 있을 때의 요소 |
| Button: Type | 바로 쓸 수 있는 버튼 색상 구성 |
| Card: Type | 카드 전체의 배경과 텍스트 |
| Alert: Type | Success, Info, Warning 또는 Danger |
| Section: Background effects > Gradient | 두 색상의 혼합 |
읽기 쉬운 색상
- 텍스트와 배경 사이에 충분한 대비를 유지하세요. WCAG 2.1 Level AA는 일반 텍스트에 최소 4.5대 1을 요구합니다.
- 색상만으로 의미를 전달하지 마세요. 레이블이나 아이콘과 함께 쓰세요.
- 흰색, 연한 회색, 브랜드 색상 등 섹션 배경을 번갈아 써서 긴 페이지에 리듬을 주세요.
색상이 보이지 않는 경우
- 색상 선택기에 견본이 표시되지 않습니다. 사이트의 기본 테마에 색상 팔레트가 없습니다. 색상 코드를 직접 입력하거나, DXPR Theme처럼 팔레트가 있는 테마를 쓰세요.
- 테마 팔레트를 바꾼 뒤에도 요소가 이전 색상을 유지합니다. 견본은 고정된 색상 코드를 저장합니다. 새 견본을 고르거나, 팔레트를 따르는 HTML classes 아래의 색상 칩으로 바꾸세요.
- 카드에 Background 또는 Font color가 적용되지 않습니다. 카드 Type(이)가 Default(이)가 아니면 우선 적용되는 테마 클래스로 색상을 정합니다. 먼저 Type(을)를 Default(으)로 설정하세요.
다음 단계
- 요소에 마우스를 올리면 반응하게 만들기: 방문자가 요소를 가리킬 때 색상을 바꾸세요.
- 카드 스타일 지정: 카드에 색상을 적용하세요.
- 사용자 정의 CSS: 패널에서 다루지 않는 브랜드 규칙을 설정하세요.