Background 필드는 Elementor 의 배경 컨트롤을 Master Addon 으로 구축된 사용자 지정 위젯에 추가합니다 위젯 빌더. 편집자는 Elementor 패널에서 단색,이미지 또는 그라데이션을 선택하고 스타일은 CSS 선택기가 가리키는 요소로 이동합니다. 배너,카드 및 배경이 페이지마다 변경되어야하는 모든 상자에 적합합니다.
배경은 Pro 필드입니다. 무료 플러그인에는 제한된 Widget Builder 가 포함되어 있으며 전체 필드 세트가 함께 제공됩니다 마스터 애드온 프로.
Background 필드가 하는 일 #
- 위젯의 스타일 탭에 Elementor의 배경 유형 컨트롤을 추가하며, 허용하는 배경 유형당 하나의 아이콘이 있습니다.
- Classic은 이미지를 선택한 후 위치, 부착물, 반복 및 크기 설정을 통해 색상과 이미지를 제공합니다.
- 그라데이션은 위치와 선형 또는 방사형 유형, 각도 또는 위치에 따라 두 가지 색상을 제공합니다.
- Elementor 는 CSS 자체를 Selector 옵션의 요소에 씁니다. HTML 또는 CSS 에 토큰이 필요하지 않습니다.
아직 위젯을 구축하지 않았다면, 을 읽어보세요 위젯 빌더 개요 첫번째.
시작하기 전에 #
- Elementor가 설치되어 활성화된 WordPress입니다.
- Elementor 및 Master Addons Pro 용 마스터 애드온,둘 다 활성화됨. The 설치 가이드 설정을 다룹니다.
- 위젯 빌더에서 열린 위젯. 이 가이드의 예는 외부 상자에 클래스가 있는 “프로모션 배너” 위젯입니다
promo-banner.
Background 필드를 추가하는 방법 #
- 로 이동 마스터 애드온 > 위젯 빌더 그리고 위젯을 엽니다.
- 를 클릭합니다 스타일 예를 들어 “배너 배경” 섹션을 탭하고 추가합니다.
- 유형
background왼쪽의 필드 검색 상자에. - 드래그 배경 섹션으로. 왼쪽 사이드바에서 설정이 열리고 섹션 미리보기에 유형 아이콘이 표시됩니다.
배경 필드 옵션이 설명되었습니다 #
- 라벨 빌더의 필드 이름을 예를 들어 “배너 배경”으로 지정합니다. Elementor 에서 편집자는 섹션 제목과 배경 유형이라는 컨트롤을 봅니다.
- 이름 는 해당 분야의 고유 ID 입니다. 문자,숫자 및 밑줄만.
- 설명 는 건축업자 내부의 당신을 위한 메모입니다.
- 종류 편집자가 선택할 수 있는 배경 유형 설정: 클래식,그라데이션, 비디오 및 슬라이드쇼 새로운 필드는 클래식 및 그라데이션을 보여줍니다.
- 포함 그리고 제외하다 컨트롤 내부에 단일 설정을 추가하거나 숨기기 위한 것입니다. 테스트에서는 Elementor 패널을 변경하지 않았습니다. 제외는 기본적으로 이미지를 표시하지만 이미지 설정은 여전히 나타나므로 둘 다 그대로 두십시오.
유형을 클래식 및 그라데이션으로 유지하십시오. 비디오 및 슬라이드 쇼는 패널에 설정을 추가하지만 사용자 정의 위젯에서 테스트했을 때 비디오 링크 및 슬라이드 쇼 갤러리는 배너 뒤에 아무 것도 그리지 않았습니다. Elementor 는 두 유형이 자체 섹션 및 컨테이너에 필요한 추가 마크 업 만 구축합니다.
선택기의 사이드바 하단으로 스크롤합니다. 그 위의 일반적인 설정 (라벨,분리기, 표시 조건 그리고 나머지는) 다른 분야에서와 마찬가지로 일합니다.
선택기를 설정합니다 #
선택기는 Elementor 에게 어떤 요소가 배경을 얻는지 알려줍니다. 배너의 경우 외부 상자의 클래스입니다:
.promo-banner타이핑 안 해도 돼 {{WRAPPER}} 이 필드의 경우. 빌더는 선택기 앞에 추가하므로 .promo-banner 된다 {{WRAPPER}} .promo-banner 그리고 이 위젯에만 영향을 줍니다. 쉼표로 구분된 목록으로 각 부분은 자신의 {{WRAPPER}}. 선택기가 비어 있으면 배경이 요소 대신 위젯의 외부 래퍼로 이동합니다.
CSS 탭에서 요소에 대체 배경을 부여합니다. 편집기가 무언가를 선택할 때까지 표시되며,그 후 컨트롤의 스타일이 이를 대체합니다:
.promo-banner {
background-color: #1f1147;
color: #ffffff;
}
클릭 설정 저장 다 끝났을 때.
Elementor 에서 Background 컨트롤을 사용합니다 #
페이지에 위젯을 추가하거나,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다.Select the widget and open the 스타일 탭. 섹션에는 허용한 각 유형에 대한 아이콘이 있는 배경 유형이 표시됩니다. 배너는 하나를 선택할 때까지 대체 색상을 유지합니다.
에 대한 브러시 아이콘을 클릭합니다 클래식 그리고 a를 선택하십시오 색상. 배너는 곧바로 업데이트됩니다.
색상 아래에서 을 클릭합니다 이미지 미디어 라이브러리에서 이미지를 선택하기 위한 상자. 이미지가 설정되면 더 많은 설정이 나타납니다: 이미지 해상도,위치, 첨부 파일,반복 및 표시 크기. 센터 센터,반복 금지 및 덮개는 대부분의 배너에서 잘 작동합니다.
에 대한 두 번째 아이콘을 클릭합니다 그라데이션. 첫 번째를 설정합니다 색상 그리고 그것의 위치, 그만큼 두 번째 색상 그리고 그 위치를 선택한 다음 선택하세요 선형 와 함께 각도 또는 방사형 포지션으로.
일반적인 사용 사례 #
- 각 캠페인에 대해 새로운 이미지나 그라데이션을 얻는 영웅 및 프로모션 배너입니다.
- 가격표, 팀 그리드 및 기능 목록에 있는 카드입니다.
- 브랜드 색상과 사진 사이를 전환하는 클릭 유도 문구 스트립입니다.
- 외부 상자 대신 해당 요소에 선택기를 지정하여 내부 패널 또는 오버레이 레이어입니다.
배경 필드 작업을 위한 팁 #
- 항상 폴백을 유지하십시오
background-colorCSS 탭에서. 그것은 새로운 위젯과 이미지가로드되기 전의 순간을 다룹니다. - 사진에서 텍스트를 읽을 수 있도록 유지합니다. 예제 배너에는 어두운 레이어가 추가됩니다
.promo-banner::before그리고isolation: isolate상자에는 밝은 이미지에서 흰색 텍스트를 계속 읽을 수 있습니다. - 선택기를 한 요소에 가리킵니다. 여러 선택기의 여러 배경 필드는 여러 부분에서 공유하는 하나의 필드보다 편집자에게 더 쉽습니다.
- 사용자 정의 위젯의 경우 유형에서 클래식 및 그라데이션을 고수하세요.
- 이미지나 그라데이션이 없는 단일 평면 색상의 경우 색상 필드 는 편집자들에게 더 간단하다.
자주 묻는 질문 #
Background 필드는 무료인가요?
아니요. 배경은 위젯 빌더의 Pro 필드 중 하나이므로 위젯에 추가하려면 Master Addons Pro가 활성화되어 있어야 합니다.
Background selector 에 {{WRAPPER}}를 추가해야 하나요?
아니요. 건축업자가 덧붙입니다 {{WRAPPER}} 당신을 위한 Background 필드의 셀렉터 앞에서, 그래서 .promo-banner 충분하다. 직접 타이핑하는 것도 효과가 있다.
내 CSS 의 배경 토큰은 어디에 있습니까?
사용할 것이 없습니다. 배경은 많은 CSS 속성을 한 번에 다루므로 Elementor 는 규칙을 Selector 에 작성합니다.
비디오 또는 슬라이드쇼 배경이 표시되지 않는 이유는 무엇입니까?
이러한 유형에는 Elementor 가 자체 섹션과 컨테이너에만 추가하는 추가 마크업이 필요합니다. 사용자 지정 위젯에서는 설정이 표시되지만 아무것도 그려지지 않습니다. 클래식 또는 그라데이션을 사용합니다.
그라데이션을 선택한 후 대체 색상이 사라진 이유는 무엇입니까?
그라디언트는 배경색을 투명하게 설정하고 그라데이션을 위에 그라데이션으로 그립니다. 편집기가 배경 유형을 끄면 대체품이 다시 돌아옵니다.
감싸는 #
스타일 섹션에 배경 필드를 추가하고,유형을 클래식 및 그라데이션으로 유지하고,변경해야 하는 요소로 선택기를 설정합니다. CSS 탭에 대체 색상을 넣으면 편집자가 거기에서 가져올 수 있습니다. 요소의 나머지 스타일링에 대해서는 을 참조하십시오 국경 그리고 박스 섀도우 필드 및 확인 가격 각 계획에 포함된 내용입니다.
