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 국경 필드 사용자 정의 위젯에 테두리 컨트롤의 전체 세트를 한 방울에 제공합니다: 테두리 유형 드롭다운,측별 테두리 너비 입력 및 테두리 색상 선택기. 마스터 애드온 내부 위젯 빌더를 사용하면 필드를 한 번 추가하고 CSS에 단축 코드를 배치하면 Elementor에서 위젯을 편집하는 사람은 코드를 건드리지 않고도 테두리의 스타일을 변경할 수 있습니다.
국경 통제가 지원됩니다 조건 모든 필드와 마찬가지로 테두리 토글이 켜지고 빌더 전체의 토큰 출력이 렌더링될 때까지 숨겨져 있을 수 있습니다 나뭇가지 구문 템플릿 엔진. 두 가이드 모두 세부 사항을 다룹니다.
필드는 CSS로 바로 매핑됩니다 border 속기. 패널에서 사용자가 선택한 유형, 너비 및 색상이 무엇이든 토큰을 넣을 때마다 스타일시트에 인쇄됩니다.
Border 필드가 하는 일 #
Border 필드는 위젯의 옵션 패널에서 Elementor 의 친숙한 테두리 그룹 컨트롤을 렌더링합니다. 위젯을 선택하고 관련 컨트롤 3 개가 표시됩니다:
- 테두리 유형: 기본값, 없음, 솔리드, 이중, 점선, 점선 및 홈이 있는 드롭다운입니다.
- 테두리 너비: 링크 토글이 있는 상단, 오른쪽, 하단 및 왼쪽 입력은 4개를 모두 한 번에 설정하고 응답 값을 위한 장치 아이콘을 제공합니다.
- 테두리 색상: 글로벌 색상에 액세스할 수 있는 색상 선택기입니다.
너비 및 색상 컨트롤은 사용자가 기본값 또는 없음 이외의 테두리 유형을 선택할 때까지 숨겨져 있으며,테두리를 사용하지 않을 때 패널을 깨끗하게 유지합니다. 이는 the 와 동일한 패턴입니다 텍스트 필드 그리고 다른 위젯 빌더 필드: 필드를 삭제하고 이름을 지정하고 토큰을 사용하십시오. 위젯을 처음 구축하는 경우 다음으로 시작하십시오 위젯 빌더 개요 첫번째.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- Widget Builder 편집기에서 열리는 사용자 정의 위젯입니다. 우리의 예는 다음과 같은 제목 위젯입니다
<h2 class="border-title">HTML에서.
Border 필드를 추가하는 방법 #
Widget Builder 편집기에서 찾을 때까지 왼쪽의 필드 패널을 스크롤합니다 국경 필드. 그것은 목록의 맨 아래 근처에 앉아,배경과 텍스트 그림자 사이에.
테두리 필드를 아래 섹션으로 드래그합니다 콘텐츠, 스타일, 또는 고급 탭. 스타일은 어디에서나 작동하지만 자연스러운 본거지입니다. 일단 착지하면 필드의 옵션이 왼쪽에 열리고 단축 코드가 탭에 표시됩니다 문서 코드 편집기 옆에 있는 사이드바.
국경 필드 옵션을 설명했습니다 #
설정을 열려면 테두리 필드를 선택합니다. 다른 모든 Widget Builder 필드와 동일한 레이아웃을 따릅니다.
- 라벨: elementor의 컨트롤 위에 표시된 텍스트는 기본적으로 “경계”입니다.
- 이름: 필드의 고유 식별자입니다. 문자,숫자 및 밑줄만 포함해야 합니다. 이름이 지정된 필드
border당신에게{{border}}단축 코드. - 설명: 컨트롤 아래에 표시된 선택적 도우미 텍스트입니다.
- 기본값: 위젯의 테두리는 예를 들어 CSS 속기로 작성된 것으로 시작합니다
1px solid #333. 그것을 비워두고 사용자가 하나를 설정할 때까지 위젯은 테두리가없는 상태로 배송됩니다. - 라벨 표시 그리고 라벨 블록: 표준 라벨이 전환되고 일반적인 구분 기호 및 조건이 더 아래로 제어됩니다.
필드를 CSS에 연결합니다 #
Border 필드의 토큰은 HTML 이 아닌 스타일시트에 속합니다. 열기 the CSS 탭하여 의 값으로 사용합니다 border 어떤 선택자에 속성은 테두리를 수행해야합니다. 우리의 제목 예제와 함께:
- 규칙은 읽습니다
border: {{border}};내부.border-title선택자. - 렌더링 시 토큰은 사용자가 선택한 전체 약칭으로 확장됩니다
5px solid #e02b20.
클릭 설정 저장 규칙이 적용되면. 위젯의 모든 선택기에 동일한 토큰을 놓을 수 있으므로 하나의 Border 컨트롤이 카드,이미지 또는 둘 다의 윤곽을 그릴 수 있습니다.
Elementor에서 Border 컨트롤을 사용하세요 #
Elementor 의 페이지에 사용자 정의 위젯을 추가하거나,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 위젯을 선택하면 설정한 레이블이 있는 패널에 테두리 컨트롤이 나타납니다.
테두리 유형을 선택하세요 #
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 국경 유형 드롭다운은 기본값,없음, 솔리드,더블, 점선,대시, 그루브를 나열합니다. 기본값 또는 없음 이외의 다른 유형을 선택하면 그 아래에 두 개의 컨트롤이 더 나타납니다: 테두리 너비 및 테두리 색상 미리보기는 선택하자마자 업데이트되므로 대시드를 선택하면 바로 위젯 주위에 대시 윤곽선이 그려집니다.
테두리 너비를 설정합니다 #
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 테두리 너비 컨트롤은 별도의 Top,Right, Bottom,Left 값을 사용합니다. 링크 아이콘을 계속 켜두어 네 면을 모두 함께 변경하거나,얇은 면이 있는 두꺼운 상하와 같이 고르지 않은 테두리의 경우 연결을 해제합니다. 레이블 옆에 있는 장치 아이콘을 사용하면 중단점당 다른 너비를 설정할 수 있습니다.
테두리 색상을 선택합니다 #
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 테두리 색상 control 은 Elementor 의 색상 선택기를 엽니다. 전역 아이콘을 사용하여 전역 색상에서 가져오거나 선택기와 16 진수,RGBA 또는 HSLA 입력으로 사용자 지정 값을 선택합니다.
모든 변경 랜드는 미리보기에 살고 있습니다. 우리의 예제에서 제목은 상단과 하단에 5 픽셀과 측면에 3 픽셀의 단단한 빨간색 테두리로 끝납니다.
일반적인 사용 사례 #
- 카드 및 상자 윤곽 각 사이트마다 고유한 경계 무게와 색상이 필요한 경우.
- 강조된 헤드라인 이 예제의 박스형 제목처럼.
- 이미지 프레임 팀, 포트폴리오 또는 제품 위젯.
- 버튼 스타일 개요 변형에 사용자가 편집할 수 있는 테두리가 필요한 경우.
- 콜아웃 및 공지 상자 솔리드 스타일과 대시 스타일 사이를 전환합니다.
국경 분야 작업을 위한 팁 #
- 토큰을 HTML이 아닌 CSS에 넣으십시오. 단축 코드는 CSS 값으로 확장되므로 다음과 같은 속성 값으로만 의미가 있습니다
border: {{border}};. - 기본 값을 약식 형식으로 설정합니다. 와 같은 것
1px solid #333누군가가 패널을 열기 전에 위젯이 완료된 것처럼 보이게 합니다. - 경계 반경과 쌍을 이룹니다. 필드는 유형,너비 및 색상을 다룹니다. 차원 필드 또는 고정 항목을 추가합니다
border-radius둥근 모서리에 대한 규칙. - 없음은 진정한 선택이라는 것을 기억하십시오. 사용자는 패널에서 테두리를 끌 수 있으므로 테두리에 의존하여 레이아웃을 함께 유지하지 마십시오.
- 도움이 되는 곳에서 토큰을 재사용하세요. 같은
{{border}}value는 여러 선택기의 스타일을 지정할 수 있으며 모두 하나의 컨트롤을 따릅니다.
자주 묻는 질문 #
Master Addons Widget Builder의 Border 필드는 무엇입니까?
Border 필드는 Elementor 의 테두리 그룹 컨트롤을 사용자 지정 위젯에 추가합니다: Border Type 드롭다운,측별 Border Width 입력 및 Border Color 선택기. 단축 코드는 결과 CSS 테두리 약어를 위젯의 스타일시트에 인쇄합니다.
국경 단축 코드는 어디에 두나요?
위젯 빌더의 CSS 탭에서 테두리 속성의 값으로. border 라는 필드는 테두리를 전달해야 하는 선택기의 border: {{border}};로 사용됩니다. HTML 편집기에 속하지 않습니다.
제어는 어떤 경계 유형을 지원합니까?
테두리 유형 드롭다운은 기본값, 없음, 솔리드, 이중, 점선, 점선 및 홈을 제공합니다. 기본값 또는 없음을 제외한 모든 유형을 선택하면 드롭다운 아래에 테두리 너비 및 테두리 색상 컨트롤이 표시됩니다.
사용자가 양쪽에 서로 다른 테두리 너비를 설정할 수 있습니까?
예. 테두리 너비 컨트롤에는 별도의 상단,오른쪽, 하단 및 왼쪽 입력이 있습니다. 링크 토글은 네 가지를 모두 함께 변경합니다; 고르지 않은 값을 설정하려면 연결을 해제하십시오. 위쪽과 아래쪽에 5 픽셀이 있고 측면에 3 픽셀이 있습니다.
패널에 테두리 너비와 색상이 표시되지 않는 이유는 무엇입니까?
Border Type 이 Default 또는 None 인 동안 해당 컨트롤은 숨겨져 있습니다. Solid,Dashed 또는 기타 보이는 유형을 선택하고 두 컨트롤이 모두 나타납니다. 전체 Border 컨트롤이 누락된 경우 Elementor 편집기를 다시 로드하여 저장된 위젯을 선택합니다.
감싸는 #
Widget Builder Border 필드는 테두리 유형 드롭다운,반응형 측면당 너비 및 색상 선택기를 단일 드래그 앤 드롭으로 포장합니다. 필드 이름 지정,설정 border: {{border}}; CSS 에서,그리고 테두리 결정은 스타일시트에서 나와 편집자가 처리할 수 있는 Elementor 패널로 이동합니다. CSS 와 테두리 결정을 결합합니다 텍스트 필드 그리고 a 분배기 콘텐츠와 스타일을 한 곳에서 다루는 위젯 패널을 구축하려면 나머지 부분을 살펴보세요 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.
