많은 양의 텍스트를 접을 수 있는 섹션으로 표시해 방문자가 텍스트 위주의 콘텐츠를 더 쉽게 탐색할 수 있도록 도와줍니다.

아코디언 블록을 사용하면 텍스트 콘텐츠를 접이식 섹션으로 정리하여 표시할 수 있습니다. FAQ나 제품 안내처럼 구조화된 텍스트 중심 페이지에 적합한 옵션입니다. 아코디언 블록은 페이지를 간결하게 유지하고 방문자의 스크롤 부담을 줄이는 데 도움이 됩니다.

비디오 시청하기

아코디언 블록의 작동 방식

사이트 방문자는 아코디언 블록을 확장 아이콘이 있는 제목 목록으로 봅니다. 디자인 설정에 따라 첫 번째 항목이 기본으로 확장되어 있을 수 있습니다.

방문자는 각 제목을 클릭해 설명 텍스트를 엽니다. 아코디언 블록은 한 번에 하나의 항목만 확장할 수 있습니다. 방문자가 확장된 항목을 클릭하면 접힙니다. 다른 항목이 이미 확장된 상태에서 다른 항목을 클릭하면 이전에 확장된 항목이 닫힙니다.

아코디언 블록 추가

아코디언 블록을 추가하는 방법은 다음과 같습니다.

1. 페이지나 게시물을 편집하고 블록 추가 또는 삽입 지점을 클릭한 다음, 메뉴에서 아코디언을 선택하세요. 도움이 필요하면 블록으로 콘텐츠 추가를 참조하세요.
2. 블록의 연필 아이콘을 클릭하여 블록 에디터를 엽니다.
3. 콘텐츠 탭에서 아코디언 블록의 항목을 추가 및 편집하세요. 각 항목은 항상 표시되는 제목 텍스트와, 항목이 확장될 때 표시되는 설명 텍스트로 구성됩니다.
4. 디자인 탭에서 아코디언 블록의 모양을 스타일링하세요.
5. 완료 후 블록 편집기 외부를 클릭합니다. 변경 사항은 자동으로 저장됩니다.

아이템 추가/편집

콘텐츠 탭에서 다음 단계를 따르세요.

• 목록의 항목을 클릭해 제목과 설명을 편집하세요.
• 항목 추가를 클릭해 새 항목을 추가하세요.
• 항목을 클릭하고 길게 눌러 순서를 변경하세요.
• 항목 위에 커서를 올리고 휴지통 아이콘을 클릭해 삭제하세요.

아이템을 열면 더 많은 옵션이 표시됩니다.

• 제목 필드에서 제목 텍스트를 편집하세요.
• 설명 필드에서 설명 텍스트를 편집하세요.
• 복제를 클릭해 항목을 복사하세요.
• 삭제를 클릭해 항목을 삭제하세요.

아코디언 블록 스타일링

디자인 탭에서 블록의 텍스트, 레이아웃, 모양, 아이콘을 스타일링할 수 있습니다.

• 제목을 클릭해 제목 텍스트의 형식과 정렬을 설정하세요.
• 설명을 클릭해 설명의 형식과 정렬, 그리고 다음과 같은 기타 옵션을 설정하세요.
  • 너비 – 텍스트의 너비를 설정합니다.
  • 패딩(여백) – 텍스트 주변의 여백 크기를 설정합니다.
  • 정렬 – 텍스트의 정렬 방향을 설정합니다.
  • 배치 – 블록 내에서 텍스트가 배치되는 위치를 설정합니다.
• 첫 번째 항목 확장을 활성화하면 첫 번째 항목이 기본으로 확장됩니다.
• 여러 항목 열기 허용을 활성화하면 다른 항목을 열 때 기존 항목이 닫히지 않도록 할 수 있습니다.
• 구분선을 클릭해 각 항목을 구분하는 선을 스타일링하거나 비활성화하세요.
• 아이콘을 클릭해 확장 아이콘을 화살표 또는 더하기 기호로 설정하세요.
• 아이콘 아래에서 아이콘 크기, 아이콘 두께, 아이콘 배치를 설정하세요.
• 행 패딩(여백)을 설정해 각 항목 주변의 여백 크기를 변경하세요.
• 버전 7.1 사이트에서는 배경 색상 토글을 켜서 블록에 색상 배경을 추가하고, 모서리 반경을 설정하며, 배경 패딩(여백)을 변경할 수 있습니다. 블록 배경 색상은 7.0 버전에서 지원되지 않습니다.
• 테두리선 옆에서 실선 또는 점선을 활성화하여 블록 아웃라인을 설정할 수 있습니다. 실선과 점선 모두 색상과 두께를 설정할 수 있습니다.
• 혼합 모드 드롭다운 메뉴를 클릭하여 투명도 설정을 선택하세요. 이러한 효과는 아코디언 블록을 이미지나 다른 시각 콘텐츠 앞에 오버레이할 때 특히 적합합니다.
• 요소 또는 배경을 흐리게 처리하려면 흐림 효과 옆의 토글을 켜고 슬라이더를 사용하여 흐림 정도를 조절하세요.

스트로크, 블렌드 모드, 및 흐림 사용자 지정은 플루이드 엔진 섹션에서 가능합니다. 클래식 에디터 섹션에서는 윤곽선만 사용 가능합니다.

텍스트 글꼴 및 색상

텍스트 글꼴과 색상은 사이트 스타일 설정을 따릅니다. 이 설정을 변경하면 동일한 설정을 사용하는 사이트의 모든 요소에 영향을 준다는 점을 유의하세요.

• 아코디언 블록의 디자인 탭에서 제목을 사이트 전체 표제 요소 스타일 또는 단락 스타일 중 하나로 설정한 다음, 글꼴 패널에서 해당 스타일을 사용자 지정하세요.
• 아코디언 블록의 디자인 탭에서 설명 텍스트를 사이트 전체 단락 스타일 중 하나로 설정한 다음, 글꼴 패널에서 해당 스타일을 사용자 지정하세요.
• 색상 패널에서 아코디언 블록의 제목과 설명은 아코디언 블록 디자인 탭의 서식과 일치하는 표제 요소 또는 단락 색상 조정값을 따릅니다. 블록에서 배경을 활성화한 경우, 배경의 표제 요소 또는 배경의 단락 색상 조정값을 따릅니다.

다른 색상

색상 패널에서 아코디언 블록 아래의 조정값을 사용해 구분선 색상, 아이콘 색상, 기본 배경색을 변경할 수 있습니다.