접기 패널 추가하기.
방문자가 한 번에 하나씩 여는 제목 목록이 필요할 때 아코디언이라고도 하는 collapse panel을 사용합니다. FAQ, 기능 목록, 나누어 읽으면 좋은 긴 콘텐츠에 적합합니다. 완성되면 클릭하면 답이 열리는 질문 묶음이 생깁니다. 예제에서는 에이전시 FAQ 페이지의 질문 세 개를 만듭니다.
접기 패널 추가하기
- 섹션에서 +를 클릭하고 Layout 탭에서 Collapse panel을 고릅니다. 토글 하나가 딸려 옵니다.
- 패널의 More 메뉴에서 패널 설정을 엽니다. Collapse로 모든 토글이 닫힌 상태로 시작할지 정합니다. 여기서는 켜져 있습니다. Expand icon을 고르고 Save를 클릭합니다.
- 토글에 마우스를 올리고 More 메뉴를 열어 Settings를 선택합니다. Toggle title에 질문을 입력하고 Save를 클릭합니다.
- 질문을 클릭하여 토글을 엽니다. 안의 +를 클릭하고 Text를 고른 뒤 답을 입력합니다.
- 다음 질문에는 패널 컨트롤 표시줄의 Add toggle을 클릭합니다. 새 토글은 맨 위에 추가되므로 마지막 질문부터 추가합니다.
- 도구 모음에서 Save를 클릭합니다. Preview에서 질문을 클릭하여 답이 열리는지 확인합니다.
표시 내용
각 질문은 선택한 펼치기 아이콘이 있는 제목입니다. 클릭하면 아래에 답이 열리고, 열려 있던 답은 닫힙니다. Collapse가 꺼져 있으면 페이지 로드 시 첫 번째 답이 열려 있습니다. 답은 닫혀 있을 때도 페이지 HTML에 그대로 있으므로 검색 엔진이 계속 읽을 수 있습니다.
접기 패널 설정하기
요소 Collapse panel에는 설정이 두 개 있으며, 컨트롤 표시줄의 More > Settings 아래에 있습니다.
| Setting | What it does | Default |
|---|---|---|
| Collapse | 켬: 모든 토글이 닫힌 상태로 시작합니다. 끔: 첫 번째 토글이 열린 상태로 시작합니다. | Off |
| Expand icon | 각 제목 옆의 아이콘입니다. None, +(더하기와 빼기) 또는 ﹀(화살표). | None |
각 토글에는 설정이 하나 있으며, 방문자가 클릭하는 질문 또는 제목인 Toggle title입니다.
토글 관리하기
- Reorder: 컨트롤 표시줄의 Toggle을 잡고 토글을 드래그하여 다른 토글 위나 아래에 놓습니다.
- Rename: 토글에 마우스를 올리고 More > Settings를 열어 Toggle title을 변경한 뒤 Save를 클릭합니다.
- Remove: 토글에 마우스를 올리고 More를 열어 Delete를 선택합니다. 안의 답도 함께 삭제됩니다.
토글에는 어떤 요소든 들어갑니다. 텍스트, 이미지, 버튼, 컬럼이 있는 로우 등입니다. 각 답은 짧게 유지합니다. 답 하나에 페이지가 필요하다면 해당 페이지로 연결합니다.
표시되지 않는 경우
- 새 질문이 맨 위에 나타납니다. Add toggle은 항상 패널 맨 위에 삽입합니다. 컨트롤 표시줄의 Toggle을 잡고 토글을 원하는 위치로 드래그합니다.
- 설정에 Toggle title만 표시됩니다. 토글 하나의 설정을 연 것입니다. 패널 맨 위 가장자리에 마우스를 올려 Collapse panel 컨트롤 표시줄을 표시한 뒤 그곳에서 More > Settings를 엽니다.
- 페이지가 로드되면 첫 번째 답변이 열려 있습니다. Collapse가 꺼져 있습니다. 모든 답이 닫힌 상태로 시작하도록 Collapse panel 설정에서 켭니다.
- 피커의 Layout 탭에 Collapse panel이 없습니다. DXPR Builder 사용자 프로필에서 빠져 있습니다. 관리자가 프로필의 Elements 아래에서 Accordion을
/admin/dxpr_studio/dxpr_builder/profile경로에서 체크합니다.
다음 단계
- Adding a Tabs Panel: 쌓는 대신 관련 콘텐츠를 나란히 보여줍니다.
- FAQ page tutorial: 접기 패널을 중심으로 FAQ 페이지 전체를 만듭니다.
- Nesting: 토글 안에 로우와 컬럼을 넣습니다.