고급 아코디언
긴 텍스트 블록은 압도하지만 숨겨진 답변은 좌절감을 줍니다. 아코디언은 완벽한 균형을 찾습니다. – 신중하게 디자인되었을 때. 마스터 애드온 Advanced Accordion Element 는 이 클래식한 인터랙티브 툴을 완벽하게 제어할 수 있습니다. 깔끔한 아코디언 (한 번에 하나씩 열림) 또는 유연한 토글 (여러 번 열림) 동작 중에서 선택하세요. 항목을 텍스트,이미지 또는 저장된 전체 템플릿으로 채우세요. 그런 다음 모든 단일 상태를 스타일링하세요: 일반 제목,호버, 활성화된 열린 항목,콘텐츠 영역 자체. FAQ 만이 아닙니다; 기능 목록,제품 사양,포트폴리오 또는 깔끔한 주문형 공개 프레젠테이션의 이점을 누릴 수 있는 모든 콘텐츠에 사용됩니다.
이중 행동 모드 및 동적 콘텐츠
아코디언의 동작 방식을 정의하는 것부터 시작하세요. 아코디언 유형 선택: 집중된 단일 항목 열기 흐름을 위한 기존 아코디언 또는 사용자가 여러 항목을 열 수 있는 보다 유연한 체크리스트 스타일을 위한 토글을 선택합니다. 그런 다음 항목을 만들 수 있습니다. 각 탭에 대해 제목을 설정하고 콘텐츠 유형을 선택합니다. 간단한 텍스트를 넘어 – 서식 있는 텍스트 및 미디어에 콘텐츠를 사용하거나 저장된 섹션,저장된 위젯 또는 저장된 페이지 템플릿에서 선택하여 미리 디자인된 전체 콘텐츠 블록을 삽입합니다. 따라서 모듈식 페이지 구축 및 복잡한 레이아웃 재사용을 위한 강력한 도구가 됩니다.
- 두 가지 상호 작용 모델: 단계별 프로세스를 위한 아코디언(단일 열림), 체크리스트 또는 기능을 위한 토글(다중 열림).
- 풍부한 콘텐츠 소스: 간단한 텍스트, 이미지 또는 저장된 전체 Elementor 섹션 및 템플릿으로 아코디언 항목을 채웁니다.
- 기본 활성 항목: 페이지가 로드될 때 모든 항목을 기본값으로 활성화로 설정합니다.
- 간편한 관리: + 항목 추가 버튼과 직관적인 리피터로 항목 추가,제거 및 재정렬.
상태 기반 제목 스타일링 및 구조
제목 표시줄은 사용자가 클릭하는 항목입니다 – 모든 시각적 상태를 의도적으로 만듭니다. 제목을 일반,호버 및 활성 (열기) 상태에 대해 별도로 스타일 지정합니다. 각 상태에 대해 고유한 배경 유형 (색상,그라디언트), 텍스트 색상 및 타이포그래피를 정의하고 제목 정렬,패딩, 테두리,테두리 반경을 제어하고 상자 그림자를 추가합니다. 이 세부 수준을 통해 명확한 시각적 여정을 만들 수 있습니다: 중립 기본값,초대하는 호버 및 사용자의 동작을 확인하는 뚜렷한 “열기” 상태.
- 트리플 스테이트 디자인: 일반, 호버 및 활성 타이틀 막대에 고유한 스타일을 적용합니다.
- 고급 배경: 깊이를 만들기 위해 다른 상태에 대한 단색 또는 그라데이션을 사용합니다.
- 전체 상자 제어: 패딩, 테두리 및 상자 그림자를 조정하여 각 제목 표시줄을 설계된 구성 요소로 만듭니다.
이중 상태로 사용자 정의 가능한 토글 아이콘
일반 삼각형 아이콘을 넘어 이동합니다. 사용자 지정 아이콘을 활성화하여 확장 (닫힌 상태) 및 축소 (열린 상태) 작업 모두에 대해 라이브러리에서 아이콘을 선택합니다. 아이콘을 왼쪽 또는 오른쪽에 배치합니다. 그런 다음 이러한 아이콘을 일반,호버 및 활성 상태에 대해 독립적으로 스타일링하여 색상,크기 및 배경을 변경합니다. 아이콘 간격 및 패딩을 아이콘 주위에 조정하여 완벽한 정렬을 수행합니다. 이렇게 하면 기능 표시기가 디자인 언어의 응집력 있는 부분으로 바뀝니다.
- 듀얼 아이콘: “더하기” (확장) 및 “빼기” (축소) 상태에 대해 다른 아이콘을 설정합니다.
- 상태별 아이콘 스타일링: 항목이 가리키거나 활성화될 때 아이콘의 색상과 배경을 변경합니다.
- 올바르게 정렬: 아이콘 제목 텍스트를 기준으로 정렬, 위치 및 간격을 제어합니다.
콘텐츠 영역 및 컨테이너 스타일링
아래로 미끄러지는 콘텐츠는 자체 디자인 고려를 받을 만합니다. 자체 배경색,텍스트 색상,타이포그래피 및 내부 패딩으로 콘텐츠 영역의 스타일을 지정합니다. 필요한 경우 가독성을 위해 텍스트 그림자를 추가합니다. 그런 다음 모든 아코디언 섹션을 보관하는 전체 항목 컨테이너의 스타일을 지정합니다: 항목 간의 간격,글로벌 테두리,테두리 반경 및 상자 그림자를 설정합니다. 이렇게 하면 전체 위젯이 통합되고 광택이 나는 구성 요소처럼 느껴지며 열린 콘텐츠가 쉽고 읽기 쉽습니다.
- 콘텐츠 영역 디자인: 최적의 가독성을 위해 드롭다운 콘텐츠의 배경과 텍스트를 스타일링합니다.
- 컨테이너 레벨 폴란드어: 전체 아코디언 그룹에 Border Radius 및 Box Shadow 적용.
- 아이템 간격: 깔끔하고 분리된 모양을 위해 각 아코디언 아이템 사이의 간격 (여백) 을 제어합니다.
고급 아코디언에 대해 자주 묻는 질문
“Accordion”과 “Toggle” 유형의 실질적인 차이점은 무엇입니까?
아코디언: 한 번에 하나의 항목만 열 수 있습니다. 새 항목을 열면 이전 항목이 자동으로 닫힙니다. 스크롤을 최소화하고 주의를 집중하려는 FAQ 페이지 또는 순차적 지침에 가장 적합합니다.
토글: 여러 항목을 동시에 열 수 있습니다. 사용자는 여러 항목을 확장하여 정보를 비교하거나 수집할 수 있습니다. 기능 체크리스트,제품 사양 목록 또는 사용자가 한 번에 여러 섹션을 봐야 하는 콘텐츠에 가장 적합합니다.
페이지가 로드될 때 하나의 항목을 열기 시작하도록 할 수 있나요?
예. 콘텐츠 탭에서 개별 항목을 편집할 때 기본값으로 활성 옵션을 찾을 수 있습니다. 미리 열려는 항목에 대해 이를 예 로 설정합니다. 충돌을 피하기 위해 하나의 항목에만 이 세트가 아코디언 유형으로 설정되어야 합니다.
콘텐츠 유형으로 "저장된 섹션" 또는 "저장된 페이지 템플릿"은 무엇입니까?
이것들은 강력한 Elementor Pro 기능입니다. Elementor 라이브러리에 저장된 섹션 (팀 프로필과 같은) 또는 전체 페이지 템플릿 (연락처 양식과 같은) 이 있는 경우,아코디언 항목 내부에 표시되도록 선택할 수 있습니다. 이를 통해 아코디언 내에 복잡하고 미리 디자인된 레이아웃을 삽입할 수 있습니다.
모바일에서 호버 및 활성 상태는 어떻게 작동합니까?
터치 장치에서 첫 번째 탭은 종종 호버 상태와 액티브 상태를 모두 빠르게 연속적으로 트리거합니다 (항목이 열림에 따라). 액티브 상태에 적용하는 스타일링은 현재 열려 있는 항목을 표시하므로 모바일에서 가장 중요한 호버 상태를 별도의 단계로 볼 수 없습니다.
개폐 애니메이션 속도를 조절할 수 있나요?
예. Content 탭에서 Toggle Speed (ms) 를 찾을 수 있습니다. 값은 밀리초 단위입니다 (예를 들어,300). 숫자가 낮을수록 (200 과 같은) 더 빠르고 더 빨리; 숫자가 높을수록 (500 과 같은) 더 느리고 더 고의적으로 만듭니다.
키보드 탐색 및 화면 판독기가 아코디언에 액세스할 수 있나요?
적절하게 코딩된 아코디언 위젯에 액세스할 수 있어야 합니다. 의미론적 제목 HTML 태그 (<div>, <h3>와 같은) 의 사용은 콘텐츠의 구조를 도와줍니다. 확장/축소된 상태에 대한 대화형 상태 및 ARIA 속성은 일반적으로 화면 판독기가 변경 사항을 발표할 수 있도록 위젯에서 처리됩니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
