Elementor ile WordPress'te dikey kaydırma sekmeleri nasıl oluşturulur

Dikey kaydırma sekmeleri, sekmeli içeriği uzun, yan yana bir düzende göstermenizi sağlar. Sekmeler sol veya sağ tarafta istiflenirken, her bir sekmenin içeriği karşı tarafta görünür. Ziyaretçiler içindeki içeriği keşfetmek için sekmeleri aşağı kaydırabilirler.

Bu sayfayı temiz tutar ve insanlar geçerli sayfadan ayrılmadan çok fazla bilgi görüntüleyebilir. Sadece metinleri görüntülemekle kalmaz, aynı zamanda dikey kaydırma sekmelerindeki resimleri, videoları ve şablonları da görüntüleyebilirsiniz. Kullanıcılar, diğer bölümler gizli kalırken, bağlantılı içeriği görmek için bir sekmeye tıklayabilir veya dokunabilir.

Elementor, popüler bir kodsuz web sitesi oluşturucudur. Bu eklenti ile, sürükle ve bırak işlevselliğini kullanarak tüm web sitesini sıfırdan oluşturabilirsiniz. Bu öğretici gönderide, Elementor ile WordPress'te dikey kaydırma sekmelerinin nasıl oluşturulacağını göstereceğiz.

Dikey kaydırma sekmelerinin durumlarını kullanın

Dikey kaydırma sekmeleri, küçük bir alanda büyük miktarda içerik düzenlemenize yardımcı olur. Ziyaretçilerin yeni bir sayfa yüklemeden konularda hareket etmesine izin verdiler. Bu düzenin hem masaüstü hem de mobil cihazlarda kullanımı kolaydır. Aşağıdaki dikey kaydırma sekmelerinin bazı kullanım durumlarına bir göz atalım.

A. Ürün veya hizmet detayları

Birçok ürün veya hizmet açıklamasını yan yana görüntüleyebilirsiniz. Her sekme özellikleri, fiyatları, özellikleri veya incelemeleri tutabilir. Ziyaretçiler sayfadan ayrılmadan farklı seçenekleri hızlı bir şekilde karşılaştırabilir.

B. Sık Sorulan Sorular (SSS)

Dikey sekmeler SSS için mükemmeldir. Benzer soruları bir sekme altında gruplandırabilir ve diğeri altında cevap verebilirsiniz. Okuyucular kaydırabilir ve yalnızca onları ilgilendiren soruları tıklayabilir.

C. Adım adım kılavuzlar veya öğreticiler

Bir işlemi birçok adımla paylaşmak istiyorsanız, dikey sekmeler her adımı net tutun. Kullanıcılar, sırayla kılavuzu takip etmek için her sekmeyi tıklayabilir. Bu, öğrenmeyi kolaylaştırır ve sayfayı temiz tutar.

D. Ekip üyeleri veya personel profilleri

Her üyeye bir sekme vererek ekibinizi profesyonel bir şekilde tanıtın. Her sekme bir fotoğraf, rol ve kısa biyografi gösterebilir. Ziyaretçiler listede gezinebilir ve dağınık olmadan herkes hakkında bilgi edinebilir. En iyi takım sayfası örneklerinden bazılarını keşfedin.

e. Portföy veya Proje Vitrini

Yerden tasarruf etmek için işinizi veya projelerinizi dikey sekmelerde görüntüleyin. Her sekme görüntüleri, açıklamaları ve ayrıntılara bağlantıları gösterebilir. Bu, ziyaretçilerin tek bir sayfadan birçok projeyi keşfetmelerine yardımcı olur.

Elementor'da dikey kaydırma sekmeleri nasıl oluşturulur

Teorik kısım bitti. Umarım şimdi dikey kaydırma sekmesinin ne olduğu ve kullanım durumlarının ne olduğu hakkında net bir fikriniz vardır. Şimdi öğretici kısmını ele alacağız. Bu bölümde WordPress'te Elementor ile dikey kaydırma sekmelerinin nasıl oluşturulacağını açıklayacağız. Okumaya devam et!

Öğreticiyi başlatmak için ön koşullar

Elementor ile WordPress'te dikey kaydırma sekmeleri oluşturmak için, sitenizde yüklü ve etkinleştirilmiş aşağıdaki eklentilere ihtiyacınız vardır.

• Elementor Free
• Happyaddons bedava
• HappyAddons Pro

Not: HappyAddons Pro'ya ihtiyacınız var çünkü Elementor'un kaydırma sekmeleri oluşturmak için yerleşik bir seçeneği yok. HappyAddons Pro, dikey kaydırma sekmeleri kolaylıkla oluşturmanıza olanak tanıyan Scroll Tabs adlı bir widget sunar.

Bu eklentiler sitenize hazır olduğunda, aşağıda açıklanan öğreticiyi izleyin.

Adım 01: Elementor ile bir sayfa açın

Dikey kaydırma sekmeleri oluşturmak istediğiniz Elementor ile bir sayfa açmanız yeterlidir.

Adım 02: Tuval üzerindeki kaydırma sekmeleri widget'ını sürükleyip bırakın

Elementor panelindeki kaydırma sekmeleri widget'ını bulun . Elementor tuvaline sürükleyip bırakın.

Kaydırma sekmeleri widget'ı bazı varsayılan içeriklerle birlikte gelir. Tuval'e widget eklendikten sonra, bu varsayılan içeriği göreceksiniz.

Adım 03: Sekmelere içerik eklemeye başlayın

Kaydırma sekmeleri widget'ına içerik ekleyebilir ve düzeni birçok şekilde stilize edebilirsiniz. Bunları bu adımda keşfedin.

# Kaydırma sekmeleri widget'a bir başlık ekleyin

Her web bölümünün ne tür içerik içerdiğini açıkça anlatan bir başlığı olmalıdır. Bu nedenle, Scroll Tabs Widget bölümü için bir başlık yazmalısınız.

İçerik> Sekmeler İçerik> Başlık'a gidin. Bir başlık yazmak için alan alacaksınız. Bir başlık yazdığımızı görebilirsiniz, 'şık saat anlayışı'.

# Widget için bir açıklama yazın

Başlık altında yazın, widget için bir açıklama yazabilirsiniz. Açıklama gerekli değilse, sadece kaldırabilirsiniz.

# Sekmelere içerik ekle

İmlecinizi bir sekmeye götürün ve üzerine tıklayın. Bu, sekmeyi genişletir ve içerik eklemenize izin verir.

# Sekme için bir başlık yazın

Her sekme için bir başlık yazmalısınız . Sekme genişletildikten sonra, NAV metninin altında bir kutu alırsınız. Burada, sekme için bir başlık yazabilirsiniz.

# Sekmenin simgesini değiştir

Gerekmiyorsa simgeyi kaldırabilirsiniz. Ancak simgeyi değiştirmek için NAV simgesinin altında görebileceğiniz simgeye tıklayın .

Simge kitaplığı anında açılacaktır. Beğendiğiniz bir simge seçin ve Ekle düğmesine basın .

Simgenin değiştirildiğini görebilirsiniz.

# Editör aracılığıyla sekmeye içerik ekleyin

Her sekme, iki tür içerik eklemenizi sağlar. Düzenleyiciyi mi yoksa şablonu kullanmayı seçebilirsiniz.

Önce Editör seçeneğini seçelim .

Bu editörü kullanarak, ilgili sekmenin tuvalinde anında görüntülenecek her türlü metin ve görüntü ekleyebilirsiniz.

# Sekretilmiş içeriğin arka plan rengini değiştirin

Sekmedeki içeriği daha iyi vurgulamak için arka plan rengini değiştirebilirsiniz, böylece sekmeye eklediğiniz tüm içerikle iyi hizalanır.

# Şablon üzerinden sekmeye içerik ekleyin

Yukarıda belirtildiği gibi, widget düzenleyici ve şablon aracılığıyla sekmeye içerik eklemenizi sağlar. Şimdi şablonları kullanarak içerik nasıl ekleneceğine bir göz atalım.

İçerik türünden şablon seçeneğini seçin. Sitenize önceden tasarlanmış şablonlar varsa, bu seçenek uygun olacaktır.

Şablonu seçmek için yandaki açılır simgeyi tıklayın . Ardından, sekmede görüntülemek istediğiniz şablonu seçin.

İstediğimiz şablonumuzun sekmeye zaten eklendiğini görebilirsiniz.

Aynı şekilde, kaydırma sekmeleri widget'ının tüm sekmelere içerik ekleyin.

Adım 04: Scroll Sekmeleri Widget'ın ayarlarını yapılandırın

İçerik kısmı bittikten sonra Ayarlar bölümünü genişletin .

Bu bölümden Navigatör panelinin genişliğini ve çeşitli hizalama ayarlamaları da dahil olmak üzere içerik panelinin yüksekliğini değiştirebilirsiniz.

# Nav panelinin genişliğini ayarlayın

Kaydırma sekmeleri widget'ın iki parçası vardır - Gezgin Paneli (NAV paneli) ve içerik paneli .

Bu seçeneğin altındaki ölçeği sürükleyerek gezgin panelinin genişliğini değiştirebilirsiniz. Ayrıca, konumunu ve hizalamasını ayarlayabilirsiniz. İşlem, aşağıda ekli video klipte gösterilmiştir.

# Kontrol panelinin yüksekliğini ayarlayın

Aynı şekilde, kontrol panelinin yüksekliğini ayarlayın. Ayrıca, içeriğin dikey olarak düzgün hizalandığını onaylayın.

Adım 05: Kaydırma sekmeleri widget'ı stilize et

Stil sekmesine gel. Önce Gezgin Paneli için bir arka plan rengi ayarlayalım .

# NAV panelinin içeriğinin tipografisini özelleştirin

Navigatör paneline eklediğiniz her içerik için tipografiyi tek tek güncelleyin. Gerektiğinde yazı tipi ailesini, boyutunu, ağırlığını, çizgi yüksekliğini vb. Değiştirebilirsiniz.

# Sekmeleri stilize et

Sınır tipi, sınır genişliği, dolgu, sınır rengi, sınır yarıçapı, metin rengi ve arka plan rengi ekleyerek, sekmeleri stilize edebilir ve aşağıdaki görüntü gibi sunabilirsiniz. Umarım bunu kendin yapabilirsiniz.

Aynı şekilde, içerik paneli ve kaydırma bölümü ile ilgili içeriği genişletin ve stilize edin.

Adım 06: Cep telefonu için kaydırma sekmeleri widget'ını optimize et

Widget'ı mobil ekran boyutu için optimize etmek için, üst çubuktaki mobil portre moduna gidin .

Gezgin sekmelerinin varsayılan olarak üstte göründüğünü göreceksiniz.

# Mobil cihazlar için içerik panelinin yüksekliğini ayarlayın

Mevcut yükseklik içerik paneli için yeterli olmayabilir. Bu durumda, sekmedeki tüm içeriklerin mobil ekran boyutlarında mükemmel bir şekilde görülebilmesi için yüksekliği artırmanız gerekir.

Adım 07: Tabletler için kaydırma sekmeleri widget'ını optimize edin

Benzer şekilde, tablet ekran boyutlarında optimal ekran için optimize etmek için tablet portre moduna geçin .

Aşağıya ekli video klipte, widget'ın tablet ekranında zaten iyi göründüğünü görebilirsiniz. Yani, yine de değiştirmemize gerek yok.

Adım 08: Kaydırma sekmeleri widget'ı önizleme

Önizleme sayfasına gelin ve widget'ın iyi çalışıp çalışmadığını kontrol edin. Widget'ın sonumuzda iyi çalıştığını görebilirsiniz.

Böylece, Elementor ile WordPress'te dikey kaydırma sekmeleri oluşturabilirsiniz.

Son paketler!

Dikey kaydırma sekmeleri, çok fazla bilgi paylaşırken bir web sayfası temiz tutmanın akıllı bir yoludur. Ziyaretçilerin yeni sayfalara atlamadan ihtiyaç duyduklarını bulmalarına izin verdiler. Yukarıdaki adımları izledikten sonra, bu sekmeleri Elementor ve HappyAddons Pro ile kolayca tasarlayabilirsiniz.

Bu, sitenize modern bir görünüm kazandırır ve kullanıcıların içeriğinizi keşfetme şeklini geliştirir. Ancak, bu bölümü oluştururken, en iyi birkaç uygulamayı aklınızda bulundurun. Kullanıcıların ne bekleyeceklerini bilmesi için her sekme için net başlıklar kullanın. Sayfanın hızlı yüklenmesi için metin, resim ve videoların hafif olduğundan emin olun.

Tasarımı farklı ekran boyutlarında kontrol edin ve mobil kullanıcılar için aralığı ayarlayın. Sitenizin stiliyle tutarlı renkleri ve yazı tiplerini tutun, böylece sekmeler tasarımın geri kalanıyla doğal olarak karışır. Bu küçük detaylar her ziyaretçi için sorunsuz ve profesyonel bir deneyim yaratmaya yardımcı olur.

Elementor ile WordPress'te bir flip kutusunun nasıl tasarlanacağını öğrenin.