Divi kullanarak hücresel için özel bir yapışkan başlık nasıl eklenir
Genellikle, web sitenize yapışkan bir gölgelik (veya sabit) eklemek, daha fazla alan olduğu için daha büyük bir ekran (masaüstü) için güvenli bir oyundur.Daha küçük görünüm alanlarına (özellikle cep telefonları) sahip mobil cihazlara yapışkan başlıklar eklemek biraz daha fazla beceri gerektirir.Yapışkan başlığın çok fazla görüntüleme alanı almasını istemezsiniz.Demek istediğim, ziyaret ettiğiniz sayfayı göremiyorsanız yapışkan bir başlık ile navigasyon deneyimini artırmanın bir anlamı yok.Bu nedenle, hücresel için özel olarak tasarlanmış yapışkan başlıklar eklemek bazen daha kolaydır.
Bu öğreticide, DIVI kullanarak hücresel için nasıl özel bir yapışkan başlık ekleyeceğinizi göstereceğiz. Varsayılan Divi seçeneğini kullanarak (yapışkan konum seçenekleri dahil), çok fazla yer almadan bu önemli öğeleri (logolar, düğmeler ve menü simgeleri gibi) içeren tamamen özel bir yapışkan başlığın nasıl görüntüleneceğini göstereceğiz. Başlayalım! Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız hücresel için yapışkan bir başlığın bir görünümüdür. Yapışkan bir başlık masaüstündeki yapışkan kanopi, bir cep telefonu üzerinde yapışkan bir başlık tabletinde, bu öğreticiden bir tasarım almak için ücretsiz hücresel için yapışkan başlık şablonu indirin, önce aşağıdaki düğmeyi kullanarak indirmelisiniz. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone Olmayacak” veya Ek E -posta Almayacaksınız. Dosyayı indirin
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Birlikte takip edin ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Şablonları Divi Tema Oluşturucusuna İçe Aktarma Başlık Şablonlarını İçe Aktarmak İçin Divi> Tema Oluşturucu’ya gitmelisiniz. Ardından JSON dosyasını içe aktarmak için sayfanın sağ üst kısmındaki taşınabilirlik simgesini kullanın.
Doğrudan öğreticiye mi gidiyorsunuz? Divi Bölüm 1’i kullanarak hücresel için yapışkan bir başlık özelliği ekleyerek Divi Tema Oluşturucu’na önceden hazırlanmış bir başlık şablonu ekleyin Bu öğretici için, divi tema oluşturucu kullanarak ücretsiz gölgelik şablonlarımızdan birine hücresel için özel bir yapışkan kutu ekleyeceğiz. İlk olarak, başlık şablonunu ve peyzaj bakım altbilgisini görüntüleyen bir blog yayınından içe aktarma dosyasını indirin.
İndirdikten sonra şu adımları izleyin: WordPress sitenizde Divi Tema Oluşturucusuna gidin.
Ardından, sağ üst köşede, iki oklu bir simge göreceksiniz. Simgeye tıklayın.
Taşınabilirlik açılır penceresinde, İçe Aktarma sekmesine gidin.
İndirebileceğiniz JSON dosyasını seçin.
Mevcut şablonun üzerine yazma seçeneğini kaldırın.
Ardından ‘Divi Tema Şablon Şablonlarını İçe Aktar’ ‘ı tıklayın.
Bir dosya yükledikten sonra yeni bir başlık ve altbilgi şablonu göreceksiniz. Başlık şablonu öğesini değiştirmek için özel bir şablon başlığı açarak başlayın.
Başlık düzeni üreticisinde, öğeye daha kolay erişim için katman ekranını açın.
Bölüm 2: Bu özel başlığın hücresel katmanlarındaki üst başlık öğelerini optimize etmenin iki parçası vardır. Üstte logo, CTA ve düğmeyi içerir. Altta zaten yapışkan bir konuma sahiptir ve bir menü içerir. Cep telefonundaki yeni macun menüsüne bir logo ekleyeceğimiz için, logoyu tabletin ve cep telefonunun üstüne gizlememiz gerekiyor. Bunu yapmak için, Sütun 1 için ayarları üst sıradaki ve devam eden sekmenin altında mobil ve tabletlerde devre dışı bırakmayı seçin. Bu, tüm sütunu gizleyecek ve cep telefonunda bulunduğu logoyu gizleyecektir. Ardından, aynı satırda sütun 2 için ayarları açın ve devre dışı bırakılmış cihaz olmadığından emin olun. Logomuz hücresel olarak devre dışı bırakılacağı için, bu davetin hücresel harekete geçmesi için yerimiz var. Estetik amaçlar için, Sütun 2’de harekete geçme davetini aşağıdaki gibi şekillendiren iki metin modülü için metnin hizalanmasını güncelleyin: Hizalama Metni (Tablet ve Cep Telefonu): Sol Bölüm 3: Mobil cihazlar için mobil cihazlar için yeni bir yapışkan başlık oluşturarak, yuvarlanırken çok fazla görüntüleme alanı almamak için yapışkan başlığın yüksekliğini mümkün olduğunca azaltmak önemlidir. Bu nedenle, başlığın üstünü yapışkan hale getirmeyeceğiz. Bunun yerine, yalnızca cep telefonunda görüntülenecek yeni bir çubuk yapacağız. Bu şekilde, hücresel için özel ve yapışkan durumda çok fazla dikey alan almayacak unsurları ekleyebiliriz. Yeni bir başlık yapmak için menüyü içeren alt kısmı çoğaltın. Daha sonraki referanslar için yeni “yapışkan hücresel parça” bölümünü de etiketleyebilirsiniz.
Yapışkan parçaları hücresel olarak gizleyin, çünkü cep telefonumuzun yapışkan bölümüne menüyü gireceğiz, yapışkan bölümün ayarlarını açacağız ve cep telefonu ve tablette devre dışı bırakın. Ardından, yeni hücresel yapışkan bölüm için ayarları açın ve seçin Masaüstünde devre dışı bırakın. Yeni hücresel çubuklara aşağıdaki gibi yeni çubuk pozisyonu verdiğinizden emin olun:
Yapışkan pozisyon: tepeye sadık kalın
Bu noktada satırın boyutunu güncelleyin, tasarımın cep telefonunda neye benzediğine dair daha iyi bir resim elde etmek için bir tablet ekranda düzenlemeye başlamak iyi bir fikirdir. Bunu yapmak için, üreticinin altındaki ayarlar menüsündeki tablet simgesini tıklayın. Ardından, satır ayarlarını açın ve aşağıdaki boyut seçeneklerini güncelleyin: Talang genişliği: 1 Genişlik:% 94Bu bize mobil cihazlarda daha fazla alan sağlayacaktır. Bir sonraki menünün logosunu ve düzenini güncelleyin, menü ayarlarını açın ve logoyu menüye ekleyin.
Tasarım sekmesinin altında, düzen stilini güncelleyin:
Kuvvet: Sol Sol
Bölüm 4: Yapışkan Stil Düzenlemesi Ekleme Yapışkan Element Ekleme Eleman hücresel yapışkan başlık için bir yer yaptıktan sonra, eleman kuvvetini yapışkan bir durumda optimize etmeye başlayabiliriz. Parça yapışkan bir konuma sahip olduğundan, bölümdeki türevin herhangi bir parçasını veya öğesini düzenlerken yapışkan konum seçeneğini etkinleştirebilirsiniz. İmleci kuvvet seçeneğine işaret ederken şemsiye tırnak simgesini tıklayarak yapışkan konum stilini etkinleştirebilirsiniz. Bu, kullanıcı kaydırdıktan ve bölümün yapışkan durumunu etkinleştirdikten sonra farklı bir tasarım yapışkan başlığı sağlamamıza izin verecektir. Yapışkan bölümün arka plan rengi başlamak için, mobil çubuğun arka plan rengini aşağıdaki gibi güncelleyelim:
Arka plan rengi (masaüstü): #244435 arka plan rengi (yapışkan): #fff Tasarım sekmesinin altındaki yapışkan kutu gölgesi, kutunun gölgesini yapışkan bir durumda aşağıdaki gibi verin:
Gölge Kutusu: Ekran yakalamaya bakın Gölge rengi (masaüstü): şeffaf
Gölge Renk (Yapışkan): RGBA (0.0,0,0.1)
Bir sonraki yapışkan menü logosu ve simgesi, logo görüntüsünü, karanlık logoyu varsayılan olarak parlak bir logo görüntüsüne dönüştüren bir filtre ile güncelleyin ve ardından yapışkan bir durumdaki karanlık logoya geri döndürün. Logo seçeneği altında aşağıdakileri güncelleyin: Görüntü tersine çevirme (masaüstü):% 0
Görüntü tersine çevirme (yapışkan):% 100
Ayrıca simgenin rengini aşağıdaki gibi değiştirmemiz gerekiyor:
Alışveriş Sepeti Ikon Renk (Masaüstü): #fff Alışveriş sepeti simgesi rengi (yapışkan): #244435
Renk arama simgesi (masaüstü): #fff
Arama simgesinin rengi (yapışkan): #244435 Hamburger menü simgesi rengi (masaüstü): #fff
Hamburger Menü simgesi rengi (yapışkan): #244435
Yapışkan gölgelik düğmesi şu anda başlığın üst kısmındaki düğme cep telefonundaki yapışkan başlıkta görüntülenmez. Aynı düğmeyi yeni bir hücresel çubuğa ekleyebilir ve ardından yalnızca yapışkan durumda görünmesini sağlayabiliriz. Bir düğme eklemek için düğmeyi üstteki 3 satırdaki sütun kopyalayın. Ardından, hücresel yapışkan bölümündeki menünün altındaki düğme modülünü yapıştırın.
Menünün üzerindeki düğmeyi yapmak için düğme ayarlarını açın ve devam eden sekmenin altında konum seçeneğini aşağıdaki gibi güncelleyin:
Pozisyon: Mutlak
Konum: Merkez
Tasarım sekmesi altında, düğme opaklığını yapışkan durumda% 0’dan% 100’e değiştirmek için filtre seçeneğini güncelleyin. Opaklık (masaüstü):% 0 Opaklık (yapışkan):% 100
Bu, sayfayı aşağı yuvarlamak için düğmeyi ekrandan kullanıcıya gizler. Ardından belirlenen şablon sayfasını açın. Sonuç bu. Yapışkan kanopi, divi ile son zihin üzerinde yapışkan bir başlık tabletinde yapışkan bir başlık masaüstünde, yapışkan başlık açısından mobil ilk düşünme lüksüne sahipsiniz. DIVI varsayılan seçeneklerini kullanarak hücrese yapışkan başlıklar eklemenin ne kadar kolay olduğunu gösterdik. Divi Sticky seçeneğinin gücünü açtıktan sonra, yapışkan başlık öğelerini aktarma şeklinizde çok yaratıcı olabilirsiniz. Logoyu bir filtre ile ışıktan karanlığa çevirebilir, düğmeyi görünmesini veya başlığın tüm arka plan rengini değiştirebilirsiniz. Ve bu sadece başlangıçtı. Bir sonraki projenizin ihtiyaçlarına göre daha fazla ayarlama yapmaktan çekinmeyin! Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
