Elementor Accordion Widget’ı Varsayılan Olarak Kapalı Olarak Ayarlama (3 Yöntem)

Kadir Turan

Elementor, bir Akordeon widget’ıyla birlikte gelir . Toggle widget’ının yanı sıra, Accordion widget’ı SSS veya benzeri bölümler oluşturmak için harikadır. Akordeon widget’ıyla çalışırken istediğiniz kadar öğe ekleyebilirsiniz. (How to Set the Elementor Accordion Widget Closed by Default) Varsayılan olarak, akordeonun ilk öğesi açık olarak ayarlanmıştır ve Elementor, onu kapatmak için varsayılan bir ayar sunmaz. Bazı kullanıcılar için, akordeon eklemenin asıl amacı bilgileri gizlemek olduğundan ve bilgileri görüntülemek için kullanıcı etkileşimi (bir akordeon öğesini tıklatmak) gerektirdiğinden, biraz can sıkıcı olabilir.

Peki, tüm akordeon öğeleri varsayılan olarak nasıl kapatılır? Bunu yapmak için aşağıdaki CSS veya JavaScript’i kodlarını kullanabilirsiniz.

Yöntem 1

CSS kullanarak kolayca bu sorunu çözebilirsiniz. Genelde bu yöntemi kullanıyoruz. Verilen kodların her ikisi de tamamen aynı şekilde çalışacaktır, yani ilk akordeon öğesini gizleyecektir. Akordeon widget’ının gelişmiş ayarlarına gidin ve yukarıdaki CSS kodlarından herhangi birini Özel CSS seçeneğinin içine yapıştırın.

.elementor-accordion .elementor-accordion-item:first-of-type {
display: none;}
.elementor-accordion {
border-top: 1px solid #D4DFF2C7;
}

Yöntem 2

.elementor-accordion .elementor-accordion-item:nth-child(1) {
display: none;
}
.elementor-accordion .elementor-accordion-item:nth-child(2) {
border-top: 1px solid #D4DFF2C7 !important;
}

CSS kodunu eklemeyi tamamladığınızda sayfayı güncelleyin ve değişikliği görün. İlk akordeon öğesi (açık olan) gizlenecek ve geri kalanı, tam olarak ihtiyacımız olan şey olan varsayılan olarak kapalı olarak başlayacak.

Yöntem 3

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

Yukarıdaki kodu kullanmak için HTML widget’ını kullanabilirsiniz. Basitçe HTML widget’ını sürükleyin ve Akordeon widget’ının hemen üstüne yerleştirin. HTML widget’ı eklendikten sonra kodu ayarlar panelindeki HTML Kodu alanına yapıştırın.

Bu kadar. Diğer öğeleri düzenlemeyi tamamladığınızda sayfanızı güncelleyebilirsiniz.

Web sitenizde birden fazla akordeon varsa ve hepsini varsayılan olarak kapalı yapmak istiyorsanız, bunun yerine özel bir kod kullanabilirsiniz. Bunu yapmak için, WordPress kontrol panelinizde Elementor -> Özel Kod‘a gidin . Yeni bir özel kod eklemek için Yeni ekle düğmesine tıklayın .

Özel kodunuza bir ad verin ve kodu yapıştırın. Konum bölümünde , üst bilgi, alt bilgi veya gövde arasından seçim yapabilirsiniz. Kodunuz herhangi bir yerde çalışacaktır. Kodu uygulamak için Yayınla düğmesine tıklayın .

Sonucu kontrol etmek için web sitenizdeki akordeon içeren sayfalardan birini yeniden yüklemeyi deneyin.

Set Elementor Accordion Widget Off by Default (3 Methods)

Elementor comes with an Accordion widget. Besides the Toggle widget, the Accordion widget is great for creating FAQs or similar sections. You can add as many items as you want when working with the accordion widget. (How to Set the Elementor Accordion Widget Closed by Default) By default, the first element of the accordion is set to on and Elementor does not offer a default setting to turn it off. For some users, it can be a bit annoying since the main purpose of adding an accordion is to hide information and it requires user interaction (clicking on an accordion element) to display the information.

So, how to turn off all accordion elements by default? You can use the following JavaScript to do this.

Picture of Kadir Turan

Kadir Turan

Elementor'a dair bildiğim her şeyi yazı ve videolarla paylaşıyorum.

Tüm Yazıları