Ana İçeriğe Geç

Divi ile sitenize karanlık mod nasıl uygulanır?

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Koyu Mod, kullanıcıların web'i gözleri daha az zorlayarak deneyimlemelerine olanak tanıyan kullanışlı bir seçenek olarak popülerlik kazanmaya devam ediyor. Kabul edelim, hepimiz ekranlara muhtemelen yapmamız gerekenden daha fazla zaman harcama eğilimindeyiz, bu nedenle kullanıcı deneyimine herhangi bir ek kolaylık (karanlık mod gibi) uzun bir yol kat edebilir. 

İşletim sistemleri, programlar ve tarayıcılar tipik olarak yerleşik karanlık mod yetenekleri içerir, ancak bazı geliştiriciler web siteleri için özel bir karanlık mod deneyimi ekleyerek bunu başka bir seviyeye taşır. Buradaki fikir, markalaşma ve / veya tasarımdan ödün vermek zorunda kalmadan web sitelerinin karanlık modda nasıl göründüğü üzerinde daha fazla kontrol sahibi olmaktır.

Bu eğitimde, 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ş özelliği ile karanlık mod tasarımı üzerinde kontrole sahip olacak ve markanıza özel daha iyi bir kullanıcı deneyimine sahip olacaksınız.

Başlayalım!

anket

İşte bu eğitimde yapacağımız tasarımın bir önizlemesi.

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

Karanlık modu değiştir

Ve işte önceden tanımlanmış düzenlerimizden birine uygulanan karanlık mod için öncesi ve sonrası.

Ve işte global bir başlığa eklenen karanlık mod geçişi. Siteye göz atarken açık / koyu modun nasıl kaldığına dikkat edin.

Bölüm 1: Karanlık moddan anahtarı oluşturma

Eğitimin bu ilk bölümünde, Divi'deki bir sayfayla karanlık mod geçişi oluşturacağız. Geçiş kodla oluşturulduktan sonra, onu Divi kitaplığına kaydedebilir ve web sitenizdeki herhangi bir yere ekleyebilirsiniz.

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

Divi bölümü

Özet Modülü Ekle

Özel geçişi oluşturmak için, biraz özel CSS içeren bir Blurb modülü tasarlayacağız.

Satıra yeni bir sunum metin modülü ekleyin.

içindekiler

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

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Divi özet modülü

Gebe kalma

Tasarım ayarlarına gidin ve aşağıdakileri güncelleyin:

  • Simge Rengi: # 666666
  • Görüntü / simge hizalama: sol
  • Simge yazı tipi boyutu: 22 piksel
Divi simge yapılandırması
  • Genişlik: 50px
  • Modülün hizalanması: orta
  • Yükseklik: 25px
Divi boyutlandırma yapılandırması
  • Kenar boşluğu: 0 piksel düşük
  • Yuvarlatılmış köşeler: 4px
  • Sınır genişliği: 2 piksel
  • Kenarlık rengi: # 666666
Divi sınır yapılandırması

Özel CSS

Tasarım oluşturulduktan sonra, gelişmiş sekmeye geçin. Özel CSS altında, taşmanın yuvarlatılmış köşelerin stiliyle engellenmediğinden emin olmak için ana öğeye aşağıdaki Özel CSS'yi ekleyin.

taşma: görünür! önemli;

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

içerik: "hafif"; konum: mutlak; sol: -35px; üst: 0px;

Bu, Blurb modülüne tıklandığında "açık" ten "koyu" ya değiştireceğimiz bir etiket ekler.

Divi geçiş düğmesi

Gövde metin tasarımı

Post sözde öğe metni gövde metni stillerini miras aldığı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 metin boyutu: 13px
  • Vücudun harflerinin aralığı: 1px
Yazı tipi geçiş düğmesi

Kod modülü ile özel kod ekleme

Karanlık mod geçişini çalıştırmak için gerekli kodu (CSS / JQuery) eklemek için bir kod modülü kullanacağız.

Aynı sütundaki Blurb modülünün altında yeni bir kod modülü oluşturun.

Kod modülü ekle

Sonra kod alanına aşağıdaki kodu yapıştırın:

/*** 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;}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 Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.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");}});

Özel CSS sınıfları ekleme

Özel kod, Blurb modülüne veya anahtarına özel bir CSS sınıfının eklenmesini gerektirir. Bu, tanıtım yazısının karanlık mod geçişini ve tıklama işlevini tetiklemesini sağlayacaktır.

Blurb modül sınıfı

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

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

  • CSS sınıfı: et-dark-toggle
Divi css kodu

Karanlık mod yapabilen sınıf

Karanlık mod özelliğine sahip olmasını istediğimiz her Divi öğesine de özel bir CSS sınıfı eklememiz gerekiyor. Öğe CSS sınıfına sahip olduğunda, bu öğe, karanlık mod etkinleştirildikten sonra eklediğimiz koddaki özel "karanlık mod" CSS'yi devralır. Bu yöntem, karanlık mod tasarımımız üzerinde bize daha fazla kontrol sağlar, çünkü bazı öğeler karanlık modda stil gerektirmeyebilir.

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

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

  • CSS Sınıfı: et-karanlık mod özellikli
Css seçici divi bölümü

Bölüm 2: Divi Sayfasına Karanlık Mod Özellikleri Ekleme

Artık CSS kodumuz ve sınıflarımız olduğuna göre, Karanlık Mod işlevini ve tasarımını Divi'deki bir sayfanın tamamına uygulamaya hazırız. Bunu yapmak için, mobil uygulama açılış sayfasının önceden hazırlanmış düzenini kullanacağız.

Düzeni eklemek için, görsel oluşturucunun altındaki ayarlar menüsünü açın ve Yeni yerleşim ekle simgesini tıklayın.

Ardından, Önceden Tanımlı Düzenler sekmesinden mobil uygulamanın açılış sayfasının 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.

Divi 1 düzenini seçin

Karanlık mod stili yalnızca "yetenekli ve karanlık mod" CSS sınıfına sahip öğelere uygulanacağından, sayfaya farklı şekillerde eklemeyi seçebiliriz.

  1. CSS sınıfını sayfanın her bir öğesine ayrı ayrı ekleyebiliriz.
  2. CSS sınıfını sayfanın her yerindeki öğelere genişletebiliriz (bu, 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ı sayfanın tüm bölümlerine genişletebiliriz.
  3. CSS sınıfını elementin global varsayılanlarına ekleyebiliriz. Bu, CSS sınıfını tüm site genelindeki öğelere uygulayarak sitenin tamamına karanlık mod özelliği ekleyecektir. Örneğin, genel bölüm varsayılanlarını değiştirmek için bölüm ayarlarını açabilir ve global varsayılan simgeye tıklayabiliriz. Ardından CSS sınıfını ekleyebilir ve sitenin tüm bölümleri için CSS sınıfı olarak kaydedebiliriz.

Sayfa öğelerine CSS sınıfı ekleme

Bu örnek için, CSS sınıfını bölümlere ve metin modüllerine genel varsayılanlara ekleyerek sayfa öğelerini güncelleyeceğiz. Ayrıca, ilerledikçe sayfadaki diğer öğelere de bazı eklemeler 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 genel varsayılanlarını değiştirin ve aşağıdaki CSS sınıfını genel varsayılanlar bölümüne ekleyin:

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

Tüm özel bölümler

Ayrıca CSS sınıfını özel bölümdeki genel varsayılanlara ekleyin.

Tüm özel bölümlere ekle

Metin modülleri

Ardından sayfadaki metin modüllerinden birinin ayarlarını açın ve aynı CSS sınıfını genel metin varsayılanlarına ekleyin.

Metin modüllerine ekle

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

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Sayfanın net modda nasıl görünmesi gerektiği aşağıda açıklanmıştır.

Temizle modu

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

Karanlık modu

Ek Kaynaklar

İşte ilginizi çekebilecek diğer bazı kaynaklar.

Son düşünceler

Divi sitenizi özel bir karanlık mod geçişiyle donatmak, kullanıcı deneyimini artırmanın ve hem hoşa giden hem de göze hitap eden yepyeni bir tasarım oluşturmanın harika bir yolu olabilir. Umarım bu sizin için yararlı olur.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
0 hisseleri
hisse
cıvıltı
Enregistrer