텍스트 그림자

Text Shadow 필드는 Elementor 의 텍스트 섀도 컨트롤을 Master Addon 으로 구축된 사용자 지정 위젯에 추가합니다 위젯 빌더. 편집자는 색상,흐림 설정 및 두 개의 오프셋을 얻고 그림자는 CSS 선택기가 가리키는 텍스트에 적용됩니다. 사진 위에 표제를 읽을 수 있어야 할 때 사용하십시오.

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

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

• 그것은 Elementor의 위젯 패널에 하나의 컨트롤을 추가합니다: 라벨과 그림자 설정을 여는 연필 아이콘.
• 이러한 설정은 색상(불투명도 포함), 흐림, 수평 및 수직입니다.
• Elementor는 다음과 같이 씁니다 text-shadow 필드의 선택기 옵션에 설정된 요소에 CSS를 적용하므로 HTML 또는 CSS에 토큰을 배치하지 않습니다.

아직 위젯을 구축하지 않았다면, 을 읽어보세요 위젯 빌더 개요 먼저 위젯을 열어두고 돌아오세요.

시작하기 전에 #

• Elementor가 설치되어 활성화된 WordPress입니다.
• Elementor 및 Master Addons Pro 용 마스터 애드온,둘 다 활성화됨. The 설치 가이드 설정을 다룹니다.
• 위젯 빌더에서 열린 위젯. 이 가이드의 예는 “사진 배너” 위젯입니다: 클래스가 있는 H2 헤딩이 맨 위에 있는 배경 사진입니다 banner-title라는 이름의 텍스트 필드에서 채워집니다 banner_title.

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

1. 로 이동 마스터 애드온 > 위젯 빌더 그리고 위젯을 엽니다.
2. 를 클릭합니다 스타일 섹션 영역 위에 탭을 놓고 탭이 비어 있으면 섹션을 추가합니다. 섹션에 “배너 제목”과 같은 명확한 제목을 지정합니다.
3. 유형 shadow 왼쪽의 필드 검색 상자에. Box Shadow 와 Text Shadow 가 올라옵니다.
4. 드래그 텍스트 그림자 섹션으로. 그 설정은 왼쪽 사이드 바에서 열립니다.

필드를 콘텐츠 또는 고급 섹션에 놓을 수도 있으며,컨트롤이 해당 Elementor 탭에 표시됩니다. 편집자는 일반적으로 스타일 아래에서 그림자를 찾습니다.

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

• 라벨 는 Elementor 에서 컨트롤 옆에 있는 텍스트입니다. 예제에서는 “Title Shadow”를 사용합니다.
• 이름 는 필드의 고유 ID (문자,숫자 및 밑줄만) 입니다. Elementor 는 이 이름으로 편집기의 값을 저장하므로 한 번 설정하고 그대로 둡니다.
• 설명 는 빌더 내부의 당신을 위한 메모입니다. Elementor 는 이 컨트롤 아래 표시하지 않습니다.
• 기본값 이 필드에서 사용되지 않습니다. 새로운 그림자는 항상 Elementor 자신의 기본값에서 시작되며 더 아래에 나열됩니다.

사이드바에서 아래로 스크롤하여 공통 설정과 선택기에 도달합니다.

• 라벨 표시 패널에 레이블을 숨기거나 표시합니다.
• 분리기 컨트롤 전후에 구분선을 그립니다.
• 조건 다른 필드에 특정 값이 있을 때만 컨트롤을 표시합니다. 예를 들어 “그림자 표시” 스위처입니다. 참조 조건.
• 선택기 는 그림자를 받는 CSS 선택기입니다. 필드는 그림자 없이는 아무 쓸모가 없으므로 아래에 자체 섹션이 있습니다.

레이블 블록,반응형 제어,동적 지원,프론트엔드 사용 가능 및 제어 클래스도 목록에 나타납니다. 텍스트 그림자 컨트롤은 이를 사용하지 않으며 변경해도 이 필드에 영향을 주지 않습니다.

선택기를 설정합니다 #

선택기는 Elementor 에게 어떤 요소가 그림자를 가져오는지 알려줍니다. 배너 표제의 경우 다음을 입력합니다:

{{WRAPPER}} .banner-title

• {{WRAPPER}} 는 페이지에서 이 위젯의 고유 클래스로 대체되어 이 하나의 위젯 안에 그림자를 유지합니다.
• .banner-title 는 위젯의 HTML에서 제목에 클래스입니다.

필드는 입력한 대로 선택기를 정확하게 사용합니다. 없이 {{WRAPPER}}는, 규칙이 된다 .banner-title { text-shadow: ... } 전체 페이지에 대해,그리고 그 클래스를 가진 모든 요소가 다른 위젯의 제목을 포함하여 그것을 집어들었습니다. 선택기를 비워두면 그림자는 로 갑니다 {{WRAPPER}} .elementor-widget-container위젯의 모든 텍스트를 다룹니다.

하나의 컨트롤은 여러 요소를 스타일링할 수 있습니다. 선택기를 쉼표로 구분하고 각각을 로 시작합니다 {{WRAPPER}}예를 들어 {{WRAPPER}} .banner-title, {{WRAPPER}} .banner-subtitle.

코드 편집기 옆에 있는 문서 패널에는 다음이 나열되어 있습니다 {{title_shadow}} 이 필드의 토큰. HTML 및 CSS 에서 제외하십시오. 그림자는 숫자와 색상으로 저장되므로 토큰에는 인쇄 할 텍스트가 없으며 선택기는 이미 출력을 처리합니다.

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

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

페이지에 위젯을 추가하거나,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다.Select the widget and open the 스타일 탭. 컨트롤은 만든 섹션에 위치하며 레이블과 연필 아이콘을 표시합니다.

연필을 클릭하여 팝오버를 엽니다. Elementor 의 시작 값으로 그림자를 켜는 것: 흐림 10,수평 0,수직 0 및 30% 불투명도의 검정색. 슬라이더를 드래그하는 동안 캔버스가 업데이트됩니다.

• 흐리게 하다 0 에서 100 px 까지 실행됩니다. 0 에서 당신은 문자의 날카로운 사본을 얻고,높은 값은 빛을 부드럽게합니다.
• 수평 그리고 수직의 -100 에서 100 px까지 실행하고 그림자를 왼쪽 또는 오른쪽, 위 또는 아래로 이동합니다.

색상 견본을 클릭하여 그림자 색상을 선택합니다. 피커는 불투명도 슬라이더를 가지며 HEXA,RGBA 또는 HSLA 값을 허용하므로 다음과 같은 값을 입력할 수 있습니다 rgba(0, 0, 0, 0.65) 직접.

그림자를 제거하려면 연필 옆에 있는 원형 재설정 화살표를 클릭합니다.

일반적인 사용 사례 #

• 텍스트 뒤에 밝은 영역이 있는 영웅 및 배너 사진의 제목입니다.
• 프레임이 변경됨에 따라 부드러운 그림자가 단어를 읽을 수 있도록 유지하는 비디오 배경의 텍스트입니다.
• 큰 숫자 또는 판매 배지에 흐림이 없는 하드 오프셋과 같은 복고풍 디스플레이 유형입니다.
• 어두운 배경에 밝은 그림자 색상, 큰 흐림 및 오프셋 없이 빛나는 것입니다.

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

• 모든 선택기를 다음으로 시작합니다 {{WRAPPER}}. 그렇지 않으면 그림자가 페이지의 다른 위젯으로 누출 될 수 있습니다.
• 필드를 동일한 선택기를 사용하는 타이포그래피 필드 옆에 놓으면 표제의 글꼴과 그림자 설정이 한 섹션에 위치합니다.
• 반투명한 색상을 선택하세요. 40 ~ 70% 불투명도의 블랙은 자연스러워 보이고,단단한 블랙은 무거워 보이는 경향이 있습니다.
• 위젯이 얻을 가능성이 가장 밝은 이미지에 대한 그림자를 확인합니다. 어두운 사진에서 작동하는 그림자는 밝은 사진에서 사라질 수 있습니다.
• 누군가가 컨트롤을 터치하기 전에 디자인에 그림자가 필요한 경우 다음을 추가합니다 text-shadow 위한 규칙 .banner-title CSS 탭에서. 컨트롤의 값은 편집기가 설정하면 대체됩니다.
• 카드, 버튼, 컨테이너의 경우 다음을 사용하세요 상자 그림자 필드 대신. 텍스트 그림자는 글자의 모양을 따릅니다.

자주 묻는 질문 #

감싸는 #

텍스트 그림자 필드를 스타일 섹션에 놓고 레이블과 이름을 지정하고 선택기를 다음으로 설정합니다 {{WRAPPER}} 게다가 텍스트의 클래스. 편집자는 Elementor 에서 Color,Blur 및 offset 컨트롤을 얻고 그림자는 해당 위젯 안에 유지됩니다. 와 페어링합니다 타이포그래피 분야 나머지 제목 스타일링은 확인하고 확인하세요 가격 각 계획에 포함된 내용입니다.