배경

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 의 섹션에서 사용하는 것과 동일한 배경 패널을 건네줍니다: 단색 및 이미지를 위한 클래식 탭,두 개의 색상 스톱이 있는 그라데이션 탭,모션 배경을 위한 비디오 탭 마스터 애드온 내부 위젯 빌더를 사용하면 필드를 한 번 추가하고 CSS 선택기를 가리키면 모든 배경 결정이 Elementor 패널로 이동합니다.

모든 Widget Builder 컨트롤과 마찬가지로 Background도 지원합니다 조건 패널 가시성을 위해 빌더 전체의 토큰 출력이 실행됩니다 나뭇가지 구문 템플릿 엔진. 두 가이드 모두 설정과 제한 사항을 설명합니다.

Background 는 그룹 컨트롤로,타이포그래피 및 Border 와 같은 계열입니다. 즉,연결 모델이 텍스트 또는 색상 필드와 다릅니다: CSS 에 붙여 넣을 토큰이 없습니다. 선택기 옵션을 채우면 Elementor 가 배경 스타일을 해당 선택기 자체에 씁니다.

Background 필드가 하는 일 #

• Elementor 의 배경 그룹 컨트롤을 렌더링합니다 위젯 패널에 허용되는 각 배경 유형에 대한 탭이 있습니다.
• 클래식 탭: 단색 또는 일반적인 위치, 크기 및 반복 설정이 있는 이미지입니다.
• 그라데이션 탭: 위치, 각도 및 유형 컨트롤이 포함된 두 가지 색상 정지.
• 비디오 탭: 선택한 요소 뒤에 있는 모션 배경입니다.
• CSS 자체를 작성합니다 템플릿 토큰이 포함되지 않은 상태에서 제공하는 선택기에.

첫 번째 위젯? 로 시작 위젯 빌더 개요 배선 그룹 제어 전.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• 위젯 빌더 편집기에서 열리는 사용자 정의 위젯입니다. 우리의 예는 영웅 위젯입니다 <div class="hero-box"> 컨테이너는 편집자가 선택한 배경을 가져야 합니다.

Background 필드를 추가하는 방법 #

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

아래의 섹션으로 드래그하세요 스타일 탭, 그것의 자연적인 집. 일단 착륙, 필드의 옵션은 왼쪽에 열립니다.

배경 필드 옵션이 설명되었습니다 #

• 라벨: elementor의 컨트롤 위에 표시된 텍스트, 예를 들어 “Hero Background”.
• 이름: 필드, 문자, 숫자 및 밑줄에 대한 고유 식별자입니다.
• 선택기: 배경이 적용되는 CSS 선택기. 다음 섹션에서 다루는 연결 자체입니다.
• 유형: 제어가 보여주는 탭은 클래식, 그라데이션, 비디오에서 보여줍니다. 목록을 다듬으면 패널이 집중됩니다; 카드 위젯에는 비디오 탭이 거의 필요하지 않습니다.
• 제외하다: 패널의 축소 버전을 원할 때 그룹에서 개별 하위 컨트롤을 제거합니다.
• 설명, 표시 라벨, 구분 기호 및 조건은 모든 필드에서와 같이 작동합니다.

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

토큰 필드에 익숙해지면 사람들을 넘어뜨리는 부분은 다음과 같습니다: 배경 필드에는 없습니다 {{shortcode}} 당신의 CSS 를 위해. 배경은 속성 묶음이므로 하나의 토큰을 통해 인쇄할 수 없습니다; a {{ token }} 이 필드에는 유용한 항목이 없습니다. 대신 을 입력합니다 선택기 옵션과 Elementor가 스타일을 생성합니다.

영웅 컨테이너의 경우, 선택기는: 입니다

{{WRAPPER}} .hero-box

• {{WRAPPER}} 이 위젯의 배경 범위만 지정하는 위젯 자체 컨테이너를 나타냅니다. 그룹 컨트롤은 기록된 대로 정확하게 선택기를 사용하므로 입력합니다 {{WRAPPER}} 너 자신; 당신을 위해 아무것도 앞에 있지 않습니다.
• .hero-box 는 배경을 받는 위젯 HTML 내부의 요소입니다.

조심해: 나가 {{WRAPPER}} 꺼짐 및 선택기가 모두 일치합니다 .hero-box 페이지에서, 그래서 하나의 위젯의 배경은 그들 모두에 착륙. 그룹 컨트롤은이 배송하기 가장 쉬운 실수를 만드는 원시 선택기를.

위젯의 CSS 탭에 대체 배경을 유지하십시오. 위젯이 새로운 드롭에 표시되는 내용이며 편집기가 무언가를 선택하면 컨트롤의 값이 이를 재정의합니다. 견고한 대체 색상은 무거운 배경 이미지가 로딩을 완료하기 전의 순간도 포함하므로 유지가 두 번 발생합니다. 그렇지 않으면 느린 연결에서 흰색으로 깜박입니다.

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

Elementor 의 페이지에 위젯을 추가하고,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 허용된 유형별로 탭이 있는 레이블 아래에 컨트롤이 나타납니다.

클래식 탭에서 색상을 선택하거나 위치,크기 및 반복 설정이 있는 미디어 라이브러리에서 이미지를 선택합니다. 각도와 위치가 있는 두 개의 색상 중지에 대해서는 그라디언트 탭으로 전환하고,모션 배경에 대해서는 비디오 탭으로 전환하면 미리보기가 업데이트됩니다.

일반적인 사용 사례 #

• 영웅 및 배너 위젯 각 사이트가 헤드라인 뒤에 고유한 이미지나 그라데이션을 원하는 경우.
• 카드 배경 가격표, 팀 그리드 및 기능 목록에서.
• 콜투액션 스트립 캠페인당 브랜드 색상과 사진 사이를 전환합니다.
• 비디오 헤더비디오 탭을 위해 구축된 위젯에서만 활성화됩니다.
• 오버레이 패널, 미디어 위의 내부 레이어에 선택기를 가리킵니다.

배경 필드 작업을 위한 팁 #

• 선택기 옵션은 전체 연결입니다. CSS 탭에서 백그라운드 토큰을 사냥하지 마십시오; 없습니다.
• 항상 선택기를 다음으로 시작합니다 {{WRAPPER}}. 그룹 컨트롤은 원시로 사용하므로 베어 클래스 선택기가 페이지의 모든 일치 항목에 유출됩니다.
• Types 리스트를 다듬는다. 클래식과 그라데이션만 제공하면 카드 위젯이 단순해지고 편집자가 속하지 않는 곳에 비디오를 삭제하는 것을 방지할 수 있습니다.
• 위젯 CSS에 대체 스타일을 유지하세요. 스타일시트의 기본 배경색은 누군가가 컨트롤을 열기 전에 위젯을 표시할 수 있게 합니다.
• 마음 텍스트 대조. 편집자가 배경을 제어할 때 위젯 위에 있는 텍스트의 색상 컨트롤과 위젯을 페어링합니다.

자주 묻는 질문 #

감싸는 #

위젯 빌더 배경 필드는 사용자 정의 위젯의 모든 요소에 섹션 등급 배경 편집을 제공합니다: 필드 이름을 지정하고 선택기를 다음으로 설정합니다 {{WRAPPER}} 게다가 클래스,그리고 편집기가 보는 타입을 선택합니다. the 와 같은 선택기 모델을 따릅니다 타이포그래피 분야따라서 한 그룹 컨트롤이 클릭하면 나머지 컨트롤도 클릭됩니다. 나머지 탐색 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.