Jak dodać sekcję akordeonu z automatycznym zamykaniem w Elementor

Rifat E May 27, 2022

Jeśli używasz Elementora , być może zastanawiasz się, jak sprawić, by widżet akordeonu zwijał się automatycznie. Jako sekcja przełączania lub FAQ możesz użyć własnego bloku akordeonu Elementora. Twój akordeon może pomieścić wiele przedmiotów. Gdy odświeżysz stronę, zawsze otworzy się ona z pierwszym elementem wybranym jako domyślny. Elementor nie ma funkcji, które pozwalająby to kontrolować. Nie możesz go wyłączyć na pulpicie nawigacyjnym Elementora. W swojej witrynie możesz zamknąć pozycje.

Pokażemy Ci, jak automatycznie zamknąć widżet Akordeon Elementora, wykonując czynności opisane w tym poście.

Konfiguracja widżetu akordeonu

W stanie domyślnym element akordeonu można zamknąć na wiele sposobów. Alternatywnie widget Absolute Addons Advanced Accordion może być użyty do wykonania tego samego zadania jednym kliknięciem myszy.

Metoda ręczna

Dodanie JavaScript do widżetu akordeon Elementor to jedyny sposób, aby zrobić to ręcznie. Dodaj widżet akordeon do nowej strony i zacznij dodawać swoje produkty.

Twórz niesamowite strony internetowe

Z najlepszym darmowym kreatorem stron Elementor

Zacząć teraz

Następnie dodaj blok kodowania HTML przed widżetem akordeonu.

Możesz dodać następujący kod JavaScript w bloku HTML w tej samej sekcji przed akordeonem.

<script>
if(window.outerWidth < 425) {
alert('jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
$('.elementor-tab-content').css('display', 'none'); }, delay);
}); ');
}
</script>

Teraz zapisz zadanie, klikając „aktualizuj” i sprawdź na aktywnej stronie. Do tej pory Twój akordeon będzie domyślnie zamknięty.

Wtyczka Absolute Addons

Jeśli nie czujesz się komfortowo dodając kod, możesz zainstalować wtyczkę Absolute Addons, a następnie dodać Advance Accordion Widget.

Przejdź do wtyczek i przejdź do Dodaj nowy.

Teraz poszukaj wtyczki o nazwie „Absolute Addons”. Gdy go znajdziesz, kliknij zainstaluj, a następnie aktywuj wtyczki.

Utwórz sekcję w Elementorze, klikając ikonę „+”, a następnie wyszukując Advance Accordion w sekcji bloku lewego paska po zainstalowaniu i aktywacji wtyczki. Upuść blok Advance Accordion do nowej sekcji, którą właśnie utworzyłeś.

Możesz teraz wybrać styl Akordeon z menu rozwijanego na karcie Treść. Obszar Advance Accordion oferuje trzynaście unikalnych i profesjonalnie wyglądających stylów do wyboru. Masz szeroki wachlarz możliwości, jeśli chodzi o modę.

W opcji Accordion Controller zobaczysz opcje Expand First Time. Dopóki pierwszy element pozostanie włączony, zachowasz jego stan rozszerzony. Zamknij pierwszy element, wyłączając opcję.

Zawijanie

Elementor umożliwia ustawienie domyślnego zamykania widżetu Akordeon po wykonaniu instrukcji. Teraz możesz użyć Elementor Cloud do hostowania swojej witryny z większym bezpieczeństwem i wygodą. Postępuj zgodnie z naszymi innymi samouczkami Elementor , aby dodać nową falę do swoich dalszych projektów tworzenia stron internetowych.

Divi WordPress Theme