탭 설정

탭은 긴 페이지가 부담스럽지 않게 유지하는 가장 쉬운 방법 중 하나입니다. 모든 것을 수직으로 쌓는 대신 콘텐츠를 클릭 가능한 섹션으로 분할하여 방문자가 자신의 속도에 맞춰 탐색할 수 있습니다.

Elementor용 Master Addons의 고급 탭 위젯은 기본 기능을 사용합니다 elementor 탭 위젯 그리고 훨씬 더 많은 유연성을 추가합니다. 3 개의 무료 사전 설정 레이아웃과 1 개의 Pro 사전 설정,각 탭에 이미지 또는 아이콘을 추가할 수 있는 옵션,그리고 Master Addons Pro 를 사용하면 모든 탭 패널 안에 저장된 Elementor 섹션을 로드할 수 있는 기능을 제공합니다. 빠른 개요 및 데모는 을 참조하십시오 Elementor 고급 탭 위젯 페이지.

아래에서는 데모 비디오에 표시된 것과 동일한 레이아웃 선택을 사용하여 처음부터 설정하는 방법을 안내해 드리겠습니다.

Elementor Advanced Tabs 위젯이 수행하는 작업 #

이 위젯은 핵심에 탭 레이블 세트와 콘텐츠 영역을 만듭니다. 누군가가 레이블을 클릭하면 일치하는 패널이 나타납니다.

기본 Elementor 탭 위젯과 비교하여 Master Addons 버전은 더 많은 제어권을 제공합니다. 시각적 사전 설정 간에 전환하고,개별 탭에 이미지 또는 아이콘을 추가하고,패널 콘텐츠로 일반 텍스트 (무료) 또는 저장된 템플릿 (Pro) 을 사용하고,스타일 일반,호버 및 활성 상태를 별도로 지정할 수 있습니다.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치 및 활성 상태입니다. 아직 설치하지 않았다면, 를 확인하세요 설치 가이드.
• 마스터 애드온 옵션 패널에서 활성화된 고급 탭 위젯.
• 선택 사항: 탭 안에 하나를 로드하려는 경우 저장된 Elementor 템플릿입니다(Master Addons Pro가 필요함).

고급 탭 위젯을 추가합니다 #

Elementor 편집기를 열고 다음을 찾으세요 고급 탭 마스터 애드온 섹션 아래의 위젯. 페이지로 드래그하면 세 개의 샘플 탭이 있는 기본 가로 탭 막대가 표시됩니다: 스마트 제어,더 나은 성능,쉬운 사용자 지정.

사전 설정 레이아웃을 선택합니다 #

모양을 바꾸는 가장 빠른 방법은 다음과 같습니다 스타일 사전 설정 콘텐츠 탭에서 드롭다운. 네 가지 옵션이 있으며 마지막 옵션에는 Pro: 가 필요합니다

• 수평 탭: 레이블은 아래에 있는 콘텐츠로 상단을 가로질러 실행됩니다. 기본값입니다.
• 수직 탭: 라벨은 왼쪽에 쌓이고 내용은 오른쪽에 나타납니다.
• 왼쪽 활성 경계: 세로 탭과 비슷하지만 활성 탭은 왼쪽에 색 테두리가 있습니다.
• 표 형식 콘텐츠(Pro): 라벨은 콘텐츠 패널 위에 있는 더 큰 카드 스타일 버튼이 됩니다.

이들 사이를 즉시 전환할 수 있으므로 모두 사용해 보고 콘텐츠에 가장 적합한 것을 확인하십시오. Pro 는 또한 a 를 추가합니다 열 레이아웃 탭 레이블이 차지하는 열 수를 조정할 수 있는 컨트롤로, 레이블이 좁아지고 콘텐츠 공간이 더 넓어질 때 유용합니다.

탭과 내용을 구성합니다 #

레이아웃을 선택한 후에는 을 확장합니다 콘텐츠 탭 목록을 볼 수 있는 섹션. 각 항목에는 고유한 설정 패널이 있습니다. 탭을 복제,삭제 또는 재정렬하고 누를 수 있습니다 항목 추가 더 필요할 때.

탭별 설정 #

• 기본값으로 설정: 페이지가 로드될 때 어떤 탭이 먼저 열리는지 선택합니다.
• 아이콘 유형: 골라내다 없음, 아이콘, 또는 이미지 탭 라벨의 경우.
• 이미지/아이콘: 탭 제목 옆에 표시된 시각적 자산입니다.
• 탭 제목: 방문자가 클릭한 텍스트입니다.
• 콘텐츠 유형: 사용 콘텐츠 일반 텍스트 편집기의 경우 또는 Pro의 경우 저장된 섹션, 저장된 위젯, 또는 저장된 페이지 템플릿.
• 탭 내용: 패널을 채우는 실제 콘텐츠 또는 템플릿입니다.

데모에서 첫 번째 탭은 이미지를 사용합니다. 아이콘 유형을 이미지로 설정하고 미디어 라이브러리를 연 다음 파일을 선택하면 됩니다. 이미지는 탭 제목 옆에 표시됩니다.

두 번째 탭의 경우,데모가 아이콘으로 전환됩니다. 아이콘 유형을 선택하고 레이블과 일치하는 것을 선택하십시오. 이 경우 속도계 스타일의 아이콘은 “더 나은 성능”에 잘 작동합니다

탭 안에 저장된 섹션을 불러옵니다 (Pro) #

Master Addons Pro를 사용하면 변경하세요 콘텐츠 유형 에 저장된 섹션 그리고 Elementor 라이브러리에서 템플릿을 선택하세요. 데모는 하나의 탭 안에 전체 FAQ 아코디언을 로드합니다. 즉,패널에 제목,아코디언, 양식 또는 템플릿으로 저장한 다른 항목이 포함될 수 있습니다.

탭과 내용의 스타일을 지정합니다 #

로 가세요 스타일 색상,타이포그래피, 간격,테두리를 변경하려면 탭합니다. 컨트롤은 두 개의 주요 섹션으로 그룹화됩니다:

• 탭: 제목 색상, 제목 타이포그래피, 배경색, 내용색, 내용 타이포그래피, 내용 정렬, 테두리 반경, 상자 그림자, 패딩 및 여백을 포함한 탭 레이블을 다룹니다.
• 내용: 탭이 활성 상태일 때를 보여주는 패널을 스타일링합니다.

이러한 컨트롤의 대부분은 정상 상태,호버 상태 및 활성 상태를 지원하므로 현재 누군가가 보고 있는 탭은 나머지 탭과 다르게 보일 수 있습니다. The 콘텐츠 정렬 또한 버튼을 사용하면 패널 텍스트를 콘텐츠 영역의 상단, 중앙 또는 하단에 정렬할 수 있습니다.

고급 설정 #

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,속성. 이를 사용하여 위치를 조정하거나 특정 화면 크기에서 탭을 숨깁니다.

페이지의 결과 #

게시되면 탭은 설정한 대로 정확하게 작동합니다. 기본 탭이 먼저 열리고 방문자가 레이블을 클릭하며 추가한 저장된 섹션이나 미디어가 일치하는 패널에 표시됩니다.

일반적인 사용 사례 #

• 기능 분석 제품 페이지에는 기능당 하나의 탭이 있습니다.
• 가격 또는 계획 비교 표 형식의 콘텐츠 또는 세로 레이블을 사용합니다.
• FAQ 섹션 저장된 아코디언을 패널 콘텐츠로 로드하여 탭 내부에 넣습니다.
• 서비스 설명 각 탭이 다른 서비스를 다루는 경우.
• 포트폴리오 또는 사례 연구 탭당 이미지 또는 아이콘이 있고 패널에 세부정보가 있습니다.

더 나은 탭을 위한 팁 #

• 미리 설정된 내용을 콘텐츠와 일치시킵니다. 가로 탭은 짧은 레이블에서 가장 잘 작동하며 세로 탭은 긴 목록에 적합하며 Pro Tabular Content 사전 설정은 각 옵션을 돋보이게합니다.
• 가장 중요한 탭을 기본값으로 설정합니다. 사용 기본값으로 설정 따라서 방문자는 최고의 콘텐츠를 먼저 봅니다.
• 아이콘과 이미지를 일관되게 유지하세요. 동일한 탭 표시줄에 이미지, 아이콘 및 일반 텍스트 레이블을 혼합하면 지저분하게 보이는 경향이 있습니다.
• 저장된 섹션에 과부하를 주지 마세요. 탭 안의 형태나 아코디언은 완벽하지만, 무거운 영웅 섹션은 숨겨져 있어도 속도를 늦출 수 있습니다.
• 게시하기 전에 모바일 보기를 확인하세요. 수직 탭은 작은 화면에서 키가 커질 수 있으므로 먼저 반응형 레이아웃을 미리 봅니다.

자주 묻는 질문 #

감싸는 #

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 고급 탭 여러 레이아웃과 풍부한 콘텐츠 패널로 원하는 디자인을 얻을 때까지 탭별 이미지, 아이콘 또는 저장된 섹션과 사전 설정을 혼합하고 일치시킵니다.

다른 무엇이 있는지 보고 싶다면 의 전체 세트를 찾아보세요 마스터 애드온 위젯 및 확장. 그리고 Pro 기능이 궁금하다면,the 가격 페이지.