Divi’de hücresel altbilgi nasıl yapılır
Yapışkan Footer Bar, özellikle mobil cihazlar için herhangi bir web sitesi için yararlı bir ek olabilir. Kullanıcı sayfayı eğittiğinde ekranın altındaki yapışkan altbilgi çubuğu sabitlenir (veya trafik sıkışıklığı). Konumu, başparmağına çok yakın olduğu için mobil kullanıcılar (özellikle mobil cihazlarda) tarafından daha kolay erişilmesini sağlar. Belki de bu yüzden tasarımcılar genellikle yapışkan bir altbilgi çubuğuna bir gezinme düğmesi içerir. Bu, mobil cihazlarda UX navigasyonunu artırabilir. Bu öğreticide, Divi’de yapışkan bir hücresel altbilgi çubuğunun nasıl yapılacağını göstereceğiz. Her yapışkan altbilgi çubuğunun temeli, Divi varsayılan yapışkan konum seçeneği ile kolayca kontrol edilen sabit bir konumdur. Her biri 4 navigasyon düğmesine sahip 3 farklı yapışkan altbilgi tasarımı tasarlamak için yapışkan pozisyonu ve bir dizi Divi tasarım aracı nasıl kullanacağınızı göstereceğiz. Bu, UX sitesini hücresel olarak geliştirmek isteyen herhangi bir şirket için iyi çalışacaktır.
Başlayalım! Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız yapışkan altbilgi çubuğunun tasarımına bir bakış. Bu öğreticinin tasarımını almak için yapışkan altbilgi çubuğunun şablonunu ve düzenini ücretsiz indirin, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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 -postalar almayacaksınız.
Dosyayı indir
Şablonlar ve ücretsiz düzen nasıl divi web sitenize içe aktarılır, bu indirme iki dosya içerir. Biri, altbilgi şablonlarını tema yapımcılarına içe aktarmak için kullanılabilir ve diğeri her bir altbilgiden ayrı ayrı parçaların düzenini Divi kütüphanesine aktarmak için kullanılabilir.
Yapışkan bir altbilgi çubuğunu kendi web sitenize aktarmak için JSON dosyalarına erişmek için Zip İndirme Zip’i açın. Ardından WordPress kontrol paneline gidin ve Divi> Tema Oluşturucusuna gidin. Ardından sayfanın sağ üst kısmındaki taşınabilirlik simgesini tıklayın. Taşınabilirlik açılır penceresinde, “Divi-Sticky-Footer-Bar-Template” adlı klasörden JSON dosyasını seçin. Ardından İçe Aktar düğmesini tıklayın.
Yapışkan altbilgi Bilah’ın 3 düzeni Divi kütüphanenize aktarmak için Divi kütüphanesine gidin. İçe Aktar düğmesini tıklayın. Taşınabilirlik açılır penceresinde, İçe Aktarma sekmesini seçin ve indirdiğiniz klasörden (ve fermuarı açtığınız) JSON dosyasını (“Divi-Sticky-Footer-Bar-section-laDauts.json”) seçin. Ardından İçe Aktar düğmesini tıklayın.
Bittiğinde, parçanın düzeni Divi Builder’da mevcut olacak. Doğrudan öğreticiye mi gidiyorsunuz? Bölüm 1’de hücresel altbilgi yapışkan oluşturma: Tema Makerinde Yeni Bir Alt Alt Footer Şablonu Oluşturma Başlamak için, Tema Makerına gidin ve varsayılan web sitesi şablonunda yeni bir Global Altbaşı oluşturmak için tıklayın. . Maker’ın telefon ekranını açmak için sol taraftaki telefon simgesini tıklayın. Bu, tasarladığımızda cep telefonunda yapışkan altbilginin nasıl görüleceğini görselleştirmeye yardımcı olacaktır. Ardından sermaye katmanını açmak için sağdaki katman simgesini tıklayın. Bu, her birbirine çok yakın olduklarında öğeleri seçmeye yardımcı olacaktır. Bölüm 2: Yapışkan altbilgi bölümü ve satır yapmak, yapışkan parçaları yapmak için yapışkan parçaları yapar, varsayılanın mevcut normal kısmını kullanabiliriz. Bölüm için ayarları açın ve devam eden sekmenin altında yapışkan konum seçeneğini seçin.
İçerik sekmesinin altına, arka plan rengini bölüme ekleyin. Arka plan rengi: #1A2545 Tasarım sekmesinin altında, dolguları aşağıdaki gibi güncelleyin:
Dolgu: 0px üst, 0px aşağıda Bu, mobil cihazlar için altbilgi çubuğu bölümünü kısaltacaktır.
Bir satır yapın Parça yerleştirildikten sonra, o bölüme bir satır bir sütun ekleyin.
Satır ayarlarını açın ve tasarım sekmesinin altındaki boyut ve mesafe seçeneklerini aşağıdaki gibi güncelleyin: Talang genişliği: 1 Genişlik:% 94
Dolgu: 6px üst, 6px aşağıda
Ekleyeceğimiz ek sütunun hücresel olarak birbirine yakın kalmasını (yığılmayacak) sağlamak için, her şeyi uyum içinde tutmak için Flex özelliğini kullanarak kısa CSS snippet’leri eklememiz gerekir. Devam sekmesinin altına, ana öğeye aşağıdaki özel CSS ekleyin: Ekran: Flex; Hizalama-öğeler: Merkez;
Gerekçelendirme: Merkez; Flex-Wrap: Nowrap;
Bölüm 3: Bir Altbilgi Çubuğu Oluştur düğmesi Bir Altbilgi Çubuğu Oluşturmak için Blurb Modülünü kullanacağız. Bu, hücresel navigasyon için bir hücresel uygulamaya (aşağıdaki başlıklı küçük simge) benzeyen bir düğme yapmamızı sağlar. Sütunda yeni bir açıklama modülü ekleyin.
Açıklamanın içeriğini aşağıdaki gibi güncelleyin:
Başlık: Ev Vücut: Boş Bırak Simgeler kullanın: evet
Ikon: Ana Sayfa simgesi (ekran görüntüsüne bakın)
Tasarım sekmesinin altında, simge stilini aşağıdaki gibi güncelleyin:
Ikon Color: #fff
Simge yazı tipi boyutu: 24 piksel Ardından başlık ve boyut metni seçeneklerini aşağıdaki gibi güncelleyin:
Yazı tipi başlığı: Montserrat
Ağır yazı tipi başlığı: yarı kalın Yazı tipi stili başlığı: TT
Hizalama Metin Başlığı: Orta
Başlık metin rengi: #fff
Başlık Metin Boyutu: 10 piksel
Maksimum genişlik: 60 piksel
Modül hizalaması: merkez
Açıklamaya aşağıdaki yuvarlak pedleri ve açıları eklemeye devam edin:
Dolgu: 5 piksel (üst, alt, sol, sağ)
Yuvarlak açı: 5px (üst, alt, sol, sağ)
Gölge Kutusu: Ekran yakalamaya bakın
Yatay konum gölge kutusu: 0px Dikey Konum Gölge Kutusu: 0px
Kutunun gölgesinin dağılımının gücü: 1px
Gölge Renk: RGBA (255,255,255.0.12)
Bulanıklık görüntüsü ve başlık arasındaki varsayılan alanı ortadan kaldırmak için, bulanıklık görüntüsü için gelişmiş sekmenin altına aşağıdaki CSS parçalarını ekleyin ve bulanık CSS görüntü marjı dip: 0px; Bulanık Başlık CSS Dolgu Alt: 0px; Ayrıca, yatay ve dikey taşma seçeneklerini görünür olarak güncelleyin. Bu, Divi Builder’da düzenlenirken modül ayar çubuğunun kesilmemesini sağlayacaktır.
Yinelenen sütunlar Kalan üç düğmeyi yapmak için daha fazla düğme eklemek için, sütunu (açıklama modülünü içeren) üç kez çoğaltabiliriz. Bu, her biri aynı düğme içeren toplam 4 sütun yapacaktır.
Sütun (ve düğmesi) çoğaltıldıktan sonra, her modül açıklamasına dönebilir ve başlık ve simgenin başlığını istediğiniz her şeye güncelleyebilirsiniz. Bölüm 4: Divi Kütüphanesine kaydedin, şimdi divi kütüphanesine parçaları saklamak için doğru zamandır, böylece daha sonra istediğiniz yere yapışkan altbilgi ekleyebilirsiniz. Kaydetmek için, imleci o bölüme yönlendirirken bölüm ayar çubuğundaki kütüphaneye kaydetme simgesini tıklayın. Sonra düzeni adlandırın ve kütüphaneye kaydedin.
İşte burada! Doğrudan mobil ekrandaki sayfadaki yapışkan altbilgi çubuğumuzun sonuçlarına bakalım. Sonuçlar Bölüm 5: Hücresel Altbilgi Çubuğu Tasarımı #2 Oluşturma Bu yapışkan altbilgi çubuğu için alternatif bir tasarım için, düğmenin çubuğun üzerine çıktığı izlenimini vermek için parçanın arka planı ve bulanıklık kutusunun gölgesi ile biraz yaratıcı olabiliriz. Bölümün ayarlarını güncelleyin, bunu yapmak için parçanın ayarlarını açın ve arka planı aşağıdaki gibi güncelleyin: Masaüstü sekmesinin altında … Arka plan rengi: #1A2545 Yapışkan sekmesinin altında … Arka plan rengi: şeffaf Gradyan Arka Planın Sol Rengi: Sağ Gradyan Arka Planın Şeffaf Rengi: #1A2545
Başlangıç Pozisyonu:% 50
Son pozisyon:% 0
Bir sonraki bulanıklık güncelleyin, açıklamanın dört modülünü seçmek için çok seçici özelliği kullanın. Seçildikten sonra, bunlardan biri için ayarları açın ve arka plan rengini bir kerede güncelleyin:
Arka plan rengi: #1A2545
Tasarım sekmesinin altında, aşağıdaki açıklama için kutunun gölgesini güncelleyin:
Kutunun gölgesinin dağılımının gücü: 3px
Gölge Renk: #1A2545 Bu yapışkan altbilgi çubuğunun düzenini kaydetmek için, imleci o bölüme yönlendirirken bölüm ayarlarında kütüphaneye kaydetme simgesini tıklayın. Sonra düzeni adlandırın ve kütüphaneye kaydedin.
Sonuçta aşağıdaki sonuçlar göz atıyor. Bölüm 6: Hücresel Altbilgi Çubuğu Tasarımı #3 Oluşturma Bu yapışkan altbilgi çubuğu için diğer alternatif tasarımlar için, altbilgi bıçağının bir sekmeye benzemesini sağlamak için yuvarlak bir açı ekleyerek bir satırla biraz yaratıcı olabiliriz. İlk bölüm ayarlarını güncelleyin, mevcut bölüm ayarlarını açın ve şeffaf olacak yapışkan arka plan rengini güncelleyin.
Arka plan rengi (yapışkan): şeffaf
Arka plan gradyanını da sildiğinizden emin olun. Bir sonraki satır ayarlarını güncelleyin, satır ayarlarını açın ve aşağıdaki arka plan rengini ekleyin: Arka plan rengi: #1A2545 Tasarım sekmesinin altında aşağıdakileri güncelleyin:
Dolgu: 10 piksel üst
Yuvarlak açı: 20 piksel sol üst, sağ üst 20 piksel Bu yapışkan altbilgi çubuğunun düzenini kaydetmek için, imleci o bölüme yönlendirirken bölüm ayarlarında kütüphaneye kaydetme simgesini tıklayın. Sonra düzeni adlandırın ve kütüphaneye kaydedin.
Sonuç sonuçtur. Bölüm 7: Masaüstü ekranındaki altbilgiyi sadece hücreselde görüntülenecek şekilde gizlemek için masaüstündeki yapışkan altbilgiyi devre dışı bırakır, bu bölüm için görünürlük seçeneğini her zaman güncelleyebilirsiniz. Devre dışı bırakma seçeneği altındaki masaüstünü seçin. Nihai sonuçlar, yapışkan hücresel altbilgi bıçaklarının tasarımına sonuna bakalım. Yapışkan Footer Bar #1 Yapışkan Footer Bar #2 Yapışkan Footer Bar #3 Son düşünceler Divi’de yapışkan bir altbilgi çubuğu yapmak oldukça basittir. Demek istediğim, sayfanın altına bağlı (veya satır) bölümünü birkaç tıklamayla yapabilirsiniz. Bundan sonra, altbilgi çubuğunu nasıl ayarlamak istediğiniz ve hangi içeriği dahil etmek istediğiniz size kalmış. Bu öğreticide altbilgi bıçaklarının tasarımı hücresel için tasarlanmıştır ve aynı zamanda daha işlevsel ve çok yönlü olmayı amaçlamaktadır, böylece kendiniz nasıl tasarlayacağınızı hissedebilirsiniz. Bu yüzden daha yaratıcı bir tasarımla denemekten korkmayın! Daha fazla bilgi için, arama, e -posta, SMS ve yön için bir tıklama bağlantısı ile bir hücresel temas bıçağı nasıl yapılacağına bakın. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!