본문으로 바로가기
  1. Home
  2. 워드프레스/테마
  3. 아바다 테마 탭에 원하는 콘텐츠를 쉽게 추가하는 방법

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

· 댓글 2

워드프레스 페이지 빌더에서는 대부분 탭(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 테마용 주얼리 디자이너, 홈 리모델링, 호스텔 레이아웃 팩 무료 다운로드

인기 워드프레스 Divi 테마로 유명한 Elegant Themes에서는 매주 무료 레이아웃 팩을 추가하고 있습니다. 최근에는 주얼리 디자이너, 홈 리모델링, 호스텔, 가족 소품, 부동산 중개인, 스트리머, 쇼콜

avada.tistory.com

https://avada.tistory.com/2739

 

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

워드프레스 엘리멘터 페이지 빌더에서는 페이지를 템플릿으로 저장하여 활용할 수 있습니다. 또한, 섹션도 템플릿으로 저장하는 것이 가능합니다. 엘리멘터에서 페이지를 템플릿으로 저장하

avada.tistory.com

 

💬 댓글 2
logo

원하는 콘텐츠를 쉽게 추가 할 수 있군요^^

logo

블로그 잘 보고 갑니다..!!

이름을 저장합니다.

이모티콘창 닫기
울음
안녕
감사해요
당황
피폐

이모티콘을 클릭하면 댓글창에 입력됩니다.

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드