모든 엘리멘터 토글 아코디언 위젯 항목이 항상 열린 상태로 표시되도록 설정하는 방법

워드프레스 정보를 제공하는 블로그 Avada 2023. 1. 30. 00:37 • 댓글:

엘리멘터에서 토글이나 아코디언 위젯을 사용하여 자주 묻는 질문(FAQ) 등을 표시할 수 있습니다. 토글은 개별 항목이 독립적으로 작동하고 아코디언은 한 번에 하나 항목만 열립니다.

엘리멘터 토글

이 글에서는 모든 엘리멘터 토글 위젯 항목들이 열린 상태로 표시되도록 설정하는 방법에 대하여 살펴보겠습니다.

모든 엘리멘터 토글 아코디언 위젯 항목이 항상 열린 상태로 표시되도록 설정하는 방법

엘리멘터 페이지 빌더의 모든 토글 위젯 항목들이 열린 상태로 표시하고 싶은 경우 다음과 같은 CSS 코드를 사용할 수 있습니다.

.elementor-toggle .elementor-tab-content {
    display: block !important;
}

위의 코드를 사용하면 토글 항목들은 모두 열린 상태가 됩니다. 반면에 아코디언은 한 번에 하나씩만 열릴 수 있으므로, 모든 항목들이 열리도록 하려면 아코디언(Accordion) 위젯이 아닌 토글(Toggle) 위젯을 사용해야 합니다.

모든 엘리멘터 토글 아코디언 위젯 항목이 항상 열린 상태로 표시되도록 설정하는 방법

토글이 여러 개인 경우 특정 토글에만 적용하고 싶은 경우에는 원하는 토글에 CSS 클래스를 지정한 다음, 해당 토글에만 CSS 스타일이 적용되도록 하면 됩니다.

엘리멘터 토글 편집 패널에서 Advanced(고급)를 클릭하고  CSS Classes(CSS 클래스) 필드에 커스텀 클래스를 지정하도록 합니다.

엘리멘터 토글 아코디언

엘리멘터 한글 버전:

만약 CSS 클래스 필드에 [**toggle01**]을 입력했다면 다음과 같은 CSS 코드를 사용하여 해당 토글의 항목들만 항상 열린 상태로 표시되도록 할 수 있습니다.

.toggle01 .elementor-toggle .elementor-tab-content {
    display: block !important;
}

특정 토글 위젯 항목만 열리도록 하고 싶은 경우에는 다음과 같은 코드로 시도해 볼 수 있습니다.

.elementor-toggle #elementor-tab-content-2321 {
    display: block !important;
}

탭 ID 부분은 적절히 변경하시기 바랍니다.

CSS 코드는 엘리멘터 프로를 사용하는 경우 Advanced(고급) 탭 » Custom CSS(사용자 정의 CSS)에 직접 추가할 수 있고, 엘리멘터 무료 버전을 사용하는 경우 워드프레스 관리자 페이지 » 외모 » 사용자 정의하기 » 추가 CSS 섹션에 추가할 수 있습니다. 

CSS는 그리 어렵지 않습니다. 기본적인 CSS를 이해하면 위의 코드들을 쉽게 응용할 수 있을 것입니다.

엘리멘터 토글과 아코디언 차이점

엘리멘터 페이지 빌더의 토글과 아코디언 위젯의 차이점은 다음 글을 참고해 보세요.

 

엘리멘터(Elementor) 토글 위젯과 아코디언 위젯 차이점

자주 묻는 질문(FAQ) 페이지나 Q&A 페이지를 만들 때 토글이나 아코디언이 많이 사용됩니다. 워드프레스 엘리멘터 페이지 빌더에는 토글 위젯과 아코디언 위젯이 제공됩니다. 이 두 위젯의 차이점

avada.tistory.com

참고

https://avada.tistory.com/2897

 

엘리멘터 무료 버전 vs. 프로 버전 비교

엘리멘터(Elmentor)는 500만 개가 넘는 사이트에 설치되어 사용되고 있는 인기 워드프레스 페이지 빌더 플러그인입니다. 엘리멘터는 무료 버전과 프로 버전으로 제공됩니다. Elementor 프로 버전에서

avada.tistory.com

https://avada.tistory.com/2861

 

워드프레스 Divi 테마용 타투샵 레이아웃 팩(Tattoo Shop Layout Pack) 무료 다운로드

베스트셀링 워드프레스 테마 중 하나인 Divi 테마로 유명한 Elegant Themes에서는 무료 레이아웃 팩을 정기적으로 공개하고 있습니다. 최근에는 타투샵(Tattoo Shop) 홈페이지에 사용할 수 있는 타투샵

avada.tistory.com

https://avada.tistory.com/554

 

워드프레스 아바다 테마 라이선스 (테마포레스트 테마)

아바다, 플랫섬, 엔폴드, 뉴스페이퍼 등 유료 워드프레스 테마를 처음 구입하는 사용자들이 자주 하는 질문 중 하나가 테마를 구입한 후 계속 사용이 가능한지 여부입니다. Avada 등 테마포레스테

avada.tistory.com

https://avada.tistory.com/2746

 

모바일에서 엘리멘터 Tabs 위젯의 탭 레이아웃 유지하기

워드프레스 엘리멘터 페이지 빌더의 Tabs 위젯을 사용하여 탭 레이아웃을 쉽게 만들 수 있습니다. 탭은 수평 스타일과 수직 스타일 모두 가능합니다. 하지만 모바일 기기에서는 탭 레이아웃이 유

avada.tistory.com