Divi ile Sabit Mobil Altbilgi Çubukları Nasıl Oluşturulur

Her şeyin mobil deneyime uyacak şekilde özelleştirildiğinden emin olmanın ne kadar önemli olduğunu biliyoruz. Mobil deneyimi başka bir düzeye taşımanıza yardımcı olmak için, bu adım adım gönderide Divi ile nasıl sabit mobil alt bilgi çubukları oluşturacağınızı göstereceğiz.

Bu eğitim, her hafta tasarım araç kutunuza fazladan bir şey koymaya çalıştığımız devam eden Divi tasarım girişimimizin bir parçasıdır. Bu sefer Sağlık Kliniği Düzen Paketini kullanacağız ve sabit mobil altbilgi çubuklarını düzen paketinin stiline uygun hale getireceğiz. Ancak bu yaklaşımı, üzerinde çalıştığınız her türlü tasarım için kullanabilecek ve kendi sabit mobil altbilgi çubuğu alternatiflerinizi oluşturabileceksiniz.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, adım adım yeniden oluşturacağımız üç örneğe hızlıca bir göz atalım. Bu örnekler yalnızca mobil cihazlarda (ve isterseniz tablette) gösterilecektir.

Örnek 1'i Yeniden Oluştur

Sayfanın Altına Yeni Bölüm Ekle

İlk sabit mobil alt bilgi çubuğunu yeniden oluşturmaya başlayalım! Sağlık Kliniği Düzen Paketinde bulunan düzenlerden üçü için bir sayfa oluşturmanızı öneririz. Her örnek için bir tane. İlk alt bilgi çubuğunu eklemek istediğiniz sayfayı açın. Sayfanın sonuna gidin ve son bölümden hemen sonra yeni bir bölüm ekleyin.

aralık

Satır ayarlarını açın ve boşluk ayarlarındaki tüm özel üst ve alt dolguları kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

görünürlük

Bu bölümü masaüstünde de saklıyoruz. Mobil alt bilgi çubuğunun yalnızca mobil cihazlarda görünmesini istiyorsanız, devam edin ve bölümü tablette de gizleyin.

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını değiştirin.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Sonraki satırın tüm varsayılan üst ve alt dolgularını kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Özel CSS

Son olarak, satıra bazı özel CSS satırları ekliyoruz. Bu satırlar, satırı sabit bir altbilgi çubuğuna dönüştürmeye yardımcı olacaktır.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

Sütun 1'e Metin Modülü Ekle

İçerik Ekle

Modül eklemeye başlama zamanı! İhtiyacımız olan ilk modül, 1. sütundaki bir Metin Modülüdür. İstediğiniz içeriği ekleyin.

Arka plan rengi

Modülün arka plan ayarlarına gidin ve arka plan rengini değiştirin.

• Arka Plan Rengi: #5e89fb

Metin Ayarları

Metin ayarlarını da değiştirin.

• Metin Yazı Tipi: İş Sans
• Metin Yazı Tipi Ağırlığı: Hafif
• Metin Rengi: #ffffff
• Metin Boyutu: 16px
• Metin Harf Aralığı: -1px

aralık

Daha sonra bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 16px
• Alt Dolgu: 16px
• Sol Dolgu: 15px
• Sağ Dolgu: 15px

Sınır

Ve bazı yuvarlak köşeler de.

• Sol Üst: 10 piksel
• Sağ Üst: 10px

Kutu Gölge

İnce bir kutu gölgesi ekleyerek modülün ayarlarını tamamlayın.

• Kutu Gölge Bulanıklığı Gücü: 80px

Sütun 2'ye Blurb Modülü Ekle

İçerik Ekle

İkinci sütuna bir Blurb Modülü ekleyin ve istediğiniz bir başlık ekleyin.

Simge Seç

Blurb Module için bir simge seçerek devam edin.

Arka plan rengi

Modüle de bir arka plan rengi ekleyin.

• Arka Plan Rengi: #62de9d

Simge Ayarları

Tasarım sekmesine gidin ve simge ayarlarını değiştirin.

• Simge Rengi: #ffffff
• Simge Yerleşimi: Sol
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 19px

Başlık Metni Ayarları

Başlık metni ayarlarını değiştirerek devam edin.

• Başlık Yazı Tipi: İş Sans
• Başlık Metin Rengi: #ffffff
• Başlık Metin Boyutu: 16px
• Başlık Harf Aralığı: -1px

aralık

Modüle bazı özel dolgular da ekleyin.

• Üst Dolgu: 20px
• Alt Dolgu: 10px
• Sol Dolgu: 30px
• Sağ Dolgu: 30px

Sınır

Ve sol üst ve sağ üst köşelere '10px' ekleyin.

• Sol Üst: 10 piksel
• Sağ Üst: 10px

Kutu Gölge

Son olarak, modüle ince bir kutu gölgesi ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 80px

Örnek 2'yi Yeniden Oluştur

Sayfanın Altına Yeni Bölüm Ekle

İkinci örneğe geçelim! Yine istediğiniz bir sayfayı açın, sayfanın sonuna doğru aşağı kaydırın ve yeni bir bölüm ekleyin.

aralık

Bölüm ayarlarını açın ve varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

görünürlük

Bölümü masaüstünde (ve isterseniz tablette) gizleyin.

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

boyutlandırma

Herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını değiştirin.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Satırın varsayılan üst ve alt dolgusunu da kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Özel CSS

Sonraki satıra bazı özel css satırları ekleyin. Bu CSS kodu satırları, sabit mobil alt bilgi çubuğunun oluşturulmasına yardımcı olacaktır.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

Sütun 1'e Blurb Modülü Ekle

İçerik Ekle

İlk sütuna bir Bulanıklık Modülü ekleyerek devam edin. Seçtiğiniz bir başlık ekleyin.

Simge Seç

Ardından, bir simge seçin.

Arka plan rengi

Sonraki modüle bir arka plan rengi ekleyin.

• Arka Plan Rengi: #62de9d

Simge Ayarları

Tasarım sekmesine gidin ve modülün simge ayarlarını değiştirin.

• Simge Rengi: #ffffff
• Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 25px

Başlık Metni Ayarları

Başlık metni ayarlarını da değiştirin.

• Başlık Yazı Tipi: İş Sans
• Başlık Metni Hizalama: Orta
• Başlık Metin Rengi: #ffffff
• Başlık Harf Aralığı: -1px

aralık

Ve modüle nefes alması için biraz boşluk bırakmak için biraz üst ve alt dolgu ekleyin.

• Üst Dolgu: 30 piksel
• Alt Dolgu: 30px

Sınır

Ayrıca modülün sol üst kenarına '15px' ekliyoruz.

• Sol Üst: 15 piksel

Kutu Gölge

Ve modülü ince bir kutu gölgesiyle tamamlayacağız.

• Kutu Gölge Bulanıklığı Gücü: 80px

Blurb Modülünü İki Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

İlk Blurb Modülünü değiştirmeyi bitirdikten sonra, devam edip modülü iki kez klonlayabilir ve kopyaları kalan iki sütuna yerleştirebilirsiniz.

Yinelenen #1'in Arka Plan Rengini Değiştir

İlk kopyanın arka plan rengini değiştirin.

• Arka Plan Rengi: #3d3d3d

Yinelenen #1'in Aralık Ayarlarını Değiştirin

Boşluk ayarları ile birlikte.

• Üst Kenar Boşluğu: -20px
• Üst Dolgu: 50px
• Alt Dolgu: 30px

Yinelenen #1 Sınırını Değiştir

Ve ayrıca yuvarlatılmış köşeler.

Kopya #2'nin Arka Plan Rengini Değiştir

Üçüncü sütundaki ikinci kopyanın arka plan rengini de değiştirin.

• Arka Plan Rengi: #000000

Kopya #2'nin Kenarlığını Değiştir

Yuvarlatılmış köşelerle birlikte.

• Sağ Üst: 15px

Örnek 3'ü Yeniden Oluştur

Sayfanın Altına Yeni Bölüm Ekle

Bir sonraki ve son örneğe geçelim! Sayfalardan birini açın, sayfayı aşağı kaydırın ve yeni bir bölüm ekleyin.

Üst Bölücü

Bölüm ayarlarını açın ve bir üst ayırıcı ekleyin.

• Bölücü Rengi: #62de9d
• Bölücü Yüksekliği: 110px

aralık

Bölümün tüm varsayılan üst ve alt dolgularını da kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Kutu Gölge

Sonraki bölüme ince bir kutu gölgesi ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 80px

Özel CSS

Ve gelişmiş sekmeye bazı özel CSS satırları ekleyin. Bu, bölümü sabit bir mobil altbilgi çubuğuna dönüştürmeye yardımcı olacaktır.

position:fixed;
bottom:0px;
width: 100%;
z-index: 99;

görünürlük

Son olarak, masaüstündeki (ve isterseniz tabletteki) bölümü devre dışı bırakın.

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını değiştirin.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Daha sonra bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 30 piksel
• Alt Dolgu: 20px

Özel CSS

Üç sütunun hepsinin aynı yükseklikte kalmasını sağlamak için satırın gelişmiş sekmesine de bir satır CSS kodu ekleyeceğiz.

display: flex;

Sütun 1'e Blurb Modülü Ekle

İçerik Ekle

Artık modülleri eklemeye başlayabiliriz! İlk sütuna bir Blurb Modülü ekleyin ve ona bir başlık verin.

Simge Seç

Sonraki bir simge seçin.

Simge Ayarları

Tasarım sekmesine gidin ve simge ayarlarını değiştirin.

• Simge Rengi: #ffffff
• Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 25px

Başlık Metni Ayarları

Başlık metni ayarlarını da değiştirin.

• Başlık Yazı Tipi: İş Sans
• Başlık Metin Yönü: Merkez
• Başlık Harf Aralığı: -1px

Klon Blurb Modülü İki Kez ve Yerleştir

1. sütundaki Blurb Modülünü değiştirmeyi bitirdikten sonra, devam edip modülü iki kez klonlayabilirsiniz. Kopyaları kalan iki sütuna yerleştirin.

Yinelenen #1 Simge Rengini Değiştir

İkinci sütunda bulunan kopyanın simge rengini değiştirmeyi unutmayın.

• Simge Rengi: #000000

Ön izleme

Şimdi tüm farklı adımlardan geçtik, şimdi yukarıda ele aldığımız üç örneğin sonuçlarına son bir göz atalım.

Son düşünceler

Bu gönderide, öğreticiyi izleyerek adım adım yeniden oluşturabileceğiniz üç farklı sabit mobil alt bilgi çubuğu tasarımını ele aldık. Mobil alt bilgi çubukları, ziyaretçileri sayfadaki kaydırma deneyimleri boyunca takip edecektir. Bu eğitim, devam eden Divi tasarım girişiminin bir parçasıdır ve her hafta tasarım araç kutunuza fazladan bir şey koymaya çalışıyoruz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!