주요 시사점
- 1,200px 데스크탑 열에 맞는 4 개의 탭 타이틀은 전화기에서 약 390px를 가지므로 랩, 스쿼시 또는 오버플로.
- Elementor 의 Tabs 위젯에는 스트립을 선택한 너비 아래의 수직 아코디언으로 전환하는 Breakpoint 컨트롤이 있습니다. 모바일이 기본값입니다.
- 가로 스크롤은 다른 옵션입니다: 제목은 한 행에 유지되고 방문자는 이를 스와이프합니다.
- 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 마스터 애드온 탭 위젯 제목을 전화기의 전폭 열에 쌓고 그 아래에 열린 패널이 있습니다. 읽을 수는 있지만 아코디언은 아닙니다.
- 세 개 이하의 짧은 타이틀은 일반적으로 손대지 않은 채 휴대폰에서 살아남습니다. 그 과거에는 의도적으로 아코디언을 선택하거나 스크롤합니다.
탭은 데스크탑 패턴입니다. 그들은 여러 타이틀과 패널에 대한 수평 공간을 가정하고 전화는 그 너비의 약 3 분의 1 을 가지고 있습니다.
Elementor 는 두 가지 방법을 제공하며 애드온 위젯은 다시 다르게 작동합니다. 아래의 전화 스크린 샷은 실제 테스트 페이지의 390px 캡처이므로 표시되는 것은 설정이 수행하는 작업입니다.
목차
무엇이 잘못되었는가
탭 스트립은 한 줄을 원한다. 제목이 필요로하는 것보다 적은 너비를주고 당신은 세 가지 결과 중 하나를 얻을, 그들 중 누구도 좋은:
- 제목은 두 번째와 세 번째 행으로 마무리되고 스트립은 스트립으로 읽기를 중지합니다.
- 대신 각 레이블이 읽을 수 없는 텍스트의 몇 픽셀이 될 때까지 스쿼시합니다.
- 또는 마지막 것이 가장자리에서 넘쳐나며 일반적으로 수평 페이지 스크롤바를 가져옵니다.
탭 타겟은 상황을 더욱 악화시킵니다. 터치 가이드라인에서는 편안한 타겟을 약 44px로 설정했고, 스쿼시된 타이틀은 그 아래에 있으므로 사람들은 이웃을 놓치고 때립니다.
옵션 1: 아코디언으로 전환합니다
이는 대부분의 사람들이 원하는 동작이며 탭 위젯은 CSS 없이 이를 수행합니다.
- 탭 위젯을 선택하고 콘텐츠 탭에서 추가 설정을 엽니다.
- 스트립이 포기해야하는 너비에 Breakpoint 를 설정하십시오. 모바일은 기본값이며 일반적으로 올바른 답입니다; 제목이 길면 태블릿이 의미가 있습니다.
해당 너비 아래에서는 각 제목이 자체 패널 바로 위에 위치하며 하나를 탭하면 열립니다. 행당 하나의 제목은 전체 너비 탭 대상을 의미하며 콘텐츠는 축소된 상태로 유지되므로 페이지가 길어지지 않습니다.
옵션 2: 스트립을 스크롤합니다
가로 스크롤을 켜고 제목은 가로 방향으로 스크롤하면서 모든 너비에서 한 행에 유지됩니다. 방문자는 화면에서 벗어난 항목에 도달하기 위해 이를 따라 스와이프합니다.
이것은 순서를 보이는 유지하는 것이 모든 선택권을 한꺼번에 보는 보다는 더 중요한 달 또는 크기 같이 순서로 읽는 지구를 적응시킵니다. 그것의 약점은 발견입니다: 행 스크롤이 결코 나중에 탭을 찾아내지 않는 방문자 가장자리에 보이는 다음 제목 반을 남겨두는 것은 돕는다,왜냐하면 커트오프 상표는 강타할 것이다 명백한 초대이기.
스크롤과 아코디언 중단점은 상호 배타적이지 않으므로 둘 다 설정하면 중단점 아래에서 실제로 원하는 것을 결정하고 결과를 전화로 확인하십시오.
애드온 탭이 휴대폰에서 수행하는 작업
마스터 애드온 위젯은 스택하여 좁은 화면을 처리합니다: 제목은 전체 너비 열이되고 열린 패널은 전체 목록 아래에 있습니다.
각 타이틀은 스쿼싱을 해결하는 전폭 탭 대상을 얻습니다. 각 타이틀을 자체 패널과 페어링하지 않으므로 방문자가 6~7개의 탭을 사용하여 콘텐츠에 도달하기 전에 전체 목록을 스크롤합니다.
실용적인 규칙: 탭이 3~4개 있는 휴대폰에서는 애드온이 괜찮고, 탭이 더 많을수록 중단점이 있는 코어 위젯이 더 좋습니다.
어떤 페이지에 어떤 옵션을
| 상황 | 설정 |
|---|---|
| 3~4개의 짧은 타이틀이 대부분 데스크톱 트래픽입니다 | 두고 가세요, 그리고 전화로 확인해 보세요 |
| 다섯 개 이상의 탭 | 브레이크포인트가 모바일로 설정된 코어 탭 |
| “배송 및 반품”과 같은 긴 제목 | Breakpoint가 태블릿으로 설정된 코어 탭 |
| 월이나 크기 등 시퀀스로 읽는 제목입니다 | 가로 스크롤 |
| 대부분 전화 트래픽과 긴 패널 | 탭 대신 아코디언 위젯 |
| 아이콘 제목, 세 개 또는 네 개의 탭 | 애드온 위젯, 누적 열은 괜찮습니다 |
모바일에서 탭이 작동을 멈출 때
“모바일에서 작동하지 않는 탭” 은 일반적으로 네 가지 중 하나로 밝혀졌습니다:
- 호버 효과. 호버가 터치 스크린에 존재하지 않으므로 호버를 켜도록 설정된 탭에는 탭이 필요하며 때로는 두 번 탭해야 합니다. 전화 트래픽이있는 모든 페이지를 클릭하도록 효과를 설정하십시오.
- 캐시된 CSS. 중단점을 변경한 후 Elementor 의 CSS 를 재생성하고 페이지 캐시를 지우거나 전화기가 이전 스타일시트를 계속 제공합니다.
- 연기된 스크립트. 공격적인 JavaScript 연기는 방문자가 페이지와 상호 작용할 때까지 탭 스크립트를 다시 유지하므로 첫 번째 탭에서는 아무 작업도 수행하지 않습니다. 최적화 플러그인에서 위젯의 스크립트를 제외합니다.
- 너무 작은 탭 타겟. 아무것도 깨지지 않고,타이틀은 엄지손가락보다 작을 뿐이며,아코디언 브레이크포인트가 이를 수정합니다.
자주 묻는 질문
Elementor 탭을 모바일에서 아코디언으로 바꾸려면 어떻게 해야 하나요?
탭 위젯을 선택하고 추가 설정을 열고 중단점을 설정합니다. 해당 너비 아래에서 스트립은 모바일을 기본값으로 하는 수직 아코디언 레이아웃으로 전환됩니다.
휴대폰에서 탭 제목이 겹치는 이유는 무엇입니까?
스트립은 제목이 필요로 하는 것보다 너비가 작습니다. 아코디언 중단점을 설정하거나 가로 스크롤을 켜거나 제목을 줄입니다.
탭이 모바일 SEO를 해치나요?
아니요. 탭 안의 콘텐츠는 HTML에 있으며 패널이 열려 있는지 여부에 관계없이 색인이 생성됩니다.
모바일에서 탭을 사용해야 할까요, 아니면 아코디언을 사용해야 할까요?
트래픽의 대부분이 전화이고 패널이 길면 처음부터 아코디언으로 빌드하십시오. 중단점이있는 탭은 데스크톱이 기본보기 일 때 더 나은 호출입니다.
첫 번째 탭은 왜 아무 것도하지 않습니까?
보통 호버 효과나 연기된 스크립트. 탭 효과를 클릭하도록 설정하고,탭 스크립트를 자바스크립트 연기 에서 제외합니다.
최종 생각
이 중 어느 것도 CSS 가 필요하지 않습니다. Elementor 의 Breakpoint 컨트롤은 일반적인 경우를 다루고 Horizontal Scroll 은 시퀀스를 다루고 addon 위젯은 읽을 수있는 열에 쌓입니다. 그런 다음 실제 전화에서 페이지를 열고 모든 제목을 탭합니다. 왜냐하면 그것이 사람들이 건너 뛰는 단계이기 때문입니다.
관련 읽기
