Elementor ile yapışkan başlık ve kaydırma efektleri nasıl kullanılır?

Başlık genellikle bir kişinin web sitenizi ziyaret ettiğinde gördüğü ilk şeydir ve onu nasıl keşfettiğinin temelini oluşturur.

İster bir e-Ticaret web siteniz, ister kişisel bir web siteniz, eğitim amaçlı bir web siteniz, bir topluluk forumunuz veya medya için bir web siteniz olsun, başlık, göz atmayı basit ve kullanımı keyifli kılan şeydir.

Yapışkan başlıklar, web tasarımcıları arasında, gelişmiş kullanıcı gezinmesi için bir web sitesini düzenlemek ve yapılandırmak amacıyla giderek daha popüler hale geliyor.

Bu eğitimde size Elementor'u kullanarak yapışkan başlığınızı nasıl yapacağınızı göstereceğiz.

Yapışkan başlıklar, kullanıcıların ne kadar aşağı kaydırdıklarına bakılmaksızın sayfanın başlığını ve menü bölümünü görüntülemelerine olanak tanır.

• Adım 1: Menü Oluşturmak
• Adım 2: Elementor'da Başlığınızı Oluşturma
• 3. Adım: Başlık şablonu oluşturmak için Elementor'u kullanma
• ADIM 4: Elementor Başlığınızı Yapışkan Hale Getirme
• Adım 5: CSS'mizi özelleştirin
• Çözüm

Adım 1: Menü Oluşturmak

Web sitenize yapışkan başlık eklemek için wp-admin > Görünüm > Menüler'e ve bir Ana Menü oluşturun. Başlıkta görüntülemek istediğiniz bölümü yazın.

Adım 2: Elementor'da Başlığınızı Oluşturma

Ana menüyü oluşturmayı tamamladığınızda Elementor Şablonları > Tema Oluşturucu'ya gidin Tema oluşturucu sayfasında Başlık alanını seçin ve “ Yeni Başlık Ekle ”yi tıklayın.

Başlık şablonuna bir ad verin ve açılan ekranda Şablon Oluştur

Bundan sonra Elementor düzenleme sayfasına yönlendirileceksiniz. Önceden hazırlanmış başlık şablonlarından birini kullanabilir veya sıfırdan kendinizinkini tasarlayabilirsiniz.

Bu eğitimde Elementor yapışkan başlığımızla sıfırdan başlayacağız.

Bir şablon tasarlamaya başlamadan önce Elementor düzenleyicisinde çeşitli başlık widget'larını görebilirsiniz. Bu bölümleri kullanarak hızlı ve kolay bir şekilde başlık tasarlayabiliriz.

3. Adım: Başlık şablonu oluşturmak için Elementor'u kullanma

İki sütunlu bir düzen oluşturun. Bölümün içerik genişliğinin " Kutulu " olarak ayarlandığından emin olun.

Elementor Düzenleme Bölümündeki İçerik genişliği ayarlarında, “ Düzenle ” Sütunu altında ilk sütun genişliğini %20 olarak ayarlayın.

Web sitenizin Site Logosunu ilk sütuna yerleştirin ve sola hizalayın.

İkinci sütuna bir Gezinme Menüsü ekleyin ve 1. adımda oluşturduğunuz ana menüyü seçin. Gezinme menüsünü sağa hizalayın.

Bu eğitim için başlığı basit tutacağız. Bir arka plan rengi, animasyon efektleri, düğmeler ve diğer öğeleri ekleyerek başlığınızı daha ayrıntılı hale getirebilirsiniz.

ADIM 4: Elementor Başlığınızı Yapışkan Hale Getirme

Artık temel Elementor başlığımızı oluşturduğumuza göre, onu Yapışkan başlığa dönüştürmenin zamanı geldi.

Bunu yapmak için Düzenle bölümüne (Tüm başlık bölümü) gidin. Açılır menüden Gelişmiş > Hareket Efektleri'ni seçin

Hareket efektleri altında " Üste Yapışkan yapışkan başlığın görünmesini istediğiniz yerde Cihazlar

Yapışkan bir başlık, tablet boyutundaki cihazlarda neredeyse her zaman istenmeyen bir durumdur ve mobil ekranlarda da neredeyse her zaman istenmeyen bir durumdur. Sonuç olarak, Yapışkan Açık altındaki her iki seçeneğin yanındaki “x” işaretini tıklayın ve yalnızca “Masaüstü”nü seçili bırakın.

Çalışmanızdan memnun kaldığınızda “ Yayınla ”ya tıklayın; bu, yapışkan başlığı etkinleştirecektir ancak şu anda mevcut tema başlığınızın yerini almayacaktır.

Elementor, başlığınızı yayınladıktan sonra, başlığınız için bir Koşul Eklemenizi ister. Koşullar ekleyerek başlığı sitenin istediğiniz yerinde gösterebilirsiniz.

Bu başlığın 404 Sayfası hariç tüm sitede görünmesini istedik. Sonuç olarak 404 Sayfasını dışarıda bırakırken sitenin tamamını seçime dahil ettik.

Gördüğünüz gibi, kişiselleştirilmiş Yapışkan başlığınızı oluşturmak için Elementor'u kullanmak basit ve zahmetsizdir!

Özel CSS Kullanarak Elementor Yapışkan Başlığınızın Çok Daha İyi Görünmesini Sağlayın Elementor, daha şık hale getirmek için bir CSS sınıfı ekleyerek yapışkan başlığı özelleştirmenize olanak tanır.

Yapışkan başlığın yüksekliğini, arka plan rengini, geçişini ve yapışkan efektlerini burada özelleştirebilirsiniz.

Yapışkan başlığınızı daha şık hale getirmek için Düzenleme alanına dönün (Tüm başlık bölümü). Açılır menüden Gelişmiş > Hareket Efektleri'ni seçin

Bu durumda “ Efekt Ofseti Bir ziyaretçi web sitenizi kullandığında bu, kaydırma efektinin gerçekleştiği kaydırma mesafesidir.

Hareket ofsetini 100'e ayarlayın

Ofset Efektleri seçeneklerinin yalnızca Özel CSS kullanıldığında çalışacağını lütfen unutmayın. Sonuç olarak, kendinize ait herhangi bir özel CSS eklemiyorsanız son seçeneği atlayabilirsiniz.

Son yapışkan başlığı yayınlamadan önce isteğe bağlı olarak son yapışkan başlığa koşullar ekleyebilirsiniz. bir örneği amp yapışkan başlığın gösterilmesini istediğiniz yerdir. amp olarak sitenin tamamı kriterini seçebilirsiniz .

Artık web sitenize bazı Özel CSS'ler eklemek isteyeceksiniz. Özel CSS oldukça esnektir ve işleyişine aşina iseniz istediğiniz her şeyi ekleyebilirsiniz.

Temizliği tamamladık; şimdi özel CSS kodunun eklenmesi de dahil olmak üzere web sitesinin inceliklerine geçiyoruz. Elementor için ücretsiz yapışkan başlık efektleri elde etmenin hem temellerini hem de gelişmiş tekniklerini göstereceğiz. Elementor 2.9 veya üstünü kullanıyorsanız bu CSS'yi sitenize dahil etmek için Global Stil Kurallarını kullanabilirsiniz.

Özel CSS'yi eklemek için aşağıda özetlenen prosedürleri izleyin:

• Hamburger menüsüne erişmek için onu Elementor menüsünün sol üst köşesinde bulun ve seçin.
• Global Stil bölümünün altındaki açılır menüden Tema Stillerini Seç'i seçin.
• Bu bölümdeki açılır menüden Özel CSS'yi seçin (renk önceki genetik kırmızı renginden maviye dönüşecektir).

Daha sonra aşağıdaki CSS kodunu yapıştırın.

başlık.yapışkan-başlık { --başlık-yüksekliği: 90px; --opaklık: 0,90; --beni küçült: 0,80; --yapışkan-arka plan rengi: #0e41e5; --geçiş: 0,3 saniyelik giriş-çıkış kolaylığı; geçiş: arka plan rengi var(--geçiş), arka plan görüntüsü var(--geçiş), arka plan filtresi var(--geçiş), opaklık var(--geçiş); } başlık.sticky-header.elementor-sticky--efektler { arka plan rengi: var(--yapışkan-arka plan-renk) ; arka plan resmi: yok; opaklık: var(--opacity) ; -webkit-zemin filtresi: bulanıklaştırma (10 piksel); zemin filtresi: bulanıklaştırma (10 piksel); } başlık.yapışkan-başlık > .elementor-container { geçiş: min-height var(--transition); } başlık.sticky-header.elementor-sticky--efektler > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me)); yükseklik: calc(var(--header-height) * var(--shrink-me)); } başlık.yapışkan-başlık .elementor-nav-menu .elementor-item { geçiş: dolgu var(--transition); } başlık.yapışkan-başlık.elementor-yapışkan--efektler .elementor-nav-menü .elementor-öğesi { padding-bottom: 10px; üst dolgu: 10px; } başlık.sticky-header > .elementor-container .logo img { geçiş: max-width var(--transition); } başlık.sticky-header.elementor-sticky--efects .logo img { max-width: calc(100% * var(--shrink-me)); }

Adım 5: CSS'mizi özelleştirin

Yukarıda listelenen talimatlar, Elementor'da azalan yapışkan başlık oluşturma sürecinde size yol gösterecektir. Başlığın nasıl kişiselleştirileceği hakkında daha ayrıntılı bilgi edinmek istiyorsanız aşağıda verilen CSS koduna bakabilirsiniz; bu, başlık tasarımında daha yaratıcı olmanızı sağlayacaktır. İhtiyaçlarınıza bağlı olarak, çok sayıda ayarı değiştirerek ve daha fazla veya daha az yapışkan hale getirerek Elementor yapışkan başlığını kişiselleştirebilirsiniz. Bu CSS değişikliğini doğrudan Elementor'a dahil etmek için bir kod düzenleyici kullanmanızı öneririz. Kodu hızlı bir şekilde bir araya getirmenize ve avantajlardan yararlanmanıza yardımcı olacak Visual Studio Code veya Atom'u kullanabilirsiniz. Bu düzenleyicilerin kullanımı ücretsizdir ve bunlara Windows, Mac OS X ve Linux dahil olmak üzere çeşitli sistemlerden erişilebilir.

Bu bölümde, CSS stil sayfasını kullanarak Elementor küçültme başlığının efektlerini nasıl ayarlayabileceğiniz gösterilecektir. Özel özellikte yalnızca bir değişiklik yaparsanız, bu, CSS kodunun geri kalanıyla eşleşecek şekilde hemen değiştirilecektir.

Azalan başlık için özelleştirme seçenekleri toplam beş farklı şekilde mevcuttur. Tüm değişkenlerin özelleştirilmesi gerekmez, ancak isterseniz bunu yapma seçeneğiniz vardır. Hangi değişkenleri değiştirmek istediğinize karar verdiğinizde, yalnızca bu değişkenleri değiştirebilir ve geri kalan parametreleri değiştirmeden bırakabilirsiniz.

Burada, her değişkenin varsayılan değerleri kırmızıyla gösterilen beş CSS değişkeni verilmiştir.

Yapışkan arka plan rengi #0e41e5 ve başlık yüksekliği 90 pikseldir. Diğer stil seçenekleri şunları içerir: 0,90 opaklık, 0,80 küçültme, 0,90 opaklık ve 300 ms'lik giriş/çıkış kolaylığı geçişi.

Özel özellikler, amp kodumuzdaki çift çizgi "-"den sonra görünen öğelerdir ve bunları amp kodumuzun üst kısmında listelenmiş olarak bulabilirsiniz. Tek yapmanız gereken, cümlede iki nokta üst üste ve noktalı virgülden önce görünen değeri ayarlamaktır.

amp , başlığın yüksekliğini 100 piksele çıkarmak istiyorsanız, yüksekliği değiştirmeden önce ve değiştirdikten sonra şu şekilde görünecektir:

Önceden başlık yüksekliği 90 pikseldi; daha sonra başlık yüksekliği 100 pikseldi.

Elementor'u kullanarak yapışkan bir başlık menüsünü birkaç farklı şekilde tasarlayabilirsiniz. Yalnızca ücretsiz bir Elementor yapışkan başlığı oluşturmakla kalmaz, aynı zamanda başlığı özel CSS ekleyerek kişiselleştirebilirsiniz. Elementor'u kullanarak azalan yapışkan Elementor başlığını nasıl oluşturacağınıza dair ayrıntılı talimatlar almak ve bu adım adım kılavuzla CSS'nizde ince ayar yapmak mümkündür.

Elementor çeşitli başlık şablonları içerir; her biri farklı ve zariftir ve izleyicilerinizin web sitenizde gezinmesine yardımcı olur.

Elementor ile web sitenizin başlıklarının stili üzerinde tam kontrole sahip olursunuz. amp site logosunu sayfanın ortasına, ana menüyü de onun altına yerleştirebilirsiniz. Telefon numarasını, sosyal medya bağlantılarını ve diğer bilgileri görüntülemek için ana başlığın üstüne bir başlık ekleyebilirsiniz.

Burada, Elementor kullanıcılarına sunulan çok sayıda başlık tasarımı seçeneğinden yalnızca birkaç amp verilmiştir.

Çözüm

Web sitenize yapışkan bir başlık eklemek, ziyaretçilerin sitenizde dolaşmasını kolaylaştırabilir ve sitenizin tüm alanlarına yapılan tıklamaları artırabilir.

Elementor, daha önce gerekli olan Javascript ve CSS ile manuel olarak yapışkan başlıklar oluşturma ihtiyacını ortadan kaldırır. Elementor yapışkan başlıkları sayesinde web siteniz için yapışkan başlık oluşturmak hiç bu kadar kolay olmamıştı.