워드프레스 아바다 테마 탭 기능 (Tabs)

2021. 3. 5. 00:46 | 댓글 2

대부분의 페이지 빌더에서는 탭 기능을 제공합니다. 무료 페이지 빌더인 엘리멘터에서도 탭 기능이 제공됩니다. 이 글에서는 아바다 테마에 탑재된 Avada Builder에서 제공하는 탭 (Tabs) 기능과 Elementor 페이지 빌더에서 제공하는 탭 요소에 대해 간략히 살펴보도록 하겠습니다.

워드프레스 아바다 테마 탭 기능 (Tabs)

위의 영상과 메뉴 형식의 탭을 클릭하면 각기 다른 콘텐츠가 표시되도록 만들고 싶은 경우가 있습니다. 워드프레스에서는 페이지 빌더를 사용하는 경우 탭(tab) 요소를 사용하여 쉽게 구현할 수 있습니다.

위의 그림은 워드프레스 베스트셀링 테마인 Avada 테마의 클래식 데모에 포함된 About 페이지에 포함된 탭 형식의 콘텐츠를 보여줍니다. 아바다 테마의 아바다 빌더에서는 다음 그림과 같이 가로 형식의 탭과 세로 형식의 탭, 두 가지 포맷이 지원됩니다.

아바다 탭: 가로 형식과 세로 형식의 탭이 지원된다.

탭 요소를 추가하려면 엘리먼트 추가(요소 추가) 아이콘을 클릭한 다음,

워드프레스 아바다 테마 엘리멘트 추가하기

Select Element (엘리먼트 선택) 팝업에서 Tabs 엘리먼트를 선택하면 됩니다.

아바다 테마의 Tabs 요소

그러면 아래 그림과 같이 탭을 추가할 수 있는 설정 페이지가 표시됩니다.

디자인은 ClassicClean 중에서 선택이 가능하고, 레이아웃은 Horizontal (수평)Vertical (수직) 중에서 선택할 수 있습니다. 

사용 방법은 직관적이라서 쉽게 사용할 수 있을 것입니다. 각 탭을 추가한 다음 탭 제목과 아이콘, 탭 콘텐츠를 설정할 수 있습니다.

엘리멘터 페이지 빌더의 탭 요소

대부분의 페이지 빌더에서 이러한 탭 기능을 제공합니다. 인기 페이지 빌더인 Elementor에서도 Tabs 요소를 사용할 수 있습니다.

엘리멘츠 패널에서 "tab"으로 검색하면 Tabs 요소를 쉽게 찾을 수 있습니다.

워드프레스 엘리멘터 페이지 빌더의 Tabs 위젯

엘리멘터에서도 가로 포맷과 세로 포맷이 제공됩니다. 위치에서 '수평' 또는 '수직'을 선택하여 가로 또는 세로 포맷 중에서 선택할 수 있습니다.

각 탭 이름을 클릭하면 탭 이름과 콘텐츠를 설정할 수 있습니다.

참고

avada.tistory.com/916

 

워드프레스 아바다(Avada) 테마 데모 설치 및 제거

워드프레스 아바다(Avada)는 현재 45만 개 이상 판매된 베스트셀링 테마입니다. 아바다 테마가 Themeforest에서는 가장 많은 판매량을 자랑하고 있으며, 최근 50만 고객을 돌파한 Elegant Themes의 Divi 테

avada.tistory.com

avada.tistory.com/1472

 

워드프레스 Elementor 페이지 빌더로 만들어진 페이지를 수정하는 방법

워드프레스에서 페이지 빌더를 활용하면 페이지를 쉽게 만들 수 있습니다. 특히 유료 테마에는 WPBakery 페이지 빌더('비주얼 컴포저')가 많이 탑재되어 있습니다. 비주얼 컴포저는 최적화를 제대

avada.tistory.com

 

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    空空(공공)

    워드프레스에서 아바다 테마 탭 기능을 사용하는 방법이로군요^^