편집기가 CSS 를 열지 않고 위젯을 다시 색칠하게 하는 것은 사용자 지정 위젯이 할 수 있는 가장 유용한 작업 중 하나입니다. The 색상 필드 마스터 애드온에서 위젯 빌더 전역 색상과 옵션 알파 채널이 완비된 위젯 패널에 Elementor의 색상 선택기를 놓습니다. 필드 이름을 지정하고 필드 위치를 선택하면 단축 코드가 CSS에 바로 공급됩니다.
모든 Widget Builder 필드와 마찬가지로 Color 필드가 지원합니다 조건 패널 가시성을 위해. 그것의 토큰은 에 의해 렌더링됩니다 나뭇가지 구문 템플릿 엔진CSS 어디에서나 선택한 색상을 인쇄할 수 있는 방법입니다. 두 가이드 모두 설정 및 제한 사항을 다룹니다.
이것은 스타일 컨트롤이므로 데모에서는 다음과 같습니다 스타일 탭. 필드는 당신이 그것을 넣어 상관없이 동일하게 작동하지만,그것은 당신의 호출이 살고있는 곳,당신은 당신의 사용자 정의 위젯의 컨트롤을 구성 할 방법에 따라 온다.
Color 필드가 하는 일 #
색상 필드는 위젯의 옵션 패널에서 Elementor 의 기본 색상 선택기를 렌더링합니다. 편집자는 견본을 클릭하고 색상 (또는 테마에서 전역 색상) 을 선택하고 일치하는 단축 코드를 배치한 위치마다 해당 값을 출력하는 위젯과 같은 CSS 속성을 의미하는 경우가 대부분입니다 color, background, 또는 border-color.
Elementor 의 자체 피커를 사용하기 때문에 편집자는 이미 알고있는 컨트롤을 얻습니다: 견본,안대기, 최근 색상 및 글로벌 색상 팔레트. 알파 채널을 켜면 투명도도 설정할 수 있습니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- Widget Builder 편집기에서 열리는 사용자 정의 위젯입니다. 첫 번째? 로 시작하십시오 위젯 빌더 개요.
Color 필드를 추가하는 방법 #
위젯 빌더 편집기에서 왼쪽의 필드 패널을 찾아 드래그하세요 색상 섹션으로 입력합니다. 색상은 스타일링 선택이므로 스타일 탭은 자연의 집이지만 콘텐츠 그리고 고급 탭에서도 이를 허용합니다. 필드가 제자리에 있으면 왼쪽에서 해당 옵션이 열리고 단축 코드가 표시됩니다 문서 코드 편집기 옆에 있는 사이드바.
설명 된 색상 필드 옵션 #
설정을 열려면 색상 필드를 선택합니다. 대부분의 옵션은 다른 필드와 일치하며 색상에 특정한 필드도 일치합니다.
- 라벨: elementor의 선택기 위에 표시된 텍스트, 예를 들어 “텍스트 색상”입니다.
- 이름: 필드의 고유 식별자입니다. 문자,숫자, 밑줄만 있습니다. 이것이 단축 코드가 되므로 필드 이름이 지정됩니다
color당신을 제공합니다{{color}}. - 설명: 컨트롤 아래에 표시된 선택적 도우미 텍스트입니다.
- 알파: 이것을 켜서 피커의 투명도를 허용합니다. 꺼짐으로 편집자는 단색만 선택할 수 있습니다. 반투명 오버레이와 같이 rgba 값이 필요할 때 활성화합니다.
- 기본값: 다음과 같은 16진수 값으로 시작하는 색상입니다
#FFFFFF. 누군가가 그것을 만지기 전에 위젯이 끝난 것처럼 보이도록 설정하십시오.
일반적인 설정: 반응형, 동적, 그 이상 #
기본값 아래에서도 동일한 결과를 얻을 수 있습니다 공통 설정 빌더의 모든 필드와 마찬가지로: 라벨,라벨 블록,반응형 제어,동적 지원,프론트엔드 사용 가능,분리기 및 조건 표시 장치별로 다른 색상을 원하는 경우 반응형 제어가 편리합니다. The 텍스트 필드 문서 이들 각각을 자세히 다룹니다.
필드를 코드에 연결합니다 #
라는 이름의 Color 필드 color 토큰을 생산합니다 {{color}} documentation 사이드바에서. 모든 색상 속성의 값으로 CSS 에 드롭합니다. 예를 들어,영웅 텍스트를 색칠하려면:
CSS 편집기에서 다음과 같은 내용을 작성합니다 .hero-content { color: {{color}}; }. 편집기가 Elementor 에서 색상을 선택하면 Master Addons 가 토큰을 해당 값으로 바꾸고 텍스트가 라이브로 다시 색칠됩니다. 동일한 토큰이 작동합니다 background, border-color또는 색상을 취하는 모든 것, 필요한 만큼 규칙으로 재사용할 수 있습니다. 지켜봐야 할 한 가지: 토큰을 전체 값으로 유지하십시오 color: {{color}};따옴표로 묶이지 않거나 CSS가 적용되지 않습니다.
Elementor에서 색상 컨트롤을 사용하세요 #
사용자 정의 위젯을 페이지로 드래그하여 Elementor 편집기에서 엽니다. 필드를 배치한 탭 아래에서 색상 컨트롤이 옆에 전역 색상 버튼이 있는 표준 견본으로 표시됩니다. 클릭하고 색상을 선택하고 캔버스에서 위젯 업데이트를 수행합니다.
편집자는 일회성 색상을 선택하거나 사이트의 글로벌 색상에서 가져오기 위해 지구본 아이콘을 클릭할 수 있으며,이는 브랜드에 사용자 정의 위젯을 유지합니다. 동적 지원을 켰을 경우 동적 태그 아이콘이 여기에도 나타납니다.
일반적인 사용 사례 #
- 텍스트 색상 제목과 단락의 경우.
- 배경 색상 섹션, 카드, 버튼용.
- 테두리와 악센트 색상 브랜드 팔레트에 묶여 있습니다.
- 오버레이 색조 투명성을 위해 알파 채널을 사용합니다.
- 호버 상태 두 번째 색상 필드와 쌍을 이룰 때.
컬러 필드 작업을 위한 팁 #
- 위젯에 맞는 곳에 배치하세요. 스타일은 규칙이지만 필드는 모든 탭에서 작동하므로 구성은 의미가 있는 방식을 제어합니다.
- 투명성이 필요할 때만 알파를 켜십시오. 단단한 상표 색깔을 위해, 떨어져 남겨두는 것은 피커를 더 간단하게 유지합니다.
- 합리적인 기본값을 설정합니다. 좋은 기본값은 위젯이 페이지에 삭제되는 순간 제대로 보인다는 것을 의미합니다.
- 글로벌 색상에 기대어보세요. 위젯이 사이트 전체에서 일관성을 유지할 수 있도록 편집자가 글로벌 팔레트에서 선택하도록 권장합니다.
- 단축 코드를 참조하기 전에 필드를 빌드합니다. 토큰은 필드가 패널에 있는 후에만 존재합니다.
자주 묻는 질문 #
Master Addons Widget Builder의 색상 필드는 무엇입니까?
색상 필드는 사용자 지정 위젯에 Elementor 의 색상 선택기를 추가합니다. 필드 이름을 지정하고 CSS 에 단축 코드를 배치하면 편집기가 Elementor 에서 선택한 색상이 위젯에 적용됩니다. 전역 색상과 선택적 알파 채널을 지원합니다.
사용자 정의 위젯에서 {{color}} 단축 코드를 어떻게 사용합니까?
Color 필드를 명명하여 추가합니다.Add a Color field named color그런 다음 CSS 편집기에서 토큰을 속성 값으로 사용합니다 .hero-content { color: {{color}}; }. 마스터 애드온은 선택한 색상으로 토큰을 대체하므로 위젯은 편집자의 선택에 따라 다시 색칠됩니다.
Color 필드는 투명도를 지원합니까?
예. 필드 설정에서 Alpha 옵션을 켜면 Elementor 피커로 편집자가 투명도를 설정하여 rgba 값을 생성할 수 있습니다. Alpha 를 끄면 피커는 단색만 허용합니다. 오버레이 또는 반투명 배경에 사용합니다.
색상 필드를 스타일 탭 밖에 놓을 수 있나요?
예. 색상 필드는 콘텐츠,스타일 또는 고급 탭에서 작동합니다. 스타일은 스타일링 컨트롤의 일반적인 선택이지만,어디에 놓느냐에 따라 사용자 지정 위젯의 옵션을 어떻게 구성하느냐에 따라 달라집니다.
Color 필드는 사이트의 글로벌 색상을 사용할 수 있습니까?
예. Elementor 의 네이티브 피커를 사용하기 때문에 편집자는 전역 색상 버튼을 클릭하고 테마 팔레트에서 선택할 수 있습니다. 전역 색상을 선택하면 사용자 정의 위젯이 사이트의 나머지 브랜딩과 일치하게 유지됩니다.
감싸는 #
위젯 빌더 색상 필드는 하드 코딩된 색상을 사용자 지정 위젯 내부에서 편집 가능한 선택기로 바꿉니다. 이름을 지정하고 알파 허용 여부를 선택하고 기본값을 설정하고 배선합니다 {{color}} CSS 에. 그 후,누구나 Elementor 에서 위젯을 다시 색칠 할 수 있습니다. 탭에서 글로벌 색상과 투명도로. 나머지 부분을 살펴보세요 마스터 애드온 위젯 및 확장, 그리고 확인해 보세요 가격 페이지 각 계획에 포함된 내용입니다.
