엘리멘터(Elementor) 토글 위젯과 아코디언 위젯 차이점

자주 묻는 질문(FAQ) 페이지나 Q&A 페이지를 만들 때 토글이나 아코디언이 많이 사용됩니다. 워드프레스 엘리멘터 페이지 빌더에는 토글 위젯과 아코디언 위젯이 제공됩니다. 이 두 위젯의 차이점에 대해 간략히 살펴보겠습니다.

엘리멘터(Elementor) 토글 위젯과 아코디언 위젯 차이점

워드프레스 엘리멘토 페이지 빌더 편집 페이지에서 'accordion'으로 검색하면 Tabs, 아코디언, 토글 등 3가지 위젯이 표시됩니다.

 

이 세 요소는 쓰임새가 비슷합니다. 그래서 'accordion'으로 검색했을 때 이 세 개가 표시되는 것 같습니다. Tabs에 대해서는 이 블로그에 소개한 적이 있습니다.

엘리멘터 페이지 빌더의 탭 (Tabs) 기능

토글 위젯 vs. 아코디언 위젯

그럼 토글(Toggle)과 아코디언(Accordion) 위젯의 차이점은 무엇일까요? 다음 영상을 통해 차이점을 이해할 수 있을 것입니다.

토글에서는 개별 항목이 독립적으로 작동합니다. 예를 들어, 아래 그림에서 1번, 2번, 3번 항목이 독립적으로 행동하며, 각 항목을 펼치거나 접힐 수 있습니다.

하지만 아코디언은 한 번에 하나의 항목만 펼쳐지며, 다른 항목을 클릭하면 이전에 펼쳐져 있던 항목은 접히게 됩니다.

토글과 아코디언은 거의 비슷하기 때문에 아바다(Avada) 테마에서는 토글 요소와 아코디언 요소를 Toggles이라는 엘리먼트에 통합하여 제공하고 있습니다.

토글 요소 설정에서 해당 요소가 토글로 작동할 것인지, 아니면 아코디언으로 작동할 것인지를 선택할 수 있습니다.

토글/아코디언에 이미지 추가하기

엘리멘터 페이지 빌더의 토글이나 아코디언의 개별 항목에 이미지를 추가하고 싶은 경우 오른쪽에서 토글/아코디언 요소(①)를 클릭한 후에 왼쪽 패널에서 해당 항목(②)을 클릭하면 편집할 수 있는 편집기(③)가 표시됩니다.

편집기에서 이미지를 추가하고 링크를 거는 등의 편집 작업을 할 수 있습니다.

기본적인 내용이지만 토글/아코디언의 개별 항목에 이미지를 추가하는 방법에 대해 문의하시는 분이 계셔서 언급해보았습니다.

마치며

이상으로 워드프레스 Elementor에서 제공하는 토글과 아코디언의 차이점에 대해 간단히 살펴보았습니다. FAQ 페이지나 질문과 답변 페이지를 만들 때 이 위젯들을 활용할 수 있습니다. 아바다, 엔폴드 등의 테마에서도 자체 페이지 빌더를 통해 비슷한 기능을 제공합니다.

엘리멘터와 같은 페이지 빌더를 사용하면 코딩 지식이 부족해도 전문적인 사이트를 쉽게 만들 수 있어 페이지 빌더가 많이 사용되고 있습니다. 페이지 빌더가 사이트 속도에는 부정적인 영향을 미치지만 사이트 제작 시간과 비용을 줄이는 데 도움이 됩니다.

참고

https://avada.tistory.com/2386

워드프레스 엘리멘터 포스트 위젯(Posts)

https://avada.tistory.com/2009

워드프레스 엘리멘터 포트폴리오 위젯