치수

X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 치수 필드 사용자 정의 위젯에 Elementor 의 고급 탭에서 익숙한 4 입력 간격 제어 기능을 제공합니다: 상,우, 하,좌 값과 동기화를 유지하는 링크 아이콘 마스터 애드온 내부 위젯 빌더스타일시트에 하드 코딩된 대신 패널에서 패딩, 여백 또는 모서리별 테두리 반경을 편집할 수 있어야 할 때마다 도달하는 필드입니다.

모든 Widget Builder 컨트롤과 마찬가지로 Dimensions도 지원합니다 조건따라서 간격 옵션이 적용될 때만 표시할 수 있습니다. 빌더 전체의 토큰 출력은 다음을 통해 실행됩니다 나뭇가지 구문 템플릿 엔진; 두 가이드 모두 세부 사항과 제한 사항을 다루고 있습니다.

저장하는 값은 네 면 모두에 유닛을 더한 값을 전달하며,CSS 패널은 각 조각을 이름으로 인쇄합니다. 그 철자를 올바르게 얻는 것이 전체 트릭이며,이 필드에 대해 알 가치가있는 한 가지 동작이 있습니다: 빌더의 일반 Selector 필드는 치수 컨트롤에 대해 아무 것도하지 않습니다.

Dimensions 필드가 수행하는 작업 #

• 4입력 제어를 렌더링합니다 상단, 오른쪽, 하단, 왼쪽의 경우 모든 측면에 하나의 값을 반영하는 링크 아이콘이 있습니다.
• 모든 면과 유닛을 저장합니다 단일 값에서 CSS는 점 표기법으로 읽습니다.
• 단위 스위처를 제공합니다 px,%, em 과 같이 허용하는 단위 전체에 걸쳐.
• 어느 면이 표시되는지 제한할 수 있습니다 허용된 치수 옵션을 통해 수평 전용 또는 수직 전용 입력까지.
• 반응형 값 지원 그래서 각 중단점은 자신의 간격을 유지합니다.

이전에 위젯을 구축한 적이 없다면 위젯 빌더 개요 기초를 다룹니다; 거기서 시작하세요.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• Widget Builder 편집기에서 열리는 사용자 정의 위젯입니다. 우리의 예는 가격 카드 위젯입니다 .price-card box는 편집자가 내부 패딩을 설정할 수 있도록 해야 합니다.

Dimensions 필드를 추가하는 방법 #

Widget Builder 편집기 왼쪽에 있는 필드 패널을 열고 다음을 찾으세요 치수 슬라이더와 같은 다른 CSS 값 필드와 함께 나열된 필드입니다.

아래의 섹션으로 드래그하세요 스타일 간격 조절을 위한 일반적인 홈인 탭. 일단 착지하면 필드의 옵션이 왼쪽에 열립니다.

차원 필드 옵션을 설명했습니다 #

• 라벨: elementor의 컨트롤 옆에 있는 텍스트, 예를 들어 “카드 패딩”.
• 이름: 예를 들어 CSS가 참조하는 고유 식별자는 문자, 숫자 및 밑줄만 표시됩니다 pad.
• 기본값: 시작 값, 상단, 오른쪽, 하단, 왼쪽 유지, 단위 및 측면이 연결되기 시작하는지 여부.
• 크기 단위: 사용자가 전환할 수 있는 단위는 px,%, em 과 같습니다.
• 허용되는 치수: 어떤 입력이 나타나는지. “모두” 는 네 개의 변을 보여줍니다; “수평” 은 왼쪽과 오른쪽만 보여줍니다; “수직” 은 위와 아래만 보여줍니다; 사용자 정의 목록은 특정 변을 선택합니다.
• 반응형: 장치 아이콘을 추가하여 데스크톱, 태블릿 및 모바일이 별도의 값을 유지합니다.
• 설명, 라벨 표시, 구분 기호 및 조건은 다른 모든 필드와 동일하게 작동합니다.

Dimensions 값을 CSS 에 연결합니다 #

저장된 값은 키가 있는 배열입니다 top, right, bottom, left, unit, 그리고 isLinked. CSS 패널에서,모든 4 개의 측을 밖으로 철자하고 각 1 의 후에 단위를 반복하십시오:

.price-card {
  padding: {{ pad.top }}{{ pad.unit }} {{ pad.right }}{{ pad.unit }} {{ pad.bottom }}{{ pad.unit }} {{ pad.left }}{{ pad.unit }};
}

모든 변에 24가 있고 px가 선택되면 규칙은 다음과 같이 렌더링됩니다 padding: 24px 24px 24px 24px;니다. 패널의 측면을 연결 해제하고 각 토큰은 자신의 번호를 가지고 있습니다. 동일한 패턴 커버 margin 그리고 코너마다 나란히, border-radius. % 를 단위로 제공한다면 기억할 만한 CSS 의 별난 점 하나: 퍼센트 패딩은 요소의 너비에 대해,심지어 위와 아래에서도 해결되며,편집자들은 이를 기대하지 않을 것입니다.

주의: 빌더의 선택기 필드는 Dimensions 컨트롤에 대한 기본 CSS 속성을 내보내지 않으므로,이를 입력하면 아무 것도 생성되지 않습니다. CSS 패널에 위와 같이 측면을 쓰거나,완전한 속성을 포함하는 전체 선택기 항목을 정의하십시오; 일반 선택기 옵션은 이 필드의 바로가기가 아닙니다.

Elementor에서 치수 컨트롤을 사용하세요 #

Elementor 의 페이지에 사용자 정의 위젯을 놓거나 페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다; 새 컨트롤은 오래된 편집기 탭에 표시되지 않습니다. 컨트롤은 네 개의 입력,유닛 전환기 및 해당 모서리에 있는 링크 아이콘과 함께 나타납니다.

링크 아이콘이 활성화되어 있고 네 면이 모두 함께 업데이트되는 동안 모든 입력에 입력합니다. 아이콘을 클릭하여 연결을 해제하면 각 면이 고유한 값을 가지게 되며,이렇게 하면 아래보다 높은 상단과 같은 비대칭 패딩을 얻을 수 있습니다. 반응형 켜짐 을 사용하면 장치 아이콘이 중단점당 별도의 간격을 저장합니다.

일반적인 사용 사례 #

• 카드 및 박스 패딩사용자 정의 위젯에서 가장 일반적인 단일 간격 제어입니다.
• 섹션 및 래퍼 여백 그래서 편집자는 블록 사이의 수직 리듬을 조정할 수 있습니다.
• 코너별 경계 반경는, 변 대신 모서리로 네 값을 사용하여.
• 버튼 패딩, 허용되는 치수가 수평으로 제한되는 경우가 많습니다.
• 미디어 오프셋, 여백 값이 있는 이미지나 배지를 넛지합니다.

Dimensions 필드 작업을 위한 팁 #

• 모든 면과 유닛을 철자하세요. CSS 패널 연결은 4개의 토큰과 4개의 단위 토큰입니다; 벌거벗은 {{ pad }} 사용할 수 있는 것은 인쇄하지 않습니다.
• 일반 Selector 필드를 건너뜁니다. Dimensions 에 대한 속성을 방출하지 않습니다. CSS 패널 또는 전체 선택기 항목이 작업 경로입니다.
• 부동산에서 요구할 때 측면을 제한하십시오. 수평 전용 컨트롤은 버튼 패딩 필드를 정직하게 유지합니다.
• 연결된 기본값을 설정합니다. 동등한 것으로 시작하여 연결된 측면은 편집자에게 건전한 기준선과 생각할 수 있는 하나의 입력을 제공합니다.
• 스타일시트의 베이스 간격을 유지하세요. 위젯은 첫 번째 드롭에서 바로 표시되어야 합니다; 그런 다음 컨트롤이 거기에서 조정됩니다.
• 패딩 및 여백에 반응형 켜기. 데스크탑 간격은 전화 화면과의 접촉에서 거의 살아남지 못합니다.

자주 묻는 질문 #

감싸는 #

위젯 빌더 치수 필드는 패딩,여백, 반경 결정을 스타일시트에서 패널로 이동합니다: 하나의 컨트롤,네 개의 측면,하나의 유닛,모두 CSS 탭에 이름으로 인쇄된 것 옆에서 사용합니다 슬라이더 필드4 면 컨트롤이 오버킬이 될 단일 값 길이를 커버하는. 나머지 부분을 탐색합니다 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.