대부분의 페이지 빌더에서는 탭 기능을 제공합니다. 무료 페이지 빌더인 엘리멘터에서도 탭 기능이 제공됩니다. 이 글에서는 아바다 테마에 탑재된 Avada Builder에서 제공하는 탭 (Tabs) 기능과 Elementor 페이지 빌더에서 제공하는 탭 요소에 대해 간략히 살펴보도록 하겠습니다.
워드프레스 아바다 테마 탭 기능 (Tabs)
위의 영상과 메뉴 형식의 탭을 클릭하면 각기 다른 콘텐츠가 표시되도록 만들고 싶은 경우가 있습니다. 워드프레스에서는 페이지 빌더를 사용하는 경우 탭(tab) 요소를 사용하여 쉽게 구현할 수 있습니다.
위의 그림은 워드프레스 베스트셀링 테마인 Avada 테마의 클래식 데모에 포함된 About 페이지에 포함된 탭 형식의 콘텐츠를 보여줍니다. 아바다 테마의 아바다 빌더에서는 다음 그림과 같이 가로 형식의 탭과 세로 형식의 탭, 두 가지 포맷이 지원됩니다.
탭 요소를 추가하려면 엘리먼트 추가(요소 추가) 아이콘을 클릭한 다음,
Select Element (엘리먼트 선택) 팝업에서 Tabs 엘리먼트를 선택하면 됩니다.
그러면 아래 그림과 같이 탭을 추가할 수 있는 설정 페이지가 표시됩니다.
디자인은 Classic과 Clean 중에서 선택이 가능하고, 레이아웃은 Horizontal (수평)과 Vertical (수직) 중에서 선택할 수 있습니다.
사용 방법은 직관적이라서 쉽게 사용할 수 있을 것입니다. 각 탭을 추가한 다음 탭 제목과 아이콘, 탭 콘텐츠를 설정할 수 있습니다.
콘텐츠에 HTML 코드를 입력하려는 경우 Text 탭을 클릭하여 Text 모드로 전환하여 HTML 코드를 추가할 수 있습니다.
엘리멘터 페이지 빌더의 탭 요소
대부분의 페이지 빌더에서 이러한 탭 기능을 제공합니다. 인기 페이지 빌더인 Elementor에서도 Tabs 요소를 사용할 수 있습니다.
엘리멘츠 패널에서 "tab"으로 검색하면 Tabs 요소를 쉽게 찾을 수 있습니다.
엘리멘터에서도 가로 포맷과 세로 포맷이 제공됩니다. 위치에서 '수평' 또는 '수직'을 선택하여 가로 또는 세로 포맷 중에서 선택할 수 있습니다.
각 탭 이름을 클릭하면 탭 이름과 콘텐츠를 설정할 수 있습니다.
참고