Elementor로 고급 아코디언을 만드는 방법

웹사이트 방문자는 빠른 정보를 확인하고 관심사에 따라 축소할 수 있는 축소형 섹션을 좋아합니다. 따라서 잘 사용자 정의된 고급 아코디언은 WordPress 사이트를 깔끔하게 유지하고 사용자 경험을 원활하게 하는 데 도움이 됩니다.

이 가이드에서는 Elementor를 사용하여 고급 아코디언을 만드는 단계별 과정을 안내해 드리겠습니다.

아코디언이란?

아코디언은 WordPress 웹페이지에서 콘텐츠를 숨기거나 표시할 수 있는 접이식 요소입니다.
아코디언을 사용하여 정보를 섹션으로 구성할 수 있습니다. 섹션은 필요에 따라 확장하거나 축소하여 공간을 절약하고 사용자 경험을 개선할 수 있습니다.

WordPress 사이트 디자인에서 고급 아코디언을 사용하는 이점

⭕ 고급 아코디언 Elementor는 정보를 제공하는 깔끔하고 체계적인 방법을 제공합니다.

⭕ 할 수 있습니다 페이지 로드 시간 단축 덜 중요한 콘텐츠를 아코디언에 숨겨서. 또한 웹사이트의 검색 엔진 순위를 개선할 수도 있습니다.

⭕ 고급 아코디언을 사용하여 추가 정보에 액세스하는 것은 쉽습니다. 따라서 사용자가 탐색하도록 장려 귀하의 웹사이트를 더욱 발전시킵니다. 또한, 아코디언은 다양한 디자인 스타일과 레이아웃에 적응할 수 있습니다.

⭕ WordPress 고급 아코디언을 디자인할 수 있습니다. 장애가 있는 사용자 허용 정보에 접근하려면.

소개 ElementsKit의 모듈 및 위젯 😍😍😍

어떻게 Elementor에서 고급 아코디언 만들기

아코디언 위젯은 Elementor에 포함되어 있지만, 스타일 옵션이 제한될 수 있습니다. 더 고급 사용자 정의를 원하신다면 Elementor 애드온을 사용하는 것을 고려하세요. 

여기, 우리는 ElementsKit을 선택했습니다. 플러그인 offers an Advanced Accordion widget 당신이 할 수 있도록 허용 시각적으로 더 매력적이고 기능적인 웹사이트를 만들어보세요.

ElementsKit로 아코디언을 만드는 방법

아코디언 위젯은 WordPress 웹사이트에서 접을 수 있는 섹션을 만들 수 있는 위젯 유형입니다. 콘텐츠를 여러 섹션으로 구성하는 방법을 제공하며, 각 섹션은 확장하거나 축소하여 콘텐츠를 표시할 수 있습니다. 이는 종종 간결하고 사용자 친화적인 방식으로 정보를 표시하는 데 사용됩니다.

1단계: ElementsKit 플러그인 받기

WordPress 대시보드에 액세스:
1. 플러그인으로 이동
2. 새 플러그인 추가를 클릭하세요.
3. ElementsKit 검색
4. 찾으면 지금 설치 버튼을 클릭하세요.

당신은 또한 수 WordPress.org에서 ElementsKit 플러그인을 다운로드하세요 빠르게. 그 후, 대시보드의 플러그인 섹션에 업로드하기만 하면 됩니다.

하지만, Advanced Accordion은 ElementsKit의 Pro 위젯입니다.. 늦지 마세요! 유연한 플랜을 선택하여 즐겨보세요 고급 아코디언을 쉽게 만들 수 있습니다.

2단계: 플러그인 활성화

플러그인을 설치한 후에는 활성화해야 합니다.

3단계: 고급 아코디언 위젯 켜기

1. ElementsKit로 이동
2. 위젯 찾기
3. 고급 아코디언을 찾아 토글 버튼을 켭니다.
4. 변경 사항 저장을 클릭하세요

4단계: 대시보드에서 페이지 열기 

1. 페이지로 이동
2. 기존 페이지를 열거나 새 페이지를 추가합니다.
3. Elementor로 편집을 클릭하세요(새 페이지의 경우 페이지를 연 후 이 옵션을 찾을 수 있습니다)

5단계: 편집기에 고급 아코디언 추가

위젯 이름으로 검색하거나, 위젯을 클릭하거나, 편집기로 끌어다 놓으세요.

6단계: 사용자 정의 옵션 살펴보기

콘텐츠 부분에서는 다음을 볼 수 있습니다.

• 아코디언:
  • 콘텐츠: 여기에서 콘텐츠를 추가하고, 제목을 편집하고, '이것을 열어두기' 버튼을 전환할 수 있습니다.
  • 첫 번째 슬라이드를 자동으로 열어두기: 첫 번째 슬라이드를 열어두려면 이 버튼을 켜면 됩니다.
  • 아약스: 이 옵션을 활성화하면 아코디언에서 관련 콘텐츠만 업데이트하여 더 매끄러운 사용자 경험을 제공합니다. 이는 특히 많은 수의 아코디언 항목을 처리할 때 유용할 수 있습니다.
  • 스타일: 선택할 수 있는 아코디언 스타일은 여러 가지가 있습니다.
• 상:
  • 아이콘 위치: 여기에서 아이콘 위치를 설정하세요.
  • 루프 카운트 표시: 루프 횟수를 표시할 수도 있고 숨길 수도 있습니다.
  • 오른쪽 아이콘: 오른쪽을 가리키는 기호를 선택하세요. 아코디언 항목의 확장을 나타냅니다.
  • 오른쪽 아이콘 활성화: 클릭하거나 탭했을 때 오른쪽 아이콘의 상태를 나타내는 아이콘을 선택하세요.

스타일 부분에서는 다음 옵션을 활용하여 아코디언을 사용자 정의할 수 있습니다.

• 제목: 여기에서 변경할 수 있습니다 제목의 타이포그래피, 색상, 배경 유형, 상자 그림자, 하단 여백 등을 지정합니다.
• 콘텐츠: 아코디언 콘텐츠의 스타일을 지정하려면 다양한 색상, 타이포그래피, 테두리 반경, 패딩 등을 사용할 수 있습니다.
• 국경: 각 탭이나 아코디언의 테두리 유형, 너비, 색상, 상자 그림자 등을 변경하려면 이 옵션을 활용하면 됩니다.
• 상: 아이콘의 여백, 색상, 크기를 조정할 수 있습니다.

That’s the long and short of how to create accordion with Elementor! ✌️

Elementor Accordion 위젯 대신 ElementsKit Advanced Accordion 위젯을 선택해야 하는 이유는 무엇인가요?

ElementsKit Advanced Accordion과 Elementor Accordion의 차이점을 알아보겠습니다.

Besides creating advanced accordions, you can create image accordions with ElementsKit to captivate your audience effectively. 👌

이제 당신의 차례입니다

이제 직접 시도해 보세요! ElementsKit을 사용하면 효과적으로 뛰어난 고급 아코디언을 통합합니다 귀하의 웹사이트 디자인에 반영하세요.

당신을 위한 팁 –

⭐ 원하는 모양과 기능을 구현하기 위해 다양한 사용자 정의 옵션을 실험해 보세요.

⭐ 웹사이트의 전반적인 디자인을 고려하세요.

⭐ 다양한 기기와 브라우저에서 최종 출력을 테스트하세요.
⭐ 아코디언을 정기적으로 업데이트하세요.