Divi ile sabit bir hücresel altbilgi çubuğu nasıl yapılır
Her şeyin hücresel deneyime uyacak şekilde ayarlanmasını sağlamanın ne kadar önemli olduğunu biliyoruz. Hücresel deneyimleri daha yüksek bir seviyeye getirmenize yardımcı olmak için, bu adımda bu adımda Divi ile sabit bir hücresel altbilgi nasıl yapacağınızı göstereceğiz. Bu öğretici, her hafta tasarım ekipmanı kutunuza ekstra bir şey koymaya çalıştığımız devam eden Divi Tasarım Girişimimizin bir parçasıdır. Bu kez, sağlık kliniği düzeni paketini kullanacağız ve hücresel altbilgi çubuğunun düzen paketinin stiline göre kalmasını sağlayacağız. Bununla birlikte, bu yaklaşımı üzerinde çalıştığınız her türlü tasarım için kullanabilecek ve kendi hücresel çubuğunuzun alternatif altbilgi çubuklarını kullanabilirsiniz.
Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, adım adım yeniden yapacağımız üç örneğe bakalım. Bu örnekler yalnızca cep telefonunda (ve isterseniz tablet) görünecektir.
Üst dolgu: 0px
Aşağıda dolgu: 0px Görünürlüğümüz de masaüstündeki bu bölümü gizler. Yalnızca hücreselde görünen bir hücresel altbilgi çubuğu istiyorsanız, tabletteki parçaları da devam ettirin ve gizleyin. Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve boyut ayarlarını değiştirin.
Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Yüksek sütunu eşitleyin: evet Bir sonraki satırdan tüm dolgunun varsayılan olarak yukarı ve aşağı mesafesini kaldırın.
Üst dolgu: 0px
Aşağıda dolgu: 0px Son özel CSS, hatta birkaç özel CSS hattı ekledik. Bu çizgiler satırları sabit altbilgi bıçaklarına dönüştürmeye yardımcı olacaktır. Ekran: Flex;
Konum: Sabit;
Alt: 0px;
Z-endeks: 99; Metin modülünü sütun 1’e ekleyin, içerikleri ekleyin Modül eklemeye başlamanın zamanı geldi! İhtiyacımız olan ilk modül, sütun 1’deki metin modülüdür. Biraz seçim içeriği ekleyin. Arka Plan Rengi Modülün arka plan ayarlarını açın ve arka plan rengini değiştirin.
Arka plan rengi: #5E89FB Metin ayarları ayrıca metin ayarlarını da değiştirir.
Metin Yazı Tipi: Çalışma SAN’ları
Metin yazı tipi ağırlığı: ışık
Metin rengi: #ffffff
Metin Boyutu: 16px
Metin mektubu alanı: -1px Mesafe Bir sonraki özel dolgu değerleri ekleyin.
Üst dolgu: 16px
Dolgu Alt: 16px
Sol dolgu: 15px
Doğru dolgu: 15px Sınır ve birkaç yuvarlak açı da.
Sol üst: 10 piksel
Sağ üst: 10 piksel Kutunun gölgesi, pürüzsüz bir kutu gölgesi ekleyerek modül ayarlarını tamamlar.
Bulanık Güç Gölgesi Kutusu: 80px Blurb Modülünü Sütun 2’ye ekleyin Dolgu ekle Bulanık modülünü ikinci sütuna ekleyin ve seçim başlığını ekleyin. Blurb modülü için simgeyi seçerek Simgeyi Seçin. Arka Plan Rengi Modüle arka plan rengini de ekleyin.
Arka plan rengi: #62de9D Simge Ayarları Tasarım sekmesine geçin ve simge ayarlarını değiştir. Ikon Renk: #ffffff
Simge Yerleştirme: Sol
Simge yazı tipi boyutu kullanın: evet
Simge Yazı Tipi Boyutu: 19px
Başlık metin ayarları başlık metin ayarlarını değiştirerek devam eder. Yazı Tip Başlığı: Çalışma SANS
Başlık metin rengi: #ffffff
Başlık Metin Boyutu: 16px
Başlık mektubu aralığı: -1px
Mesafe Modüle bazı özel pedler de ekleyin. Üst dolgu: 20px
Dolgu Alt: 10 piksel
Sol dolgu: 30px
Sağ dolgu: 30px
Sınır ve sol üst ve sağ köşelere ’10px’ ekleyin. Sol üst: 10 piksel
Sağ üst: 10 piksel
Son kutu gölgesi, modüle pürüzsüz bir kutu gölgesi ekleyin. Bulanık Güç Gölgesi Kutusu: 80px
Yeni bir örnek #2 yap İkinci örneğe sayfanın altına yeni bir bölüm ekleyin! Bir kez daha, seçim sayfanızı açın, sayfanın sonuna doğru kaydırın ve yeni bir bölüm ekleyin. Aralık Ayarlarını Açın ve Üst ve Alt Dövme Varsayılanını Sil. Üst dolgu: 0px
Aşağıda dolgu: 0px
Görünürlük masaüstündeki parçaları gizleyin (ve isterseniz tablet). Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve boyut ayarlarını değiştirin. Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Varsayılan dolgunun üst ve alt kısmını satırdan da çıkarın. Üst dolgu: 0px
Aşağıda dolgu: 0px
CSS özellikle bir sonraki satıra birkaç özel CSS hattı ekleyin. Bu CSS kod hattı, sabit bir hücresel altbilgi çubuğu yapılmasına yardımcı olacaktır. Ekran: Flex; Konum: Sabit;
Alt: 0px;
Z-endeks: 99;
Blurb modülünü sütun 1’e ekleyin, içeriği ekleyin, ilk sütuna bulanık modül ekleyerek devam edin. Seçim başlığını ekleyin. Daha sonraki simgeyi seçin, simgelerden birini seçin.
Arka plan rengi Arka plan rengini bir sonraki modüle ekleyin.
Arka plan rengi: #62de9D Simgenin ayarlanması Tasarım sekmesine geçer ve modül simgesi ayarlarını değiştirir.Ikon Color: #ffffff Simge Yerleştirme: Üst
Simge yazı tipi boyutu kullanın: evet
Simge yazı tipi boyutu: 25px
Başlık Metin Ayarları Başlık metin ayarlarını da değiştirin.
Yazı Tip Başlığı: Çalışma SANS Hizalama Metin Başlığı: Orta
Başlık metin rengi: #ffffff
Başlık mektubu aralığı: -1px
Mesafe ve nefes alması için alan modülünü vermek için birkaç üst ve alt yatak ekleyin.
Üst dolgu: 30px Dolgu Alt: 30 piksel
Sınırımız ayrıca modülün sol üst sınırına ’15px’ ekler.
Sol üst: 15px Kutunun gölgesi ve modülü düz bir kutu gölgesiyle tamamlayacağız.
Bulanık Güç Gölgesi Kutusu: 80px Klon bulanık modülü iki kez ve kalan sütuna yinelenen ilk bulanıklık modülünü değiştirmeyi bitirdikten sonra, modüllere iki kez devam edebilir ve klona koyabilir ve kalan iki sütuna yerleştirebilirsiniz.
Yinelenen arka plan rengini değiştir #1 İlk yinelenen arka plan rengini değiştirin. Arka plan rengi: #3D3D3D Uzay ayarları ile birlikte yinelenen aralık ayarları #1’i değiştirin.
Üst kenar boşluğu: -20px Üst dolgu: 50 piksel
Dolgu Alt: 30 piksel
1 #1 ve yuvarlak açıyı da değiştirin.
Yinelenen Arka Plan Rengi #2 Değiştir üçüncü sütunda da ikinci yinelenen arka plan rengini değiştirin. Arka plan rengi: #000000 Yuvarlak bir açı ile birlikte yinelenen limiti değiştirin.
Sağ üst: 15px Bir örnek #3 yap
Sayfanın altına bir sonraki ve son örneğe yeni bir bölüm ekleyin! Sayfalardan birini açın, sayfayı aşağı kaydırın ve yeni bir bölüm ekleyin. Farklı açık ayar ayarları ve üst bölücüyü ekleyin. Renk Renk: #62DE9D Böcek Yüksekliği: 110 piksel Mesafe Tüm dolguyu varsayılan parçaları da silin.
Üst dolgu: 0px
Aşağıda dolgu: 0px Kutunun gölgesi, pürüzsüz kutunun gölgesini bir sonraki bölüme ekleyin.
Bulanık Güç Gölgesi Kutusu: 80px
Özel CSS ve Gelişmiş sekmesine birkaç özel CSS hattı ekleyin. Bu, parçayı sabit bir hücresel altbilgi çubuğuna değiştirmeye yardımcı olacaktır. Konum: Sabit; Alt: 0px;
Genişlik:%100; Z-endeks: 99;
Son görünürlük, masaüstündeki parçaları devre dışı bırakın (ve isterseniz tablet).
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:
Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve boyut ayarlarını değiştirin. Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet Talang genişliği: 1
Mesafe Bazı özel üst ve alt rulmanlar ekleyin.
Üst dolgu: 30px
Dolgu Alt: 20 piksel CSS Özellikle üç sütunun aynı yükseklikte kalmasını sağlamak için CSS kod satırını Gelişmiş Satır sekmesine ekleyeceğiz. Ekran: Flex;
Blurb modülünü Sütun 1’e ekleyin, içerik ekle Şimdi modül eklemeye başlayabiliriz! Blurb modülünü ilk sütuna ekleyin ve başlığı verin.
Simgeyi seçin Bir sonraki simgeyi seçin. Ikon ayarları Tasarım sekmesine geçer ve simge ayarlarını değiştirir. Ikon Color: #ffffff Simge Yerleştirme: Üst Simge yazı tipi boyutu kullanın: evet
Simge yazı tipi boyutu: 25px
Başlık Metin Ayarları Başlık metin ayarlarını da değiştirin.
Yazı Tip Başlığı: Çalışma SANS
Metin Oryantasyonu Başlık: Tengahspasi Mektup Başlık: -1px Blurb Klon Modülü İki kez ve yerleştirin Sütun 1’deki bulanıklık modülünü değiştirmeyi bitirdikten sonra, modülü iki kez klonlayabilirsiniz. Kalan iki sütuna yinelenen yerleştirin.
Yinelenen simgenin rengini değiştir #1 İkinci sütunda bulunan yinelenen simgenin rengini değiştirmeyi unutmayın.
Renk simgesi: #000000
Önizleme Şimdi tüm farklı adımlardan geçtikten sonra, yukarıda ele aldığımız üç örneğin nihai sonuçlarına bakalım. Bu yazıdaki son zihin, öğreticiyi takip ederek adım adım bir adım atabileceğiniz üç farklı hücresel altbilgi bıçak tasarımını ele aldık. Hücresel altbilgi çubuğu, bahçedeki haddeleme deneyimleri boyunca ziyaretçileri takip edecek. Bu öğretici, her hafta tasarım ekipmanı kutunuza ekstra bir şey koymaya çalıştığımız devam eden Divi Tasarım Girişimi’nin bir parçasıdır. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
