탭

탭 필드는 Elementor 자체 버튼 스타일의 일반 탭과 호버 탭처럼 Elementor 패널에서 컨트롤을 탭 스트립으로 그룹화합니다. 마스터 애드온에서 빌드합니다 위젯 빌더: 탭을 추가하고 각 탭 안에 필드를 넣은 다음 다음과 같은 세 부분으로 구성된 토큰을 사용하여 HTML 또는 CSS의 각 값을 읽습니다 {{ button_states.hover.bg }}.

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

Tabs 필드가 수행하는 작업 #

• 위젯 패널의 한 섹션에 클릭 가능한 탭 행을 추가합니다. 탭을 클릭하면 그 안의 필드가 표시됩니다.
• 각 탭에는 이름, 레이블 및 자체 필드 목록이 있습니다.
• Tabs 필드는 값 자체를 저장하지 않습니다. 값은 탭 내부의 필드에 속합니다.
• 템플릿은 해당 값을 읽습니다 {{ tabs_name.tab_name.field_name }}. 두 개의 탭은 동일한 필드 이름을 사용할 수 있으므로 일반 및 호버 규칙을 쉽게 비교할 수 있습니다.

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

시작하기 전에 #

• Elementor가 설치되어 활성화된 WordPress입니다.
• Elementor 및 Master Addons Pro 용 마스터 애드온,둘 다 활성화됨. The 설치 가이드 설정을 다룹니다.
• 위젯 빌더에서 열린 위젯. 이 가이드의 예는 “Hover Button” 위젯입니다: 버튼 레이블의 텍스트 필드와 이름이 지정된 탭 필드입니다 button_states 일반 및 호버 탭으로. 각 탭에는 두 개의 색상 필드가 있습니다 bg 그리고 text.

Tabs 필드를 추가하는 방법 #

1. 로 이동 마스터 애드온 > 위젯 빌더 그리고 위젯을 엽니다.
2. 를 클릭합니다 스타일 예를 들어 “버튼 스타일”과 같은 섹션을 탭하고 추가합니다.
3. 유형 tabs 왼쪽의 필드 검색 상자에.
4. 드래그 탭 섹션으로. 왼쪽 사이드바에서 해당 설정이 열리고 섹션 미리보기에 탭 스트립이 표시됩니다.

새 Tabs 필드의 이름이 지정됩니다 tabs 그리고 두 개의 빈 탭이 함께 제공됩니다 tab_1 그리고 tab_2. 토큰을 쓰기 전에 이름을 바꾸세요. 이름이 모든 경로의 일부가 되기 때문입니다.

탭 필드 옵션을 설명했습니다 #

• 라벨 빌더 내부의 필드 이름을 지정합니다. Elementor 에서 편집자는 이 레이블이 아니라 섹션 제목과 탭 레이블을 봅니다.
• 이름 는 모든 토큰의 첫 번째 부분이다, 그래서 button_states 제공합니다 {{ button_states.normal.bg }}. 문자, 숫자, 밑줄만 표시됩니다.
• 설명 는 건축업자 내부의 당신을 위한 메모입니다.
• 탭 는 탭의 리스트입니다. 각 행은 a 를 가지고 있습니다 이름 (와 같은 토큰에 사용됩니다 hover) 그리고 a 라벨 (호버와 같은 탭에 표시됨). 클릭 탭 추가 다른 행의 경우 또는 하나를 제거하기 위한 적십자의 경우.

탭 목록 아래에 사이드바가 하나를 표시합니다 탭 필드 탭의 레이블로 제목이 붙은 탭당 테이블입니다. 필드가 이동하는 곳입니다.

• 이름 는 토큰의 마지막 부분입니다. 모든 탭에서 같은 이름을 재사용할 수 있습니다. as bg 그리고 text 여기 있어요.
• 라벨 는 Elementor 의 컨트롤 옆에 있는 텍스트입니다.
• 유형 컨트롤을 설정합니다: 텍스트, 숫자, 텍스트 영역, WYSIWYG, 코드, 숨김, 전환기, 선택, 색상, 글꼴, 타이포그래피, 날짜 시간, URL, 미디어, 갤러리, 아이콘, 슬라이더, 치수 또는 배경.
• 클릭 필드 추가 해당 탭에 행을 추가하려면To add a row to that tab.

더 아래의 일반적인 설정 (라벨, 구분 기호, 조건 및 나머지 표시) 은 Elementor에서 탭 필드가 나타나는 방식을 변경하지 않으므로 그대로 둘 수 있습니다.

템플릿에서 탭 값을 읽습니다 #

탭 안의 모든 값은 점으로 연결된 세 개의 이름으로 읽혀집니다: 탭 필드, 탭, 그리고 필드.

{{ tabs_name.tab_name.field_name }}

이러한 입력은 하지 않아도 됩니다. 저장한 후 HTML 편집기 옆에 있는 문서 패널에 탭 필드의 레이블 아래에 있는 모든 경로가 나열되고 복사 아이콘이 하나를 복사합니다.

토큰은 HTML 탭뿐만 아니라 CSS 탭에서도 작동합니다. 예제 버튼은 기본 모양을 하나의 규칙으로 유지하고 다음 두 개의 탭 색상을 읽습니다:

.ma-btn {
  background: #652dd9;
  color: #ffffff;
}

.ma-btn {
  background: {{ button_states.normal.bg }};
  color: {{ button_states.normal.text }};
}

.ma-btn:hover {
  background: {{ button_states.hover.bg }};
  color: {{ button_states.hover.text }};
}

첫 번째 규칙은 대체입니다. 편집자가 색상을 선택할 때까지 토큰은 아무것도 인쇄하지 않고 선이 됩니다 background: ;. 브라우저는 해당 잘못된 줄을 건너뛰므로 첫 번째 규칙의 색상은 그대로 유지됩니다.

전체 경로만 작동합니다. 테스트에서 {{ bg }}, {{ hover.bg }} 그리고 {{ button_states.hover }} 모두 아무것도 인쇄하지 않았습니다 {{ button_states.hover.bg }} 색을 출력했습니다. 값이 빈 채로 나오면 세 부분을 확인하고 철자를 먼저 정확하게 표기합니다.

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

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

페이지에 위젯을 추가하거나,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다.Select the widget and open the 스타일 탭. 섹션에는 일반 탭이 열린 탭 스트립이 표시됩니다.

일반 탭에서 색상을 설정한 다음 을 클릭합니다 호버 그리고 두 번째 쌍을 설정합니다. 미리보기의 버튼 위로 마우스를 움직여 호버 색상을 확인하십시오.

일반적인 사용 사례 #

• 버튼, 카드 및 링크의 일반 및 호버 색상.
• 필터, 토글 및 메뉴 항목에 대한 활성 및 비활성 스타일입니다.
• 한 섹션에서 편집된 구성 요소의 밝은 버전과 어두운 버전입니다.
• 콘텐츠는 플립 카드의 앞면 및 뒷면 탭과 같은 그룹으로 분할되며 각각 텍스트 및 미디어 필드가 있습니다.

탭 필드를 작업하기 위한 팁 #

• Tabs 필드 이름과 탭 이름을 먼저 선택합니다. 둘 중 하나를 나중에 다시 지정한다는 것은 이를 사용하는 모든 토큰을 업데이트한다는 의미입니다.
• 탭 전체에서 필드 이름을 재사용합니다. normal.bg 그리고 hover.bg 는 서로 관련이 없는 두 이름보다 읽기 쉽다.
• 위젯이 라이브 페이지에 있으면 필드의 레이블을 변경하지 마십시오. Elementor 는 레이블에서 빌드된 키 아래에 저장된 값을 저장하므로 새 레이블을 사용하면 해당 페이지에서 기존 값이 사라질 수 있습니다.
• 토큰 규칙 앞에 규칙에 기본 스타일을 넣으면 빈 값이 디자인을 깨지 않습니다.
• 수업에 접두사를 지정하세요(예: ma-btn). 위젯의 CSS 탭의 CSS는 전체 페이지에 적용되므로 일반 이름은 다음과 같습니다 .button 다른 스타일과 충돌할 수 있습니다.
• 탭 대신 단일 온/오프 설정 그룹에 대해서는 다음을 참조하세요 팝오버 토글 필드. 편집기가 행을 추가할 수 있는 목록의 경우 다음을 사용합니다.For a list the editor can add rows to, use the 리피터 필드.

자주 묻는 질문 #

감싸는 #

탭 필드와 탭의 이름을 지정하고 각 탭에 필드를 추가한 다음 함께 읽습니다 {{ tabs_name.tab_name.field_name }} HTML 또는 CSS 에서. 빈 값에 대한 대체 규칙을 유지하고 위젯이 실행되기 전에 이름을 정하십시오. The 색상 필드 doc은 이 예에서 사용된 색상 제어를 다룹니다 가격 각 계획에 포함 된 내용을 보여줍니다.