박스 섀도우

Box Shadow 필드는 Elementor 의 box shadow 컨트롤을 Master Addon 으로 빌드된 사용자 지정 위젯에 추가합니다 위젯 빌더. 편집자는 작은 팝오버에서 색상,오프셋, 흐림,확산 및 위치를 설정하고 그림자는 CSS 선택기가 가리키는 요소에 적용됩니다. 페이지에서 카드를 들어 올리거나 버튼을 부드럽게하거나 패널에 누른 모양을주는 필드입니다.

Box Shadow 는 Pro 필드입니다. 무료 플러그인에는 제한된 Widget Builder 가 포함되어 있으며 전체 필드 세트가 함께 제공됩니다 마스터 애드온 프로.

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

• 그것은 당신의 위젯의 스타일 탭에 하나의 컨트롤을 추가: 라벨과 그림자 설정을 엽니 다 연필 아이콘.
• 설정은 색상, 가로, 세로, 흐림, 펼침 및 위치(개요 또는 삽입)입니다.
• Elementor는 다음과 같이 씁니다 box-shadow 선택기의 요소에 CSS를 적용하므로 HTML이나 CSS에 토큰이 필요하지 않습니다.

아직 위젯을 구축하지 않았다면, 을 읽어보세요 위젯 빌더 개요 첫번째.

시작하기 전에 #

• Elementor가 설치되어 활성화된 WordPress입니다.
• Elementor 및 Master Addons Pro 용 마스터 애드온,둘 다 활성화됨. The 설치 가이드 설정을 다룹니다.
• 위젯 빌더에서 열린 위젯. 이 가이드의 예는 카드에 클래스가 있는 “평가 카드” 위젯입니다 quote-card.

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

1. 로 이동 마스터 애드온 > 위젯 빌더 그리고 위젯을 엽니다.
2. 를 클릭합니다 스타일 탭하고 섹션을 추가, 예를 들어 “카드 스타일”.
3. 유형 shadow 왼쪽의 필드 검색 상자에. Box Shadow 와 Text Shadow 가 올라옵니다.
4. 드래그 박스 섀도우 섹션으로. 그 설정은 왼쪽 사이드 바에서 열립니다.

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

• 라벨 는 Elementor 의 컨트롤 옆에 있는 텍스트,예를 들어 “Card Shadow”입니다.
• 이름 는 해당 분야의 고유 ID 입니다. 문자,숫자 및 밑줄만.
• 설명 는 건축업자 내부의 당신을 위한 메모입니다.
• 선택기, 기본 그림자 유형, 기본 그림자 값 그리고 기본 그림자 색상 설명 아래에 표시하십시오. 우리의 테스트에서 이러한 상자에 입력 한 변경 사항이 저장되지 않았고 빌더가 오류를 기록 했으므로 지금은 의존하지 마십시오. 대신 공통 설정 (다음 섹션) 에서 선택기를 설정하고 카드에 CSS 탭의 시작 그림자를 지정하십시오.
• 기본값 이 분야에서 사용되지 않습니다.

선택기를 설정합니다 #

사이드바 하단으로 스크롤하고 요소의 클래스를 에 입력합니다 선택기 제어 클래스 아래의 상자. 추천 카드의 경우:

.quote-card

타이핑 안 해도 돼 {{WRAPPER}}. 빌더가 선택기 앞에 추가하므로 규칙이 됩니다 {{WRAPPER}} .quote-card 그리고 이 위젯에만 영향을 줍니다. 하나의 그림자가 하나 이상의 요소에 적용되어야 할 경우 쉼표로 여러 선택기를 분리합니다. 선택기가 비어 있으면 그림자는 위젯의 외부 래퍼에 이동합니다.

저장한 후 사이드바 상단 근처의 선택기 상자에 동일한 값이 표시됩니다.

대체 그림자 추가 #

시작 그림자를 CSS 탭에 넣습니다. 편집기가 컨트롤을 켤 때까지 표시되며,그 후에 컨트롤의 그림자가 이를 대체합니다:

.quote-card {
  box-shadow: 0 1px 2px rgba(17, 24, 39, .06);
}

클릭 설정 저장 다 끝났을 때.

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

페이지에 위젯을 추가하거나,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다.Select the widget and open the 스타일 탭. 레이블이 연필 아이콘과 함께 나타납니다.

연필을 클릭하여 팝오버를 엽니다. 그러면 Elementor 의 시작 값으로 그림자가 켜집니다: 가로 0,세로 0,흐림 10,스프레드 0 및 50% 불투명도로 검정색. 드래그하면서 조정 및 카드 업데이트:

• 색상 그림자 색상과 불투명도를 설정합니다. 색을 칠한 반투명 색상은 검정색보다 부드러워 보입니다.
• 수평 그리고 수직의 그림자를 옆으로 위아래로 움직여 보세요.
• 흐리게 하다 가장자리를 부드럽게 합니다. 0 은 단단한 그림자를 줍니다.
• 퍼지다 그림자를 키우거나 축소합니다. 작은 음수 값은 큰 흐림이 측면으로 쏟아지는 것을 방지합니다.
• 위치 outline (상자 외부) 과 Inset (상자 내부) 사이를 전환합니다.

위치를 다음으로 설정합니다 삽입 입력 필드와 조용한 패널에 유용한 프레스인 룩:

연필 옆에 있는 원형 화살표는 컨트롤을 재설정하고 그림자를 제거합니다.

일반적인 사용 사례 #

• 추천서, 가격, 팀 및 블로그 위젯의 카드.
• 약간의 깊이가 필요한 버튼은 종종 호버 스타일과 짝을 이룹니다.
• 대담하고 평평한 디자인을 위한 하드 오프셋 그림자.
• 입력 필드, 검색 창 및 오목 패널에 그림자를 삽입합니다.

Box Shadow 필드 작업을 위한 팁 #

• 사이드바 하단에 있는 선택기를 사용하고 클래스만 입력하세요. {{WRAPPER}} 는 당신을 위해 추가됩니다.
• 대체를 유지하십시오 box-shadow CSS 탭에서 새 위젯이 평평하게 보이지 않도록.
• 소프트 카드 그림자의 경우 큰 흐림, 흐림의 약 절반에 해당하는 수직 오프셋 및 작은 음의 스프레드를 사용해 보세요.
• 요소에 테두리 반경을 부여합니다. 그림자는 모서리를 따르므로 둥근 카드는 둥근 그림자를 얻습니다.
• 텍스트의 그림자는 다음을 사용합니다 텍스트 그림자 필드 대신.

자주 묻는 질문 #

감싸는 #

스타일 섹션에 Box Shadow 필드를 추가하고 사이드바 하단의 선택기에 요소의 클래스를 입력한 다음 CSS 탭에 가벼운 대체 그림자를 유지합니다. 그런 다음 편집자는 하나의 팝오버에서 그림자를 제어합니다. 카드의 나머지 스타일링에 대해서는 다음을 참조하세요 국경 그리고 치수 필드 및 확인 가격 각 계획에 포함된 내용입니다.