Elementor 에서 토글 버튼을 만드는 방법 (3 가지 방법)

그 아래의 콘텐츠를 전환하는 두 가지 옵션 토글 버튼입니다

주요 시사점

  • Elementor 토글 버튼은 세 가지를 의미할 수 있습니다: 텍스트를 열고 닫는 제목, 단락을 확장하는 자세히 읽기 링크 또는 한 섹션을 다른 섹션으로 바꾸는 스위치.
  • Elementor 4.3은 위젯 패널에서 이전 Toggle 위젯을 숨기고, 이제 Accordion 위젯은 두 가지 옵션이 있는 Max Items Expanded 설정을 통해 이를 다룹니다: One 및 Multiple.
  • Elementor의 자세히 읽기 토글은 단일 항목이 있는 아코디언 위젯으로, 기본 상태가 모두 축소되어 방문자가 클릭할 때까지 추가 텍스트가 닫혀 있습니다.
  • Elementor와 Elementor Pro에는 두 콘텐츠 블록 사이를 전환하는 위젯이 없으므로 월간 및 연간 스타일 전환 버튼에는 애드온 위젯이나 중첩된 탭이 필요합니다.
  • 마스터 애드온 콘텐츠 토글 위젯은 두 개 이상의 옵션 위에 토글 버튼을 놓는 Pro 위젯이며, 각 옵션에는 텍스트 또는 저장된 Elementor 템플릿이 있습니다.

Elementor 토글 버튼을 세 가지 방법으로 만들 수 있으며,오른쪽 버튼은 버튼이 무엇을 해야 하는지에 따라 달라집니다. 텍스트를 열고 닫으려면 Accordion 위젯을 사용하십시오. 긴 단락을 확장하려면 한 항목 아코디언을 Read More 토글로 사용하십시오. 연간 월간 가격과 같이 한 블록의 콘텐츠를 다른 블록으로 교환하려면 다음을 사용하십시오 콘텐츠 토글 위젯.

이 가이드는 정확한 설정으로 세 가지를 모두 살펴봅니다. 모든 스크린샷은 테스트 사이트의 Elementor 4,3 에서 제공되므로 패널은 오늘 볼 내용과 일치합니다.

Elementor에서 토글 버튼이 의미하는 것

토글 버튼은 클릭하면 두 상태 사이를 오가는 모든 컨트롤입니다. Elementor 에서 사람들은 세 가지 다른 작업에 대해 문구를 사용하며 각 작업에는 자체 위젯이 있습니다.

원하는 것라고 불리는 것사용할 위젯
제목을 클릭하면 그 아래의 텍스트가 열립니다.Click again, it closes.토글 또는 아코디언엘리멘터 아코디언
짧은 소개를 표시하고 나머지는 자세히 보기 링크 뒤에 숨깁니다자세히 보기 전환하나의 아이템으로 구성된 Elementor Accordion
스위치를 뒤집으면 한 섹션이 다른 섹션으로 교체됩니다콘텐츠 토글 또는 콘텐츠 전환기마스터 애드온 콘텐츠 토글 또는 중첩된 탭

Elementor 4,3 에서 위젯 패널에서 “toggle”을 검색하면 Toggle 이라는 위젯을 찾을 수 없습니다. Elementor 는 해당 검색에 대한 탭과 아코디언을 표시하고 Master Addons Pro 가있는 경우 콘텐츠를 전환합니다.

탭, 아코디언 및 마스터 애드온 토글 콘텐츠를 표시하는 토글에 대한 Elementor 4.3 위젯 패널 검색
Elementor 4,3 에서 “toggle”을 검색하면 탭,아코디언 및 토글 콘텐츠가 반환됩니다. 이전 토글 위젯은 더 이상 패널에 없습니다.

방법 1: 텍스트를 열고 닫는 토글

FAQ 에서처럼 토글이 텍스트 블록을 열고 닫아야 할 때 아코디언 위젯을 사용하십시오. 이전 토글 위젯은 여러 항목을 한 번에 열어 두었고 이제 아코디언 위젯은 한 설정을 통해 동일한 작업을 수행합니다.

  1. Elementor로 페이지를 편집하고 위젯 패널을 검색하세요 아코디언 그리고 페이지로 드래그하세요.
  2. 각 항목을 클릭하고 제목을 입력합니다. 그런 다음 항목 내부를 클릭하고 텍스트 편집기 위젯 또는 다른 위젯을 추가하여 내용을 확인합니다.
  3. 열다 상호작용 콘텐츠 탭의 섹션.
  4. 세트 최대 항목 확장 에 여러. 이제 각 항목이 저절로 열리고 닫히는데, 이것이 고전적인 토글 동작입니다.
  5. 세트 기본 상태 에 모두 무너졌습니다 모든 항목이 닫혀 시작하거나 First Expanded에 그대로 두어야 하는 경우.
기본 상태가 모두 축소되고 최대 항목 확장됨이 다중으로 설정된 Elementor Accordion 위젯 상호 작용 섹션입니다
인터랙션은 아코디언을 토글로 바꾸는 두 가지 설정을 유지합니다: 기본 상태 및 최대 항목 확장.

Max Items Expanded on One 으로 항목을 열면 그 앞에 있는 항목이 닫힙니다. Multiple 을 사용하면 방문자는 두세 개의 답변을 열어두고 비교할 수 있습니다.

두 개의 항목이 동시에 열려 있고 하나는 닫혀 있는 프런트 엔드의 Elementor Accordion입니다
두 개의 항목이 한 번에 열리며, 이는 Max Items Expanded가 Multiple로 설정된 경우에만 발생합니다.

위젯의 레이아웃 섹션에는 다음이 있습니다 FAQ 스키마 전환. 항목이 실제 질문과 답변 일 때 켜십시오. 더 많은 제목 스타일과 아이콘을 위해,the 고급 아코디언 위젯 마스터 애드온에서 대안입니다.

방법 2: 자세히 보기 전환

Read More 토글은 하나의 항목이 있는 아코디언입니다. 방문자는 시작 줄을 보고 자세히 읽기를 클릭하며 나머지 텍스트는 아래에 표시됩니다.

  1. 항상 표시되어야 하는 텍스트 부분이 포함된 텍스트 편집기 위젯을 추가합니다.
  2. 드래그 앤 아코디언 바로 그 아래에 위젯이 있습니다.
  3. 하나만 남도록 여분의 항목을 삭제하고 이름을 바꿉니다 더 읽기.
  4. 나머지 텍스트를 해당 항목 안에 넣습니다.
  5. 에서 상호작용, 세트 기본 상태 에 모두 무너졌습니다.
  6. 스타일 탭에서 링크가 위 단락과 같은 높이로 표시되도록 하려면 테두리와 패딩을 제거하십시오.
자세히 보기 단일 항목으로 만든 Elementor에서 전환하세요. 짧은 단락 아래에 열려 있는 것으로 표시된 아코디언 위젯입니다
Read More 토글로 작동하는 한 항목 아코디언. 첫 번째 단락은 별도의 텍스트 편집기 위젯입니다.

Elementor 는 Read More 라는 위젯도 가지고 있는데,다른 작업을 합니다. WordPress More 태그와 마찬가지로 아카이브 페이지에서 게시물의 발췌가 끝나는 위치를 표시합니다. 아무것도 확장하거나 축소하지 않습니다 Elementor의 문서 설명한다.

방법 3: 콘텐츠를 교환하는 토글 스위치

버튼을 클릭하면 콘텐츠 토글을 사용하여 한 블록을 다른 블록으로 교체해야 합니다. Elementor 나 Elementor Pro 모두 이에 대한 위젯이 없으므로 추가 기능이나 탭에 대한 해결 방법이 필요합니다.

아래 단계에서는 Master Addons Pro의 콘텐츠 토글을 사용합니다.

  1. Elementor로 페이지를 편집하고 검색하세요 콘텐츠 전환 그리고 제자리로 끌어옵니다. 라벨 1 과 라벨 2 의 두 항목으로 시작합니다.
  2. 에서 요소 목록을 작성하고 첫 번째 항목을 클릭한 후 입력하세요 라벨예를 들어 팀의 경우.
  3. 떠나다 유형 content 에 해당 옵션의 텍스트를 편집기에 작성합니다. 전체 레이아웃을 표시하려면 Type 을 Template 으로 설정하고 저장된 template 을 선택합니다.
  4. 두 번째 항목에 대해서도 똑같이 합니다. 를 클릭합니다 항목 추가 세 번째 옵션이 필요한 경우.
  5. 오픈 설정 토글. 활성 인덱스 어떤 옵션이 먼저 표시되는지 결정합니다 위치 내용의 앞에 또는 뒤에 스위치를 둔다.
  6. 스타일 탭에서 스위치의 원형 또는 정사각형을 선택하고 표시기와 라벨 색상을 설정합니다.
팀용 및 프리랜서용 제목과 단락 위의 토글 버튼을 사용하여 Elementor에서 콘텐츠 위젯을 전환합니다
두 가지 옵션 콘텐츠 토글. 프리랜서용 을 클릭하면 아래의 제목과 단락이 대체됩니다.

가장 일반적인 용도는 청구 스위치입니다. 각 옵션에는 가격 카드 세트가 있으며 토글 버튼은 그 사이를 이동합니다.

마스터 애드온으로 구축된 세 가지 Elementor 가격 테이블 위의 월별 및 연간 토글 버튼 콘텐츠 토글
세 가지 가격표 위의 월별 및 연간 토글 버튼입니다.

작동하는 것을 보고 싶습니까? X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 콘텐츠 위젯 페이지 전환 청구 스위치부터 사양 테이블까지 클릭할 수 있는 10개의 라이브 데모가 있습니다.

애드온을 원하지 않는 경우 페이지에 탭 위젯을 삭제하고 두 탭의 이름을 월간 및 연간으로 지정합니다. Elementor 4,3 의 탭은 각 탭 내부의 모든 위젯을 허용합니다. 슬라이딩 스위치 대신 탭 제목을 얻고 콘텐츠도 같은 방식으로 교체됩니다.

어떤 토글 버튼을 사용해야합니까?

클릭 후 무슨 일이 일어나는지 위젯을 선택하세요.

상황사용왜
질문이 많은 FAQ아코디언, 최대 아이템이 하나로 확장되었습니다하나의 답변만 열려 있기 때문에 페이지가 짧게 유지됩니다
제품 세부 정보 방문자가 비교합니다아코디언, 최대 아이템이 여러 개로 확장됩니다여러 패널이 함께 열려 있을 수 있습니다
긴 About 텍스트더 읽어보기 원템 아코디언인트로가 표시되고 나머지는 클릭을 기다립니다
월별 및 연간 가격콘텐츠 전환한 세트가 같은 공간에서 다른 세트를 대체합니다
두 명의 관객, 한 섹션콘텐츠 전환각 방문자는 자신을 위해 작성된 버전을 선택합니다
동일한 무게의 4개 이상의 섹션탭탭 제목은 긴 스위치보다 스캔하기가 더 쉽습니다

일반적인 토글 버튼 문제

Elementor의 토글에서는 세 가지 문제가 가장 자주 발생합니다.

  • 토글 위젯이 없습니다. Elementor 는 현재 버전의 패널에서 숨깁니다. 최대 항목 확장과 함께 Accordion 을 Multiple 로 설정합니다.
  • 페이지로드에서 토글이 열립니다. Accordion 위젯에서 기본 상태를 모두 축소됨 으로 설정합니다. 콘텐츠 토글에서는 항상 하나의 옵션이 표시되고 Active Index 가 어느 것을 결정합니다.
  • 스위치를 클릭해도 아무 것도 수행되지 않습니다. 각 옵션에 콘텐츠가 있는지 확인하십시오. 선택한 템플릿이 없는 템플릿으로 설정된 옵션은 빈 영역을 보여줍니다.

로그인한 사용자와 같은 일부 방문자에게만 콘텐츠가 표시되어야 하는 경우 토글은 잘못된 도구입니다.That is a job for elementor의 표시 조건방문자가 아무것도 클릭하기 전에 로드할 항목을 결정합니다.

자주 묻는 질문

Elementor 에서 토글 버튼을 어떻게 추가합니까?

아코디언 위젯을 페이지로 드래그하여 텍스트를 열고 닫는 토글을 만들고 상호 작용 섹션에서 최대 항목 확장 을 다중으로 설정합니다. 두 섹션 사이를 전환하는 토글 버튼의 경우 마스터 애드온 토글 콘텐츠와 같은 콘텐츠 토글 위젯을 추가하고 각 옵션에 고유한 콘텐츠를 제공합니다.

Elementor의 토글 위젯은 어디에 있나요?

Elementor 4,3 은 더 이상 위젯 패널에서 토글 위젯을 보여주지 않습니다. “토글”을 검색하면 아코디언과 탭이 반환됩니다. 아코디언 위젯은 동일한 작업을 다룹니다: 최대 항목 확장 다중으로 설정하면 여러 항목이 열려 있을 수 있으며,이것이 토글 위젯이 동작하는 방식입니다.

Elementor에서 토글과 아코디언의 차이점은 무엇입니까?

아코디언에서는 한 항목을 열면 다른 항목이 닫힙니다. 토글에서는 각 항목이 자체적으로 열리고 닫히므로 여러 항목이 함께 열릴 수 있습니다. 현재 Elementor 버전에서는 둘 다 동일한 아코디언 위젯이며 Max Items 확장 설정은 두 동작 사이를 전환합니다.

Elementor를 기본적으로 토글 열도록 할 수 있나요?

예. Accordion 위젯에서 기본 상태를 First expanded 로 설정하고 페이지가 로드될 때 첫 번째 항목이 열립니다. 콘텐츠 전환 위젯에서 Active Index 를 첫 번째 항목에 대해 1 로 먼저 표시해야 하는 옵션의 번호로 설정합니다.

Elementor Pro에는 가격 책정을 위한 토글 스위치가 있습니까?

아니요. Elementor Pro 에는 가격표 위젯이 있지만 월별 및 연간 테이블을 교환하는 스위치가 없습니다. 테이블을 탭 안에 넣거나 애드온에서 콘텐츠 토글 위젯을 사용하고 각 가격 세트를 하나의 옵션으로 로드할 수 있습니다.

최종 생각

Elementor 토글 버튼은 세 가지 중 하나이며 각각 명확한 홈이 있습니다. Accordion 위젯과 Max Items Expanded 설정으로 텍스트를 열고 닫습니다. 한 항목 아코디언에서 Read More 토글을 빌드합니다. 콘텐츠 토글을 사용하여 두 섹션 사이를 전환합니다.

세 번째 종류의 경우 콘텐츠 위젯 토글 각 옵션에서 텍스트와 저장된 템플릿을 처리합니다 마스터 애드온 프로 계획 그것과 함께 제공되는 다른 것을 나열하십시오.

로이 제미 사진
로이 제미
저는 Pixar Labs 의 콘텐츠 랭글러이자 마케터인 Roy Jemee 로 Elementor 를 위한 마스터 애드온을 작업하고 있습니다. 튜토리얼을 작성하고,비디오를 녹화하고,문서를 최신 상태로 유지하므로 모든 기능을 사용하는 방법을 항상 알고 있습니다. 또한 지원을 처리하므로 걸림돌이 생기면 문제를 해결하는 데 도움을 주는 사람입니다. 매일 이러한 도구를 사용하는 사람이 제공하는 실제 답변.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드가 표시되어 있습니다 *