엘리멘터와 아바다 테마의 탭에 원하는 콘텐츠를 쉽게 삽입하는 방법
워드프레스에서 페이지 빌더를 사용하면 코딩 지식이 없어도 수월하게 사이트를 만들 수 있습니다. 아바다와 Divi, 엔폴드, 뉴스페이퍼 등 일부 인기 테마에는 자체 페이지 빌더가 제공됩니다. 자체 페이지 빌더가 없는 테마에서는 WPBakery 페이지 빌더, 엘리멘터(Elementor), Beaver Builder 등의 서드파티 빌더가 사용되기도 합니다. 예전에는 WPBakery 페이지 빌더가 유료 테마에 많이 사용되었지만 최근에는 엘리멘터가 많이 사용되고 있습니다.
대부분의 페이지 빌더에서는 탭(Tab) 요소가 제공됩니다. 그러나 탭을 삽입하고 탭 콘텐츠를 추가하려고 하면 생각처럼 쉽지 않을 수 있습니다. 엘리멘토 빌더와 아바다 테마의 Avada Builder에서 탭에 쉽게 원하는 콘텐츠를 추가하는 방법에 대하여 간단히 살펴보겠습니다.
페이지 빌더를 사용하면 코딩 지식이 없어도 쉽게 사이트를 만들 수 있다는 장점이 있지만 한편으로는 사이트 속도에 영향을 미칠 수 있기 때문에 장단점이 있습니다. 워드프레스 페이지 빌더의 장단점에 대하여 여기를 참고하시기 바랍니다.
엘리멘터와 아바다 테마의 탭에 원하는 콘텐츠를 쉽게 삽입하는 방법
Elementor 탭에 콘텐츠를 숏코드로 추가하기
엘리멘터 페이지 빌더를 사용하는 경우 위젯 검색 필드에 'tab'을 입력하여 위젯을 검색하여 Tabs 엘리먼트를 선택할 수 있습니다.
엘리멘터에 탭을 삽입하고 각 탭의 제목 부분과 콘텐츠를 입력할 수 있습니다. 하지만 콘텐츠는 비주얼 편집기나 텍스트 편집기로 입력할 수 있도록 되어 있습니다.
탭에 FAQ나 토글/아코디언, 특정 카테고리 글 등을 표시하고 싶은 경우 어떻게 하면 좋을까요? 이 경우 템플릿을 만들어 숏코드로 탭에 삽입할 수 있습니다.
이 방법을 사용하면, 엘리멘터 Slides 위젯에서는 버튼이 하나만 지원되지만 두 개의 버튼을 표시하거나 슬라이드 콘텐츠에 원하는 콘텐츠를 입력할 수 있습니다.
자세한 방법은 "엘리멘터 템플릿을 원하는 곳에 추가하는 방법 (예: 탭에 토글/아코디언 표시)"을 참고해보시기 바랍니다.
엘리멘터 페이지 빌더에서 템플릿을 만들려면 Elementor Pro가 필요합니다.
Avada 테마의 탭에 템플릿을 숏코드로 삽입하기
Avada 테마를 이용하는 경우 엘리먼트 선택(Select Element) 화면에서 'tab'으로 검색하여 Tabs 요소를 삽입할 수 있습니다.
아바다 탭의 콘텐츠 영역에는 텍스트, HTML, 숏코드를 입력할 수 있습니다. 또한, 편집기에서 아바다의 다른 엘리멘트도 삽입하는 것이 가능합니다.
하지만 Tab Content에 아바다 빌더에서 제공하는 엘리멘트를 직접 삽입하면 숏코드로 삽입되므로 추후 수정이 용이하지 않습니다.
위의 그림과 같이 알아보기 어려운 단축코드로 엘리멘트가 추가됩니다. 수정하려는 경우 기존에 삽입한 엘리멘트를 삭제하고(위의 그림에서 숏코드 부분 삭제) 다시 만들어 추가하는 과정을 거쳐야 할 것입니다.
이러한 번거로움을 피하기 위해 (엘리멘터 페이지 빌더와 비슷하게) 아바다에서도 템플릿(라이브러리 엘리먼트)을 만들어 숏코드로 탭 콘텐츠에 추가할 수 있습니다.
이 방법을 이용하면 추후 탭 내용을 수정하고 싶은 경우 템플릿을 수정하면 되므로 Tab Content에 엘리멘트를 직접 추가하는 것보다 향후 유지보수가 편리하다는 장점이 있습니다.
라이브러리를 활용하면 토글/아코디언 등의 요소에도 다른 엘리멘트를 표시할 수 있습니다.
자세한 방법은 "아바다 테마 탭에 원하는 콘텐츠를 쉽게 추가하는 방법"을 참고하시기 바랍니다.
마치며
이상으로 엘리멘터와 아바다 테마에서 템플릿을 만들어 숏코드로 탭에 추가하는 방법에 대하여 살펴보았습니다. 템플릿을 잘 활용하면 보다 수월하게 사이트 제작이 가능할 것입니다.