Bir WordPress sitesi tasarlarken, ziyaretçileriniz için sitenin daha profesyonel ve kullanıcı dostu görünmesini sağlamak için yapabileceğiniz birçok farklı şey vardır. WordPress’i her türlü şekilde genişletme yeteneğiyle birlikte gelen birçok mevcut WordPress teması ve eklentisi sayesinde, seçenekleriniz hemen hemen sınırsızdır. Böyle bir seçenek, WordPress sayfalarınıza veya yayınlarınıza bir akordeon eklemektir. İster bir SSS bölümü, bir açılış sayfası oluşturmayı planlıyor olun, ister yalnızca sitenize daha düzenli ve derli toplu bir görünüm vermek isteyin, bu yararlı öğe tam da ihtiyacınız olan şeydir.
Bu sefer, WordPress’te akordeonlar ve düğmeler oluşturmayı ve eklemeyi öğrenmenize yardımcı olmaya karar verdik. Doğru eklentinin yardımını kullanırsanız bu oldukça kolaydır. Qi Addons for Elementor eklentisinden Accordions and Toggles widget’ını kullanarak bunu nasıl yapacağınızı size göstereceğiz. Ama önce, akordeon ve geçişlerin ne olduğundan biraz bahsedeceğiz ve ikisi arasındaki temel farkı da açıklayacağız.
Kemerlerinizi bağlayın ve okumaya devam edin:
-
WordPress’te Akordeonlar ve Geçişler Nelerdir?
-
Akordeon ve Toggle Arasındaki Fark Nedir?
-
Akordeonlar ve Geçiş Düğmeleri Ne Zaman Kullanılır?
-
Elementor Eklentisi için Qi Eklentilerini Kullanarak Akordeonlar ve Geçişler Ekleme
WordPress’te Akordeonlar ve Geçişler Nelerdir?
Özetle, akordeonlar ve düğmeler, çeşitli bölümleri (veya içerik parçalarını) tek bir kompakt birimde düzenlemek için kullanılan tasarım öğeleridir. Bu genellikle kolayca genişletilebilen sekmelerle ayrılmış farklı bölümler oluşturmak anlamına gelir. Sayfada yer tasarrufu sağlarken bu bölümlere bol miktarda içerik eklemenize izin verdiğinden, bu onları özellikle kullanışlı hale getirir.
Örneğin bir SSS sayfası (ziyaretçilerinizin veya potansiyel müşterilerinizin en sık sorduğu soruların yanıtlarını içeren bir sayfa) oluşturmak istediğinizi varsayalım. Akordeonları ve geçiş düğmelerini kullanarak, soruları ve cevapları genişletilebilir bir sekmede soruları gösterecek ve cevapları ortaya çıkaracak şekilde organize edebileceksiniz. Fakat akordeonları ve geçiş düğmelerini ne için kullanmanız gerektiğine bakılmaksızın, sayfanızda bol miktarda alan kazanmanıza ve içeriğinizin bir bütün olarak daha düzenli görünmesini sağlamaya yardımcı olacak, oldukça kullanıcı dostu bir stratejidir.
Akordeon ve Toggle Arasındaki Fark Nedir?
Benzer görünmelerine rağmen, akordeonlar ve geçiş düğmeleri bazı farklılıklara sahiptir. Özellikle, bir akordeonun bir bölümü tıklandığında, gizli içeriğini göstererek genişler. Başka bir bölüme tıklandığında, diğeri genişledikçe önceki bölüm otomatik olarak kapanır. Yani bir akordeonda aynı anda yalnızca bir bölüm açık olabilir.
Öte yandan, bir geçiş, başka bir bölüm genişletildiğinde bile önceki bölümü açık tutmanıza olanak tanır. Elbette, isterseniz her bölümü manuel olarak kapatabilirsiniz.
Bu durum bir toggle ve bir akordeon arasındaki temel farktır – her ikisi de aynı işleve sahiptir (fazladan içeriği saklamak ve yerden tasarruf sağlayacak ve kullanıcı dostu görünecek şekilde düzenlemenize yardımcı olur), fakat bir sayfada kullanıldıklarında farklı davranışlar sergilerler.
Kısacası, akordeonlar yalnızca bir bölümü açmanıza izin verirken, geçişler aynı anda birden fazla bölümün açılmasına izin verir.
Akordeonlar ve Geçiş Düğmeleri Ne Zaman Kullanılır?
Daha önce belirlediğimiz gibi, akordeonlar ve geçiş düğmeleri yerden tasarruf etmek ve içeriğinizi düzenlemek için harikadır. Bu yüzden bir sayfada bol miktarda bilgi sağlamak ve aynı zamanda ziyaretçileriniz için düzenli ve düzenli tutmak istediğinizde bunları kullanabilirsiniz. Örneğin açılış sayfanızda veya online mağazanızda bir ürün veya hizmetle ilgili farklı bilgi parçalarını düzenlemek istediğinizde veya işletmeniz veya hatta online portföyünüz için yukarıda bahsedilen bir SSS sayfası oluşturmak istediğinizde. Karmaşık talimatlar içeren herhangi bir içerik parçası yazmanız gerektiğinde bile bunları kullanabilirsiniz. Bu durumda, farklı adımları farklı bölümlerde gruplandırmak için akordeonları ve/veya geçiş düğmelerini kullanabilir ve böylece her adımı okuyucular tarafından daha kolay sindirilebilir hale getirebilirsiniz.
Genel olarak, WordPress’te akordeon ve geçişleri ne zaman kullanmanız gerektiğine dair bir sınır yoktur. Bunun sizin için yararlı olup olmayacağına ve genel site tasarımınıza uygun olup olmayacağına karar vermeniz yeterlidir.
Bir toggle yerine akordeon kullanmayı veya tam tersini yapmayı tercih ederseniz edin, Elementor için Qi Eklentileri eklentimizi ve Akordeonlar ve Geçişler widget’ını kullanarak, bu seçeneklerin her ikisine de erişebileceksiniz. WordPress’te akordeon ve geçiş ekleme sürecinde size rehberlik ederken bizi izlemeye devam edin. Hazır hazır gelmişken size bu kullanışlı widget ile yapabileceğiniz bazı farklı tasarım stillerini de göstereceğiz.
Okumak yerine video izlemeyi tercih ederseniz, aynı konuyla ilgili eğitim videomuz da var, bu yüzden mutlaka izleyin:
Elementor Eklentisi için Qi Eklentilerini Kullanarak Akordeonlar ve Geçişler Ekleme
60 farklı widget ile gelen Qi Addons for Elementor, WordPress sitenizin tamamen özelleştirilmesini sağlayan harika bir eklentidir. Hiçbir kodlama kullanmadan sadece dakikalar içinde web sitenizin tasarımına tamamen uyan güzel bölümler oluşturabilirsiniz. Yaratıcı ve iş odaklı eklentilerden bilgi grafikleri ve tipografi öğelerine kadar, tümü kendi son derece esnek özellikleriyle birlikte gelen, kullanabileceğiniz çeşitli eklenti türleri vardır. Kısacası, Elementor için Qi Eklentileri kullanıyorsanız, ne tür bir web sitesi için kullanmak isterseniz isteyin, özelleştirme seçenekleriniz hemen hemen sınırsızdır.
Bu eklentiyle birlikte gelen harika bir widget, Akordeonlar ve Geçişler widget’ıdır. Bu koleksiyondaki diğer tüm widget’lar gibi, akordeonlarınızı ve geçişlerinizi istediğiniz şekilde oluşturmanıza, özelleştirmenize ve stil vermenize olanak tanıyan bir dizi tamamen esnek seçenekle birlikte gelir. Akordeonları ve geçişleri açmak ve kapatmak, yazı tiplerini değiştirmek, metniniz, arka planınız ve simgeleriniz için farklı renkleri kullanıp birleştirmek ve çok daha fazlası için özel simgeler ayarlayabileceksiniz.
Şimdi widget ayarlarını daha ayrıntılı olarak inceleyeceğiz ve çeşitli stillerde akordeonlar ve geçişler elde etmek için farklı seçenekleri nasıl değiştirebileceğinizi ve birleştirebileceğinizi göstereceğiz.
Bununla birlikte eğitimimize başlamadan önce, kısa ama bariz bir not – Elementor için Qi Eklentileri, Elementor sayfa oluşturucu için geliştirilmiş bir eklentidir. Bu yüzden Qi eklentimizi ve widget’larını kullanmak için önce Elementor sayfa oluşturucuyu yüklemeniz gerekir. Bu inanılmaz derecede kullanıcı dostu ve zengin özelliklere sahip oluşturucunun nasıl kullanılacağı hakkında daha fazla bilgiye ihtiyacınız olursa, her zaman Elementor eğitimimize göz atabilirsiniz.
Akordeonlar ve Geçişler Widget’ını Ekleme ve Özelleştirme
Her şeyden önce, sayfanızın veya yayınınızın arka ucuna gidin ve Elementor kenar çubuğunda akordeonları ve geçişleri arayın. Widget’ımız hemen gelecek.
Daha sonra sağa doğru sürüklemeniz yeterlidir. Bu noktada, Stil sekmesine geçmeden önce, widget’ın İçerik sekmesinde özelleştirmenin çoğunu yapacağız.
Burada fark edeceğiniz ilk şey, varsayılan olarak pencere öğesinin bazı varsayılan Lorem Ipsum metinleriyle birlikte iki öğeye sahip olmasıdır.
Ayrıca bir öğeye tıkladığınızda diğer öğenin kapanacağını da fark edeceksiniz – bu Akordeon tipi bir davranıştır.
Bu davranış, Genel bölümündeki (İçerik sekmesi) Davranış seçeneği kullanılarak kolayca Geçiş Yap olarak değiştirilebilir.
Bunu yaptıktan sonra, üzerlerine tıkladığınızda her iki öğenin de açık kalacağını fark edeceksiniz. Kısacası, Toggle davranışı, tüm öğelerinizi aynı anda açık tutmanıza olanak tanır.
Bu temel değişikliğin yanı sıra, hem Akordeon hem de Geçiş davranışı için diğer tüm ayarlar aynıdır.
Artık Toggle’ın ne yaptığını gösterdiğimize göre, Akordeon davranışına geri döneceğiz ve diğer tüm seçenekleri gözden geçireceğiz, fakat elbette tercih ettiğiniz davranış türünü kullanabilirsiniz.
Altında bulunan Stil seçeneğine geçmek – varsayılan olarak Standart olarak ayarlanmıştır, fakat bunu Kutulu (her öğenin altı çizili olacak şekilde), Üst Kenarlık (her öğenin üzerine bir kenarlık yerleştirilecektir) ve Arasındaki Kenarlık () olarak değiştirebilirsiniz. öğe başlıkları arasına bir kenarlık yerleştirilir). Örneğimiz için, bu seçeneği Border Top olarak ayarladık.
Sırada Simgeyi Aç ve Simgeyi Kapat seçenekleri var. Burada simge kitaplığından açık ve kapalı simgelerinizi seçebilecek veya bir SVG yükleyebileceksiniz (bizim yaptığımız gibi).
Açık ve kapalı simgelerinizi seçmeyi tamamladığınızda Medya Ekle düğmesine basın.
Artık öğeleri açarken ve kapatırken (tıpkı olması gerektiği gibi) açık ve kapalı simgeleriniz otomatik olarak değişecektir.
Öğeler ayarlarına gelince, varsayılan olarak iki öğe olduğunu fark edeceksiniz. Öğe Ekle’ye tıklayarak kolayca yenilerini ekleyebilirsiniz. Bir parça daha ekledik, böylece akordeonumuz artık üç parçadan oluşuyor.
Öğelerinizdeki içeriği değiştirmek için değiştirmek istediğiniz Öğeye tıklayın ve başlığınızı Başlık alanına girin. Metninizin görünümünü daha ayrıntılı olarak değiştirmek için İçerik alanını da kullanabileceksiniz. Ek olarak Görsel ve Metin modu arasında seçim yapabilirsiniz (ikincisi, metne stil vermek için herhangi bir kod veya CSS eklemek isteyen herkes için harikadır).
Örneğimiz için akordeonumuzu SSS bölümüne dönüştürdük. Başlıklarımızın yanı sıra diğer öğelerin (İçerik alanını kullanarak) metnini başlıklarla eşleşecek şekilde değiştirdik. Elbette hem başlıklar hem de öğeler metni için kendi içeriğinizi ekleyeceksiniz.
Widget’ı Şekillendirme
Şimdi Stil sekmesinde, akordeonlarınızı istediğiniz gibi şekillendirmenize olanak tanıyan birçok seçenek göreceksiniz.
Listedeki ilk seçenek, başlık etiketinizi ayarlamanıza izin verecektir. Varsayılan olarak H3’e ayarlıdır, fakat H1’den H6’ya kadar herhangi bir şeyi seçebilirsiniz (bizimkini H5 olarak değiştirdik).
Tipografi bölümüne tıklamak, akordeonlarınızın tipografisini tüm ayrıntılarıyla belirlemenize yardımcı olacak yeni bir seçenekler listesi açar.
Aile seçeneği, metninizin yazı tipi ailesini değiştirmenize olanak tanır – adını manuel olarak girebilir veya açılır menüdeki listeden istediğiniz yazı tipini arayabilirsiniz (bizimki varsayılan olarak ayarlanmıştır).
Boyut seçeneği, yazı tipi boyutunu ayarlamanıza yardımcı olur. Bizimkini 21px olarak ayarladık.
Daha sonra Ağırlık seçeneği var. Bunu Kalın olarak ayarlayabilir veya yalnızca sayısal değerlerden birini kullanabilirsiniz (ağırlığımızı Varsayılan olarak bıraktık).
Metin Dönüştürme seçeneğiyle, başlığı Büyük Harf, Küçük Harf, Büyük Harf veya Normal (bu bizim varsayılan ayarımızdır) yapabileceksiniz. Tarza gelince, Normal görünmesini sağlayabilir, İtalik veya Eğik hale getirebilirsiniz.
Ayrıca Altı Çizili, Üstü Çizili, Satır İçi ayarlamanıza veya bunların hiçbirini kullanmamanıza (bu aynı zamanda varsayılan ayarımızdır) izin veren Dekorasyon seçeneği de vardır.
Satır Yüksekliği seçeneği, başlığın çevresinde daha fazla alan oluşturulmasına yardımcı olur. Bu ayar için varsayılan değer ems cinsindendir, fakat isterseniz bunu kolayca piksele değiştirebilirsiniz.
Son olarak Harf Boşluğu seçeneği size harfler arasında daha fazla boşluk sağlar.
Ve tipografi ile ilgili seçenekler için bu kadar.
Daha sonra, Normal ve Aktif mod arasında seçim yapmanızı sağlayacak ayarları bulacaksınız. Aktif mod, açıldığında akordeon öğesinin görünümünü şekillendirmenize izin verirken, Normal, aktif olmayan diğer akordeon öğelerinin görünümünü şekillendirmenize olanak tanır.
Normal ayarlarda, öğe başlıklarının rengini değiştirmek için kullanabileceğiniz Başlık Rengi seçeneği vardır. İstediğiniz rengi seçmek için kaydırıcıyı veya onaltılık kodu kullanın. Kendimiz için onaltılık kodu kullandık (#ff714a).
Şimdi Aktif öğe başlığının Normal olanla birlikte rengini değiştirdiğini görebilirsiniz. Bunun nedeni, Etkin başlığın rengini henüz belirlememiş olmamızdır.
Arka plan rengi, akordeonunuzdaki başlık alanının arka planını renklendirmenizi sağlar. Akordeonumuz için kullanmayacağız, fakat yine de nasıl görünebileceğine dair hızlı bir örnek göstermek istedik (arka plan rengini hemen ardından varsayılan olarak değiştirdik):
Hemen altında, Başlık Dolgusu seçeneği var. Değerleri artırdığınızda, başlıkların etrafındaki boşluğun da eşit şekilde arttığını göreceksiniz. Eğer istersen…