박스 섀도우

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 의 표준 그림자 컨트롤을 넣습니다: 가로 및 세로 오프셋,흐림, 펼침,불투명도로 색칠,삽입 토글. 마스터 애드온 내부 위젯 빌더, 편집자가 스타일시트를 건드리지 않고도 페이지에서 카드를 떼거나, 버튼을 부드럽게 하거나, 입력을 누를 수 있는 필드입니다.

Box Shadow 컨트롤이 지원됩니다 조건그림자 토글이 켜져 있고 빌더 전체의 토큰 출력이 처리되는 경우에만 표시하는 깔끔한 방법입니다 나뭇가지 구문 템플릿 엔진. 두 가이드 모두 설정 및 제한 사항을 다룹니다.

Box Shadow 는 그룹 컨트롤로 Typography 및 Background 와 같은 계열입니다. 위젯에 대한 연결은 토큰이 아닌 CSS 선택기입니다: 필드에 스타일이 지정되는 요소를 알려주면 Elementor 가 자체적으로 그림자를 작성합니다.

Box Shadow 필드가 수행하는 작업 #

• Elementor 의 박스 섀도우 그룹 컨트롤을 렌더링합니다, 필드 라벨 옆의 연필 아이콘에서 열립니다.
• 수평 및 수직 오프셋 요소 주위에 그림자를 배치합니다.
• 흐리게 하고 퍼집니다 부드러움과 도달 범위를 제어합니다.
• 색상 대부분의 그림자 품질이 나오는 알파 채널이 포함되어 있습니다.
• 위치 토글 외부 그림자와 삽입 사이를 전환합니다.
• CSS 자체를 작성합니다 귀하가 제공하는 선택기에; 템플릿 토큰이 존재하지 않습니다.

위젯을 처음 구축한다면, 위젯 빌더 개요 는 시작의 장소입니다.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• Widget Builder 편집기에서 열리는 사용자 정의 위젯입니다. 우리의 예는 다음과 같은 추천 위젯입니다 <article class="quote-card"> 편집자가 제어하는 그림자를 가지고 있어야 합니다.

Box Shadow 필드를 추가하는 방법 #

Widget Builder 편집기에서 찾을 때까지 왼쪽의 필드 패널을 스크롤합니다 박스 섀도우 배경 및 텍스트 그림자와 같은 다른 스타일 그룹 필드와 함께 나열된 필드입니다.

아래의 섹션으로 드래그하세요 스타일 탭, 일반적으로 카드 스타일링 섹션의 테두리 및 치수 필드 옆에 있습니다. 일단 착륙하면 필드의 옵션이 왼쪽에 열립니다.

박스 섀도우 필드 옵션이 설명되었습니다 #

• 라벨: elementor의 컨트롤 옆에 표시된 텍스트, 예를 들어 “Card Shadow”.
• 이름: 필드, 문자, 숫자 및 밑줄에 대한 고유 식별자입니다.
• 선택기: 그림자가 적용되는 CSS 선택기. 다음에 다루는 연결 자체입니다.
• 필드 옵션: 섀도우가 시작하는 기본값을 변경하는 등 그룹 내부의 하위 컨트롤을 재정의합니다.
• 설명, 라벨 표시, 구분 기호 및 조건은 일반적인 표시 옵션입니다.

필드를 선택기로 가리킵니다 #

모든 그룹 컨트롤과 마찬가지로 box Shadow 필드에는 없습니다 {{shortcode}} 당신의 CSS 를 위해. 그림자는 여러 값이 하나의 속성으로 롤링된 것입니다 {{ token }} 필드에 유용한 아무것도 인쇄하지 않습니다. 그만큼 선택기 옵션은 전체 연결입니다.

추천 카드의 경우 선택자는 다음과 같습니다:

{{WRAPPER}} .quote-card

• {{WRAPPER}} 위젯의 자체 컨테이너를 나타내며 이 위젯에 그림자 범위를 유지합니다. 그룹 컨트롤은 셀렉터를 작성한 그대로 사용하므로 입력합니다 {{WRAPPER}} 자신.
• .quote-card 그림자가 도달하는 위젯 HTML 내부의 요소입니다.

조심하세요: 없는 선택기입니다 {{WRAPPER}} 매치 .quote-card 페이지에서, 그래서 하나의 위젯의 그림자 설정은 그들 모두를 다시 스타일. 아무것도 경고하지 않습니다; 스타일은 단순히 확산.

디자인이 하나에 의존하는 경우 위젯의 CSS 탭에 대체 그림자를 유지하십시오. 첫 번째 드롭의 모양이며 편집기가 팝오버를 열면 컨트롤의 값이 대신됩니다.

Elementor 에서 Box Shadow 컨트롤을 사용합니다 #

엘리멘터의 페이지에 위젯을 놓고,페이지가 이미 열려있었다면 편집기를 다시 로드합니다. 컨트롤은 연필 아이콘으로 레이블을 보여줍니다; 클릭하면 그림자 팝오버가 열립니다.

먼저 색상을 설정한 다음 Blur 를 당겨 소프트 카드 모양을 위해 오프셋을 작게 유지하거나 하드 그래픽 그림자를 위해 Blur 가 0 인 Vertical up 을 누릅니다. 누른 필드와 웰에 삽입할 위치를 뒤집습니다. 미리보기는 모든 변경 사항을 추적합니다. 하나의 레이아웃 참고: 그림자는 흐름에 공간을 차지하지 않으므로 위젯이 좁은 행 사이에 위치할 때 확인할 가치가 있는 넉넉한 스프레드가 위아래 섹션으로 번질 수 있습니다.

일반적인 사용 사례 #

• 카드 평가, 가격 및 팀 위젯에서 부드러운 그림자가 카드와 페이지를 구분합니다.
• 버튼 기본 상태에 대한 깊이가 필요합니다.
• 이미지 프레임, 사진에 인쇄된 듯한 느낌을 줍니다.
• 끈끈한 막대기 및 패널 그림자가 콘텐츠보다 상승을 알리는 경우.
• 입력 양식 필드를 사용 하 여, 삽입 된 토글을 사용 하 여 움푹 들어간 모양.

Box Shadow 필드 작업을 위한 팁 #

• 선택기 옵션은 전체 연결입니다. CSS 탭에는 박스 섀도우 토큰이 없습니다; 그룹 컨트롤이 있는 가장 일반적인 막다른 골목이 될 것으로 예상됩니다.
• 항상 선택기를 다음으로 시작합니다 {{WRAPPER}}. 필드에서는 이를 원시로 사용하고 이를 그대로 두면 페이지의 모든 일치하는 요소에 그림자가 쏟아집니다.
• Border 및 Dimensions와 그룹화합니다. 세 개의 필드가 함께 패널에 완전한 카드 스타일링 섹션을 만듭니다.
• 어둠이 아닌 컬러 알파에 기대어보세요. 불투명도가 10~15 퍼센트인 검은색 그림자는 단색 회색 그림자보다 더 잘 읽히며, 해당 분야의 설명에 참고할 가치가 있습니다.
• 위젯 CSS에서 대체 기능을 유지하세요. 디자인에 기본적으로 그림자가 필요한 경우 스타일시트에 그림자를 넣고 컨트롤이 이를 재정의하도록 합니다.

자주 묻는 질문 #

감싸는 #

위젯 빌더 박스 섀도우 필드는 편집자에게 깊이에 대한 실제 제어권을 제공합니다: 하나의 필드, 하나의 선택기로 시작합니다 {{WRAPPER}}를,그리고 그림자 팝오버 전체가 패널에 나타납니다. the 와 같은 선택기 모델에서 작동합니다 타이포그래피 분야따라서 설정은 그룹 컨트롤 간에 바로 전달됩니다. 나머지 부분을 탐색합니다 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.