주요 시사점
- 수직 탭은 제목을 왼쪽이나 오른쪽 열에 배치하고 그 옆에 패널을 배치합니다. 긴 제목과 가로 스트립이 감싸는 6개 이상의 섹션에 적합합니다.
- Elementor 의 자체 Tabs 위젯은 시작 또는 종료로 설정된 방향 제어로 이 작업을 수행합니다. CSS 필요 없음.
- 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 마스터 애드온 탭 위젯 일반 스타일이 아닌 스타일로 도착하는 수직 탭 스타일 사전 설정이 있습니다.
- 약 768px 이하에서는 측면 열에 대한 너비가 충분하지 않으므로 두 경로 모두 스택됩니다. 코어 위젯 만이 아코디언으로 바뀝니다.
- 위젯이 패널 내부에 들어가면 코어를 선택하고, 탭 열 자체에 아이콘이나 완성된 모양이 필요한 경우 애드온을 선택하세요.
제목이 길어지거나 많아지면 가로 탭이 끊어집니다. 1,200px 열에 걸쳐 있는 6 개의 제목은 두 줄로 감싸거나 아무도 읽지 않을 때까지 텍스트를 축소합니다.
수직 탭은 그것의 측에 지구를 돌립니다: 그것의 옆에 활동적인 패널을 가진 제목의 좁은 란. 각 제목은 가득 차있는 선을 얻습니다,그래서 “선적하고 돌려보냅니다”는 감싸기 없이 적합합니다. 그것을 건축하는 두 방법 다 따릅니다.
목차
수직이 수평을 이길 때
수직은 이들 중 어느 것이 사실일 때 더 나은 레이아웃입니다:
- 스트립이 감겨 있지만 기둥이 점점 더 커지는 5개 이상의 섹션.
- 두 단어보다 긴 제목. “보증 및 수리” 전체 라인이 필요합니다.
- 패널 크기가 변경되는 동안 제목 열이 그대로 유지되므로 높이가 매우 다른 패널입니다.
- 메뉴처럼 읽는 콘텐츠: 문서 섹션, 서비스 목록, 그룹화된 FAQ.
서너 개의 짧은 타이틀에 대해 수평을 유지하십시오. 측면 열은 너비의 약 4 분의 1 을 먹으며,거래하는 세 개의 탭은 가치가 없습니다.
방법 1: Elementor의 방향 제어
Elementor의 Tabs 위젯은 애드온 없이 이 작업을 처리합니다.
- 탭 위젯을 페이지로 드래그합니다.
- 레이아웃에서 방향은 왼쪽의 타이틀에 대해 시작, 오른쪽의 타이틀에 대해 종료로 설정합니다.
- 제목 텍스트가 열 내부의 왼쪽, 중앙 또는 오른쪽에 있는지 여부를 제어하려면 제목 정렬을 설정합니다.
- 평소처럼 컨테이너 내부에 각 패널을 구축하세요.
Start는 왼쪽 열을 왼쪽에서 오른쪽 언어로 입력하고 자동으로 오른쪽에서 왼쪽으로 뒤집습니다. 따라서 값의 이름이 왼쪽과 오른쪽 대신 시작과 끝으로 지정됩니다.
결과는 기능적이고 스타일이 지정되지 않았습니다: 열의 텍스트 제목, 그 옆의 패널, 스타일 탭에 남겨진 모든 테두리와 색상.
방법 2: 수직 탭이 사전 설정되었습니다
마스터 애드온 위젯은 레이아웃을 방향 대신 사전 설정으로 처리하므로 스타일링도 함께 제공됩니다.
- 탭 위젯을 드래그하세요.
- 스타일 사전 설정을 수직 탭으로 설정합니다.
- 섹션당 하나의 중계기 항목을 추가하고 각각 탭 제목을 추가합니다.
- 제목에 아이콘이 필요한 경우 아이콘 유형을 아이콘이나 이미지로 설정한 다음 아이콘을 선택하세요.
- 패널 내용을 작성하고 먼저 열어야 하는 탭에서 기본값으로 설정을 전환합니다.
컬럼은 자체 배경,간격 및 활성 상태로 도착하므로 사용 가능한 블록은 스타일링 세션 대신 1 분이 걸립니다. 제한은 애드온이 항상 가지고 있는 것과 같습니다: 패널은 편집기 콘텐츠를 보유하므로 탭 내부의 양식이나 갤러리는 Pro 에 저장된 템플릿을 의미하거나 대신 코어 위젯을 의미합니다.
더 조용한 변형: 활성 테두리를 떠났습니다
세 번째 사전 설정은 알아둘 가치가 있습니다. 왼쪽 활성 테두리는 세로 열을 유지하지만 박스 모양을 삭제합니다: 제목은 페이지 배경에 있고 활성 제목은 왼쪽 가장자리에 색상 막대로 표시됩니다.
이것은 문서 스타일 페이지에서 접근할 수 있는 것으로, 무거운 탭 열이 본문 텍스트와 주의를 끌기 위해 싸웁니다.
전화에서 일어나는 일
390px 화면에는 측면 열과 패널을 위한 공간이 없으므로 두 경로 모두 수직 레이아웃을 포기합니다.
핵심 위젯은 추가 설정에서 선택한 중단점 아래의 수직 아코디언에 쌓이고 각 제목은 자체 패널 바로 위에 놓입니다. 애드온 위젯은 제목을 아래에 패널이 있는 전폭 열에 쌓습니다. 이 열은 아코디언은 아니지만 작동합니다: 열린 패널은 전체 제목 목록 아래에 유지됩니다.
어느 쪽이든 게시하기 전에 전화기 보기를 확인하십시오. 데스크톱에서 디자인한 레이아웃은 전화기 방문자가 보는 레이아웃이 아닙니다.
어떤 방법을 사용할 것인가
| 상황 | 방법 |
|---|---|
| 패널 내부의 양식, 갤러리 또는 가격표 | 핵심 탭, 시작 방향으로 설정됨 |
| 전화에서는 아코디언이 되어야 합니다 | 코어 탭 |
| 왼쪽 대신 오른쪽에 있는 제목입니다 | 코어 탭, 끝으로 설정된 방향 |
| 제목의 아이콘이나 이미지 | 애드온, 수직 탭 사전 설정 |
| 스타일 탭 작업이 없는 스타일 열입니다 | 애드온, 수직 탭 사전 설정 |
| 일반 문서 스타일 측면 탐색 | Addon, 왼쪽 활성 테두리 사전 설정 |
| 패널 스위치가 호버링됩니다 | 애드온, 탭 효과가 호버로 설정되었습니다 |
자주 묻는 질문
Elementor는 애드온 없이 수직 탭을 만들 수 있나요?
예. 탭 위젯의 방향 컨트롤을 시작 또는 종료로 설정하고 제목이 측면 열로 이동합니다.
방향 값은 왜 왼쪽과 오른쪽이 아니라 시작과 끝이라고 하나요?
그래서 레이아웃은 오른쪽에서 왼쪽 언어로 올바르게 뒤집힙니다. start 는 텍스트가 시작되는 쪽입니다.
수직 레이아웃에서 작동하는 탭은 몇 개입니까?
여섯에서 열 편안한입니다. 그 기둥이 이상하게 보이는 옆에 패널보다 더 높아지고 과거.
모바일에서 수직 탭이 수직으로 유지되나요?
아니. 너비가 충분하지 않아서 두 경로 모두 스택됩니다. 코어 위젯은 아코디언이 됩니다; 애드온은 패널 위의 제목을 스택합니다.
세로 탭 안에 폼을 넣을 수 있나요?
코어 위젯으로,예, 각 패널이 컨테이너이기 때문에. addon 으로,동등한 것은 Pro 옵션 인 저장된 템플릿에서 Content Type 을 가리키는 것입니다.
최종 생각
수직으로 가는 것은 제목을 줄이지 않고 너비 문제를 해결하는 방법입니다. Elementor 의 방향 제어는 애드온 없이 이를 수행하고 컨테이너를 패널에 보관하므로 인터랙티브한 것이 내부에 들어가면 중요합니다. 애드온 사전 설정은 스타일링하지 않고 제목 열이 완성된 것처럼 보여야 할 때 중요합니다. 둘 다 구축하는 데 거의 같은 시간이 걸리기 때문에 패널에 무엇이 살고 있는지 결정합니다.
관련 읽기
