Elementor’da yapışkan bir başlık yapın (en basit yöntem)

Bu makale, üçüncü taraf eklentileri ve çok basit CSS kullanmadan Elementor’a yapışkan başlıklar eklemenin basit bir yolunu sunacaktır. Elementorların iyi bir yapışkan gölgelik işlevselliği yoktur, bu nedenle üçüncü taraflı bir eklenti veya CSS ve JavaScript kullanmamıza izin verilir.

Macun başlığımıza eklemek için 4 basit özel CSS satırını kullanarak ajans Elementor’a nasıl yapışkan bir başlık ekleyebiliriz ve yöntemimizi sizinle paylaşmak istiyoruz. Bu makalenin sonunda, kaydırmadaki görüntünün boyutunu değiştirmenize, kaydırmadaki yapışkan başlığın arka plan rengini değiştirmenize ve daha fazlasını değiştirmenize yardımcı olan yapışkan başlık ve Elementor’a ek eklemeler de içerecektir.
Unutmayın, bu kılavuz Pro Elementor’u kullananlara yöneliktir. Bunun nedeni, Pro Elementor’un kendi başlığınızı ve altbilginizi ayarlamanızı sağlayan tema üreticisini içermesidir. Bu eklentiye sahip değilseniz, 49,00 $ fiyatıyla orantılıdır, çünkü temel olarak aşağıdan yukarıya bir web sitesi oluşturmanıza izin verir. Bu bağlı kuruluş bağlantısından elde etmek, ajansımızı sizin için ek masraflar olmadan destekler. Adım 1: İlk temel başlığı oluşturun, temel başlığımızı oluşturacağız ve Elementor’daki tüm sayfalara uygulayacağız. Üstbilgi üreticisine erişmek için, yönetici komasının arka ucundaki şablona gidin, ardından tema üreticisini tıklayın.

Yeni bir şablon ekleyin ve türü başlık olarak değiştirin. Şablonun adını verdikten sonra, “Bir Şablon Oluştur” yu yeşil düğmesini tıklayın.

Şablonunuzu şimdi adlandırın, başlığınızı oluşturun. Bunu yapmak için, insanlar genellikle yeni bir rol oynar, iki sütuna bölün, ardından site logosu ve navigasyon menüsünü ekler. Genellikle, site logosu doğrudan sol parçaya düzleştirilir (ve sol sütunda), Elementor menüsü sağ sütundayken ve sağda düzleştirilir. Ayrıca yalnızca bir sütun kullanabilirsiniz, menüdeki her öğenin gelişmiş ayarlarının altındaki konumu sırada ayarlayabilirsiniz. İki sütunla aynı efekti elde etmek için yatay seviyelendirme, “ARASI ARACI” kullanabilirsiniz. Bu, önerdiğimiz yöntemdir, çünkü DOM öğelerinin sayısını azaltır ve (biraz) daha hızlı yükleyen web sitesine yol açar. Elementor’daki Styling sekmesi altında, başlık arka planınızı şeffaf veya renkli olarak değiştirebilirsiniz. Bu örnekte, başlığımızın ilk kahramanlarımızı kapsamasını istiyoruz, bu da şeffaf bir arka plan tutacağımız anlamına geliyor. Bunu yapmak için parçanın arka plan rengini RGB’ye (0.0,0) ayarladık.

HTML etiketini varsayılandan “başlık” olarak değiştirdiğinizden emin olun.
Son olarak, başlığınıza özel bir CSS kimliği verin, örneğin: #My-cool başlayıcısı. (CSS özel sınıfını da ekleyeceğiz)

Başlığınızı oluşturduktan sonra, uygun ekran koşullarını yayınlayın ve ayarlayın. Bu örnekte bu başlığı web sitemizin tüm bölümlerinde gösteriyoruz. Bununla birlikte, elementor koşullu koşullu görünürlük bu sektördeki en iyilerinden biridir ve bunu yapışkan başlığınızı ihtiyacınız olan yerde görüntülemek için çok seçici kullanabilirsiniz. Bu noktada, web sitenizin ön ucuna giderseniz, başlığın açıkça görüntülendiğini göreceksiniz. Ancak, göreceğiniz gibi, yapışkan değil veya ilk içeriği kapsamaz. Elementor kanopimizi yapmak için genel öğe başlık yerleştirme yapışkandır (örn. Ekranda aşağı kaydırdığınızda içeriği kaplama), ekleme zamanı Bazı özel CSS. Başlığınızın üreticisine geri dönün ve genel sütunu seçin. Bu bölümdeki gelişmiş ayar sekmesini açın ve özel bir CSS girişi açın. ?? Bu, başlığınızı Elementor’da yapışkan hale getirmenin çok basit bir yolunu gösterdiğimiz bir makalenin bir parçasıdır. Özel CSS girişinde aşağıdaki kodu ekleyin:

#Benim havalı başlık {pozisyon: sabit; Genişlik:%100; Üst: 0; Z-endeks: 9999; }

Kod Dili: CSS (CSS) Girişe yazdıysanız (kopyalama ve yapıştırma), her satırın ne yaptığını görebilirsiniz. İlk olarak, seçmenler bu özel CSS’yi bu durumda başlığın bir parçası olan hedef sarma elemanına uygularlar.
İkincisi, konum: Sabit, sayfayı aşağı kaydırdığınızda başlığın yapışkan kalmasını sağlar. Üçüncüsü, üst: 0 Başlığın ViewPort Tarayıcınızın üstünde kalmasını sağlayın. Dördüncüsü, Z-Index: 9999, başlığın sayfadaki tüm içeriğin üzerinde kalmasını sağlar. Web sitenizin ön ucuna geri dönerseniz, başlığın artık içeriği kapsadığını göreceksiniz. Sayfayı aşağı kaydırdığınızda, konumu ekranın üstünde kalır. Özünde, bu Elementor web sitesine girdiğiniz en basit yapışkan gölgeliktir. İhtiyacınız olan tek şey dört sıra CSS. Bu noktada, başlığı olduğu gibi durdurup bırakmayı seçebilirsiniz. Ancak, genellikle bazı gelişmiş efektler eklemek istiyoruz. Bizim için, Elementor’daki her yapışkan başlık için en önemli iki etki aşağıdaki gibidir:
Kullanıcınız ekranı aşağı yuvarlarken şeffafın arka planını renge dönüştürmek
Bu önemlidir, çünkü ekranı aşağı kaydırırken menü öğesinin görülmesini sağlar. Genellikle, kahraman karanlık fotoğraflardan oluşur, yani ziyaretçilerinizin navigasyonunuzu görmesi ve tıklamaları için yeterli kontrast vardır. Ancak, ekranı aşağı kaydırdığınızda, Elementor’un yapışkan başlığındaki arka plan rengini değiştirmek, okumayı ve kullanmayı kolaylaştırır.
Rulodaki görüntüyü değiştir
Birçok durumda, ilk menüde adı görüntüleyen bir şirket logosu vardır. Bu, ziyaretçiler aşağı kaydırıldığında azaltılabilen 16 kez 9 gibi geniş bir oran haline getirir. Şirketin logosunun boyutunu azaltarak, Elementor’daki yapışkan başlığın toplam yüksekliği de azaltılır ve kullanıcılar tarafından içeriği görüntülemek için kullanılabilecek görünüm alanlarının sayısını en üst düzeye çıkarır. Örneğin, sayfanın en üstünde olduğumuzda logomuza doğru olabilir. Yatay, sol kare, ancak logo daha sonra kullanıcı her şeyin yüksekliğini en aza indirirken sola (ve daralıyor) değişir.
Ek Devam Değiştirme Yapışkan Elementor başlığımızda yapmak istediğimiz ilk eklemenin parşömenlerindeki arka plan rengini değiştirin. Bunu yapmak için bazı temel JavaScript ve CSS kullanacağız. Bu sizi korkutuyorsa, endişelenmeyin, tek yapmanız gereken HTML bloğuna kopyalamak ve eklemektir. İlk olarak, HTML bloğunu doğrudan başlığa sürükleyin ve bırakın. HTML bloğu ön tarafta görünmeyeceğinden, yapıya el koyma konusunda endişelenmeyin.
Aşağıdaki kodu yapıştırın:
pencere .scroll = () => {const nav = belge .Quelector (‘#benim havalı başlık’); if (this .scroly <= 10) nav.className = ''; else nav.className = 'scroll'; };

Kod Dili: HTML, XML (XML) Bu kodun yaptığı şey, 10 pikselden geçtiğiniz anda CSS kuvvetini uygulamaktır.
Başlıklı özel CSS’lerimiz için 2 yeni satır ekleyeceğiz. İlk sıra şeffaf renkler ve solma arka planlar arasında geçiş yapar. İkincisi, orijinal şeffaf arka planın sağlar. Genişlik:%100; Üst: 0; Z-endeks: 9999; Geçiş: 500ms kolaylığı;

Arka plan: şeffaf;

}
Kod Dili: CSS (CSS) O zaman, kullanıcı sayfanızı eğittiğinde arka plan rengini uygulayan tamamen yeni bir CSS seçmen ekleyeceğiz:
#benim havalı olmayan-başlık .scroll {arka plan: #000; }
Kod Dili: CSS (CSS) İkinci CSS kodunu özellikle başlığınız için doğrudan CSS’ye kopyalayın ve yapıştırın.
Şimdi sayfayı kaydedin ve ön taraftaki başlığınıza gidin. Sayfayı aşağı kaydırdığınızda, .scroll sınıf efekti uygulanır. Bu örnekte arka planı sadece siyah olarak değiştiriyoruz, ancak boyutu, yazı tipi stilini ve daha fazlasını bozabilirsiniz. Yapışkan Elementor başlığımıza uygulamaktan hoşlandığımız diğer devam eden efektlerin kaydırmasında görüntüyü değiştirin, logo görüntüsünün boyutunu veya hatta tüm logo görüntüsünü bir kerede değiştirmektir. İlk olarak, JavaScript ve mevcut “kaydırmadaki arka plan rengini değiştir” sınıfını kullanarak görüntünün boyutunu nasıl değiştirebileceğiniz hakkında konuşalım. Site logonuzun seçmenlerini orijinalin arkasındaki ve.
#Benim havalı başlık img {genişlik: 100px; Geçiş: 500ms kolaylık; } #My-cool-naveader .scroll img {genişlik: 50px; }
Kod Dili: CSS (CSS) Bu kod, sayfayı aşağı kaydırırken başlık görüntüsümüzün genişliğini 50 piksel olarak değiştirecektir. Bizim durumumuzda, 50px logomuza göre daha fazla olmak için gerçek başlık boyutunu eklememiz gerekiyor. Bu #benim-cool-header.scroll seçmenine uygulanır. Sayfayı aşağı kaydırdığınızda resmi değiştirmek istediğinizi varsayalım. Bu başka bir olası şey ve CSS kullanarak yapılması oldukça kolay. Genişlik:%100; Üst: 0; Z-endeks: 9999; Geçiş: 500ms kolaylık; Arka plan: şeffaf; } #My-cool-naveader .scroll {arka plan: #000; Yükseklik: Otomatik; Marj -TOP: – 20px! Önemli; } #Benim havalı başlık img {genişlik: 100px; Geçiş: 500ms kolaylık; } #My-cool-naveader .scroll img {opaklık: 0; Geçiş: 500ms kolaylık; } #My-cool-never-header .scroll .logo {arka plan 626 & ext = jpg); Arka plan boyutu: kapak; Genişlik: 50px; Geçiş: 500ms kolaylık; }
Kod Dili: CSS (CSS) Yapılan şey, orijinal logo görüntüsünü gizlemek ve onun yerine bir arka plan görüntüsü görüntülemektir. Örneğimizde, bu bir domuzun başka bir fotoğrafı olacak.
Ekranın genişliğine bağlı olarak farklı kaydırma efektleri uygulamak için Elementor’daki CSS medya sorgularını da kullanabilirsiniz. Sonuç Size bazı gelişmiş etkilerle birlikte Elementor’a yapışkan başlıklar eklemenin basit bir yolunu gösterdiğinizi umuyoruz. Bununla ilgili sorularınız varsa, yorumlarda iletişim kurmaktan çekinmeyin.

Abone Olun ve Paylaşın
Bu içeriği beğendiyseniz, aylık WordPress haber koleksiyonumuza, web sitesi ilhamına, özel tekliflere ve ilginç makalelere abone olun. İstediğiniz zaman abone olmayı bırakın.Spam yapmıyoruz ve asla e -postanızı satmayacağız veya paylaşmayacağız.

Elementor'da yapışkan bir başlık yapın (en basit yöntem)