Elementor의 탭과 아코디언: 언제 사용할지

주요 시사점

• 탭은 방문자가 사이에 고른 평행 섹션의 소수에 대한 것입니다. 아코디언은 대부분의 항목을 건너뛰는 목록에 대한 것입니다.
• 탭은 스트립의 너비가 부족하기 때문에 약 4~5개의 타이틀을 캡아웃합니다. 아코디언은 불만 없이 20개가 걸립니다.
• 아코디언은 한 번에 여러 개의 패널을 열 수 있으며,화면에서 비교할 수 있습니다. 탭은 정확히 하나를 보여줍니다.
• 아코디언은 좁은 화면을 위해 제작되었습니다. Elementor 의 탭은 설정한 중단점 아래의 아코디언으로 전환하여 전화를 처리하며,이는 어떤 패턴이 거기에서 승리하는지에 대한 힌트입니다.
• 둘 다 Google 에서 콘텐츠를 숨기지 않습니다. 두 위젯 모두 페이지 HTML 의 모든 패널을 넣고 CSS 로 닫힌 패널을 숨깁니다.

두 패턴 모두 같은 일을 합니다: 긴 페이지를 접어서 방문자가 온 부분을 읽게 합니다. 그 차이는 접힌 물건들이 서로에게 어떤 것인지 입니다.

탭은 “이 중 하나를 골라라”라고 말합니다. 아코디언은 “여기 목록이 있습니다. 필요한 것을 열어 라”라고 말합니다. 거꾸로 가져 오면 페이지가 방문자와 싸우므로 2 분 동안 생각할 가치가 있습니다.

실제 차이

대부분의 결정을 이끌어내는 행은 항목 수입니다. 탭 스트립은 수평 공간에 의해 제한되고 아코디언은 인내심에 의해서만 제한됩니다.

탭이 맞을 때

탭은 섹션이 피어이고 방문자가 그 중 하나를 읽을 때 적합합니다. 세 가지 신호:

• 3~5개의 섹션으로 스트립에 맞을 만큼 적은 섹션입니다.
• 제품 페이지의 설명, 사양, 리뷰 및 배송과 같은 병렬 콘텐츠: 동일한 종류의 것, 다른 슬라이스.
• 방문자 한 명 한 명씩 원하죠. 아무도 네 개를 다 읽지 않고,모두 한 개를 읽습니다.

탭은 또한 페이지를 예측 가능한 높이로 유지하는데, 이는 무언가가 바로 아래에 있고 화면 아래로 점프하는 것을 원하지 않을 때 중요합니다.

아코디언이 옳을 때

항목이 선택 항목이 아닌 목록일 때 아코디언이 적합합니다:

• 여섯 개 이상의 항목. 열두 질문이 있는 FAQ 에는 작동하는 탭 레이아웃이 없습니다.
• 방문자가 해당 항목에 적용되는 두 가지 질문을 열기 때문에 대부분의 항목은 건너뜁니다.
• 길이가 매우 다른 항목으로,한 답은 문장이고 다른 답은 다섯 문단입니다. 탭은 가장 긴 크기를 갖습니다.
• 방문자가 동시에 열어서 두 가지 정책을 나란히 읽기를 원하는 패널입니다.

FAQ 는 가장 명확한 경우이므로 만나는 대부분의 FAQ 섹션은 아코디언입니다. 가격 정책,문제 해결 단계 및 문서 섹션은 동일한 방식으로 작동합니다.

Elementor 는 무료 플러그인에 아코디언 위젯을 가지고 있습니다. The 마스터 애드온 고급 아코디언 상단에 몇 가지 추가 사항: 아코디언 동작(한 번에 하나의 패널)과 토글 동작(각 패널 독립) 사이를 전환하는 아코디언 유형 컨트롤, 사용자 정의 확장 및 축소 아이콘, 항목당 기본값으로 활성화, 밀리초 단위의 토글 속도, 그리고 제목의 HTML 태그.

어떤 전화가 결정하는지

아코디언은 이미 전폭 행의 수직 스택이므로 390px 화면은 이에 대해 아무것도 변경하지 않습니다. 탭은 적응해야 하는 패턴입니다.

Elementor 의 탭 위젯은 선택한 중단점 아래의 수직 아코디언 레이아웃으로 전환되며,모바일을 기본값으로 사용합니다. 애드온 탭은 목록 아래의 패널과 함께 타이틀을 전폭 열로 스택합니다.

전화에 탭을 위한 고침은,다시 말해서,아코디언이 되기 위한 것이다. 너의 소통량의 대부분이 이동할 수 있으면,처음부터 아코디언을 건축하는 것은 이제까지 데스크탑에서만 존재하는 배치를 건너뛴다.

SEO 질문입니다

축소된 콘텐츠는 인덱싱됩니다. 두 위젯 모두 페이지 HTML 에 모든 패널을 넣고 CSS 로 비활성 패널을 숨기므로 Google 의 크롤러가 모든 내용을 읽습니다. 소스를 보고 닫힌 패널에서 텍스트를 검색하여 자신의 페이지에서 확인할 수 있습니다.

두 가지 정말 신경 쓸 가치가:

• 페이지 내용을 숨기지 마십시오. 방문자가 무엇을 판매하는지 알아보기 위해 클릭해야 하는 경우 크롤러가 읽을 수 있는 내용이 무엇이든 해당 콘텐츠는 탭 3에 속하지 않습니다.
• FAQ 구조화된 데이터는 어느 위젯에서 나온 것이 아니라 SEO 플러그인에서 나온 것입니다. Rank Math 와 Yoast 는 자체 블록이나 스키마 필드에서 FAQPage 마크업을 빌드하므로 아코디언이 프레젠테이션이고 스키마가 별도로 설정됩니다.

토글이 맞는 곳

Elementor에는 Toggle 위젯이 있었고 “toggle”은 두 가지 다른 의미를 갖기 때문에 이 비교에서 Toggle이 나타납니다.

Elementor 의 오래된 Toggle 위젯은 다른 이름의 아코디언이었습니다: 확장 가능한 행의 스택. 버전 3,15 이후로 더 이상 사용되지 않으며 이제 하나를 편집하면 대신 아코디언 위젯을 드래그하라는 알림이 표시됩니다. 따라서 현재 설치에서는 탭 대 아코디언 질문이 이미 흡수되었습니다.

다른 의미는 2 상태 스위치인데,여기서 하나의 컨트롤이 동일한 콘텐츠의 두 버전 사이에서 페이지를 뒤집습니다. That is what the 마스터 애드온 콘텐츠 전환 위젯은 않습니다: 두 개의 레이블, 그들 사이의 스위치, 그리고 각 뒤에 콘텐츠 블록. 연간 가격에 대한 월간은 명백한 경우이며, 제국 단위에 대한 메트릭은 또 다른 것입니다.

그것은 처음 두 가지의 변형이 아닌 세 번째 패턴입니다. 정확히 두 가지 상태가 있고 방문자가 그 사이를 전환 할 때 사용하십시오. 세 가지 이상의 옵션은 탭을 의미하고 스캔 할 목록은 아코디언을 의미합니다. 패널이 독립적으로 열리고 닫히는 아코디언을 원한다면 그것은 Toggle 로 설정된 Accordion Type 컨트롤입니다.

둘 다 함께 사용하기

그들은 서로 다른 질문에 답하기 때문에 잘 결합됩니다.

계획 비교 페이지는 각 탭 안에 기능 세부 사항의 아코디언과 함께 월간 및 연간 탭을 사용할 수 있습니다. 외부 레벨은 두 피어 중에서 선택할 수 있습니다; 내부 레벨은 스캔할 목록입니다. 중첩된 탭은 각 패널이 아코디언 위젯을 허용하는 컨테이너이므로 이를 간단하게 만듭니다.

탭 내부의 탭은 방문자에게 선택한 제목 쌍을 기억하도록 요청하기 때문에 작동하지 않는 조합입니다.

Elementor가 각각에 대해 제공하는 것

두 위젯은 모두 무료 플러그인에 있으며 둘 다 중첩된 위젯이므로 패널에 컨테이너가 들어 있습니다.

탭에는 가로 또는 세로 방향,긴 제목 행의 가로 스크롤 및 아코디언으로 전환되는 중단점이 추가됩니다. 아코디언 위젯에는 Max Items Expanded 가 있어 한 패널을 열면 다른 패널이 닫히는지 여부가 결정됩니다. Master Addons 위젯은 아코디언 유형 컨트롤로 해당 작업을 수행합니다.

애드온 위젯은 둘 다 확장됩니다. 탭 측에서는 스타일 사전 설정, 이미지 제목 및 호버 전환을 얻을 수 있습니다 고급 탭 게시합니다. 아코디언 측에서는 아이콘 컨트롤,토글 모드 및 항목별 기본 상태를 얻습니다.

자주 묻는 질문

최종 생각

항목을 세어본 다음 서로에게 무엇인지 물어보세요. 모두가 하나를 읽는 짧은 피어 세트는 탭입니다. 대부분의 항목을 건너뛰는 긴 목록은 아코디언입니다. 휴대폰의 탭은 어쨌든 아코디언으로 변하기 때문에 모바일은 남은 의심을 해결합니다.

관련 읽기

• 탭 위젯
• 고급 아코디언 위젯
• 콘텐츠 위젯 토글
• Elementor 에서 탭을 만드는 방법
• 모바일의 Elementor 탭
• Elementor 중첩 탭이 설명되었습니다