스타일 패널에서 요소 모양 변경.

한 페이지의 한 요소에만 고유한 모양이 필요할 때 스타일 패널을 사용합니다. 색상이 있는 카드, 흐려진 로고, 캠페인 색상의 버튼이 예시입니다. 변경할 때마다 페이지에서 바로 확인할 수 있습니다. 모든 버튼의 색상처럼 모든 페이지가 공유해야 하는 모양은 대신 테마를 변경합니다. 테마에서 한 번 편집하면 사이트 전체가 업데이트됩니다.

동영상에서는 아래의 첫 번째 실전 방법에 따라 파트너 로고를 포인터가 닿기 전까지 흐리게 합니다.

시작하기 전에

• DXPR Builder에서 페이지를 엽니다. 요소를 가리키면 더보기가 있는 컨트롤 바가 표시됩니다. 빌더가 처음인가요? 첫 페이지를 참조하세요.
• 저장(대화상자)은 변경 사항을 에디터에 유지합니다. 콘텐츠 위 빌더 툴바의 저장은 페이지를 저장하고 “Saved field”를 표시합니다.

패널 스타일의 설정은 하나의 요소에 속합니다. 테마가 아니라 해당 페이지의 콘텐츠에 저장됩니다. 내년에 브랜드 색상이 바뀌면 직접 색칠한 모든 요소는 편집하기 전까지 이전 색상을 유지합니다.

• 모양 재사용은 스타일이 적용된 요소를 더보기 > 템플릿으로 저장으로 저장하거나 HTML 클래스에서 요소에 공유 클래스를 지정합니다. 사용자 템플릿과 HTML ID와 클래스를 참조하세요.
• 견본에서 색상을 선택합니다. 사이트에 견본이 표시될 때 사용합니다. 견본은 테마의 색상 팔레트에서 가져옵니다. 견본은 색상을 복사하므로 나중에 팔레트가 바뀌어도 업데이트되지 않습니다.

실전: 포인터가 닿을 때까지 로고 흐리게 하기

파트너 로고 행은 로고가 흐리면 더 차분해 보입니다. 이 실전 방법에서는 로고 하나를 흐리게 했다가 마우스를 올리면 원래대로 되돌립니다.

1. 로고가 표시된 이미지 요소에 마우스를 올리고 더보기, 설정을 차례로 클릭합니다.
2. 패널 스타일을 열고 불투명도를 0.5로 드래그합니다. 드래그하면 로고가 흐려집니다.
3. 아래의 호버 스타일 패널을 열고 불투명도를 1로 드래그합니다.
4. 대화상자에서 저장을 클릭한 뒤 툴바에서 저장을 클릭합니다.
5. 빌더 툴바에서 보기 메뉴(눈 모양 아이콘)를 열고 미리보기를 선택한 뒤 로고를 가리킵니다. 로고가 원래대로 돌아왔다가 포인터가 떠나면 다시 흐려집니다.

행의 각 로고에 대해 단계를 반복합니다.

실전: 캠페인 색상의 버튼

테마는 버튼에 호버 색상을 지정합니다. 직접 설정한 배경은 해당 호버 색상도 대체하므로 두 가지를 모두 설정합니다.

1. 대상 버튼 요소에 마우스를 올리고 더보기, 설정을 차례로 클릭합니다.
2. 패널 스타일에서 배경과 글꼴 색상을 선택합니다. 견본을 클릭하거나 색상 필드에 #e4002b 같은 색상 코드를 입력합니다.
3. 패널 호버 스타일에서 더 어두운 배경을 선택합니다.
4. 대화상자에서 저장을 클릭한 뒤 툴바에서 저장을 클릭합니다.
5. 보기 메뉴에서 미리보기를 선택하고 버튼을 가리킵니다. 버튼이 더 어두운 색상으로 바뀝니다.

표시 내용

대화상자가 열려 있는 동안 요소에 각 변경 사항이 표시됩니다. 미리보기에서는 흐려진 로고가 포인터 아래에서 원래대로 돌아오고 캠페인 버튼이 더 어두운 색상으로 바뀝니다. 툴바의 저장으로 저장했으므로 두 가지 모양 모두 페이지를 다시 로드해도 유지됩니다.

각 컨트롤의 입력 값

범위를 벗어난 입력값은 가장 가까운 한계값으로 잘립니다. 박스 모델과 잠금에 대한 설명은 간격 페이지에 있습니다.

설정의 동작 방식

테마 기본값

비어 있는 색상, 0에 있는 슬라이더, 테마 기본값으로 설정된 목록, “-”로 표시되는 박스 모델 면은 모두 같은 의미입니다. DXPR Builder는 아무것도 기록하지 않으며 테마가 결정합니다. 따라서 불투명도 0은 요소를 숨기지 않으며, 글꼴 크기 0은 테마 크기를 유지합니다. 테마 모양으로 되돌리려면 색상 선택 도구에서 지우기를 클릭하거나 슬라이더를 0으로 이동하거나 테마 기본값을 다시 선택합니다.

설정의 저장 위치

각 스타일 설정은 드롭 섀도우를 제외하고 요소의 인라인 스타일로 저장됩니다. 인라인 스타일이 일반 테마 CSS보다 우선합니다. 그래도 우선하는 두 가지가 있습니다. !important로 표시된 테마 규칙, 그리고 HTML 클래스의 Bootstrap 유틸리티 클래스입니다. 해당 클래스도 !important를 함께 사용합니다.

일부 요소에서는 설정이 내부 부분에 적용됩니다. 버튼에서는 버튼 자체에, 이미지에서는 사진에, 링크에서는 링크에, 지도에서는 지도 프레임에 스타일이 적용됩니다.

모든 화면 크기

스타일 설정에는 중단점이 없습니다. 64px의 안쪽 여백은 휴대폰에서도 64px입니다. 백분율 값은 페이지 너비에 따라 커지고 작아집니다. 화면 크기별로 다른 값을 사용하려면 HTML ID와 클래스 페이지에 설명된 대로 반응형 클래스를 사용합니다.

불투명도는 안의 모든 것을 흐리게 함

불투명도는 요소 전체에 적용됩니다. 상자, 테두리, 텍스트, 안의 모든 요소가 흐려집니다. 단단한 텍스트 뒤에 투명한 상자를 만들려면 불투명도를 0으로 둡니다. 대신 투명도가 있는 배경 색상을 선택합니다. 색상 선택 도구에는 해당 용도의 불투명도 슬라이더가 별도로 있습니다.

호버 스타일

호버 스타일은 스타일 아래의 별도 패널입니다. 자체 박스 모델을 포함하여 같은 컨트롤이 있습니다. 값은 포인터가 요소 위에 있을 때 적용됩니다. 스타일 값과 달리 자체적으로 !important로 표시되므로 스타일 값, HTML 클래스의 유틸리티 클래스, 대부분의 테마 규칙보다 우선합니다.

오직 드롭 섀도우만 0.15초에 걸쳐 서서히 나타납니다. 다른 호버 변경 사항은 테마에서 애니메이션을 적용하지 않는 한 즉시 전환됩니다. Bootstrap 버튼은 0.15초에 걸쳐 색상이 서서히 바뀝니다.

휴대폰과 태블릿에는 포인터가 없습니다. 해당 방문자에게는 탭한 뒤에만 호버 모양이 표시되므로 필요한 정보를 호버 모양에 넣지 마세요.

자체 설정이 있는 요소

일부 요소에는 같은 작업을 위한 자체 설정이 있습니다. 자체 설정이 우선하며 스타일 컨트롤은 작동하지 않습니다.

변경 사항이 표시되지 않는 경우

• 대화상자를 닫자 변경 사항이 사라졌습니다. 닫을 때 취소, 닫기 아이콘, Esc 키를 사용했으므로 이전 설정으로 되돌아갔습니다. 다시 변경하고 대화상자에서 저장을 클릭합니다.
• 페이지를 다시 로드하자 변경 사항이 사라졌습니다. 대화상자의 저장은 변경 사항을 에디터에만 유지합니다. 페이지를 떠나기 전에 툴바에서 저장을 클릭합니다.
• 테마 모양이 그대로 유지됩니다. 다음과 같은 HTML 클래스의 Bootstrap 유틸리티 클래스나 !important가 있는 테마 규칙이 우선합니다. 일반 패널을 열고 클래스 칩(예: Primary background)을 제거하거나 테마 규칙에 대해 웹마스터에게 문의합니다.
• 컨트롤이 전혀 작동하지 않습니다. 일부 요소에는 같은 작업을 위한 자체 설정이 있습니다. 자체 설정이 있는 요소를 참조하세요.
• 버튼이 호버 시 더 이상 색상이 바뀌지 않습니다. 설정한 배경이 테마의 호버 색상을 대체했습니다. 호버 스타일 패널에도 배경을 설정합니다.
• 상자와 함께 텍스트도 흐려졌습니다. 불투명도는 요소 전체를 흐리게 합니다. 0으로 되돌리고 투명도가 있는 배경 색상을 사용합니다.
• 불투명도 0은 요소를 숨기지 않습니다. 0은 테마 기본값을 의미합니다. 대신 HTML 클래스에서 요소 숨기기(d-none) 클래스를 추가합니다.

다음 단계

• 배경: 제목 뒤에 사진을 배치하고 제목을 읽기 쉽게 유지합니다.