Yapışkan bir menü nasıl yapılır & amp;Elementor ile başlık

Okuyucularımızın çoğu bize “Elementor ile yapışkan bir menü ve başlık nasıl yapılır” diye soruyor. Bu soruyu cevaplamak için, neden Elementor ile yapışkan bir menü ve başlık oluşturma sürecini açıklayan makaleler yazmadığımızı düşünüyoruz. Bunu göz önünde bulundurarak, Elementor ile nasıl yapışkan bir menü ve başlık yapabileceğiniz bir özet yapıyoruz. Yeni başlayanlar için Elementor, WordPress’te bir araçtır. Bu, WordPress web sitelerini kolayca oluşturmanıza ve tasarlamanıza yardımcı olan en ünlü ve kullanımı kolay sayfa yapımcılarından biridir. Elementors’ı web sitenizi ayarlamak için bir araç olarak kullanırken tamamen yaratıcı olabilirsiniz. Yapışkan başlıklar ve menüler web sitesindeki özelliklere başvurur. Web sitesini bir mobil cihazdan veya PC’den gezdiğinizde, başlık sayfanın üst kısmındayken bir rulo başlatırsınız. Ancak, aşağı kaydırmaya başladığınızda, gölgelik küçülür ve sayfanın üstüne biraz farklı bir biçimde yapışır.
Bu özelliğin büyüklüğü, web sitenizin çok havalı görünmesini sağlamaktır. Ziyaretçiler web sitenizde kaydırmaya başladığında gölgelik görünümü ile yaratıcı olabileceğiniz için, bu keşfetmek için birçok yeni yol sunar. Bu özellik, web sitenize benzersiz bir ek olarak düşünülebilir. Bu makalede, Elementor ile nasıl yapışkan bir menü ve başlık oluşturabileceğiniz hakkında bir adım -adım kılavuzu göstereceğiz. Ondan önce WordPress ve Elementor’a aşina olduğunuzu varsaydık. Zaten Elementors ile işlevsel ve uyumlu bir WordPress web siteniz var. Ayrıca, başlık menüsüne girilen birkaç temel öğe ve logolarınız olduğunu varsayıyoruz. Sahneyi ayarladığımıza göre, WordPress temasınızda sıradan bir başlık ayarladıysanız, bir Elementor ile daraltan bir başlık oluşturmak için adım adım bir adım adım kılavuza geçeceğiz. , Bu Elementor’ın yapışkan bir başlığının nasıl küçülmesini sağlayacağımız ayrıntıları göreceğiz. Büzülmeye çalışan yapışkan bir başlık elementine sahip olmak için web sitenizi özellikle değiştirmelisiniz. Endişelenmeyin, sizi destekliyoruz çünkü Elementor için bu yapışkan başlık efekti için ihtiyacınız olan kodu tam olarak açıklayacağız. Adım 1: Elementor’daki Şablon Başlığını Düzenleme İlk adım, başlığınızı bir Elementor tema üreticisiyle düzenlemektir. Lütfen aşağıdaki adımları yapın:
WordPress Yönetici Gösterge Tablonuzu girin.
Sol taraftaki menüden “Şablon” >> “Tema Makinesi” ni açın.
Elementor başlığınızı düzenlemeye başlamak için “Elementor ile Düzenle” seçeneğini tıklayın.
Adım 2: CSS’nizi bu adımda yola getirin, bazı CSS temel ayarlarınızla ilgilenmeniz gerekir. Tata Graha Basic, başlığınızın aşağıdaki adımlarda gireceğiniz CSS kodu ile çalışacağından emin olacaktır. Lütfen söz konusu adımları izleyin: Başlık bölümünden ayarları açın
Düzen sekmesinden, HTML açılır etiketinin başlık olarak seçildiğinden emin olun
Düzen sekmesine gidin.
Minimum başlık yüksekliğinin 90 piksel olduğundan emin olun. Boyut daha sonra değiştirilebilir, ancak daha kolay bir anlayış için 90 piksel ile başlayın.

Gelişmiş sekmesine geçin ve başlık için yapışkan başlıklar seçin.
Ardından, logonuzu içeren resim widget’ını açmalı ve Gelişmiş sekmesine gitmelisiniz.

Bu bölümde, CSS sınıf alanını logo görüntüsüne ayarlayın.

Adım 3: Hareket efektini ayarlayın Bir Elementor Sticky başlığı oluşturmak için yapışkan başlık elementini etkinleştirmek için Elementor hareket efekti özelliğini kullanabilirsiniz. Bunu yapmak için aşağıdaki adımları yapın:
Başlık bölüm ayarlarını açın.

Gelişmiş sekmesine gidin.

Hareket efekt ayarlarını açın.
Açılır yapışkanlığı üste ayarlayın.
Kutudaki yapışkanlığın yalnızca bir masaüstü içerdiğinden emin olun. Diğer cihazların silinmesi gerekir,
Ofset etkisi 90 olarak düzenlenmelidir.
4. Adım 4: Özel CSS ekleyin: Temizlik ile tamamladıktan sonra, artık ayrıntılara geçebilir ve web sitesine özel CSS kodu ekleyebiliriz. Ücretsiz öğeler için yapışkan bir başlık efekti elde etmenin temel ve gelişmiş yollarını göstereceğiz. Elementor 2.9 ve üstü kullanırsanız, bu CSS’yi eklemek için Global Style kurallarını kullanabilirsiniz.
Özel CSS eklemek için aşağıdaki adımları izleyin:
Elementor menüsünün sol üst köşesinde bulunan Hamburger menü simgesini tıklayın. Küresel stil bölümünün altındaki tema stillerini seçmek için doğrudan.
Bu bölümden, özel CSS’yi seçin (renk önceki genetik kırmızı renkten maviye dönecektir).
Ardından aşağıdaki CSS kodunu ekleyin.
Header.Sticky-Header {-haader-Head: 90px; -Apaksite: 0.90; -HRINK-ME: 0.80; -Bakta-background-color: #0e41e5; -Transition: .3s kolaylık; Geçiş: Arka Plan-Renk Var (-Transition), Arka Plan-İmage Var (-Transition), Fon-Filter Var (-Transition), Opaklık Var (-Transition); } header.sticky-header.Elementor-Sticky-Effects {arka plan-color: var (-sticky-background-color)! Önemli; Arka Plan-image: Yok! Önemli; Opaklık: var (-Apacity)! Önemli; -Webkit-Backdrop-Filter: Blur (10px); Zemin filtresi: bulanık (10px); } header.sticky-header> .Elementor-Container {geçiş: min-yükseklik var (-transition); } header.sticky-header.Elementor-Sticky-Effects> .Elementor-Container {min-height: calc (var (-header-height) * var (-shrink-me))! Önemli; Yükseklik: calc (var (-header-height) * var (-shrink-me)); } header. } header.sticky-header.Elementor-Sticky-Effects. Elementor-nav-menu. Elementor-öğe {Palding-Bottom: 10px! Önemli; Dolgu Top: 10 piksel! Önemli; } header.sticky-header> .Elementor-Container. Logo IMG {geçiş: maks-genişlik var (-transition); } header.sticky-header.Elementor-Sticky-Effects. Logo IMG {Max-Width: Calc (% 100 * var (-shrink-me)); }
Elementor’unuz sürüm 2.9 değilse, başlık bölüm ayarlarına erişmelisiniz, >> Özel CSS’ye gitmelisiniz.
Adım 5: CSS’yi Ayarla Yukarıda belirtilen adımlar, elementte büzülen yapışkan bir başlık yapmanıza yardımcı olacaktır. Editionial’ın daha fazla nasıl ayarlanacağı hakkında daha ayrıntılı bilgi edinmek istiyorsanız, aşağıda verilen CSS kodunun başlık ile daha yaratıcı olması için görebilirsiniz. Birçok başlık değişkeni değiştirebilir ve yapışkan başlık elementini ihtiyaçlarınıza göre ayarlayabilirsiniz. Bu CSS düzenlemesini doğrudan Elementor’a yerleştirmek için kod düzenleyicisini kullanmanızı öneririz. Kodu kolayca yerleştirmenize ve kullanmanıza yardımcı olacak Visual Studio kodu veya atomu kullanabilirsiniz. Bu editör ödenmez, Windows, MacOS ve Linux gibi çeşitli platformlardan kullanabilirsiniz. Burada, elementin daralması başlığının etkilerini ayarlamak için CSS’yi nasıl kullanabileceğinizi göstereceğiz. Özel özellik bir kez düzenlenirse, özellik tüm CSS kodunu otomatik olarak eşleştirecek şekilde güncellenir. Daralan başlık aynı anda toplam beş değişkenle özelleştirilebilir. Tüm değişkenlere uyum sağlamak zorunda değilsiniz, ancak bunu yapma seçeneğiniz var. Hangi değişkenleri ayarlamak istediğinize karar verdikten sonra, yalnızca ayarlayabilir ve gerisini olduğu gibi bırakabilirsiniz. Aşağıda, ayarlayabileceğiniz ve nasıl yapılacağınız değişken örnekleri vereceğiz.
İşte beş CSS değişkeni, bu değişkenin varsayılan değerini gösterir.

– gölgenin yüksekliği: 90px;

– Opazite: 0.90;
-HRINK-ME: 0.80;
-Bakta-background-color: #0e41e5;
-TRANSITION: 300ms alıcısına;
Bunu örnek kodumuzun üstünde listelenmiş olarak göreceksiniz – özel özellik, bir çift devreden sonra görünen bir öğedir ” -“.Tek yapmanız gereken, ikisinden sonra ve noktalı virgülden önce görünen değeri güncellemektir.Örneğin, başlığın yüksekliğini 100 piksel olarak değiştirmek istiyorsanız, önceki ve sonrası aşağıdaki görünümler: -Header -height: 90px;
Sonrası: -Header-Height: 100px;
Bu, öğeler içeren yapışkan bir başlık menüsü oluşturmanın yoludur.Yalnızca yapışkan bir başlık elementini ücretsiz yapmakla kalmaz, aynı zamanda özel bir CSS kullanarak başlığı da ayarlayabilirsiniz.Bu adım adım kılavuzla, öğelerle büzülen ve CSS’nizi ayarlayan yapışkan Elementor başlıklarının nasıl yapılacağı konusunda net talimatlara sahip olabilirsiniz.
Sonuç olarak, küçülen yapışkan bir başlık kullanmanın önemini tartışmak istiyoruz. Gözleri sakinleştirmek için yatıştırıcı olan yapışkan bir başlık kullanmanın avantajları, içeriğinizi görüntülemek için size daha fazla alan sağlayacak yapışkan bir Elementor başlığına sahiptir. İçeriğinizi görüntülemek için daha fazla alanla, okuyucuların web sitelerinde gezinmesi çok eğlenceli olacaktır. Başlık küçüldüğünde, bu, içeriğinizin okuyucuya görüntülenmesi için daha fazla alan sağlar. Ayrıca doğru rengi seçerseniz, web sitesi ziyaretçilerinin gözlerini de bozacaktır. Navigasyon menüsüne erişim Web sayfasının üst kısmına her zaman eklenmiş bir başlıkınız olduğunda, okuyucularınızın menü çubuğundaki öğelerde gezinmesini kolaylaştırır. Okuyucunuz çok fazla içerik okuduysa ve web sitenizdeki diğer sayfalara geçmeyi planlıyorsa, sayfanın üstünde bir macun menüsü olması, farklı sayfalara kolayca gitmesini kolaylaştıracaktır. Yukarı kaydırmalarına ve sonra farklı bir sayfaya gitmelerine gerek yok.