본문으로 바로가기
  1. Home
  2. 워드프레스/Elementor
  3. 엘리멘터 템플릿을 원하는 곳에 추가하는 방법 (예: 탭에 토글/아코디언 표시)

엘리멘터 템플릿을 원하는 곳에 추가하는 방법 (예: 탭에 토글/아코디언 표시)

· 댓글 0 · 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

엘리멘터 페이지 빌더에서는 탭 기능을 사용하여 각 탭에 여러 가지 콘텐츠를 표시할 수 있습니다. 각 탭 내에 다른 엘리멘터 요소나 섹션을 추가하고 싶은 경우가 있습니다. 예를 들어, 다음 그림과 같이 FAQ 페이지에서 주제별로 다른 탭에 FAQ 항목을 추가하고 싶을 수 있습니다. (아래 그림은 인기 워드프레스 테마인 Divi 테마의 탭 기능을 사용하여 FAQ 항목들을 탭으로 표시하는 방법에 대한 글에서 인용한 것입니다. Elementor에서도 비슷하게 구현이 가능합니다.)

엘리멘터 템플릿을 원하는 곳에 추가하는 방법 - FAQ 페이지

엘리멘터 템플릿을 원하는 곳에 추가하는 방법 (예: 탭에 토글/아코디언 표시)

엘리멘터 프로에서는 템플릿을 숏코드로 원하는 곳에 자유롭게 추가할 수 있습니다. 예를 들어, FAQ 페이지에 탭 위젯을 추가한 다음, 개별 FAQ 항목들을 주제별로 표시하는 템플릿을 만들어서 탭에 표시할 수 있습니다. FAQ는 토글이나 아코디언 요소로 만들 수 있습니다.

 

엘리멘터(Elementor) 토글 위젯과 아코디언 위젯 차이점

자주 묻는 질문(FAQ) 페이지나 Q&A 페이지를 만들 때 토글이나 아코디언이 많이 사용됩니다. 워드프레스 엘리멘터 페이지 빌더에는 토글 위젯과 아코디언 위젯이 제공됩니다. 이 두 위젯의 차이점

avada.tistory.com

이 글에서는 워드프레스 엘리멘터 페이지 빌더 템플릿을 만들어서 숏코드로 탭에 추가하는 방법에 대해 살펴보겠습니다.

탭에 토글 위젯 추가하기

1. 페이지에 섹션을 추가하고 Tabs 엘리먼트를 끌어다 놓습니다.

엘리멘터 페이지 빌더 탭 위젯

그러면 탭이 표시됩니다.

엘리멘터 템플릿을 원하는 곳에 추가하는 방법

각 탭에 제목을 입력하고 내용을 입력할 수 있습니다.

엘리멘터 페이지 빌더 탭 FAQ 페이지

개별 탭 항목의 콘텐츠는 비주얼 편집기나 텍스트 편집기를 사용하여 입력할 수 있습니다. 하지만 다른 엘리먼터 엘리먼트는 추가할 수 없습니다. 다른 엘리먼트(예: 토글 또는 아코디언 위젯)를 추가하려면 템플릿을 사용해야 합니다.

2. 워드프레스 관리자 페이지 > 템플릿으로 이동하여 새로 추가를 클릭합니다.

엘리멘터 템플릿을 원하는 곳에 추가하는 방법 - 템플릿 만들기

3. 템플릿 유형 선택 팝업이 표시됩니다.

엘리멘터 템플릿을 원하는 곳에 추가하는 방법 - FAQ 템플릿 만들기

템플릿 유형으로 여기에서는 Section으로 선택하겠습니다. (엘리멘터 페이지 빌더의 테마 빌더를 사용하여 헤더부터 푸터까지 사이트의 모든 섹션을 커스텀할 수 있습니다._

4. 템플릿을 처음부터 만들 수 있지만, 미리 만들어진 템플릿을 로드하여 활용할 수도 있습니다.

엘리멘터 템플릿을 원하는 곳에 추가하는 방법 - FAQ 블럭 불러오기

FAQ 페이지에 들어갈 템플릿을 만든다면 라이브러리 화면에서 Faq 블록을 선택한 다음, 다음에 드는 FAQ 블럭을 선택하여 로드합니다.

5. 로드한 템플릿을 적절히 수정합니다. 

엘리멘터 템플릿을 원하는 곳에 추가하는 방법 - 템플릿 수정

빈 템플릿에서 시작하는 경우에는 엘리멘터를 사용하는 것도 동일한 방법으로 원하는 요소를 추가하시면 됩니다. FAQ 페이지를 만드는 경우 아코디언 위젯이나 토글 위젯을 사용할 수 있습니다. 

엘리멘터 페이지 빌더 토글 아코디언 위젯

토글과 아코디언의 차이는 여기를 참고해보세요.

6. 템플릿을 저장하면 템플릿 리스트에서 숏코드를 확인할 수 있습니다. 쇼트코드를 복사합니다(예: [elementor-template id="2381"]).

엘리멘터 템플릿을 원하는 곳에 추가하는 방법 - 숏코드 생성

7. 복사한 숏코드를 원하는 곳(예: 탭 항목)에 붙여넣기 합니다.

엘리멘터 템플릿을 원하는 곳에 추가하는 방법 - 숏코드 복사 붙여넣기

이제 해당 템플릿이 탭에 표시됩니다.

엘리멘터 템플릿을 원하는 곳에 추가하는 방법 - 최종 결과물

응용하기: 슬라이드에 두 개 이상의 버튼 표시

엘리멘터 Slides 위젯에서는 버튼이 하나만 지원되지만, 두 개 이상의 버튼을 표시하려는 경우 여러 개의 버튼을 템플릿으로 만든 다음, 숏코드로 입력할 수 있습니다.

마치며

이상으로 엘리멘터 페이지 빌더에서 템플릿을 숏코드로 복사하여 원하는 곳(예: 페이지, 사이드바 등)에 붙여넣기 하는 방법에 살펴보았습니다. 

이 기능에 대한 자세한 내용을 엘리멘터 페이지 빌더 문서 Embed Templates Anywhere (Pro)(영문)에서도 확인할 수 있습니다.

탭/토글/아코디언 등의 기능은 아바다(Avada), 엔폴드(Enfold), Divi 등의 인기 테마에서도 기본적으로 제공됩니다. 엘리멘토 페이지 빌더에서는 무료 버전에서도 이 기능이 제공되지만, 템플릿을 만들어 숏코드로 추가하는 기능은 Elementor Pro에서만 지원됩니다.

참고

https://avada.tistory.com/2567

 

워드프레스 엘리멘터 페이지 빌더: 헤더나 푸터에 배너 고정하기

워드프레스에서는 다양한 방법으로 헤더나 푸터에 배너를 고정할 수 있습니다. Top Bar 플러그인을 사용하면 심플한 배너를 헤더나 푸터에 고정하는 것이 가능합니다. 엘리멘터 페이지 빌더를 사

avada.tistory.com

https://avada.tistory.com/2558

 

엘리멘터 문의폼(Form): 업로드된 파일을 이메일 첨부파일로 전송하는 방법

엘리멘터 프로를 사용하는 경우 Contact Form 7과 같은 별도의 문의폼 플러그인을 사용할 필요 없이 자체적으로 제공하는 Form 위젯을 사용하여 방문자로부터 간단한 문의를 받을 수 있습니다. 엘리

avada.tistory.com

https://avada.tistory.com/2488

 

워드프레스 엘리멘터 우커머스 상품 (Woocomerce Products) 위젯

엘리멘터 페이지 빌더의 우커머스 상품(Woocommerce Products) 위젯을 사용하여 우커머스 상품들을 컬럼 형식으로 나열할 수 있습니다. 전체 상품 또는 특정 카테고리 내의 상품들을 표시하거나 세일

avada.tistory.com

 

SNS 공유하기
최근 글
30분전
추천하는 글
30분전
💬 댓글 0

이름을 저장합니다.

가성비가 뛰어난 웹호스팅

저렴하고 가성비 좋은 웹호스팅

저도 같은 사람한테 당했는 데... 청산사랑 => 이 ⋯

💬Xenoint

플러그인 사용이전하는 방법이로군요^^

💬空空(공공)

트라도스서식 알아 갑니다^^

💬空空(공공)

예전에는 새로운 버전 출시 전 몇 달 전에 구입할 경우⋯

💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

무료로 업그레이드 해주면 더 충성도가 올라갈텐데요

💬본연의 힘

워드프레스 시작 가이드

워드프레스 시작하기
이모티콘창 닫기
울음
안녕
감사해요
당황
피폐

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

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