Bilgi aktarımında vazgeçilmez olsa da, büyük metin parçaları korkutucu ve/veya sıkıcı görünme eğilimindedir – her iki durumda da iyi bir UX değildir. Okuyucular kısa cümleleri ve daha küçük metin bloklarını tercih eder. Fakat önemli ayrıntılardan herhangi birini feda etmeye gerek kalmadan yalnızca daha “sindirilebilir” birimlere bölünmüş olmasına rağmen, metninizi daha küçük göstermenin bir yolu olsaydı ne olurdu?
Sekmeler yerden tasarruf sağlar ve metninizi daha düzenli ve daha kolay yönetilebilir hale getirir, bu da onları özellikle kullanıcı talimatları ve benzeri metinler için kullanışlı hale getirir. Hatta çok uzun metinlerin okuyucuya daha kısa ve daha kolay görünmesini sağlamanın harika bir yoludur. WordPress web sitenizin sekmeli içerik kullanabileceğini düşünüyorsanız, doğru yerdesiniz.
WordPress maalesef bu işlevi varsayılan olarak sunmaz. Fakat Sekmeler işlevine sahip pek çok tema halihazırda mevcuttur ve bunlar her zaman ilk tercihimizdir. Dahili sekme işlevi olan bir tema için bütçeniz yoksa, değiştirmek istemediğiniz veya sıfırdan çalışmayı tercih ettiğiniz bir temayı kullanarak zaten bir web sitesi oluşturduysanız, bunu yapmanın kolay bir yolu vardır. Elementor sayfa düzenleyicisini veya bir eklentiyi kullanarak içeriğinizi sekmeler halinde sıralayın ve düzenleyin. İkinizi de göstereceğiz.
Ama önce, sekmeleri ve bunların neden sizin için yararlı ve kullanıcılarınız için çekici olduğunu tartışmak istiyoruz. İçeriğinizi görüntülemek için sekmeleri kullanmaya zaten karar verdiyseniz, tercih ettiğiniz sekme oluşturma yöntemlerine geçebilirsiniz.
-
Sekmeler Neden Yararlıdır?
-
Elementor İçin WordPress Eklentilerini Kullanarak Yatay Sekmeler Nasıl Oluşturulur
-
Dikey Sekmeler Oluşturmak İçin Elementor İçin WordPress Eklentilerini Kullanma
-
WordPress Block Editor’da Sekmeli İçerik Nasıl Eklenir?
-
WP Tabs Eklentisini Kullanarak Sekmeler Nasıl Oluşturulur
Sekmeler Neden Yararlıdır?
İlk olarak sekmeler, içeriğinizi mantıksal bütünler halinde düzenlemenizi sağlar. Ziyaretçilerinizin içeriğinize erişimini sürdürmek için farklı sayfalara gitmesine gerek yoktur ve sekme başlığına tıklayarak ihtiyaç duydukları kısmı kolayca bulabilirler. Bunu, tarayıcınızda birden çok sekmenin açık olduğunu düşünün. Fakat tüm sekmeler birbiriyle ilişkilidir ve her şey en başta ne için geldiğinizle ilgilidir: büyük bir içerik anında kolayca okunabilir. Bu durum yalnızca aynı anda karşılaştırılması veya erişilmesi gerekmeyen bilgiler için geçerlidir.
İkincisi, sekmelerin sırası kendi içinde içeriktir. Sekme başlıklarınızı bölüm başlıkları olarak düşünün. Mantıksal bir adım sırasına (örneğin bir talimat metninde) veya karmaşıklık veya zorluk seviyelerine karşılık gelmeli ve kullanıcılarınızın, içeriğinizin hangi bölümlerinin kendi ilgi alanlarıyla doğrudan alakalı olduğunu bir bakışta görmelerini sağlamalıdır.
Üçüncüsü, sekmeler etkileşim anlamına gelir. Kullanıcı görmek istediği içerik üzerinde daha iyi kontrol sahibi olduğundan, genel olarak daha iyi bir deneyim sağlayan kullanıcı katılımına katkıda bulunurlar. Hatta daha kısa dikkat süresine sahip kullanıcılar için daha fazla etkileşim, daha kolay gezinme anlamına gelir. Elbette bu, mantıklı ve sezgisel bir sekme sistemi oluşturmanın en başta size bağlı olduğu anlamına gelir. Aksi takdirde, kullanıcılar kolayca hüsrana uğrayacak ve pes edecektir.
Şimdi, içeriğinizin sekmeler halinde düzenlenmesinin fayda sağlayabileceğini düşünüyorsanız, en ince ayrıntılara geçelim.
Elementor İçin WordPress Eklentilerini Kullanarak Yatay Sekmeler Nasıl Oluşturulur
Elementor, piyasadaki en popüler sayfa oluşturuculardan biridir ve bunun iyi bir nedeni vardır. Hızlıdır, sezgisel bir sürükle ve bırak arabirimine sahiptir ve ücretsiz sürümü bile sekmeler de dahil olmak üzere pek çok yararlı pencere öğesi sunar. Bununla birlikte Elementor için temel sekmeler widget’ı oldukça basittir. Neyse ki, tescilli gelişmiş öğeler setimiz WordPress Addons For Elementor, size yardımcı oldu. (Tamamen ücretsiz) eklentimiz, Elementor’un orijinal yeteneklerini büyük ölçüde genişleten ve her biri çok yönlülük düşünülerek tasarlanmış 60 araçtan oluşan bir seçim içerir.
Ve bunların arasında hem yatay sekmeler hem de dikey sekmeler için güzel ve işlevsel çözümler bulmanız sizi şaşırtmamalı. Bu bölümde size bir dizi yatay sekmenin nasıl oluşturulacağını göstereceğiz, dikey sekmeler ise aşağıdaki bölümde gösterilecektir.
Yapmanız gereken ilk şey, WordPress Addons For Elementor eklentisini yüklemek ve etkinleştirmektir. Önceden Elementor’un en son sürümünün (ücretsiz veya premium) kurulu olduğundan emin olun. Bunu yaptıktan sonra, aralarından seçim yapabileceğiniz 60 yepyeni öğeye sahip olacaksınız.
Yatay sekmeler oluşturmak için WordPress Eklentilerini nasıl kullanabileceğinizi gösteren bir eğitim videomuz var. Bir metin eğitimini tercih ederseniz, aşağı doğru kaydırın:
Bir WordPress widget’ı eklemek, diğer Elementor widget’larıyla aynı şekilde çalışır: onu sol taraftaki menüden istenen widget alanına sürüklemeniz yeterlidir.
Lorem ipsum metni ile doldurulmuş iki yer tutucu sekmeyle birlikte gelir. Şimdi eleman seçiliyken varsayılan olarak Genel sekmesinin açıldığını göreceksiniz. Bir sekme veya Öğe eklemek için + Öğe Ekle düğmesini kullanabilirsiniz. Her sekmenin başlığını ve içeriğini değiştirmek için her Öğe bölümünü kullanabilirsiniz. Yer tutucu metni kısalttık, bir öğe ekledik (üçüncü bir sekme) ve sekme başlıklarını değiştirdik.
Şimdi, sekmelerimizi gerçekten öne çıkarmak için stil seçeneklerine bir göz atmalıyız. Stil sekmesinin ana (Stil) bölümünde bulunurlar.
İlk seçenek Bireysel Sekme Hizalamasıdır. Bu seçenek yalnızca, daha sonra açıklayacağımız gibi başlık aralığını değiştirmeyi seçtiğinizde geçerlidir. Yaptığımız gibi ortalanmış tutmak, başlığı sekmenin çıkıntılı kısmının ortasına yapıştıracaktır.
Sırada, bazı sekme başlığı seçeneklerimiz var. Başlık etiketini değiştirebilirsiniz. Fakat biz onu olduğu gibi bırakacağız. Kalem simgesine tıklamak, bazı ek tipografi seçeneklerini ortaya çıkaracaktır. Hepsi az ya da çok kendi kendini açıklayıcıdır. Yazı tipi boyutunu 21 piksele değiştirmek için yalnızca Boyut kaydırıcımızı kaydıracağız.
Açılır menülerde yazı tipi Ağırlığı (kalınlık), büyük/küçük harf (Dönüştür altında), italik ve diğer tipografi stilleri (Stil altında) ve altı çizili, üstü çizili ve benzeri efektler (Dekorasyon altında) seçeneklerini bulabilirsiniz.
Sırada Normal – Aktif/Vurgulu geçişi var. Hangi sekmelerin ayarlarını değiştirmek istediğinizi seçmek için bu geçişi kullanabilirsiniz. Geçiş varsayılan Normal’e ayarlanmışken, değiştirdiğimiz her seçenek etkin olmayan sekmeleri etkiler. Etkin/Hover olarak değiştirirsek, sekmelerin etkin olduklarında veya üzerlerine geldiklerinde görünümlerini etkileyen yeni bir dizi seçenek alırız.
Etkin olmayan sekmeleri biraz daha belirgin hale getirmek için bir sonraki seçeneğe ihtiyacımız olacak: Başlık Rengi. Sağ taraftaki ikona tıklayarak hex code değerini seçebilir veya girebiliriz. Siyah için #000000 ile gittik.
Fakat şu anda hangi sekmelerin aktif olduğunu bilmiyoruz. Bu bir sorun değil: tek yapmamız gereken geçiş düğmesini Etkin/Hover konumuna getirmek ve renk seçeneğini tekrar bulmak. Bu sefer kiremit kırmızısı için #EE5151 ile gittik. Web sitenizin genel stiline uyan renkleri kullanabileceğinizi söylemeye gerek yok.
Daha da öne çıkması için aşağıdaki Title Active/Hover Underline Color için aynı rengi seçeceğiz.
Yine de sadece rengi seçmek alt çizgiyi göstermez. Hatta bir kalınlık vermemiz ve konumlandırmamız gerekecek. Başlık Aktif/Hover Alt Çizgi Yüksekliği kaydırıcısını 3 piksele ayarlayarak alt çizgimize biraz ağırlık vereceğiz. Başlık Aktif/Üzerinde Vurgulu Altı Çizili Ofseti, alt çizginin sekme başlığına göre konumunu yönetir. Başlıktan biraz uzağa, -2 piksele ayarlayacağız, böylece Y’nin kuyruğuna değmeyecek. Bu durum üzerine gelindiğinde animasyonun yönüdür.
Sekme bölümünüzün Arka Plan Türünü de değiştirebilirsiniz. Sekmelerimizi oldukları gibi temiz seviyoruz, bu nedenle bu gösteri için bir arka plan kullanmayacağız. Fakat bir arka plan resmi ve bir degrade arasında seçim yapabilirsiniz.
Sekmelerimize bir alt çizgi eklemek ve onları biraz daha iyi özetlemek için Kenarlık Türü kontrolünü kullanacağız. Kenarlık Türünü katı olarak ayarlayacağız. Fakat içerik kutumuzun her yerine yayılmasını istemiyoruz. Sadece üst genişliği 1 piksel olarak ayarlamak ve diğerlerini 0 olarak bırakmak istiyoruz. Bu şekilde sadece üst kenarlık görünecektir. Bunun için öncelikle link butonuna tıklayarak değerlerin linkini kaldırmamız gerekiyor. Bu durum dört sınırın tamamına uygulanacak tek bir değer belirlemek yerine, her bir sınırı (üst, sağ, alt, sol) ayrı ayrı değiştirmemizi sağlar. Hatta Rengi #CCCCCC (açık gri) olarak ayarlayacağız.
Stil sekmesinin ana bölümündeki seçeneklerin geri kalanı, sekmelerinizdeki metin içeriğinin görünümüyle ilgilidir. Onları oldukları gibi bırakacağız.
Stil sekmesindeki bir sonraki bölüm Aralık Stili’dir. Burada, sekme başlıklarınızın ve içeriğinizin dolgularını ve kenar boşluklarını ayarlayabilirsiniz.
Farklı kenarlar için farklı değerler ayarlamak istiyorsanız, önceki adımda Kenarlık Tipi ile yaptığımız gibi, değer alanlarının sağındaki bağlantı düğmesine tıklayın.
Aşağıda gördüğünüz efekti elde etmek için Başlığa fazladan dolgu ekledik: sağda ve solda 15 piksel ve altta 14 piksel. Hatta İçeriğin üst kısmına 26 piksel ve sağ başlık kenar boşluğuna 35 piksel ekledik. Bu durum başlıkları daha kolay tıklanabilir hale getirir.
Elbette bu, yatay sekmelerinizi ayarlamak için WordPress Eklentilerini kullanabileceğiniz sonsuz sayıda yoldan yalnızca biridir. Gördüğünüz gibi, yatay sekmeler widget’ı, aklınıza gelebilecek her tür sekmeyi oluşturmanıza ve stilini vizyonunuza mükemmel şekilde uyacak şekilde özelleştirmenize izin veren sayısız seçenek sunar.
Dikey Sekmeler Oluşturmak İçin Elementor İçin WordPress Eklentilerini Kullanma
Sekmeli içeriği görüntülemenin bir başka popüler yolu da dikey sekmeler kullanmaktır. Ve daha önce de belirttiğimiz gibi dikey sekmeler, WordPress Addons For Elementor’ın sunduğu zarif, çok yönlü, ustalıkla tasarlanmış altmış widget’tan biridir. Widget’ın kelimenin tam anlamıyla sayısız versiyonundan birini nasıl kuracağınızı size göstereceğiz.
Bu widget hakkında bir eğitim videomuz da var, bu format size daha uygunsa bir göz atın:
Yine de metinsel kılavuzları tercih ederseniz, süreç boyunca size adım adım yol göstereceğiz.
Elementor ve WordPress Addons For Elementor’ı yükleyip etkinleştirdikten sonra, herhangi bir Elementor öğesiyle yaptığınız gibi başlayın: kaydırarak veya arayarak sol taraftaki menüde Dikey Sekmeler widget’ını bulun ve ekranda istediğiniz yere sürükleyin. sayfa.
Widget, iki sekme ve bazı yer tutucu metinlerle başlayacaktır. Widget’ın İçerik sekmesinde iki öğe olduğunu görebilirsiniz. Her birine tıklamak aslında bir sekme olduğunu ortaya çıkaracaktır. Sekme başlığınız için bir Başlık alanı ve içeriği için bir metin düzenleyici olarak ayarlanmış bir İçerik alanı içerir. İstediğiniz sayıda öğe eklemek için +Öğe Ekle’ye tıklayabilirsiniz.
İki öğe ekleyeceğiz ve varsayılan lorem ipsum metnini kendi kopyamızdan bazılarıyla değiştireceğiz.
Stil sekmesine ve ana Stil bölümüne geçtiğinizde, gerçek bir dizi seçenek göreceksiniz. En üstte, başlık ayarlarını buluyoruz. Başlık Hizalama sola, sağa veya merkeze ayarlanabilir (merkezle gittik), Başlık Etiketi herhangi bir başlık değerine (H1 ila H6) veya paragrafa (P) ayarlanabilir. Varsayılan H5’te bırakacağız. Son olarak Başlık Tipografi ayarlarında olağan şüphelileri bulacaksınız: Yazı Tipi Ailesi, Boyut, Ağırlık vb., yukarıdaki bölümde açıklanan ayarlara benzer. Bunları kendi haline bırakacağız ve Size’ı sadece 21 piksel olarak ayarlayacağız.
Sırada, Normal-Aktif/Hover anahtarını buluyoruz. Bu ayarlar, sekmelerin olası iki durumundaki davranışını yönetir. Normal bölümü, seçili olmayan veya üzerine gelinmeyen bir sekmenin davranışıdır. Başlık Rengini istediğiniz gibi ayarlayabilirsiniz ama biz #1E1E1E ile gittik. Daha sonra Klasik ve Degrade Arka Plan Türleri arasında seçim yapabilirsiniz. Her biri için seçenekler değişir. Fakat bu gösteri için Klasik arka planı kullanacağız. Düz bir renge ayarlayacağız: #F9F9F9.
Aşağıdaki seçeneklerde, sekmeleriniz için bir arka plan Resmi ve bir Kenarlık Türü ayarlayabilirsiniz. Bu ayarları kullanmayacağız. Daha aşağıda, metin ayarlarını bulabilirsiniz: Metin Rengi, Metin Tipografisi ve Metin Arka Plan Rengi ile metin için Kenarlık ayarları. Bunlarla da oynamayacağız: metin kutumuzun güzel ve temiz olmasını seviyoruz.
İşin Aktif/Hover tarafına geçerken, aşağı yukarı aynısını bulacağız…