Divi Sitenizde Karanlık Mod Geçişi Nasıl Uygulanır?

Karanlık mod, kullanıcıların web'i gözleri daha az yorarak deneyimlemeleri için uygun bir seçenek olarak popülaritesini artırmaya devam ediyor. Kabul edelim, hepimiz ekranlara muhtemelen olması gerekenden daha fazla zaman ayırma eğilimindeyiz, bu nedenle kullanıcı deneyimine (karanlık mod gibi) yönelik ek konforlar çok yol kat edebilir. İşletim Sistemleri, programlar ve tarayıcılar genellikle yerleşik karanlık mod özelliklerini içerir, ancak bazı geliştiriciler web siteleri için özel bir karanlık mod deneyimi ekleyerek bunu başka bir düzeye taşıyor. Buradaki fikir, markalaşma ve/veya tasarımdan ödün vermeden web sitelerinin karanlık modda nasıl göründüğü üzerinde daha fazla kontrol sahibi olmaktır.

Bu eğitici yazıda, Divi'de eklenti olmadan sıfırdan özel bir karanlık mod geçişinin nasıl oluşturulacağını göstereceğiz. Bu karanlık mod geçiş işleviyle, karanlık mod tasarımı üzerinde kontrol sahibi olacaksınız ve markanıza göre daha iyi bir kullanıcı deneyimine sahip olacaksınız.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

İşte oluşturacağımız özel karanlık mod geçişi.

Ve işte hazır düzenlerimizden birine uygulanan karanlık modun öncesi ve sonrası.

Ve işte global bir başlığa eklenen karanlık mod geçişi. Sitede gezinirken aydınlık/karanlık modunun nasıl kaldığına dikkat edin.

Düzeni Ü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.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

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.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Bölüm 1: Karanlık Mod Geçişini Oluşturma

Eğitimin bu ilk bölümünde, Divi'de bir sayfa ile karanlık mod geçişi oluşturacağız. Kodla geçiş oluşturulduğunda, onu Divi Kitaplığına kaydedebilir ve web sitenizdeki herhangi bir yere ekleyebilirsiniz.

Başlamak için, ön uçta Divi ile sıfırdan oluştururken varsayılan bölüme tek sütunlu bir satır ekleyin.

Bulanıklık Ekle

Özel geçişi oluşturmak için küçük bir özel CSS ile bir tanıtım yazısı modülü tasarlayacağız.

Satıra yeni bir tanıtım yazısı modülü ekleyin.

İçerik

Başlık ve gövde için varsayılan sahte içeriği çıkarın. Ardından görüntünün yerine kare simgeyi ekleyin.

Tasarım

Tasarım ayarlarına geçin ve aşağıdakileri güncelleyin:

• Simge Rengi: #666666
• Görüntü/Simge Hizalama: Sol
• Simge Yazı Tipi Boyutu: 22px

• Genişlik: 50 piksel
• Modül Hizalaması: merkez
• Yükseklik: 25 piksel

• Kenar boşluğu: 0 piksel alt
• Yuvarlatılmış Köşeler: 4px
• Kenar Genişliği: 2px
• Kenar Rengi: #666666

Özel CSS

Tasarım yerleştirildikten sonra gelişmiş sekmeye geçin. Özel CSS'nin altında, taşmanın yuvarlatılmış köşeler stilinden gizlenmediğinden emin olmak için ana öğeye aşağıdaki özel CSS'yi ekleyin.

overflow: visible !important;

Ardından, After öğesine aşağıdaki özel CSS'yi ekleyin:

content: "light";
position: absolute;
left: -35px;
top:0px;

Bu, tanıtım yazısı modülüne, tıklandığında "açık"tan "karanlık"a değiştireceğimiz bir etiket ekler.

Gövde Metin Tasarımı

after sözde öğesindeki metin gövde metin stillerini devraldığından, Divi seçeneklerini kullanarak gövde metni stillerini aşağıdaki gibi ekleyebiliriz:

• Gövde Yazı Tipi: Roboto
• Gövde Metni Rengi: #666666
• Gövde Metni Boyutu: 13px
• Gövde Harf Aralığı: 1px

Kod Modülü ile Özel Kod Ekleme

Karanlık mod geçişini sihrini yapmak için gerekli Kodu (CSS/JQuery) eklemek için bir kod modülü kullanacağız.

Aynı sütundaki tanıtım yazısı modülünün altında yeni bir kod modülü oluşturun.

Ardından aşağıdaki kodu kod kutusuna yapıştırın:

<style>
/**
 * Dark Mode Toggle Styles
 */
.et-dark-mode {
  transition: all .5s;
  }
.et-dark-toggle {
  cursor: pointer;
  transition: all .5s;
  }
body.et-dark-mode .et-dark-toggle {
  border-color: #666666;
  }
body.et-dark-mode .et-dark-toggle:after {
  content:"dark";
  color: #666666;
  left: 54px;
  }
body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {
  text-align:right;
  }
body.et-dark-mode .et-dark-toggle .et-pb-icon {
  color: #666666;
  }
/**
 * Body Dark Mode Style
 */
body.et-dark-mode {
  background-color: #23282d !important;
  }
/**
 * Divi Element Dark Mode Styles
 *
 * Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".
 */
/* Section with dark mode */
.et_pb_section.et-dark-mode-capable.et-dark-mode {
  background-color: #23282d !important;
  background-blend-mode: overlay;
  transition: opacity .5s ease-in-out;
  color: #dddddd !important;
  }
 /* Row with dark mode */
.et_pb_row.et-dark-mode-capable.et-dark-mode {
  background-color: #23282d !important;
  color: #dddddd !important;
}
/* Column with dark mode */
.et_pb_column.et-dark-mode-capable.et-dark-mode {
  background-color: #23282d !important;
  color: #dddddd !important;
  }
/* Module with dark mode */
.et_pb_module.et-dark-mode-capable.et-dark-mode {
  background-color: transparent !important;
  color: #dddddd !important;
  }
/* Text Headings with dark mode */
.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,
.et_pb_module.et-dark-mode-capable.et-dark-mode h1,
.et_pb_module.et-dark-mode-capable.et-dark-mode h2,
.et_pb_module.et-dark-mode-capable.et-dark-mode h3,
.et_pb_module.et-dark-mode-capable.et-dark-mode h4,
.et_pb_module.et-dark-mode-capable.et-dark-mode h5,
.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {
color: #dddddd !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');
      $(".et-dark-toggle").click(function() {
          $(".et-dark-mode-capable,body").toggleClass("et-dark-mode");
          if ( storageAvailable ) {
              $("body").hasClass("et-dark-mode") ?
              sessionStorage.setItem('etDarkModeEnabled','1'):
              sessionStorage.removeItem('etDarkModeEnabled');
          }
      });
      if (storageAvailable) {
          '1' == sessionStorage.getItem('etDarkModeEnabled') ?
          $(".et-dark-mode-capable,body").addClass("et-dark-mode"):
          $(".et-dark-mode-capable,body").removeClass("et-dark-mode");
      }
  });
</script>

Özel CSS Sınıflarını Ekleme

Özel kod, tanıtım yazısı modülüne veya geçişine eklenen özel bir CSS Sınıfına sahip olmanızı gerektirir. Bu, tanıtım yazısının karanlık mod geçişini ve tıklandığında işlevselliği tetiklemesini sağlar.

Blurb Modülü Sınıfı

Tanımlama modülü ayarlarını açın ve aşağıdaki gibi özel bir CSS Sınıfı ekleyin:

• CSS Sınıfı: et-karanlık geçişi

Karanlık Mod Özellikli Sınıf

Ayrıca karanlık mod özelliğine sahip olmasını istediğimiz her Divi öğesine özel bir CSS Sınıfı eklememiz gerekiyor. Öğe CSS Sınıfına sahip olduğunda, o öğe, karanlık mod açıldığında eklediğimiz koddaki "karanlık mod" özel CSS'sini devralır. Bu yöntem, bazı öğeler herhangi bir karanlık mod stili gerektirmeyebileceğinden, karanlık mod tasarımımız üzerinde bize daha fazla kontrol sağlar.

Başlamak için, karanlık mod geçişimizi içeren bölüme karanlık modu ekleyebiliriz.

Bölüm ayarlarını açın ve aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: et-karanlık mod özellikli

Bölüm 2: Divi Sayfasına Karanlık Mod İşlevselliği Ekleme

Artık koda ve CSS Sınıflarına sahip olduğumuza göre, karanlık mod işlevselliğini ve tasarımını Divi'deki tüm sayfaya uygulamaya hazırız. Bunu yapmak için Mobil Uygulama Açılış Sayfası Hazır Düzenimizi kullanacağız.

Düzeni eklemek için görsel oluşturucunun altındaki ayarlar menüsünü açın ve Yeni Düzen Ekle simgesine tıklayın.

Ardından, önceden hazırlanmış düzenler sekmesinin altından Mobil Uygulama Açılış Sayfası düzenini seçin.

“Mevcut içeriği değiştir” seçeneğinin seçili OLMADIĞINDAN emin olun. Karanlık mod geçişi ile bölümü silmek istemezsiniz.

Karanlık mod stili yalnızca CSS Sınıfı “et-dark-mode-capable” olan öğelere uygulanacağından, sayfaya birkaç farklı şekilde eklemeyi seçebiliriz.

1. CSS Sınıfını sayfadaki her öğeye ayrı ayrı ekleyebiliriz.
2. CSS Sınıfını sayfa boyunca öğelere genişletebiliriz (bu, her birini manuel olarak yapmaktan daha hızlı olur). Örneğin, üst bölüm için bölüm ayarlarını açabilir ve o bölüm için CSS Sınıfını sayfa boyunca tüm bölümlere genişletebiliriz.
   
3. Öğenin Global Varsayılanlarına CSS Sınıfını ekleyebiliriz. Bu, CSS Sınıfını site genelindeki tüm öğelere uygulayarak sitenin tamamına karanlık mod özelliği ekler. Örneğin, Genel Bölüm Varsayılanlarını düzenlemek için bölüm ayarlarını açabilir ve genel varsayılan simgesine tıklayabiliriz. Ardından CSS Sınıfını ekleyebilir ve site genelindeki tüm bölümler için bir CSS Sınıfı olarak kaydedebiliriz.
   

Sayfa Öğelerine CSS Sınıfı Ekleme

Bu örnek için, bölümlere ve metin modüllerine Global Varsayılanlara CSS Sınıfı ekleyerek sayfa öğelerini güncelleyeceğiz. Ve ilerledikçe sayfadaki diğer unsurlara da birkaç ekleme yapacağız.

Tüm Bölümler

CSS Sınıfını tüm bölümlere eklemek için, karanlık mod geçişini içeren üst bölümün ayarlarını açın. Ardından, bölüm için genel varsayılanları düzenleyin ve aşağıdaki CSS Sınıfını Bölüm Genel Varsayılanlarına ekleyin:

• CSS Sınıfı: et-karanlık mod özellikli

Tüm Özel Bölümler

CSS Sınıfını da uzmanlık bölümünün genel varsayılanlarına ekleyin.

Metin Modülleri

Ardından, sayfadaki metin modüllerinden birinin ayarlarını açın ve aynı CSS Sınıfını Metin Genel Varsayılanlarına ekleyin.

bulanıklıklar

Ardından, sayfa düzeninde tanıtıcılardan birinin ayarlarını açın ve CSS Sınıfını Blurb Global Varsayılanlarına ekleyin.

Referans Sütunları

Sayfa düzeninin daha aşağısında, her biri özel beyaz bir arka plana sahip bir sütunun içinde birkaç referans vardır. Karanlık modda sütun stillerini geçersiz kılmak için, sütunlardan birine CSS sınıfını ekleyin ve onu satır içindeki diğer sütunlara genişletin.

NOT: CSS Sınıfını sütunun genel varsayılanlarına eklemek harika bir fikir değildir, çünkü bu bazı tasarım öğelerini bozacaktır (yani, çoğu zaman sütun arka planı olduğunda tüm sütunlara koyu bir arka plan vermek iyi bir fikir değildir). şeffaftır).

Sonucu test etmek için canlı sayfaya atlayın ve sayfanın üst kısmındaki karanlık mod geçiş düğmesine tıklayın.

İşte ışık modunda sayfanın nasıl görünmesi gerektiği.

Ve işte sayfanın karanlık modda nasıl görünmesi gerektiği.

Bölüm 3: Karanlık Mod Geçişini Genel Başlığa Ekleme

Karanlık mod işlevini site genelinde genişletmek istiyorsanız, karanlık mod geçişini Divi Global Header'a eklemek iyi bir fikir olacaktır. Bu şekilde, site genelindeki kullanıcılara uygun tek bir yerde sunulacaktır.

Karanlık Mod Geçişini ve Kodunu Divi Kitaplığına Kaydetme

Ancak bunu yapmadan önce karanlık mod geçişini ve kodunu Divi Library'ye kaydetmemiz gerekiyor. Bu, genel başlık da dahil olmak üzere sitemizin diğer alanlarına eklemeyi kolaylaştıracaktır.

Divi'nin ön uçta konuşlandırılmasıyla oluşturduğumuz düzene geri dönün. Ardından, karanlık mod geçişini oluşturmak için kullanılan tanıtım modülünün menüsünü açın ve kitaplığa kaydet'i seçin. Düzene bir ad verin ve kitaplığa kaydedin.

Ardından, kod modülünü Divi Kitaplığına da kaydedin.

Hazır Genel Başlık Şablonunu İçe Aktarma

Halihazırda genel bir başlığınız yoksa, kendinizinkini oluşturmanız veya önceden hazırlanmış tema oluşturucu paketlerimizden birini kullanmanız gerekecektir.

Bu eğitim için, beşinci tema oluşturucu paketinde bulunan genel başlığı kullanacağız. Tema oluşturucuyu kullanarak genel başlığı eklemek için tema oluşturucu paketini indirmeniz ve ardından "divi-theme-builder-pack-5-default-website-template.json" adlı JSON dosyasını içe aktarmak için taşınabilirlik seçeneklerini kullanmanız gerekir. .

Şablon yüklendikten sonra Genel Başlığı düzenlemek için tıklayın.

Ardından, kitaplıktan karanlık mod geçişini başlığın ikinci satırındaki sütun 1'e ekleyin.

Karanlık mod geçiş/bulanıklık modülünün altında, kitaplığa kaydettiğiniz kod modülünü doğrudan karanlık mod geçişinin altına ekleyin.

Tüm bölümler için varsayılan olarak "et-dark-mode-capable" CSS Sınıfına sahip olduğumuz için, başlığın içindeki bölümler de varsayılan olarak buna sahip olacaktır. Bunu devre dışı bırakmak için, ona geçersiz kılan bir CSS Sınıfı verin.

Nihai sonuçlar

İşte karanlık mod geçiş sayfamızın nihai sonuçları.

Ve işte başlıktaki karanlık mod geçişi. Sitedeki diğer sayfalarda gezinirken seçilen mod (koyu veya açık) kalacaktır.

Özel CSS Koyu Mod Stillerini Ayarlama

Toggle veya Divi öğelerinin karanlık mod stilini ayarlamak istiyorsanız, bunu kod modülü içindeki kodun içinde yapmanız gerekecektir.

Şu anda kod, karanlık modda bir kez öğelerin her birine uygulanan yalnızca temel bir karanlık mod stiline sahiptir. Bu, koyu bir arka plan renginden ve açık bir metin renginden oluşur.

Son düşünceler

Divi sitenizi özel bir Karanlık Mod geçişi ile donatmak, UX'i güçlendirmenin ve hem göze hoş gelen hem de göze hoş gelen yepyeni bir tasarım yaratmanın harika bir yolu olabilir. İnşallah işinize yarar.

Yorumlarda sizden haber bekliyorum.

Şerefe!