COVID-19 Güncellemeleri için Divi Bildirim Kutusu Nasıl Oluşturulur (ÜCRETSİZ İndirme)

Bir web sitesinde her zaman bildirim kutularına ihtiyaç vardır. Kullanıcılara görebilecekleri önemli bilgiler sağlayan yararlı eklemelerdir. Ne yazık ki, büyüyen COVID-19 salgını, birçok web sitesini kullanıcılarını güncel tutma konusunda acil bir ihtiyaçla karşı karşıya bıraktı. Bir bildirim kutusu bunu yapmanın harika bir yoludur.

Bugün, Divi sayfalarınıza veya şablonlarınıza eklemeniz için ÜCRETSİZ bir Divi bildirim kutusu bölümü düzeni (gerekli tüm kod/işlevlerle birlikte) veriyoruz.

Endişelenmeyin, size onu sıfırdan nasıl kuracağınızı ve nasıl kullanacağınızı da göstereceğiz.

Başlayalım!

Gizlice Bakış

İşte Bildirim Kutusuna ve nasıl çalıştığına hızlı bir bakış.

Divi Bildirim Kutusu Bölüm Düzenini ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır. Bunun bir bölüm düzeni olduğunu unutmayın, bu nedenle oluşturucuda yeni bir bölüm oluştururken bu düzeni bir sayfaya, gönderiye veya şablona eklemeniz gerekecek.

Bildirim Kutusu Bölüm Düzeninin bir sayfaya veya şablona nasıl ekleneceğini öğrenmek için gönderinin alt kısmına bakın.

Hadi öğreticiye geçelim, olur mu?

Bölüm 1: Divi Kitaplığına Yeni Bir Bölüm Düzeni Ekleme

Bu tasarım için öncelikle Divi Library'de bölüm düzeni olarak bildirim kutusunu oluşturacağız. Bu şekilde, bölüm düzeni tamamlandıktan ve kaydedildikten sonra, bölüm düzenini Divi Kitaplığından herhangi bir Divi Sayfasına, Gönderisine veya Şablona kolayca ekleyebiliriz. Buradaki fikir, site için bir bildirim kutusuna/bölümüne ihtiyacımız olan her durumda kütüphanede hazır bulundurmaktır.

Düzen Ekle

Başlamak için Divi > Divi Kitaplığı'na gidin.

Kütüphaneye yeni bir düzen eklemek için “Yeni Ekle” düğmesine tıklayın.

Yeni Düzen Ekle açılır penceresinde, düzene bir ad verin (örn. “Bildirim Bölümü”) ve “Bölüm” düzen türünü seçin.

Ardından Gönder'i tıklayın.

Bölüm 2: Bildirim Kutusu Bölüm Düzenini Tasarlama

Ön Uçta Oluşturun

Bu, Divi Builder'ı kullanan normal bir sayfa gibi işlev gören düzen düzenleyiciyi dağıtacaktır. Mizanpajı görsel olarak oluşturmak istediğimiz için “Build On The Front End”e tıklayın.

Bölüm Arka Planı ve Dolgu

Bölüm ayarlarını açın ve arka planı ve dolguyu aşağıdaki gibi güncelleyin:

• Degrade Arka Plan Sol Renk:
• Degrade Arka Plan Sağ Renk:
• Dolgu: 0 piksel üst, 0 piksel alt

Bölüm CSS Kimliği

Bildirim kutusu, kutuyu/bölümü kapatmak için tıklanabilir işlevsellik sağlamak için bazı özel CSS/JQuery'ye ihtiyaç duyacaktır. Daha sonra kodla hedefleyebilmemiz için aşağıdaki CSS kimliğini bölüme ekleyin.

• CSS Kimliği: bildirim bölümü

Satır ve Satır Genişliği Ekle

Bölüme tek sütunlu bir satır ekleyin.

Ardından satır ayarlarını maksimum genişlikle aşağıdaki gibi güncelleyin:

• Maksimum Genişlik: 700 piksel

Bildirim Metni için Metin Modülü Ekle

Satırın içine yeni bir metin modülü ekleyin. Burası, bildirim kutusu için metin içeriğini eklediğimiz yer olacak.

Metin içeriği

Gövde içeriğini bildirim için gereken metinle aşağıdaki gibi güncelleyin:

<h2>COVID-19 Notice</h2>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.

Metin Tasarımı

Tasarım sekmesi altında metin stilini aşağıdaki gibi güncelleyin:

• Yazı Tipi: Kabin
• Metin Metin Boyutu: 18px
• Metin Hizalama: orta
• Başlık 2 Metin Boyutu: 46px (masaüstü), 38px (tablet), 28px (telefon)
• Başlık 2 Çizgi Yüksekliği: 1.3em

İki Sütun Satırı Ekle

Metin modülünün bulunduğu satırın altına iki sütunlu (1/2 – 1/2) yeni bir satır ekleyin.

Satır Genişliği

Satırı aşağıdaki maksimum genişlikle güncelleyin:

• Maksimum Genişlik: 600 piksel

CTA Düğmesi Ekle

Bu bildirim kutusunun solunda, bir kullanıcıyı daha fazla bilgi içeren başka bir sayfaya yönlendirmek için kullanılabilecek bir "Daha Fazla Bilgi Edin" CTA Düğmesi bulunur.

Düğmeyi oluşturmak için sütun 1'e yeni bir düğme modülü ekleyin.

Düğme İçeriği

Düğme metnini "Daha Fazla Bilgi Edinin" ile güncelleyin ve kullanıcıları daha fazla bilgi için başka bir sayfaya yönlendirmek için düğme bağlantı URL'sini ekleyin.

Düğme Tasarımı

Aşağıdaki tasarım seçeneklerini güncelleyin:

• Düğme Hizalama: merkez
• Düğme İçin Özel Stilleri Kullan: EVET
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #f6ae55
• Düğme Kenar Genişliği: 0px
• Düğme Yazı Tipi: Kabin
• Düğme Yazı Ağırlığı: Kalın

Düğmenin sütunun tüm genişliğine yayılmasını sağlamak için ana öğeye aşağıdaki özel CSS'yi ekleyin:

display: block !important;

Kapat Düğmesi Ekle

Bu bildirim kutusunun sağ sütununda bir "Anladım!" Bildirim kutusunu daraltan/kapatan düğme. Bu düğme için, arka plan ve metin rengi dışında önceki düğmenin tasarımının çoğunu koruyacağız. Ayrıca daha sonra kodla hedeflemek için bu düğmeye bir CSS kimliği vermemiz gerekecek.

Sağ Sütuna Kopyala ve Yapıştır Düğmesi

Düğme tasarımına hızlı bir başlangıç ​​yapmak için, 1. sütundaki düğmeyi kopyalayın ve 2. sütuna yapıştırın.

İçerik

Düğme metnini güncelleyin.

• Düğme Metni: Anladım!

Tasarım

Ardından düğme metni rengini ve arka plan rengini aşağıdaki gibi güncelleyin:

• Düğme metni Renk: #121212
• Düğme Arka Plan Rengi: rgba(255,255,255,0.4)

Düğme CSS Sınıfı

Bu düğme için, daha sonra bildirim kutusunu daraltmak/kapatmak için gereken kodla düğmeyi hedeflemek için aşağıdaki CSS Sınıfını ekleyin.

• CSS Sınıfı: yakın bildirim

Bildirim Kutusu Kapat Simgesini Oluşturma (“x”).

Satır ekle

Bildirim kutusunun sağ üst köşesindeki kapat simgesini oluşturmak için yeni bir tek sütunlu satır.

Satır Ayarları

Ardından satır genişliğini ve dolguyu aşağıdaki gibi güncelleyin:

• Genişlik: %100
• Maksimum Genişlik: %100
• Dolgu: 0 piksel üst, 0 piksel alt

Blurb Modülü/Simgesi Ekle

Satırın içine yeni bir tanıtım yazısı modülü ekleyin.

İçerik

Ardından, tanıtım yazısı için “x” simgesini kullanmak için Başlık ve Gövde seçimindeki sahte içeriği silin.

Kapat Simgesi için Bulanıklık Ayarları

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Simge Rengi: #ffffff
• Simge Yazı Tipi Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutu: 40px
• Genişlik: 40 piksel
• Yükseklik: 40 piksel

Simge Konumu

Simgeyi kutunun sağ üst köşesine yerleştirmek için Gelişmiş sekmesini açın ve aşağıdakileri güncelleyin:

• Pozisyon: Mutlak
• Yer: sağ üst
• Dikey Ofset: 20px
• Yatay Ofset: 20px

Bulanıklık/Simge CSS Sınıfı

Şimdi, "Anladım!" için yaptığınız tanıtım yazısına aynı CSS Sınıfını ekleyin. Kapat düğmesi (her ikisi de bildirim kutusunu kapatmak için kullanılacaktır).

• CSS Sınıfı: yakın bildirim

Özel Kod Ekle

Bu bildirim kutusu için aşağıdakileri yapmak için özel CSS/Javascript ekleyeceğiz:

• Kapat düğmesine veya kapat simgesine tıkladığınızda bildirim kutusunu kapatın.
• Kutuyu (ve altındaki sayfa içeriğini) yukarı doğru kaydırarak (bu tür kutularda yaygın bir eğilim) bildirim kutusunu kapatın.
• Etkinliği kullanıcının tarayıcısına kaydedin, böylece açılır pencere oturum sırasında kapatıldıktan sonra gösterilmeye devam etmez.

İşlevselliği eklemek için kodu bir kod modülüne ekleyeceğiz. Devam edin ve kapat düğmesi modülünün altına (veya gerçekten sayfanın herhangi bir yerine) yeni bir kod modülü ekleyin.

Ardından aşağıdaki kodu kod modülü içerik alanına yapıştırın:

<style>
  .close-notice {
    cursor: pointer;
  }
  #notice-section {
    display:none;
  }
  .et-fb-post-content #notice-section {
    display: block !important;
  }
</style>
<script>
function storageAvailable(type) {
  try {
      var storage = window[type],
          x = '__storage_test__';
      storage.setItem(x, x);
      storage.removeItem(x);
      return true;
  }
  catch(e) {
      return e instanceof DOMException && (
          // everything except Firefox
          e.code === 22 ||
          // Firefox
          e.code === 1014 ||
          // test name field too, because code might not be present
          // everything except Firefox
          e.name === 'QuotaExceededError' ||
          // Firefox
          e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
          // acknowledge QuotaExceededError only if there's something already stored
          storage.length !== 0;
  }
}
jQuery(document).ready(function($) {
  var storageAvailable = window.storageAvailable('sessionStorage');
  $(".close-notice").click(function() {
    $("#notice-section").slideUp();
    if (storageAvailable) {
      sessionStorage.setItem('etNoticeState','hidden'); 
    }    
  });
  if (storageAvailable) {
    if ('hidden' !== sessionStorage.getItem('etNoticeState')){
      $("#notice-section").show();
    }
  } else {
    $("#notice-section").show();
  }
});
</script>

Kod Hakkında

Stil etiketlerinde, aslında bununla başlangıçta bildirim kutusunu/bölümünü gizlediğimizi fark edeceksiniz…

#notice-section {display:none;} 

Bu şekilde, tarayıcının öğeyi kaydetmek için ihtiyacımız olan depolamaya sahip olduğundan emin olabiliriz.

Aynı pasaj, Divi Builder'daki (ön uçta) bölümü de gizleyecektir. Bunu geçersiz kılmak için Divi Builder'daki bölümü göstermek için başka bir snippet ekledik, böylece görsel olarak düzenlemeler yapabilirsiniz.

.et-fb-post-content #notice-section {display:none;} 

JS işlevi “storageAvailable(type)”, tarayıcıda depolama olup olmadığını kontrol eder.

jQuery snippet'i gereken diğer her şeyi yapar…

• “close-bildirim” sınıfı ile düğme ve simgeye tıklandığında bölümü (#notice-section) kapatır.
• Tarayıcının kullanılabilir oturum depolama alanı varsa, kutuyu kapatmak için herhangi bir düğmenin tıklanması, kullanıcının tarayıcı açık olduğu sürece devam eden tarayıcı oturumunun geri kalanı sırasında kutuyu gizler.

Bittiğinde, Bölüm Düzenini kaydettiğinizden emin olun.

Bir Sayfaya Bildirim Kutusu (bölüm düzeni) ekleme

Divi Builder'ı kullanarak bir sayfaya bildirim kutusu bölüm düzeni eklemek için Divi Builder'da bir sayfa açın ve sayfaya yeni bir bölüm eklemek için mavi simgeye tıklayın.

Kitaplıktan Ekle sekmesini açın ve listeden bildirim kutusu bölümü düzenini seçin. Bu örnek için “Bildirim Bölümü” adını verdik.

A bölümünü sayfanın en üstüne (veya isteyebileceğiniz başka bir yere) yerleştirdiğinizden emin olun ve sayfayı kaydedin.

Bildirim Kutusunu (bölüm düzeni) Divi Tema Şablonuna Ekleme

Ayrıca herhangi bir sayfa/yazı şablonuna, genel üstbilgiye veya genel altbilgiye bildirim kutusu bölüm düzenini ekleyebiliriz. İşlem, onu normal bir Divi sayfasına eklemekle aynıdır.

Bir şablona eklemek için Divi Tema Oluşturucu'yu açın.

Ardından, bildirim kutusu bölüm düzenini eklemek istediğiniz şablon alanını düzenlemek için tıklayın.

Şablon düzeni düzenleyicisinde, yeni bir bölüm eklemek için tıklayın ve Divi kitaplığından kaydedilen bölüm düzenini seçin.

Şablon düzenini kaydedin.

Bu kadar!

Son sonuç

İşte canlı bir sayfadaki bildirim kutusunun nihai sonucu.

Son düşünceler

Umarım bu Divi Bildirim Kutusu işe yarar. Bunun gibi bir şey için gerçekten çok harika kullanımlar var. Ve dünya hala COVID-19 ile mücadele ediyor olsa da, yakın gelecekte birçok olumlu bildirimi sabırsızlıkla bekliyoruz.

Yorumlarda sizden haber bekliyorum.

Şerefe!