FAQ 섹션은 아코디언에 의해 살거나 죽습니다: 질문은 컴팩트하게 유지되고,답변은 클릭에 표시되며,페이지는 결코 길게 느껴지지 않습니다. The 고급 아코디언 위젯 인 Elementor용 마스터 애드온 대부분의 아코디언 위젯은 트위스트로 해당 패턴을 만듭니다. 건너뛰기: 각 항목은 일반 텍스트나 저장된 Elementor 템플릿 전체를 담을 수 있으므로 답변은 문의 양식, 가격표 또는 다른 아코디언이 될 수 있습니다.
이 가이드는 항목 목록부터 라이브 페이지의 스타일 아코디언까지 실제 FAQ 섹션의 위젯을 안내합니다.
Advanced Accordion 위젯이 수행하는 작업 #
위젯은 접을 수 있는 항목의 스택을 렌더링합니다. 각 행에는 제목,콘텐츠 영역 및 확장 상태와 축소 상태 사이를 뒤집는 토글 아이콘이 있습니다. The 아코디언 유형 드롭다운은 다음과 같은 동작을 선택합니다: 아코디언 한 번에 하나의 항목을 열어두고, 새로운 항목이 열리면 마지막 항목을 닫습니다; 토글 방문자가 여러 항목을 한 번에 열어둘 수 있습니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- 기본 위젯 아래의 마스터 애드온 옵션 패널에서 고급 아코디언 위젯이 활성화되었습니다.
- 선택 사항: 아코디언 항목 안에 하나를 로드하려는 경우 저장된 Elementor 템플릿입니다.
아코디언 아이템 추가 및 관리 #
에서 콘텐츠 탭에서는 항목 목록에 질문당 하나의 항목이 포함되어 있습니다. 항목을 클릭하여 설정을 확장하고 각 항목 옆에 있는 아이콘이 있는 행을 복제하거나 삭제한 다음 누릅니다 항목 추가 목록을 확장하려면. 데모는 다섯 질문 배관 FAQ 를 실행합니다.
목록 아래에는 공유 컨트롤이 있습니다:
- 활성/비활성 아이콘을 표시하시겠습니까?: 각 타이틀의 오른쪽에 있는 확장 및 축소 아이콘을 전환합니다.
- 아이콘을 확장하고 아이콘을 축소합니다: 두 개의 탭, 각각 하나의 아이콘 선택기. 아래에 대한 자세한 내용은 다음과 같습니다.
- 토글 속도(ms): 아이템이 얼마나 빨리 열리고 닫히는지,기본적으로 300 밀리초. 그 기본값은 찰칵거리는 느낌; 600 을 넘기면 아코디언이 멈추는 것처럼 느껴지기 시작합니다.
- 제목 HTML 태그: 각 질문 주위의 마크업, 기본적으로 div. 질문이 페이지의 제목 구조에 공급되어야 하는 경우 H3를 선택합니다.
항목 안에 텍스트나 전체 템플릿을 넣습니다 #
단일 항목을 열면 항목별 컨트롤이 나타납니다: 기본값으로 활성화됩니다 해당 항목이 열린 상태로 페이지를 시작합니다 사용자 지정 아이콘을 활성화합니다 자체 토글 아이콘을 제공합니다 배경색 활성화 그 행만 색조를 칠합니다.
기억해야 할 것은 콘텐츠 유형. 일반적인 입력된 답에 대한 텍스트로 설정하거나 저장된 섹션 그리고 Elementor 라이브러리에서 템플릿을 선택하세요. 데모는 첫 번째 아코디언 항목 내부에 작업 양식이 포함된 연락처 섹션을 로드합니다:
그것은 또한 중첩 아코디언이 작동하는 방식입니다: 아코디언을 템플릿으로 저장 한 다음 다른 아코디언의 항목 안에로드하십시오. 하위 질문이있는 카테고리,레슨이있는 코스 모듈,그런 종류의 구조. 두 가지 수준이 실용적인 한계입니다; 그보다 더 깊고 방문자는 자신이 어디에 있는지 추적하지 못합니다.
확장 및 축소 아이콘을 설정합니다 #
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 100 아이콘을 확장합니다 그리고 아이콘 축소 탭은 각각 Elementor 아이콘 라이브러리를 엽니다. 확장 아이콘은 닫힌 항목에 표시되고 축소 아이콘은 열린 항목에 표시됩니다.
짝을 가장 잘 읽습니다: caret up과 caret down, plus with minus, chevron with chevron. 데모는 carets에 정착합니다.
제목을 스타일링합니다 #
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 100 스타일 탭이 침입합니다 항목, 제목, 콘텐츠, 그리고 아이콘 전환. 제목 섹션이 전달됩니다 보통의, 호버, 그리고 활동적인 상태이므로 열린 질문은 나머지 질문과 다르게 보일 수 있습니다.
- 배경 유형 및 색상: 제목 표시줄은 주별로 채워집니다.
- 텍스트 색상 및 타이포그래피: 질문 텍스트입니다.
- 제목 정렬: 왼쪽, 중앙 또는 오른쪽.
- 테두리 유형, 테두리 반경, 상자 그림자, 패딩: 데모는 부드럽고 넓은 막대에 8 픽셀 반경과 20 x 16 패딩을 사용합니다.
데모는 제목에 밝은 회색 배경과 파란색 텍스트를 제공하며 색상 선택기가 열려 있는 동안 캔버스가 실시간으로 업데이트됩니다:
콘텐츠 영역을 스타일링합니다 #
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 100 콘텐츠 섹션은 답변 패널을 스타일링합니다: 배경 색상, 텍스트 색상, 타이포그래피, 패딩, 그리고 텍스트 그림자. 제목 표시줄보다 답 배경을 가볍게 유지하여 열린 항목이 연결되어 있지만 구별되는 것으로 읽혀지도록 합니다.
토글 아이콘을 스타일링합니다 #
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 100 아이콘 전환 섹션이 행 끝을 마무리합니다.
- 아이콘 위치: 제목의 왼쪽, 오른쪽 또는 없음.
- 아이콘 크기, 간격, 패딩: 데모는 18 픽셀 아이콘을 실행합니다.
- 아이콘 색상: 일반, 호버 및 활성 상태이며 각각 배경색과 아이콘 색상이 있습니다.
페이지의 결과 #
라이브 페이지에서 아코디언은 구성된 대로 정확하게 동작합니다: 한 번에 하나의 질문이 열리고, 항목이 전환될 때 캐럿이 뒤집히고, 스타일이 지정된 제목 표시줄이 섹션을 스캔할 수 있도록 유지합니다.
일반적인 사용 사례 #
- FAQ 섹션 랜딩 페이지, 가격 페이지, 제품 페이지에 있습니다.
- 답변 안의 양식에 문의하거나 견적을 보내세요데모와 같이 저장된 섹션 콘텐츠 유형을 사용합니다.
- 중첩된 아코디언 카테고리 및 하위 카테고리 질문 세트의 경우.
- 코스 또는 문서 개요 각 모듈이 수업으로 확장되는 곳입니다.
- 채용정보 목록 패널에서 제목과 세부 사항으로서의 역할을 수행합니다.
더 나은 아코디언을 위한 팁 #
- FAQ용 아코디언 유형을 선택하세요. 1 개의 열려있는 응답은 방문자를 집중시키는 유지합니다; Toggle는 사람들이 나란히 비교하는 참조 내용을 한 벌에 맞춥니다.
- 기본적으로 가장 많이 묻는 질문을 엽니다. 섹션이 완전히 닫히지 않도록 최선의 질문에서 활성 상태를 기본값으로 설정합니다.
- FAQ 페이지에서 H3를 제목 HTML 태그로 사용하세요. 검색 엔진은 질문을 적절한 제목으로 읽습니다.
- 아이콘 쌍을 일관되게 유지하세요. 방향을 바꾸는 캐럿은 상태를 즉시 전달합니다; 일치하지 않는 아이콘은 방문자를 생각하게 만듭니다.
- 저장된 섹션의 마음 템플릿 무게. 항목 내부의 양식이나 테이블은 훌륭합니다; 무거운 이미지가 있는 전폭 섹션은 축소된 동안에도 로드됩니다.
비디오 자습서 #
차라리 액션을 고급 아코디언을보고 싶다면, 이 비디오는 사람이 하나를 구축 할 수있는 방법을 쉽게 걷고, 시작부터 끝까지:
그리고 이것은 중첩된 아코디언을 추가하는 방법을 보여줍니다. 저장된 섹션 콘텐츠 유형으로 하나의 아코디언을 다른 아코디언 안에 로드합니다:
자주 묻는 질문 #
마스터 애드온의 고급 아코디언 위젯은 무엇입니까?
접을 수 있는 콘텐츠 섹션용 Elementor 위젯입니다. 제목과 답변이 있는 항목을 추가하고,아코디언 또는 토글 동작을 선택하고,확장 및 축소 아이콘을 설정하고,주별로 제목,콘텐츠 및 아이콘의 스타일을 지정합니다. 항목은 텍스트 또는 전체 저장된 템플릿을 보유할 수 있습니다.
아코디언과 토글 타입의 차이점은 무엇인가요?
아코디언은 한 번에 하나의 항목을 열어두고 새 항목이 열리면 이전 항목을 닫습니다. 토글을 사용하면 방문자가 여러 항목을 한 번에 열고 각각 독립적으로 닫을 수 있습니다. 둘 다 콘텐츠 탭의 아코디언 유형 드롭다운에서 설정됩니다.
아코디언 아이템 안에 폼이나 템플릿을 넣을 수 있나요?
예. 항목의 콘텐츠 유형을 저장된 섹션으로 설정하고 Elementor 라이브러리에서 모든 템플릿을 선택합니다. 데모는 아코디언 항목 내부의 작업 양식이 포함된 전체 연락처 섹션을 로드하며 저장된 다른 템플릿도 동일한 방식으로 작동합니다.
Elementor 에서 중첩된 아코디언을 어떻게 만들 수 있나요?
아코디언을 Elementor 템플릿으로 먼저 저장합니다. 그런 다음 상위 아코디언에서 항목의 콘텐츠 유형을 저장 섹션으로 설정하고 해당 템플릿을 선택합니다. 내부 아코디언은 외부 항목 내부에 로드되어 두 가지 수준의 접이식 콘텐츠를 제공합니다.
기본적으로 하나의 항목이 열려 있을 수 있나요?
예. 콘텐츠 탭에서 항목을 확장하고 기본값으로 활성 을 켭니다. 해당 항목은 페이지가 로드될 때 열리기 시작하며,이는 방문자가 가장 많이 묻는 질문에 잘 작동합니다.
감싸는 #
고급 아코디언 위젯은 표준 FAQ 패턴을 처리 한 다음 더 나아갑니다: 항목별 아이콘 및 배경, 3 상태 스타일링, 모든 항목 안에 양식, 표 또는 전체 중첩 아코디언을 넣는 저장 섹션 콘텐츠 유형의 전체 세트를 탐색합니다 마스터 애드온 위젯 및 확장 플러그인과 함께 제공되는 다른 항목을 확인하고 확인하세요 가격 페이지 아코디언 패턴과 같은 Pro 엑스트라용.
