Elementor에서 기본적으로 아코디언을 어떻게 닫아두나요?

Elementor는 워드프레스에서 가장 많이 사용되고 사용자 정의가 가능한 페이지 빌더입니다. 하지만 사용자가 직접 변경할 수 있는 옵션을 찾지 못하는 몇 가지 사항이 있습니다. 

예를 들어 아코디언 위젯의 콘텐츠는 기본적으로 열려 있습니다. 많은 사람들이 닫기를 원하지만 닫을 수 있는 옵션을 찾지 못합니다.

그렇다면 Elementor에서 기본적으로 아코디언을 어떻게 닫아 놓을 수 있을까요?

Elementor에서 아코디언 항목을 기본적으로 닫아두려면 아코디언 위젯의 콘텐츠 탭 >> 상호 작용. “기본 상태” >> “모두 접힘” 옵션을 클릭한 다음 게시.

그래서 여기에서는 다음과 같은 3가지 쉬운 방법을 알려드립니다. Elementor에서 기본적으로 아코디언을 닫은 상태로 유지합니다.. 

이제 시작해 보겠습니다!

아코디언 항목을 닫거나 접어서 보관하는 안정적인 방법

사용 시 Elementor의 아코디언 위젯, 의 “첫 번째 항목” 또는 “첫 번째 슬라이드”를 클릭합니다. 아코디언은 기본적으로 열려 있습니다.. 그리고 문맥을 읽을 수 있습니다. 하지만 이것이 선호하지 않을 수도 있습니다.

지금까지 알아본 바와 같이, Elementor는 닫는 설정이나 기본적으로 아코디언 슬라이드 접기.

하지만 걱정하지 마세요. 옛날 일이니까요. 이제 원하는 대로 아코디언을 닫거나 열 수 있습니다. 이제 Elementor에 기본 설정이 제공됩니다.

또한, 시도와 테스트 끝에 두 가지 더 쉬운 방법을 발견했습니다.

아래 3가지 방법을 사용하여 아코디언을 닫거나 열 수 있습니다.

• 방법 1: Elementor의 설정 사용(무료 방법)
• 방법 2: 간단한 CSS 코드 사용(Elementor PRO 필요)
• 방법 3: 자바스크립트 코드 사용(고급 사용자를 위한 무료)

방법 1: Elementor의 설정 사용

이것은 가장 쉬운 솔루션입니다. 아코디언 항목 닫힘 또는 접힘. Elementor의 기본 설정에서 사용할 수 있습니다. 코딩이 필요 없는 초보자 방법이기도 합니다. Elementor 무료 사용자를 위한 것입니다.

여기 단계를 따라 시작해 보겠습니다:

• 아코디언 섹션이 있는 Elementor 편집기에서 페이지를 엽니다.

• 아코디언 위젯에서 항목을 선택합니다.

• 왼쪽 사이드바에서 콘텐츠 탭 >> 상호 작용.

• 기본 상태를 다음과 같이 설정합니다. 모두 접힘.

• 게시 지금.

여기까지입니다!

팁: 확장되는 최대 항목을 1로 설정합니다(선택 사항). 깔끔한 사용자 환경을 위해 적극 권장합니다. 디자인에 맞게 애니메이션 속도와 아이콘 스타일을 자유롭게 조정할 수 있습니다.

이제 중요한 질문입니다! Elementor 무료 버전에서도 작동하나요? 

네, 맞습니다! 최신 버전을 사용 중인 경우에만 가능합니다. 이 기능은 Elementor 무료에서 사용할 수 있습니다.

방법 2: 간단한 CSS 코드 사용(Elementor PRO 필요)

기본 제공 토글을 사용할 수 없는 이전 사이트 또는 템플릿에서 작업하는 경우(업데이트 전) CSS를 사용하면 다시 디자인하지 않고도 빠르게 수정할 수 있습니다. 따라서 이 방법을 따라 다음과 같이 하면 아코디언 아이템 마감 또는 접혔습니다. 하지만 이는 Elementor Pro 사용자에게만 해당됩니다.

• 아코디언 섹션이 있는 Elementor 편집기에서 페이지를 엽니다.

• 아코디언 위젯을 선택합니다.
• 왼쪽 사이드바에서 콘텐츠 탭 >> 레이아웃.

• 첫 번째 아코디언 항목을 복제합니다(참고 - 전체 위젯이 아닌 첫 번째 항목만 복제하세요).

• 아래 제공된 CSS 코드를 복사합니다.

.elementor-아코디언 .elementor-아코디언-item:first-of-type {

표시: none;}

.elementor-아코디언 {

  테두리-위: 1px 솔리드 #D4DFF2C7;

}

• 아코디언 위젯의 고급 탭으로 이동합니다.

• 그런 다음 아래로 스크롤하여 사용자 정의 CSS 필드에 CSS 코드를 붙여넣습니다.

• 지금, 게시 페이지로 이동합니다.

CSS를 붙여넣어 페이지를 업데이트한 후 첫 번째 중복된 아코디언 항목 은 숨겨지고 나머지 항목은 원하는 대로 기본적으로 접혀집니다.

방법 3: 자바스크립트 코드 사용

버전 문제로 인해 첫 번째 방법을 놓쳤거나 Elementor Pro가 없어 두 번째 방법을 사용하지 못했다면 이 무료 방법을 따르세요. 

이 방법에서는 HTML 위젯과 아코디언을 닫는 데 도움이 되는 작은 코드를 추가하기만 하면 됩니다. 방법은 다음과 같습니다.

• 아코디언 섹션이 있는 Elementor 편집기에서 페이지를 엽니다.

• 아코디언 위젯 바로 위에 요소 패널의 “HTML 위젯'을 배치합니다.

• 아래 제공된 자바스크립트 코드를 복사합니다.

; 

• 위에 제공된 자바스크립트 코드를 HTML 코드 안에 붙여넣습니다.

• 완료되면 페이지를 게시하고 실시간으로 확인합니다.

• 이제 첫 번째 아코디언이 닫힌 상태로 시작됩니다.

전문가 팁: 사이트 전체에서 여러 아코디언 위젯을 사용하고 있고 모든 곳에 동일한 기능을 적용하고 싶으신가요? 자바스크립트 스니펫을 다음 주소에 추가하기만 하면 됩니다. Elementor > 사용자 지정 코드. 이렇게 하면 모든 페이지와 글에서 일관되게 작동합니다.

보너스: 프리미엄 아코디언 템플릿 4개 - 바로 사용 가능

사용 이유 Elementor의 기본 아코디언 기능이 풍부하고 아름다운 디자인의 아코디언 템플릿?

물론 Elementor의 기본 위젯으로도 충분합니다. 하지만 보다 역동적이고 시각적으로 매력적인 경험을 원한다면 좀 더 고급 위젯이 필요합니다.

그리고 Elementor 팩 아코디언 템플릿은 훨씬 더 많은 기능을 제공합니다. 고급 스타일링, 아이콘 통합, 애니메이션 제어, 레이아웃 유연성 등 다양한 기능을 제공합니다. 콘텐츠 프레젠테이션을 즉시 향상시킬 수 있습니다.

FAQ, 서비스 분석 또는 대화형 콘텐츠 섹션을 만들 때 이러한 프리미엄 템플릿을 사용하면 시간을 절약하고 수동으로 사용자 지정하는 번거로움 없이 세련된 디자인을 제공할 수 있습니다.

Element Pack에서 제공하는 5가지 프리미엄 아코디언 템플릿을 소개합니다:

아코디언 01: 현대적이고 반응이 빠른 아코디언, FAQ 또는 스포일러로 콘텐츠를 구성하는 데 사용됩니다.

아코디언 02: 깔끔하고 반응이 빠른 아코디언 레이아웃으로 가독성을 높였습니다.

아코디언 03: 반응형 아코디언으로 FAQ 또는 스포일러 콘텐츠를 깔끔하게 표시하세요.

아코디언 04: 최신 아코디언 위젯을 사용한 손쉬운 콘텐츠 관리.

아코디언 05: 페이지 로드 시 특정 아코디언 또는 탭을 즉시 열어주는 해시 기반 URL을 활성화하여 원활한 사용자 탐색 기능을 제공합니다.

자주 묻는 질문

마지막 단어

최신 버전의 Elementor로 작업하는 경우. Elementor의 기본 상태 설정은 모든 아코디언 항목을 기본적으로 닫아두는 가장 쉽고 효과적인 방법입니다.

이 방법은 몇 번의 클릭만으로 깔끔한 경험을 보장합니다. 사용자 지정 코드가 필요하지 않습니다. 이 기본 제공 기능은 기술적인 조정 없이 빠른 결과를 원하는 크리에이터에게 이상적입니다.

그러나 이전 버전의 Elementor를 사용하는 경우. 아코디언의 동작 방식을 보다 세밀하게 제어해야 합니다. 특정 위젯을 타겟팅하거나 애니메이션을 사용자 지정하거나 테마 충돌을 무시하는 등의 작업이 필요합니다. 그렇다면 자바스크립트 또는 CSS 기반 접근 방식을 사용하는 것이 더 나은 방법일 수 있습니다.

수동 스타일링을 완전히 건너뛰고 싶다면 또 다른 스마트한 옵션이 있습니다. Element Pack Pro에서 제공되는 기성 아코디언 템플릿을 사용할 수 있습니다.

이러한 템플릿은 전문적으로 디자인되고 완벽하게 반응하며 실제 사용성을 염두에 두고 제작되었습니다. FAQ, 서비스 분석 또는 대화형 콘텐츠 섹션을 만들 때 유용합니다. 이러한 사전 구축된 레이아웃은 시간을 절약하고 매끄러운 결과물을 제공합니다.