아바다 테마 탭에 원하는 콘텐츠를 쉽게 추가하는 방법

워드프레스 페이지 빌더에서는 대부분 탭(Tabs) 기능을 지원합니다. 아바다 테마의 아바다 빌더에서도 탭 엘리먼트를 사용할 수 있습니다. 탭을 원하는 곳에 추가하여 각 탭에 다른 콘텐츠를 표시할 수 있습니다. 특히, 라이브러리에서 템플릿을 만들어 숏코드로 탭에 추가하면 원하는 콘텐츠를 쉽게 탭에 표시할 수 있습니다. 이러한 방법은 엘리멘터 페이지 빌더에서도 비슷합니다("엘리멘터 템플릿을 원하는 곳에 추가하는 방법 (예: 탭에 토글/아코디언 표시)" 참고).

아바다 테마 탭에 원하는 콘텐츠를 쉽게 추가하는 방법(예: 탭에 최신 글, 토글 등 표시)

아바다 테마 탭 요소

아바다 테마(Avada Theme)에서 탭을 삽입하려면 Element 선택 창에서 Tabs를 선택하도록 합니다.

탭 편집 화면이 표시되면 + Tab을 클릭하여 새 탭을 추가하거나 휴지통 버튼을 클릭하여 탭을 삭제할 수 있습니다. 편집 아이콘(연필 모양의 아이콘)을 클릭하여 탭 항목을 적절히 수정하도록 합니다.

Tab Content 섹션에서 내용을 입력합니다.  탭 콘텐츠에는 텍스트, HTML, 숏코드 등을 사용할 수 있어 콘텐츠에 대한 제약이 없습니다.

아바다 빌더 아이콘을 클릭하면 아바다 빌더에서 제공하는 엘리멘트(요소)를 추가할 수 있습니다.

하지만 이 화면에서 직접 아바다 빌더에서 제공하는 엘리먼트를 추가할 경우 그림과 같이 숏코드로 표시됩니다.

이 상태에서 잘 작동하지만 추후 수정하려는 경우 숏코드를 직접 수정하는 것은 쉽지 않습니다. 그러므로 콘텐츠를 삭제하고 다시 해당 엘리멘트(예: 콘텐츠 박스, 최근 포스트 등)를 추가하여 작업해야 할 것입니다.

이러한 번거로움을 피하기 위해 탭에 추가할 콘텐츠를 라이브러리로 만들어 숏코드로 삽입하면 추후에 수정도 쉽게 가능합니다.

라이브러리 템플릿을 만들어 숏코드로 탭에 추가하기

워드프레스 관리자 페이지 » Avada » Library에서 라이브러리 Element를 추가하도록 합니다. 이때 Global element를 체크해야 숏코드가 해당 템플릿에 생성됩니다.

Create Library Element 버튼을 클릭하면 라이브러리 엘리멘트 만들기 화면이 나옵니다. 엘리멘트를 선택하여 적절히 편집하도록 합니다. 

라이브러리를 저장하면 라이브러리 목록에 방금 만든 라이브러리가 표시됩니다. 해당 템플릿의 숏코드를 복사합니다.

또한, 특정 페이지에서 컬럼이나 섹션을 라이브러리에 저장(마찬가지로 "Save As Global" 옵션 체크)하여 마찬가지로 숏코드를 복사하여 활용할 수 있습니다.

이제 탭이나 원하는 곳에 이 숏코드를 붙여 넣기 할 수 있습니다.

페이지를 저장하고 브라우저에서 페이지를 열면 탭에 원하는 콘텐츠가 표시될 것입니다.

동일한 방법으로 아바다 테마에서 제공하는 다른 엘리멘트(예: 아바다 폼, 아바다 슬라이더, 블로그, 브레드크럼, 버튼, 차트, 체크리스트, 코드 블록, 컨택트 폼 7, 콘텐츠 박스, 카운트다운, 카운터 박스, 카운터 서클, 페이스북 페이지, FAQ, 플립 박스, 갤러리, 구글 지도, 아이콘, 이미지, 라이트박스, 메뉴, 모달, 포스트 카드, 포스트 슬라이더, 최신 글, 소셜 공유, 토글, 동영상, 우커머스 요소 등)를 추가할 수 있습니다.

추후 수정이 필요할 경우 라이브러리에서 해당 템플릿을 수정하면 수정 사항이 반영됩니다.

참고

https://avada.tistory.com/2736

워드프레스 Divi 테마용 주얼리 디자이너, 홈 리모델링, 호스텔 레이아웃 팩 무료 다운로드

https://avada.tistory.com/2739

엘리멘터에서 페이지를 템플릿으로 저장하는 방법