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

Bir başlık, genellikle bir kişinin web sitenizi ziyaret ettiğinde gördüğü ilk şeydir ve onu nasıl keşfettiklerinin temeli olarak hizmet eder.

Bir e-ticaret web siteniz, kişisel bir web siteniz, eğitim için bir web siteniz, bir topluluk forumunuz veya medya için bir web siteniz olsun, başlık, göz atmayı basitleştiren ve kullanımı eğlenceli 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 için giderek daha popüler hale geliyor.

Bu eğitimde Elementor 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ından bağımsız olarak sayfanın başlığını ve menü bölümünü görüntülemelerine olanak tanır.

• Adım 1: Menü Yapmak
• Adım 2: Elementor'da Başlığınızı Oluşturma
• Adım 3: Başlık şablonu oluşturmak için Elementor'u kullanma
• ADIM 4: Elementor Başlığınızı Nasıl Yapışkan Yapabilirsiniz?
• Adım 5: CSS'imizi özelleştirin
• Sonuç

Adım 1: Menü Yapmak

Web sitenize yapışkan bir 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ı bitirdiğinizde Elementor Şablonları > Tema Oluşturucu'ya gidin Tema oluşturucu sayfasındaki Başlık alanını seçin ve “ Yeni Başlık Ekle .

Başlık şablonuna bir ad verin ve açılır 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.

Adım 3: 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 .

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 Gezinti 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 ekleyerek, animasyon efektlerini, düğmeleri ve diğer öğeleri ekleyerek başlığınızı daha ayrıntılı hale getirebilirsiniz.

ADIM 4: Elementor Başlığınızı Nasıl Yapışkan Yapabilirsiniz?

Artık temel Elementor başlığımızı oluşturduğumuza göre, onu bir Yapışkan üstbilgiye 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 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, yalnızca "Masaüstü" seçili bırakarak Yapışkan Açık altındaki her iki seçeneğin yanındaki "x" işaretini tıklayın.

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

Elementor, yayınladıktan sonra başlığınız için bir Koşul Eklemenizi ister. Koşullar ekleyerek başlığı sitede istediğiniz yerde 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 tüm siteyi 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!

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

Yapışkan başlığın yüksekliğini, arka plan rengini, geçişini ve yapışkan efektlerini buradan ö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 “ Effects Offset Bir ziyaretçi web sitenizi kullandığında, bu, kaydırma etkisinin gerçekleştiği kaydırma mesafesidir.

Hareket ofsetini 100 olarak ayarlayın .

Ofset Efektleri seçeneklerinin yalnızca Özel CSS kullanılıyorsa ç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 üstbilgiyi yayınlamadan önce, isteğe bağlı olarak son yapışkan üstbilgiye koşullar ekleyebilirsiniz. Yapışkan amp koşulunun bir örneği, yapışkan başlığın gösterilmesini istediğiniz yerdir. Örnek olarak tüm site amp seçebilirsiniz .

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

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 etmek için hem temelleri hem de gelişmiş teknikleri göstereceğiz. Elementor 2.9 veya sonraki bir sürümünü kullanıyorsanız, bu CSS'yi sitenize dahil etmek için Global Stil Kurallarını kullanabilirsiniz.

Özel CSS'yi dahil etmek için aşağıda belirtilen 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).

Ardından aşağıdaki CSS kodunu yapıştırın.

header.sticky-header { --header-height: 90px; --opaklık: 0.90; --beni küçült: 0.80; --yapışkan arka plan rengi: #0e41e5; --geçiş: .3s 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ş); } header.sticky-header.elementor-sticky--effects { background-color: var(--sticky-background-color) !important; arka plan resmi: yok !important; opacity: var(--opacity) !important; -webkit-backdrop-filtre: blur(10px); fon filtresi: bulanıklık (10 piksel); } header.sticky-header > .elementor-container { geçiş: min-height var(--transition); } header.sticky-header.elementor-sticky--effects > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me))!important; yükseklik: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { geçiş: padding var(--transition); } header.sticky-header.elementor-sticky--efektler .elementor-nav-menu .elementor-item { padding-bottom: 10px!important; üst dolgu: 10px!önemli; } header.sticky-header > .elementor-container .logo img { geçiş: maksimum genişlik var(--geçiş); } header.sticky-header.elementor-sticky--effects .logo img { max-width: calc(100% * var(--shrink-me)); } 

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

Yukarıda listelenen talimatlar, Elementor'da azalan bir yapışkan başlık oluşturma sürecinde size rehberlik edecektir. Başlığı nasıl kişiselleştireceğinizle ilgili daha fazla ayrıntı öğrenmek istiyorsanız, başlık tasarımında daha yaratıcı olmanızı sağlayacak aşağıda verilen CSS koduna bakabilirsiniz. İhtiyaçlarınıza bağlı olarak, çok sayıda ayarı değiştirerek ve az çok 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 Windows, Mac OS X ve Linux dahil olmak üzere çeşitli sistemlerden erişilebilir.

Bu bölüm, CSS stil sayfasını kullanarak Elementor küçültme başlığının etkilerini nasıl ayarlayabileceğinizi gösterecektir. Özel özellikte yalnızca bir değişiklik yaparsanız, CSS kodunun geri kalanıyla eşleşecek şekilde hemen değiştirilir.

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

Her bir değişkenin varsayılan değerleri kırmızı ile gösterilen beş CSS değişkeni burada.

Yapışkan arka plan rengi #0e41e5 ve başlık yüksekliği 90 pikseldir. Diğer stil seçenekleri arasında şunlar yer alır: 0,90 opaklık 0,80 küçültme, 0,90 opaklık ve 300ms kolaylık/kolaylaştırma geçişi.

Bizim eski içinde - “” özel özellikleri çift çizgi sonra görünen unsurlardır amp le kodu ve bunları bizim ler üst kısmında yer bulabilirsiniz amp le kod. Tüm gereken, cümlede iki nokta üst üste işaretinden sonra ve noktalı virgülden önce görünen değeri ayarlamaktır.

For ex amp le burada daha önce ve yüksekliği değiştirildikten sonra nasıl görüneceğini var, 100px için başlık yüksekliğini artırmak istiyorsanız:

Daha önce başlık yüksekliği 90 pikseldi; sonra, başlık yüksekliği 100 pikseldi.

Elementor'u kullanarak, birkaç farklı şekilde yapışkan bir başlık menüsü tasarlayabilirsiniz. Yalnızca ücretsiz bir Elementor yapışkan başlığı oluşturmakla kalmaz, aynı zamanda özel CSS ekleyerek başlığı kişiselleştirebilirsiniz. Bu adım adım kılavuzla Elementor kullanarak azalan bir yapışkan Elementor başlığının nasıl oluşturulacağı ve CSS'nizin nasıl değiştirileceği hakkında ayrıntılı talimatlar almak mümkündür.

Elementor, çeşitli başlık şablonları içerir; her biri farklı ve zariftir ve görüntüleyenlerinizin web sitenizde gezinmesine yardımcı olur.

Elementor ile web sitenizin başlıklarının stili üzerinde tam kontrole sahipsiniz. Ex için amp le, sayfanın ortasına ve altındaki ana menüde Site logosunu yerleştirmek olabilir. Telefon numarasını, sosyal medya bağlantılarını ve diğer bilgileri görüntülemek için ana başlığın üzerine bir başlık ekleyebilirsiniz.

İşte ex sadece birkaçı amp Elementor kullanıcılarına sayısız başlık tasarımı seçenekleri les.

Sonuç

Web sitenize yapışkan bir başlık eklemek, ziyaretçilerin sitenizde gezinmesini ve sitenizin tüm alanlarına yapılan tıklamaları artırmasını kolaylaştı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 bir başlık oluşturmak hiç bu kadar kolay olmamıştı.