Studio 에디터: 아코디언 추가 및 사용자 지정하기

4 분 분량
페이지 메뉴
  • 아코디언 요소 추가하기
  • 아코디언 아이템 추가 및 관리하기
  • 아코디언 열기 및 닫기 방식 선택하기
  • 아코디언 디자인하기
  • 아코디언 레이아웃 조정하기
아코디언 요소를 사용해 작은 공간에 많은 양의 콘텐츠를 표시하세요. 방문자가 아이템을 확대 및 축소할 수 있으므로, 긴 목록을 스크롤할 필요 없이 필요한 정보를 쉽게 찾을 수 있습니다.
스튜디오 사이트의 아코디언 요소 예시를 보여주는 GIF

아코디언 요소 추가하기

원하는 아코디언 디자인을 선택해 시작하세요. 아코디언의 각 아이템을 개인화해 클라이언트의 콘텐츠를 표시할 수 있습니다. 필요한 요소를 추가하고 컨테이너 내부에 원하는 대로 구성하세요. 

아코디언 요소를 추가하려면:

  1. 에디터 왼쪽에서 요소 추가를 클릭합니다.
  2. 레이아웃 도구를 클릭합니다.
  3. 아코디언을 클릭합니다.
  4. 원하는 아코디언을 페이지로 끌어다 놓습니다. 
  5. 아코디언 아이템 콘텐츠를 편집합니다.
    1. 추가한 아코디언 요소를 선택합니다.
    2. 아이템 관리를 클릭합니다.
    3. 편집할 아이템을 클릭합니다.
      도움말: 클릭 시에는 아이템이 열려 현재 무엇이 표시되는 콘텐츠를 확인할 수 있습니다.
    4. 아이템에 관련 요소 및 정보를 추가합니다.
Studio 에디터의 요소 추가 패널에서 사용 가능한 아코디언 디자인

아코디언 아이템 추가 및 관리하기

아코디언 요소에 표시되는 아이템을 관리하세요. 클라이언트의 콘텐츠에 대한 아이템을 추가하고 제목을 지정, 또는 표시 순서를 변경할 수 있습니다.

아코디언 아이템을 추가 및 관리하려면:

  1. 아코디언 요소를 선택합니다.
  2. 아이템 관리를 클릭합니다.
  3. 아이템에 마우스오버한 후 추가 작업 아이콘을 클릭합니다.
  4. 복제, 이름 변경 또는 삭제 중 아코디언 아이템에 수행할 작업을 선택합니다.
도움말:
  • 패널 하단에서 아이템 추가를 클릭해 빈 아이템을 추가합니다.
  • 아이템 순서를 변경할 수 있습니다. 순서 변경 아이콘을 길게 누른 채 원하는 위치로 끌어다 놓으세요.
아이템을 추가, 이름 변경, 복제, 삭제, 순서 변경할 수 있는 아코디언 관리 패널의 스크린샷

아코디언 열기 및 닫기 방식 선택하기

방문자가 페이지 로딩 시 아코디언이 표시되는 모양을 결정하세요. 정보에 쉽게 액세스할 수 있도록 모든 아이템을 열어두거나, 미니멀한 디자인을 위해 닫아둘 수 있습니다. 방문자가 동시에 여러 아이템을 열 수 있는지 여부 또한 선택할 수 있습니다.  

아코디언이 열리고 닫히는 방식을 선택하려면:

  1. 아코디언 요소를 선택합니다.
  2. 설정 아이콘을 클릭합니다.
  3. 기본 상태 선택 아래에서 옵션을 선택합니다.
    • 전체 아이템 닫기: 방문자는 먼저 닫힌 아코디언 아이템을 보며, 자세히 보기 위해 확장할 아이템을 선택합니다.
    • 첫 번째 아이템 열기: 방문자는 다른 아이템이 닫힌 상태에서 상위 아이템의 콘텐츠만을 볼 수 있습니다.
    • 전체 아이템 열기: 페이지가 로딩되면 방문자에게 모든 아이템의 콘텐츠가 표시됩니다. 
  4. 복수 아이템 실행 허용 버튼을 클릭합니다.
    • 활성: 방문자는 아코디언에서 원하는 아이템을 모두 열어둘 수 있습니다.
    • 비활성: 방문자는 한 번에 하나의 아이템만 열어둘 수 있습니다.
  5. (선택사항) 방문자가 아이템을 클릭해 열 때 표시되는 전환 효과를 적용합니다.
참고:
전체 아이템 열기를 기본 상태로 선택한 경우, 아코디언에서 여러 아이템을 열 수 있도록 허용하는 옵션을 사용할 수 없습니다.
열고 닫는 방법을 설정할 수 있는 아코디언 설정 패널의 스크린샷

아코디언 디자인하기

페이지의 다른 부분과 어울리도록 아코디언의 모든 부분을 디자인할 수 있습니다. 아이템 제목, 각 아이템의 콘텐츠를 표시하는 컨테이너 또는 아이템의 전체 공간(제목 및 컨테이너 포함)을 사용자 지정하세요.

아코디언을 디자인하려면:

  1. 아코디언 요소를 선택합니다.
  2. 에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
Studio 에디터에서 속성 패널을 여는 스크린샷
  1. 드롭다운에서 디자인할 아이템을 선택합니다.
    • 제목: 아이템 제목입니다. 방문자가 제목 위에 마우스오버 시 제목이 다르게 보이도록 디자인할 수 있습니다. 
    • 컨테이너: 각 아이템의 콘텐츠를 표시하는 컨테이너입니다.
    • 아코디언 아이템: 아코디언 아이템의 전체 공간을 제어합니다(제목 및 컨테이너 포함).
  2. 사용 가능한 옵션을 사용해 다양한 배경, 글꼴, 모서리, 테두리 등을 선택하세요.
아코디언 요소를 디자인할 수 있는 속성의 스크린샷

아코디언 레이아웃 조정하기

필요에 따라 아코디언 요소의 레이아웃을 조정하세요. 아이템 제목의 정렬, 여백, 위치 및 각 제목 옆 표시되는 아이콘을 선택할 수 있습니다.
도움말:
모든 개별 아이템에 CSS 그리드를 적용해 완벽한 픽셀 레이아웃을 완성할 수 있습니다.

아코디언 레이아웃을 조정하려면:

  1. 아코디언 요소를 선택합니다.
  2. 레이아웃 아이콘을 클릭합니다.
  3. 아코디언 요소의 레이아웃을 조정합니다.
    • 아이콘 선택: 화살표 또는 더하기 중 아이템 제목 옆에 표시될 아이콘을 선택합니다. 
    • 아이콘 위치: 아이콘을 제목의 왼쪽 또는 오른쪽에 표시할지 여부를 결정합니다. 
    • 제목 여백: 슬라이더를 끌어 아이템 제목 주위에 가로 및 세로 여백을 추가합니다. 
Studio 에디터의 아코디언 레이아웃 패널 스크린샷