텍스트 그림자

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 의 텍스트 그림자 컨트롤 추가: 가로 및 세로 오프셋,흐림, 불투명도 색상,선택기가 가리키는 텍스트에 적용 마스터 애드온 내부 위젯 빌더이는 편집자가 바쁜 사진 위에 헤드라인을 읽을 수 있도록 유지하거나 디스플레이 유형에 미묘한 변화를 주는 가장 빠른 방법입니다.

모든 Widget Builder 컨트롤과 마찬가지로 Text Shadow도 지원합니다 조건그림자 옵션이 활성화되어 있고 빌더 전체의 토큰 출력이 다음을 통해 실행되는 경우에만 공개하는 데 편리합니다 나뭇가지 구문 템플릿 엔진. 두 가이드 모두 설정 및 제한 사항을 다룹니다.

Text Shadow 는 그룹 컨트롤로,타이포그래피와 Background 를 포함하는 패밀리 중 가장 작습니다. 배선은 동일합니다: CSS 에 토큰이 없고 Elementor 에게 어떤 요소를 스타일링할지 알려주는 Selector 옵션만 있습니다.

텍스트 그림자 필드가 수행하는 작업 #

• Elementor 의 텍스트 섀도우 그룹 컨트롤을 렌더링합니다, 필드 라벨 옆의 연필 아이콘에서 열립니다.
• 수평 및 수직 오프셋 그림자를 글리프 주위에 놓습니다.
• 흐리게 하다 단단하고 복제된 가장자리에서 넓은 빛까지 부드럽게 해줍니다.
• 색상 사실적인 저불투명 그림자를 위한 알파 채널이 포함되어 있습니다.
• CSS 자체를 작성합니다 귀하가 제공하는 선택기에; 템플릿 토큰이 없습니다.

이전에 위젯을 구축한 적이 없습니까? 로 시작하십시오 위젯 빌더 개요 그리고 한 번 열어두면 다시 오세요.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• Widget Builder 편집기에서 열리는 사용자 정의 위젯입니다. 우리의 예는 다음과 같은 사진 배너 위젯입니다 <h2 class="banner-title"> 이미지에 앉아있는 표제.

텍스트 그림자 필드를 추가하는 방법 #

Widget Builder 편집기에서 찾을 때까지 왼쪽의 필드 패널을 스크롤합니다 텍스트 그림자 타이포그래피 및 Box Shadow와 같은 다른 스타일 그룹 필드와 함께 나열된 필드입니다.

아래의 섹션으로 드래그하세요 스타일 탭, 일반적으로 동일한 텍스트의 스타일을 지정하는 타이포그래피 필드 바로 옆. 일단 해당 필드의 옵션이 왼쪽에 열립니다.

텍스트 그림자 필드 옵션을 설명했습니다 #

• 라벨: elementor의 컨트롤 옆에 표시된 텍스트, 예를 들어 “Title Shadow”.
• 이름: 필드, 문자, 숫자 및 밑줄에 대한 고유 식별자입니다.
• 선택기: 그림자가 적용되는 CSS 선택기. 다음에 다루는 연결 자체입니다.
• 제외하다: 다듬어진 팝오버를 원할 때 그룹에서 개별 하위 컨트롤을 제거합니다.
• 설명, 표시 라벨, 구분 기호 및 조건은 다른 필드에서 본 표준 표시 옵션입니다.

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

다른 그룹 컨트롤과 마찬가지로 텍스트 그림자 필드에는 없습니다 {{shortcode}} 당신의 CSS 를 위해. 그림자는 오프셋, 흐림, 색상을 하나의 속성으로 묶습니다 {{ token }} 필드에 유용한 아무것도 인쇄하지 않습니다. 그만큼 선택기 옵션은 전체 연결을 전달합니다.

배너 표제의 경우 선택기는: 입니다

{{WRAPPER}} .banner-title

• {{WRAPPER}} 는 위젯의 자체 컨테이너를 나타내며,이 위젯 안에 그림자를 유지합니다. 그룹 컨트롤은 기록된 대로 선택기를 적용합니다 {{WRAPPER}} 입력할 수 있습니다; 그것은 당신을 위해 추가되지 않습니다.
• .banner-title 는 위젯 HTML 안에 있는 텍스트 요소입니다.

조심하세요: 건너뛰기 {{WRAPPER}} 그리고 선택기는 모든 스타일을 지정합니다 .banner-title 다른 위젯의 위젯을 포함하여 페이지 전체에 걸쳐 설정이 미러링됩니다 타이포그래피 분야 정확히, 그래서 거기에서 작동하는 선택기가 여기서 작동합니다.

디자인에서 기본 그림자를 요구하는 경우 위젯의 CSS 탭에 대체 그림자로 보관하십시오. 편집기가 값을 설정하면 컨트롤이 이를 재정의합니다.

Elementor 에서 텍스트 그림자 컨트롤 사용 #

사용자 정의 위젯을 Elementor 의 페이지에 추가하거나 이미 열려 있는 경우 편집기를 다시 로드합니다. 컨트롤에는 레이블과 그림자 팝오버를 여는 연필 아이콘이 표시됩니다.

색상을 선택한 다음 Blur 와 두 오프셋을 조정합니다. 두 픽셀의 블러로 낮은 불투명도의 어두운 그림자는 사진에서 헤드라인을 읽을 수 있도록 유지합니다; 제로 블러로 더 큰 오프셋은 복고풍 디스플레이 효과를 생성합니다. 미리보기는 각 변경 사항에 따라 업데이트됩니다. 어두운 배경에 다이얼 된 그림자가 밝은 배경에서 완전히 사라질 수 있기 때문에 데모 이미지뿐만 아니라 사이트에서 사용할 가능성이있는 가장 밝은 사진에 대해 결과를 조정하십시오.

일반적인 사용 사례 #

• 사진 위의 제목 그림자가 대비를 다시 구매하는 영웅 및 배너 위젯에서.
• 비디오 배경에 텍스트끊임없이 이동하고 추가 가장자리가 필요합니다.
• 유형 효과 표시 큰 숫자에 하드 오프셋 그림자와 같은.
• 빛 이미지에 빛 텍스트은은하고 어두운 후광으로 인해 캡션을 읽을 수 있습니다.
• 배지 및 라벨 그라데이션이나 패턴이 있는 영역에 앉습니다.

텍스트 그림자 필드와 함께 작업하기 위한 팁 #

• 선택기 옵션은 전체 연결입니다. 그룹 컨트롤에 대한 토큰이 존재하지 않으므로 이 필드의 CSS 탭에는 아무 것도 들어가지 않습니다.
• 항상 선택기를 다음으로 시작합니다 {{WRAPPER}}. 그것은 원시적으로 사용되며, 그것없이 그림자는 페이지의 모든 일치하는 요소에 도달합니다.
• 동일한 선택기의 타이포그래피 필드와 페어링합니다. 한 제목에 대한 글꼴 및 그림자 결정은 패널에 함께 표시됩니다.
• 낮은 불투명도 색상을 선호합니다. 색상의 알파 채널에서 구축 된 그림자는 디자인에 앉아; 솔리드 블랙은 거의하지 않습니다.
• 단순화하려면 제외를 사용하세요. 위젯에 흐림과 색상만 필요한 경우 그룹을 다듬으면 팝오버가 작아집니다.
• CSS 탭에서 대체를 발송합니다 기본 디자인이 그림자가 있는 것에 따라 달라지는 경우.

자주 묻는 질문 #

감싸는 #

위젯 빌더 텍스트 그림자 필드는 반복되는 문제를 해결하는 작은 컨트롤입니다: 편집기가 뒤에 어떤 이미지를 놓아도 읽을 수 있어야 하는 텍스트 필드의 이름을 지정하고 선택기를 로 설정합니다 {{WRAPPER}} 게다가 텍스트의 클래스,그리고 그림자는 그때부터 패널에 살아있습니다. 선택기 모델을 the 와 공유합니다 타이포그래피 분야어쨌든 일반적으로 동일한 제목에 속합니다. 나머지 부분을 탐색합니다 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.