PowerPack 애드온을 사용하여 Elementor에서 탭 콘텐츠를 만드는 방법

게시 됨: 2022-11-02

Elementor에서 탭 콘텐츠를 만드는 방법이 궁금하십니까?

탭 콘텐츠는 많은 양의 정보를 간결하면서도 기능적인 방식으로 표시하여 웹 페이지의 모양을 향상시킵니다.

이 기사에서는 Elementor 및 PowerPack 애드온을 사용하여 WordPress 웹 사이트에 대한 탭 콘텐츠를 만드는 방법에 대해 설명합니다.

PowerPack 고급 탭 위젯 – 개요

Elementor용 PowerPack 애드온은 Elementor 페이지 빌더를 위한 최고의 애드온 중 하나입니다. Elementor에서 탭 콘텐츠를 만드는 고급 탭 위젯을 포함하여 150개 이상의 독특하고 세련된 템플릿과 80개 이상의 편리한 위젯이 있습니다.

고급 탭 위젯은 모든 WordPress 웹 사이트에서 탭 콘텐츠를 만드는 데 가장 적합한 탭 위젯입니다. Elementor용 PowerPack 고급 탭 위젯의 기능을 살펴보겠습니다.

  • 여러 콘텐츠 소스 지원
  • 콘텐츠의 스타일을 지정하는 다양한 콘텐츠 사용자 지정 옵션.
  • 가로 탭과 세로 탭을 만들 수 있습니다.
  • 뛰어난 응답 지원을 제공하고 모든 화면에서 원활하게 작동합니다.
  • 텍스트 색상, 타이포그래피, 배경 유형, 탭 간격, 테두리, 텍스트 정렬 등과 ​​같은 다양한 스타일 옵션을 제공합니다.
  • 아이콘, 제목 및 콘텐츠 부분을 개별적으로 사용자 지정할 수 있습니다.

PowerPack 애드온을 사용하여 Elementor에서 탭 콘텐츠 만들기

시작하기 전에 Elementor 페이지 빌더와 Elementor용 PowerPack 애드온을 설치하고 활성화했는지 확인하십시오.

WordPress 웹사이트에서 두 플러그인을 모두 활성화했으면 Elementor 편집기를 사용하여 페이지를 엽니다.

그런 다음 위젯 영역에서 " 고급 탭 "을 검색하고 위젯을 페이지에 끌어다 놓습니다.

PowerPack을 확인하는 것을 잊지 마십시오. PP " 위젯의 오른쪽 상단 모서리에 있는 기호.

Elementor 편집기 페이지에서 PowerPack으로 "고급 탭" 위젯을 끌어다 놓습니다.

고급 탭 위젯의 콘텐츠 탭

고급 탭 위젯의 콘텐츠 탭에는 다음 두 섹션이 있습니다.

  1. 고급 탭
  2. 형세

이 섹션을 자세히 살펴보겠습니다.

고급 탭
고급 탭 위젯의 콘텐츠 탭에 있는 고급 탭 섹션

이 섹션에서 사용 가능한 기능을 살펴보겠습니다.

  • 원하는 만큼 " 탭 "을 추가할 수 있습니다. 더 많은 탭을 만들려면 " 항목 추가 "를 클릭하기만 하면 됩니다.
  • 각 탭을 개별적으로 사용자화할 수 있습니다.
  • 콘텐츠 유형: 콘텐츠, 이미지, 링크(동영상/이미지), 저장 섹션, 저장 위젯, 저장 페이지 템플릿 등 여러 콘텐츠 유형을 선택할 수 있습니다.

컨텐츠 유형으로서의 "컨텐츠"

PowerPack Addons의 탭 콘텐츠 위젯의 탭 섹션에서 콘텐츠 유형으로 "콘텐츠"

콘텐츠를 표시하려는 경우 다음 옵션을 사용자 지정할 수 있습니다.

  1. 제목: 이 옵션을 사용하여 콘텐츠의 제목을 작성합니다.
  2. 콘텐츠: 이 섹션에서는 번호 목록, 글머리 기호 목록, 링크, 굵게, 기울임꼴, 밑줄 및 기타 여러 기능을 사용하여 탭에 콘텐츠를 추가하여 텍스트 스타일을 지정할 수 있습니다. 그 외에도 미디어 라이브러리에서 이미지를 추가할 수도 있습니다.

콘텐츠 유형으로 "이미지"

PowerPack Addons에 의한 탭 컨텐츠 위젯의 탭 섹션에서 "이미지"로 컨텐츠 유형

이미지를 표시하려는 경우 다음 옵션을 사용자 지정할 수 있습니다.

  1. 이미지 선택: 이 옵션을 사용하여 이미지 라이브러리에서 이미지를 선택합니다.
  2. 이미지 크기: 이 옵션을 사용하면 원하는 이미지 크기를 선택할 수 있습니다.

링크를 표시하려면 "링크" 옵션에 대한 링크를 드롭할 수 있습니다. 그리고 저장된 섹션, 저장된 위젯 또는 저장된 페이지 템플릿을 선택하면 그에 따라 선택할 수 있습니다.

콘텐츠 부분을 탭마다 개별적으로 사용자 지정하는 것처럼, 마찬가지로 각 탭의 아이콘에 대해서도 그렇게 할 수 있습니다.

PowerPack Addons에 의한 탭 콘텐츠 위젯의 탭 섹션에서 콘텐츠 유형으로 "아이콘"

아이콘 섹션의 기능은 다음과 같습니다.

  1. 아이콘 유형: 아이콘 또는 이미지 중 아이콘 유형을 선택할 수 있습니다. 그것은 당신의 브랜드의 로고일 수도 있고 다른 어떤 것일 수도 있습니다.
  2. 아이콘: 아이콘 라이브러리에서 아이콘을 선택할 수 있습니다.
형세
고급 탭 위젯의 콘텐츠 탭에 있는 레이아웃 섹션

이 섹션에서 사용 가능한 기능을 살펴보겠습니다.

  • 레이아웃: 레이아웃을 가로 또는 세로 패턴으로 선택할 수 있습니다.
  • 반응형 지원: 고급 탭 위젯은 데스크톱, 태블릿, 모바일 등 모든 장치에서 반응형 모드를 지원합니다.
  • 스타일 선택: 이 옵션을 사용하여 탭 스타일을 선택합니다.
  • 맨 위로 스크롤: 제목을 클릭할 때 탭의 맨 위로 스크롤할지 여부를 예 또는 아니오를 선택할 수 있습니다.

[ 참고: 이 옵션은 탭의 세로 레이아웃 패턴을 선택한 경우에만 사용할 수 있습니다.]

  • 기본 활성 탭 인덱스: 이 옵션은 기본 활성 탭을 설정할 수 있습니다. 웹사이트를 방문할 때마다 선택한 탭이 기본적으로 표시되도록 합니다.
  • 사용자 정의 ID 접두사: HTML에서 탭의 ID 속성에 적용될 사용자 정의 ID 접두어를 추가할 수 있습니다.

이러한 변경 사항을 고급 탭 위젯에 적용하면 최상의 결과를 볼 수 있습니다.

고급 탭 위젯의 스타일 탭

고급 탭 위젯의 스타일 탭에는 다음 두 섹션이 있습니다.

  1. 탭
  2. 제목
  3. 콘텐츠

이 섹션을 자세히 살펴보겠습니다.

탭
고급 탭 위젯의 스타일 탭에 있는 탭 섹션

이 섹션에 포함된 모든 기능을 살펴보겠습니다.

  • 수평 또는 수직 정렬: 이 옵션을 사용하여 탭의 정렬을 선택하되 먼저 레이아웃을 선택하십시오.
  • 탭 사이의 간격: 이 옵션을 사용하여 탭 사이의 간격을 사용자 지정합니다.
  • 배경색: 이 옵션을 사용하여 탭의 배경색을 선택할 수 있습니다.
  • 테두리 반경: 탭 테두리에 곡선 가장자리를 표시하려면 테두리 반경을 적용합니다.
  • 패딩: 탭의 패딩을 조정하여 탭 테두리와 콘텐츠 사이의 간격을 유지합니다.
제목
고급 탭 위젯의 스타일 탭에 있는 제목 섹션

이 섹션에 포함된 모든 기능을 살펴보겠습니다.

  • 아이콘 위치: 아이콘 위치를 위, 아래, 오른쪽 또는 왼쪽으로 선택합니다.
  • 아이콘 크기: 이 옵션으로 아이콘 크기를 조정합니다.
  • 아이콘 이미지 너비: 이 옵션을 사용하여 아이콘 이미지 너비를 조정합니다.
  • 테두리 반경: 탭 제목 테두리에 곡선 가장자리를 표시하려면 테두리 반경을 적용합니다.
  • 패딩: 탭의 패딩을 조정하여 탭 제목 테두리와 콘텐츠 사이의 간격을 유지합니다.
  • 제목 타이포그래피: 이 옵션을 사용하여 제목 텍스트 타이포그래피를 사용자 정의합니다.
  • 아이콘 색상: 이 옵션으로 아이콘 색상을 선택합니다.
  • 제목 색상: 제목 색상 옵션을 사용하여 제목 텍스트 색상을 사용자 정의합니다.
  • 제목 배경색: 제목 에 배경색을 표시하려면 이 옵션을 사용하여 배경색을 선택할 수 있습니다.
  • 호버 효과: 이 옵션은 호버 효과를 활성화하거나 비활성화할 수 있는 유연성을 제공합니다.
콘텐츠
고급 탭 위젯의 스타일 탭에 있는 콘텐츠 섹션

이 섹션에 포함된 모든 기능을 살펴보겠습니다.

  • 정렬: 이 옵션을 사용하여 탭에 표시되는 콘텐츠 정렬을 설정합니다.
  • 배경 유형: 클래식 또는 그라데이션 배경 유형을 선택할 수 있습니다.
  • 텍스트 색상: 탭에 표시할 콘텐츠의 텍스트 색상을 선택합니다.
  • 텍스트 타이포그래피: 이 옵션을 사용하여 콘텐츠 텍스트의 타이포그래피를 사용자 정의할 수 있습니다.
  • 테두리 유형: 실선, 이중, 점선, 파선 또는 홈과 같은 사용 가능한 옵션에서 콘텐츠의 테두리 유형을 선택합니다.
  • 테두리 너비: 이 옵션으로 콘텐츠에 적용되는 테두리 너비를 조정할 수 있습니다.
  • 패딩: 패딩을 조정하여 콘텐츠 텍스트와 테두리 사이의 간격을 허용하여 정리되고 깔끔하게 보이도록 합니다.
  • 테두리 색상: 이 옵션을 사용하여 콘텐츠 테두리 색상을 사용자 정의할 수 있습니다.
  • 테두리 반경: 콘텐츠 부분에 테두리를 적용한 경우 이 옵션을 사용하여 반경을 조정할 수 있습니다.

따라서 PowerPack Addons의 Elementor용 고급 탭 위젯의 콘텐츠 및 스타일 탭을 사용자 지정하는 것이 전부였습니다.

선택에 따라 설치, 활성화 및 변경하십시오. 그것은 그것만큼 간단합니다.

PowerPack의 Elementor 및 Advanced Tabs 위젯을 사용하여 놀라운 "탭 콘텐츠" 만들기

Elementor Page Builder용 PowerPack 고급 탭 가져오기

PowerPack Elementor Addons에서 제공하는 고급 탭 위젯의 모든 기능에 대해 알고 나면 웹사이트에서 이 위젯을 사용하는 것을 좋아할 것입니다.

이 튜토리얼이 PowerPack 고급 탭 위젯을 사용하여 웹사이트를 위한 세련된 "탭"을 만드는 데 도움이 되었기를 바랍니다.

PowerPack Addons의 위젯은 비코더가 몇 분 만에 쉽게 사용할 수 있도록 독창적인 코더에 의해 놀랍게 설계되었습니다.

PowerPack 고급 탭 위젯을 가져오고 웹사이트의 모양과 사용자 경험을 향상시키려면 여기를 클릭하십시오.

이 기사를 재미있게 읽었다면 다른 PowerPack 요소도 경험하고 싶을 것입니다.

여기에 의견을 남겨주세요. 귀하의 회신을 받고 싶습니다.
또한 Twitter, Facebook 및 YouTube에서 우리와 함께 하십시오.