Elementor 탭을 만들고 사용하는 방법

웹사이트를 구축할 때 콘텐츠가 잘 구성되어 있는지 확인하는 것이 중요합니다. 페이지를 깔끔하게 정렬하면 사용자 경험(UX)을 개선하고 텍스트를 더 쉽게 이해할 수 있습니다. 콘텐츠를 구성할 수 있는 방법 중 하나는 Elementor 탭 위젯을 사용하는 것입니다.

탭 콘텐츠를 사용하면 사용자가 다른 콘텐츠 섹션 간에 전환할 수 있습니다. 이 기능을 사용하면 방문자가 페이지의 다른 영역으로 이동할 필요가 없습니다. 관련 콘텐츠를 탭 컨테이너로 그룹화하면 사이트의 모양과 사용성을 향상시킬 수 있습니다. 또한 WordPress 개발 경험이 없어도 이 모든 것을 설정할 수 있습니다.

이 게시물에서는 Elementor와 그 다양한 버전을 간략하게 소개합니다. 그런 다음 위젯의 기본 기능을 향상시키는 데 사용할 수 있는 Elementor 탭과 일부 타사 도구를 만들고 사용자 지정하는 방법을 안내합니다.

시작하자!

Elementor 개요

Elementor는 인기 있고 강력한 웹사이트 빌더 플러그인입니다.

페이지 빌더를 사용하여 처음부터 또는 미리 만들어진 템플릿을 사용하여 웹사이트를 위한 아름다운 페이지를 만들 수 있습니다. Elementor에는 끌어서 놓기 편집기가 있으므로 한 줄의 코드를 건드릴 필요가 없습니다.

Elementor에는 무료 및 유료 버전이 있습니다. 무료 Elementor 플러그인을 사용하면 표준 페이지와 게시물을 만들 수 있습니다.

그러나 기능이 제한적일 수 있습니다. 전체 도구 모음을 잠금 해제하려면 Elementor Pro로 업그레이드하는 것이 좋습니다. 이 게시물 전체에서 우리는 탭 위젯으로 작업할 때 무료 플랜과 프로 플랜의 차이점을 지적할 것입니다.

요소 탭을 만드는 방법(탭 위젯)

이제 Elementor에 대해 더 많이 이해했으므로 탭 위젯을 사용하는 방법을 살펴보겠습니다. 다음 자습서에서는 WordPress 사이트에 Elementor가 이미 설치 및 활성화되어 있다고 가정합니다.

시작하려면 탭 콘텐츠를 추가하려는 WordPress 게시물 또는 페이지로 이동 하고 Elementor로 편집을 선택합니다.

그러면 Elementor 편집기 인터페이스가 시작됩니다. 왼쪽 패널의 요소 아래에서 탭 위젯을 검색하여 선택합니다.

위젯을 페이지 섹션으로 끌어다 놓을 수 있습니다. 탭 위젯을 배치하면 해당 설정과 함께 새 대시보드가 ​​나타납니다.

각 탭의 제목과 내용을 입력할 수 있습니다. + 항목 추가 버튼을 클릭하여 다른 탭을 삽입할 수도 있습니다. 유형 에서 탭을 가로로 표시할지 세로로 표시할지 선택합니다.

Elementor 탭을 사용자 정의하는 방법

탭에 텍스트를 추가하면 전체 위젯 설정을 사용자 지정할 수 있습니다. 몇 가지 다른 옵션이 있습니다.

제목, 상자 내용 및 아이콘을 포함한 속성을 수정하려면 각 사용자 정의 탭을 선택하십시오. 위치와 정렬을 변경할 수도 있습니다.

다음으로 스타일 탭 아래에는 Elementor 탭 위젯의 디자인과 모양을 사용자 지정하기 위한 많은 옵션이 있습니다. 텍스트 색상과 그림자, 타이포그래피, 간격 등을 수정할 수 있습니다.

탭을 둘러싸는 테두리 색상과 너비를 변경할 수 있습니다. 이 디자인 기능은 개별 섹션을 구별하는 데 도움이 될 수 있습니다.

제목 아래에서 탭 제목의 텍스트 색상을 수정할 수 있습니다. Typography 를 클릭하여 글꼴과 텍스트 크기를 변경할 수도 있습니다.

완료되면 변경 사항을 저장합니다. 탭 콘텐츠를 보다 정교하게 만드는 데 사용할 수 있는 고급 설정도 있습니다.

Elementor 탭에 대한 고급 설정

위젯 설정 패널의 고급 탭에서 다양한 추가 옵션을 찾을 수 있습니다.

다음 설정을 자세히 살펴보겠습니다.

• 고급: 탭의 여백과 패딩을 변경합니다.
• 모션 효과: 스크롤 및 마우스 효과를 추가하여 위젯을 보다 대화식으로 만들고 입구 애니메이션을 추가합니다.
• 변형: 위젯을 뒤집고 회전하고 크기를 조정합니다.
• 배경: 전환을 삽입하려면 표준 배경을 선택하거나 마우스를 가져갑니다.
• 테두리: 실선 또는 점선과 같은 테두리 유형을 선택합니다.
• 마스크: 세련된 디자인의 마스크를 선택하여 위젯에 적용합니다.
• 위치 지정: 위젯의 너비와 위치를 조정합니다.
• 반응형: 미리보기 또는 라이브 페이지에 영향을 미치는 반응형 가시성을 변경합니다.
• 속성: 요소 래퍼에 대한 사용자 정의 속성을 설정합니다.
• 사용자 정의 CSS: 사용자 정의 CSS 를 삽입합니다.

Elementor의 무료 버전을 사용하는 경우 이러한 모든 고급 설정에 액세스할 수 없다는 점에 유의하는 것이 중요합니다. 예를 들어 사용자 정의 속성, 스크롤 효과 또는 CSS를 추가할 수 없습니다.

탭 위젯 내에 요소를 추가하는 방법

Elementor Pro를 사용하면 탭 위젯 내에 다른 요소를 삽입할 수도 있습니다. 예를 들어 위치 탭 아래에 지도 위젯을 추가한다고 가정해 보겠습니다.

그렇게 하려면 사용하려는 지도를 만든 다음 연필 아이콘을 마우스 오른쪽 버튼으로 클릭 하고 전역으로 저장을 선택하여 전역 위젯으로 저장합니다.

다음으로, 템플릿 라이브러리 (WordPress 대시보드에서)로 이동하고 방금 생성한 전역 위젯의 단축 코드를 복사합니다.

그런 다음 탭 위젯 내부를 클릭하고 + 항목 추가 버튼을 선택하여 새 탭을 추가합니다. 컨테이너의 텍스트 영역에 방금 복사한 단축 코드를 붙여넣습니다.

완료되면 화면 하단에서 업데이트 또는 게시 를 클릭합니다. 그런 다음 위젯이 사이트의 프런트 엔드에서 어떻게 보이는지 미리 볼 수 있습니다.

그게 다야! 모든 작업이 완료되었습니다.

Elementor 탭을 위한 8가지 주요 플러그인

Elementor는 아름답고 기능적인 탭 콘텐츠를 만드는 데 필요한 모든 기능을 갖춘 강력한 도구입니다.

그러나 디자인을 더 발전시키거나 고급 기능을 사용할 수 있습니다. 이 경우 Elementor를 다른 타사 도구와 페어링하는 것을 고려할 수도 있습니다.

특별한 순서 없이 순위가 매겨진 Elementor Tabs용 상위 플러그인 몇 가지를 살펴보겠습니다.

1. ElementsKit Elementor 테이블 위젯

Elementor용 ElementsKit 애드온은 널리 사용되는 확장입니다.

테이블 위젯을 사용하면 많은 양의 동기화되지 않은 데이터를 체계적으로 표시할 수 있습니다. 사용자 정의 가능한 테이블을 작성하고 본문 내용을 추가하고 이미지 및 탐색 요소를 삽입할 수 있습니다.

ElementsKit의 기능은 다음과 같습니다.

• 비교표
• 일정 및 캘린더
• 프로젝트 관리
• 메뉴
• 500개 이상의 블록
• 70개 이상의 애드온
• 메가 메뉴 빌더
• 시차 효과
• 팝업 모달 빌더

ElementsKit의 가격은 단일 사이트에 대해 연간 $39부터 시작합니다. 이 계획에는 1년의 업데이트 및 지원이 포함됩니다.

2. Elementor용 우아한 탭

Elementor용 우아한 탭은 동적 탭을 만들고 사용자 지정하는 데 도움이 되는 직관적인 도구입니다.

이 추가 기능은 다양한 디자인 사용자 지정 옵션이 있는 확장 기능을 찾고 있는 경우 확실한 선택이 될 수 있습니다. 사용자 정의 색상, 아이콘 및 글꼴을 추가할 수 있습니다. 또한 우아한 탭을 사용하여 탭에 자동 전환 기능을 추가하고 사이트의 다른 콘텐츠에 연결할 수 있습니다.

우아한 탭의 주요 기능은 다음과 같습니다.

• 고급 스타일 옵션
• 자동 전환 기능
• 로드 시 탭을 활성화하는 옵션
• 양쪽 맞춤 및 수직 탭
• 딥링킹
• 탭 정렬 지원

우아한 탭의 가격은 연간 $19부터 시작합니다. 이 계획에는 6개월간의 업데이트가 포함됩니다.

3. Livemesh 애드온

Elementor용 Livemesh 애드온에는 탭 콘텐츠를 쉽게 스타일 지정하고 구성하는 데 도움이 되는 수많은 기성 요소가 포함되어 있습니다.

밝은 탭과 어두운 탭 유형, 10가지 이상의 탭 디자인, 가로 및 세로 레이아웃 옵션 중에서 선택할 수 있습니다. Livemesh Addons는 사용하기 간편하여 WordPress 또는 Elementor를 처음 사용하는 경우에 매우 좋습니다.

Livemesh의 주요 기능은 다음과 같습니다.

• 10가지 밝은 탭 디자인과 10가지 어두운 탭 디자인
• 수직 및 수평 옵션
• 맞춤형 모바일 해상도
• 25개 이상의 애드온
• 아이콘 지원

Livemesh Addons 계획은 연간 $37부터 시작합니다. 이 계획에는 1년 동안의 업데이트 및 지원이 포함됩니다.

4. 엘리멘터 애드온

인기 있는 PowerPack의 Elementor Addons는 Elementor 탭 위젯의 디자인과 기능을 모두 향상시키기 위한 풍부한 기능의 플러그인입니다.

이 플러그인을 사용하여 탭에 텍스트와 이미지를 추가하고 고급 탭 위젯에 6가지 스타일을 적용할 수 있습니다. 사용자 친화적이며 이해하기 쉽습니다. 또한 Elementor Addons도 가볍기 때문에 사이트 속도 저하에 대해 걱정할 필요가 없습니다.

PowerPack의 주요 기능에 의한 Elementor 애드온은 다음과 같습니다.

• 빠르고 가벼운 인터페이스
• 사전 제작된 템플릿
• 맞춤형 콘텐츠 디스플레이
• 고급 탭 스타일

연간 $44부터 시작하는 이 플러그인은 이 목록의 다른 옵션보다 비쌉니다. 그러나 탭 콘텐츠뿐만 아니라 사이트의 모든 측면을 사용자 정의할 수 있는 전체 위젯 제품군이 있습니다.

5. 제트엘리먼츠

JetElements는 콘텐츠를 그룹화하는 빠르고 쉬운 방법을 찾고 있는 경우 이상적일 수 있는 반응형 표 위젯을 제공합니다.

이를 통해 비정형 데이터를 깔끔하고 현대적인 방식으로 보여줄 수 있습니다. JetElements는 또한 8가지 방법으로 가격 세부 정보를 사용자 지정하고 스타일을 지정할 수 있는 가격 테이블 위젯을 제공합니다.

JetElements의 주요 기능은 다음과 같습니다.

• 45개 위젯
• 테이블 설정으로 CSV 가져오기
• 8가지 스타일링 옵션
• 모든 콘텐츠 유형 지원
• 완전히 사용자 정의 가능

JetElements 구독은 연간 $24부터 시작합니다. Crocoblock은 또한 150개 이상의 위젯과 함께 연간 $130에 모든 것을 포함하는 패키지를 제공합니다.

6. 필수 애드온

Elementor 탭에 사용할 수 있는 또 다른 인기 있는 플러그인은 Essential Addons입니다.

가장 인기 있는 Elementor 위젯 플러그인 중 하나입니다. 여기에는 웹 사이트 빌더를 확장하고 향상시키기 위한 100개 이상의 기성 블록과 80개 이상의 요소가 포함됩니다.

탭 콘텐츠에 활용할 수 있는 최고의 요소 중 하나는 플러그인의 데이터 테이블입니다. 이 도구를 사용하면 거의 모든 테이블 유형을 원활하게 디자인하고 아이콘, 필터 등을 추가할 수 있습니다.

Essential Addons의 주요 기능은 다음과 같습니다.

• 테이블 설정으로 CSV 가져오기
• 필터링 옵션
• 완전히 사용자 정의 가능한 설정
• 고급 스타일 옵션
• 고급 탭 및 아코디언 요소
• 가격표

Essential Addons의 가격은 웹사이트 1개당 연간 $39.97부터 시작합니다. 1년 동안의 업데이트 및 지원이 함께 제공됩니다.

7. 프리미엄 애드온

Premium Addons는 다양한 무료 및 프리미엄 위젯과 함께 제공되는 Elementor용 맞춤형 도구입니다.

이 애드온에 포함된 많은 강력한 위젯 중에는 Elementor 가격표가 있습니다. 정렬 기능, 실시간 검색 및 항목을 오름차순 또는 내림차순으로 정렬하는 옵션이 제공됩니다.

프리미엄 애드온의 주요 기능은 다음과 같습니다.

• CSV 파일 가져오기 옵션
• 표 셀에 URL 추가
• 실시간 검색 및 정렬
• 사용자 정의 및 스타일 옵션
• 로티 애니메이션

Premium Addons Elementor Table Widget을 무료로 다운로드하여 사용할 수 있습니다. 연간 $39부터 시작하는 프리미엄 버전도 있습니다.

8. 요소 팩

Elementor Tabs 위젯과 함께 사용할 수 있는 마지막 애드온은 Element Pack입니다.

이 Elementor 확장 번들에는 콘텐츠를 매력적이고 세련된 방식으로 표시할 수 있는 Table 위젯이 포함되어 있습니다. 가격, 콘텐츠 및 암호화 통화 테이블을 포함하여 탭 콘텐츠 내에서 다양한 테이블을 생성할 수 있습니다.

요소 팩의 주요 기능은 다음과 같습니다.

• 테이블 설정으로 CSV 가져오기
• 3 테이블 요소
• 사용자 정의 및 스타일 옵션
• 필터링 기능
• 실시간 검색

Element Pack의 단일 사이트 라이선스 비용은 연간 $29.25로 이 목록에서 가장 저렴한 옵션 중 하나입니다. 이 계획에는 20일 환불 보장도 포함되어 있습니다.

요약

Elementor는 손쉽게 웹사이트를 디자인하고 구축하는 데 도움이 되는 훌륭한 도구입니다. 콘텐츠를 매력적인 방식으로 그룹화하고 구성하려는 경우 Elementor 탭 위젯 사용을 고려할 수 있습니다.

이 게시물에서 논의한 것처럼 Elementor 편집기를 통해 이 위젯을 모든 페이지나 게시물에 쉽게 삽입할 수 있습니다. 그런 다음 콘텐츠를 추가하고 브랜딩에 맞게 스타일을 지정할 수 있습니다. 위젯의 기능을 확장하기 위해 ElementsKit과 같은 타사 플러그인과 페어링할 수도 있습니다.

사용자 친화적이고 매력적인 디자인은 사이트의 성공에 필수적입니다. 또한 강력한 WordPress 호스팅 제공업체와 협력해야 합니다. Kinsta가 귀하의 웹 사이트를 다음 단계로 끌어 올릴 수 있는 방법을 보려면 호스팅 계획을 확인하십시오!