Elementor ile Küçülen Yapışkan Bir Başlık Oluşturun

Sayfa yüklendikçe küçülen bir başlık oluşturmak istiyor musunuz ? Ziyaretçi sayfayı aşağı kaydırırken, küçülen bir başlık ziyaretçiyi etkilemek için hoş bir etki olacaktır. Bu efekti kullanmayı düşünmüyorsanız bile, web sitenize iyi bir katkı olup olmayacağını düşünmeye değer.

Burada, WordPress sitenizin başlığını küçültmek için Elementor Pro'yu tam olarak nasıl kullanacağınızı öğreteceğiz. Bazı özel CSS'lerin yardımıyla, işi halletmek için tam olarak ne yapmanız gerektiğini size göstereceğiz.

Küçülen Header? nedir

Küçülen başlık, bir web sitesi göründüğünde gördüğünüz başlıkla tamamen aynıdır, ancak kaydırmaya başladığınızda biraz daha küçülür. Başlamak için standart bir üst başlık var. Kullanıcı sayfayı aşağı kaydırdıkça başlık "küçülecektir" ve ne kadar küçüleceğini ve ne kadar yarı saydam olacağını ayarlayabilirsiniz.

Küçülmesine rağmen, sayfayı aşağı kaydırdığınızda başlık hala orada. Başlığı tamamen gömmek ve yalnızca kullanıcı yukarı kaydırdığında ortaya çıkarmak gibi çeşitli seçenekler vardır.

Harika Web Siteleri Oluşturun

En iyi ücretsiz sayfa oluşturucu Elementor ile

Şimdi başla

Küçülen Bir Başlık Nasıl Oluşturulur

Hazır başlığınız hazır olduğunda, gitmeye hazırsınız. Gönderinin geri kalanı, onu küçültmek için size rehberlik edecektir. Bir sürü özel CSS'ye ihtiyacınız olacak. Ancak, size ihtiyacınız olan kodu vereceğiz ve bunu sitenize uyacak şekilde nasıl değiştireceğinizi göstereceğiz.

Elementor ile Düzenle

Başlamak için başlık şablonunu Elementor Theme Builder ile düzenleyin.

Başlık şablonunuzu Elementor kullanarak düzenlemek için WordPress panonuzda Templates Theme Builder'a gidin ve Elementor ile Düzenle'yi seçin.

Temel CSS Kat Hizmetleri

Sonraki bölümlerde göreceğiniz CSS kodunu uygulamadan önce başlığınızı biraz temizlemeniz gerekecek.

İlk adım, başlık bölümünün ayarlarına erişmektir. HTML Etiketi açılır menüsünü Düzen sekmesindeki başlığa ayarlayın.

Minimum yükseklik olmamalı ve yerleşim sekmesinde dikey hizalama ortaya ayarlanmalıdır.

Gelişmiş sekmesine gidin ve başlık bölümünün CSS Sınıfını stick-header olarak değiştirin.

Son olarak, logonuzu içeren görsel widget'ını açın ve açılır menüden Gelişmiş seçeneğini seçin. Ardından, logo resminizin CSS Sınıfları alanına logoyu girin:

Header Stick Yapacak Hareket Efektleri

Elementor'un Hareket Efektleri işlevi, izleyiciler aşağı kaydırırken başlığınızı sayfanın en üstünde tutmak için kullanılabilir.

Bölümün başlık ayarlarına üzerlerine tıklayarak ulaşabilirsiniz. Ardından, Gelişmiş sayfasına tıklayın ve Hareket Efektleri seçeneklerini kontrol edin.

• Açılır menüde Yapışkan altında Üst öğesinin seçildiğini varsayın.

• Lütfen "Yapışkan Açık" kutusunda listelenmeyen diğer cihazları kaldırın.

• Efekt Ofseti 90 (başlığınızın yüksekliği) olarak ayarlanmalıdır.

Özel CSS

Bitirmeden önceki son adım, özel CSS kodunu eklemektir. İşte kullanacağınız temel kod. Sonraki bölümlerde nasıl özelleştirileceğini gözden geçireceğiz:

Aşağıdaki CSS kodu:

• Hamburger menüsüne erişmek için Elementor arayüzünün sol üst köşesine gidin ve tıklayın.

• Tema Stili, Global Stil açılır menüsünden seçilebilir.

• Özel CSS'yi seçin (Tema Stili arayüzü açıldığında "normal" Elementor kırmızısı yerine mavi olacaktır)

/***
* class: .sticky-header
*/
header.sticky-header {
	--header-height: 100px;
	--shrink-header-to: 0.6;
	--transition: .45s cubic-bezier(.4, 0, .2, 1);
	background-color: rgba(244, 245, 248, 1);
	transition: background-color var(--transition),
				backdrop-filter var(--transition),
				box-shadow var(--transition);
}

/***
* Sticky header activated
*/
header.sticky-header.elementor-sticky--effects {
	background-color: rgba(244, 245, 248, .8);
	box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}
header.sticky-header > .elementor-container {
	min-height: var(--header-height);
	transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
	min-height: calc( var(--header-height) * var(--shrink-header-to) );
}

/***
* Shorter header on mobile (70px instead of 100px)
*/
@media only screen and (max-width: 767px) {
	header.sticky-header {
		--header-height: 70px;
	}
}

/***
* class: .logo
*/
header.sticky-header .logo img {
	transition: transform var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
	transform: scale(.8);
}

CSS'yi özelleştir

Bu CSS, özel ihtiyaçlarınızı karşılayacak şekilde özelleştirilebilir, bu yüzden şimdi bunun nasıl yapılacağını gözden geçirelim. CSS'yi doğrudan Elementor arayüzünde düzenlemek yerine Visual Studio Code veya Atom gibi bir kod düzenleyici kullanılması önerilir. Windows, Mac ve Linux kullanıcılarının tümü bu açık kaynaklı düzenleyicilerden yararlanabilir.

CSS Özel Özellikleri, seçim aracımız (veya CSS Değişkenleri) olacaktır. Bu kontroller, azalan başlık efektinde ince ayar yapmanızı sağlar. Özel bir özellikte tek bir değişiklik yaparsanız, CSS kodunun tamamı bu değişikliği yansıtacak şekilde güncellenir.

Toplamda ayarlayabileceğiniz toplam beş faktör vardır. – yapmak istemiyorsanız bunları değiştirmenize bile gerek yok, sadece çalışma şeklini beğendiyseniz olduğu gibi tutun!

Size yardımcı olmak için, beş CSS değişkenini ve bunların varsayılan değerlerini aşağıya ekledik:

• –başlık yüksekliği: 90 piksel;
• –opaklık: 0.90;
• –-başlığı küçült: 0.80;
• –yapışkan arka plan rengi: #0e41e5;
• –geçiş: 300ms giriş-çıkış kolaylığı;

Örnek kodumuza bakarsanız, çift tire "–" yerine birkaç özel özellik eklediğimizi fark edeceksiniz. İki nokta üst üste işaretinden sonra ve noktalı virgülden önce yapılacak tek şey küçük bir düzenleme yapmaktır.

Örneğin, başlık yüksekliğini 100 piksel olarak değiştirmek, önce ve sonra şöyle görünür:

• Önce : –başlık yüksekliği: 90 piksel;
• Sonra : –başlık yüksekliği: 100 piksel;

Bu değişkenlerle tanışalım.

Yapışkan Arka Plan Rengi (--yapışkan-arka plan rengi)

Ziyaretçiler aşağı kaydırdığında görüntülenen "küçültülmüş" başlığın arka plan rengi, Yapışkan Arka Plan Rengi özelliği tarafından kontrol edilir. Tercih ettiğiniz bu değilse, rengin değiştirilmesi başlığınızın rengiyle eşleşmek zorunda değildir.

Örneğin Dijital Ajans şablonunda, başlık arka planı ilk başta bir degradeye sahiptir. Ziyaretçiler aşağı kaydırdıkça ve başlık küçüldükçe başlığın rengi sabit maviye döner (bunu örnek videoda en baştan görebilirsiniz).

Başlık Yüksekliği (--başlık yüksekliği)

Elementor'da Başlık Yüksekliği özelliği başlığınızın yüksekliğini belirler - başlık bölümünüzün yüksekliğiyle eşleşmelidir. Bunu 90 piksele ayarlamak, talimatta güzel bir başlangıç ​​noktasıydı.

Ancak, yüksekliği değiştirmeye karar verirseniz, bunu CSS özelliğinde ve başlık bölümü ayarlarında yaptığınızdan emin olun.

Küçülme etkisiyle ilgili sorunlardan kaçınmak için 100 pikselden daha yüksek başlık yüksekliklerini savunmuyoruz.

Opaklık (-opaklık)

Azalan başlığınızın yarı saydam olma derecesi, Opaklık özelliği tarafından kontrol edilir:

• 0, başlığın görünmez olacağı anlamına gelir.

• 1, hiçbir görünür başlık olmayacağı anlamına gelir (şeffaflık yok)

Opaklık, örnek kodumuzda 0,9 olarak ayarlanmıştır, bu da onu neredeyse tamamen opak hale getirir. Bu numara ihtiyaçlarınıza göre değiştirilebilir. Daha belirgin hale getirmek için değeri sıfıra düşürün.

Başlığı Şuraya Küçült (--shrink-header-to)

Bir ziyaretçi aşağı kaydırmaya başladığında, Beni Küçült özelliği, başlığınızın ve logonuzun ne kadar küçüleceğini belirler. Bu, örneğin başlığınızın ve logonuzun başlangıçtaki boyutlarının 80%'ine düşeceği anlamına gelir.

Geçiş (--geçiş)

Geçiş özniteliği "küçültüldü" olarak ayarlanırsa, başlık orijinal boyutundan bu değere küçülür.

Bir şeyi olduğu gibi bırakmak en iyisidir, ancak gerekirse değiştirme seçeneğiniz de vardır.

Böylece küçülen başlık için güncellenmiş CSS -

header.sticky-header {
	--header-height: 100px; /* Set your own header height */
	--shrink-header-to: 0.6; /* Shrinks to 60%, values: 0.1 to 1 */
	--transition-timing: .45s cubic-bezier(.4, 0, .2, 1); /* values: .1s to 0.5s (or more), replace "cubic-bezier(.4, 0, .2, 1)" with "ease" if you need a simpler transition */
	background-color: rgba(244, 245, 248, 1); /* Set your own background color */

	transition: background-color var(--transition-timing),
				backdrop-filter var(--transition-timing),
				box-shadow var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects {
	background-color: rgba(244, 245, 248, .8); /* Set your own background color on scroll */
	box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07); /* Delete this line if you don't want shadow on scroll */
	-webkit-backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
	backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
}
header.sticky-header > .elementor-container {
	min-height: var(--header-height);
	transition: min-height var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
	min-height: calc( var(--header-height) * var(--shrink-header-to) );
}

/***
* class: .logo
* Add the class "logo" to your logo to scale your logo to 80% on scroll
*/
header.sticky-header .logo img,
header.sticky-header .logo.elementor-widget-theme-site-logo img,
header.sticky-header .logo .elementor-icon svg {
	transition: transform var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects .logo img,
header.sticky-header.elementor-sticky--effects .logo.elementor-widget-theme-site-logo img,
header.sticky-header.elementor-sticky--effects .logo .elementor-icon svg {
	transform: scale(.80); /* Shrinks logo to 80%, values: 0.10 to 1 */
}
header.sticky-header .logo .elementor-icon svg {
	width: auto;
}

Biten Düşünceler

Dünya çapında tonlarca web geliştiricisi için en çok aranan sayfa oluşturuculardan biri haline geldiği için Elementor ile çalışmak çok kolay. Böyle interaktif bir tasarıma sahip olmak sitenize daha fazla ziyaretçi çekecektir. Herhangi bir sorunuz varsa, sormaktan çekinmeyin. Sitemizde çok sayıda Elementor öğreticisi var, onları kontrol edin ve daha sonra neleri ele almamız gerektiğini bize bildirin.