Dimensions 필드는 Elementor 의 4 개의 상자 간격 제어 (상단,오른쪽, 하단 및 왼쪽,링크 아이콘 및 단위 메뉴 포함) 를 Master Addon 으로 구축된 사용자 지정 위젯에 추가합니다 위젯 빌더. 패딩,여백, 테두리 너비 또는 코너 반경이 CSS 에 고정되는 대신 Elementor 패널에서 설정되어야 할 때마다 사용하십시오.
Dimensions 는 Pro 필드입니다. 무료 플러그인에는 제한된 Widget Builder 가 포함되어 있으며 전체 필드 세트가 함께 제공됩니다 마스터 애드온 프로.
Dimensions 필드가 수행하는 작업 #
- Elementor 패널에 네 개의 숫자 상자가 표시됩니다. 링크 아이콘이 켜져 있으면 한 상자에 입력하면 네 개가 모두 채워집니다.
- 단위 메뉴를 사용하면 편집자는 px, em, % 등 허용한 단위 간에 전환할 수 있습니다.
- 필요하지 않은 면을 숨길 수 있습니다. 버튼 패딩 필드에 오른쪽과 왼쪽만 표시될 수 있습니다.
- Elementor 는 Responsive Control 이 켜져 있을 때 장치별로 별도의 값을 포함하여 필드의 CSS Selectors 행을 통해 사용자를 위해 CSS 를 작성합니다.
아직 위젯을 구축하지 않았다면, 을 읽어보세요 위젯 빌더 개요 첫번째.
시작하기 전에 #
- Elementor가 설치되어 활성화된 WordPress입니다.
- Elementor 및 Master Addons Pro 용 마스터 애드온,둘 다 활성화됨. The 설치 가이드 설정을 다룹니다.
- 위젯 빌더에서 열린 위젯. 이 가이드의 예는 a가 있는 “가격 카드” 위젯입니다
price-card박스와 aprice-btn버튼 및 3차원 필드: 카드 패딩, 카드 반경 및 버튼 패딩.
Dimensions 필드를 추가하는 방법 #
- 로 이동 마스터 애드온 > 위젯 빌더 그리고 위젯을 엽니다.
- 를 클릭합니다 스타일 탭하고 섹션을 추가, 예를 들어 “카드 간격”.
- 유형
dimensions왼쪽의 필드 검색 상자에. - 드래그 치수 섹션으로. 그 설정은 왼쪽 사이드 바에서 열립니다.
차원 필드 옵션을 설명했습니다 #
카드 패딩 필드는 다음과 같습니다:
- 라벨 예를 들어 “카드 패딩”과 같이 Elementor의 상자 위에 있는 텍스트입니다.
- 이름 는 해당 분야의 고유 ID 입니다. 문자,숫자 및 밑줄만.
- 설명 elementor의 제어하에 나타납니다.
- 허용되는 치수 위,오른쪽, 아래쪽 및 왼쪽에 4 개의 화살표 버튼이 있습니다. 화살표를 클릭하여 해당 측면을 끕니다. Elementor 에서는 꺼진 측면이 편집할 수 없는 회색 상자로 표시됩니다.
- 속성 유형 사용자 정의,여백, 패딩,경계 너비 및 경계 반경을 제공합니다. 하나를 선택하면 빌더가 해당 속성에 대한 CSS 선택기 행을 채웁니다 (아래에 자세히 설명). 경계 너비도 추가됩니다
border-style: solid. - 크기 단위 편집자가 선택할 수 있는 단위를 나열합니다. 새 필드는 px,%, em,rem, vh 및 vw 를 허용합니다. 디자인에 맞지 않는 항목을 제거합니다.
- 기본값 시작 상단, 오른쪽, 하단 및 왼쪽 값에 대한 4개의 상자가 있습니다.
버튼 패딩 필드는 왼쪽과 오른쪽만 필요하므로 위쪽 및 아래쪽 화살표가 꺼져 있습니다:
더 아래로, 반응형 제어 장치 아이콘을 추가하여 데스크톱,태블릿 및 모바일이 다른 값을 가질 수 있도록 합니다. 표시 라벨,분리기 및 조건은 다른 필드에서와 마찬가지로 작동합니다.
필드를 CSS 선택기와 연결합니다 #
각기 CSS 선택기 행에는 다음이 있습니다 CSS 선택기 (스타일에 맞는 요소) 및 CSS 속성 (쓰는 규칙).Padding을 Property Type으로 선택하면 행은 다음과 같이 시작됩니다:
CSS Selector: {{WRAPPER}}
CSS Properties: padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};{{WRAPPER}} 그 자체로 전체 위젯을 의미합니다. 와 같이 원하는 요소로 변경하십시오 .price-card. 떠날 수 있습니다 {{WRAPPER}} 아웃, 빌더가 선택기 앞에 추가하기 때문에 규칙이 이 위젯 안에 유지됩니다.
CSS 속성에서, {{TOP}}, {{RIGHT}}, {{BOTTOM}} 그리고 {{LEFT}} 4개의 상자에 있는 숫자로 대체됩니다 {{UNIT}} 선택한 유닛으로. 속성 타입이 사용자 지정으로 설정된 상태에서 규칙을 직접 작성합니다. 버튼 패딩 필드는 두 면만 사용합니다:
CSS Selector: .price-btn
CSS Properties: padding-right: {{RIGHT}}{{UNIT}}; padding-left: {{LEFT}}{{UNIT}};클릭 항목 추가 두 번째 행이 있는 다른 요소에 동일한 값을 적용하려면.
두 가지 알아두어야 할 점. 싱글 선택기 공통 설정 하단 근처의 상자는 치수 필드에 대해 아무 작업도 수행하지 않으므로 항상 CSS 선택기 행을 사용하십시오. 그리고 속성 유형을 선택하면 CSS 속성 상자에 채워지므로 먼저 선택하고 나중에 전환하면 행을 다시 확인하십시오.
대신 템플릿의 값을 사용하십시오 #
HTML 또는 CSS 탭에서 직접 값을 인쇄할 수도 있습니다. 필드 보유 top, right, bottom, left 그리고 unit, 그래서 각 변 뒤에 단위를 씁니다:
.price-card {
padding: {{ card_padding.top }}{{ card_padding.unit }} {{ card_padding.right }}{{ card_padding.unit }} {{ card_padding.bottom }}{{ card_padding.unit }} {{ card_padding.left }}{{ card_padding.unit }};
}벌거벗은 {{ card_padding }} 아무것도 인쇄하지 않습니다. 대부분의 위젯의 경우 Elementor가 응답 제어가 켜져 있을 때 각 장치에 대해 별도의 규칙을 작성하므로 CSS 선택기 행이 더 나은 선택입니다.
클릭 설정 저장 다 끝났을 때.
Elementor에서 치수 컨트롤을 사용하세요 #
페이지에 위젯을 추가하거나,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다.Select the widget and open the 스타일 탭. 각 치수 필드에는 상단,오른쪽, 하단 및 왼쪽으로 레이블이 지정된 4 개의 상자,링크 아이콘 및 오른쪽 상단 모서리에 있는 단위 메뉴가 표시됩니다. 버튼 패딩에는 회색으로 표시된 상단 및 하단이 표시됩니다.
숫자를 입력하면 카드가 바로 업데이트됩니다. 링크 아이콘을 클릭하여 측면을 연결 해제하고 카드 패딩이 여기에서 상단과 하단에 64,측면에 56 으로 수행하는 것처럼 각 측면에 고유한 값을 부여합니다. 단위 메뉴를 사용하여 허용한 단위 간에 전환합니다.
일반적인 사용 사례 #
- 카드, 상자 및 배너용 내부 패딩.
- 제목 아래의 공간과 같은 위젯 부분 사이의 여백입니다.
- 경계 반경 속성 유형을 사용하여 카드, 이미지 및 버튼의 모서리 반경.
- 좌우 버튼 패딩, 상하측 꺼짐.
- Border Width 속성 유형을 사용하여 측면당 테두리 너비입니다.
Dimensions 필드 작업을 위한 팁 #
- 항상 CSS 선택기를 에서 변경하십시오
{{WRAPPER}}요소에. 그대로 두면 간격은 전체 위젯 래퍼에 적용됩니다. - 편집자가 사용하기를 원하는 크기로 크기 단위를 다듬습니다. px 및 em 은 대부분의 간격을 다룹니다.
- 해당되지 않는 변을 끕니다. 편집자가 효과가 없는 값을 설정하는 것을 막습니다.
- 디자인에 맞는 기본 값을 설정하여 위젯이 추가되자마자 제대로 보이도록 하세요.
- 패딩과 여백에 대해 % 를 주의하세요. 브라우저는 요소의 너비로부터 퍼센트 패딩을 계산합니다. 위아래에서도 마찬가지입니다.
- 간격이나 아이콘 크기와 같은 단일 값의 경우 슬라이더 필드 는 더 간단하다.
자주 묻는 질문 #
Dimensions 필드는 무료인가요?
아니요. Dimensions는 Widget Builder의 Pro 필드 중 하나이므로 Master Addons Pro를 위젯에 추가하려면 먼저 활성화해야 합니다.
왜 내 Dimensions 필드는 아무것도 변경하지 않습니까?
CSS 선택기 행을 확인합니다. CSS 선택기는 위젯의 HTML 에 있는 요소와 일치해야 하며 CSS 속성에는 규칙이 포함되어야 합니다. 공통 설정의 단일 선택기 상자는 이 필드에서 사용되지 않습니다.
CSS Selector 에 {{WRAPPER}}를 추가해야 하나요?
아니요. 건축업자가 덧붙입니다 {{WRAPPER}} 당신을 위한 선택기 앞에서, 그래서 .price-card 충분하다.
왼쪽 상자와 오른쪽 상자만 어떻게 표시하나요?
허용된 치수에서 위쪽 및 아래쪽 화살표를 클릭하여 위쪽 및 아래쪽을 끕니다. 그런 다음 Elementor는 회색으로 표시된 두 상자를 표시합니다.
HTML 또는 CSS에서 값을 인쇄할 수 있습니까?
예. 사용 {{ field_name.top }}{{ field_name.unit }} 그리고 오른쪽, 아래, 왼쪽에도 동일한 패턴이 있습니다. {{ field_name }} 자체 인쇄에는 아무것도 없습니다.
감싸는 #
속성 유형을 선택하고 CSS 선택기 행을 요소에 지정하고 단위와 측면을 다듬은 다음 합리적인 기본값을 설정합니다. 그런 다음 편집자는 Elementor 자체 위젯에서 알고 있는 것과 동일한 간격 제어를 얻습니다. 나머지 상자 스타일링에 대해서는 다음을 참조하세요 국경 그리고 배경 필드 및 확인 가격 각 계획에 포함된 내용입니다.
