Global Divi Üstbilgisine Dinamik Site Başlığı ve Sloganı Ekleme

Global Divi Üstbilgisine Dinamik Site Başlığı ve Sloganı Ekleme

Divi genel başlığına dinamik bir site başlığının ve bir sloganın nasıl ekleneceğini bilmek, Divi web siteleri oluştururken faydalı olacaktır. Ve bunu yapmak için birkaç iyi neden var. Bir yandan, tüm sitelerin bir logosu yoktur. Site başlığı, iyi bir logo değişimidir. Diğer bir neden, sitenize herkesin göreceği hayati bilgileri dahil ederek markanızı güçlendirmektir.

Bu eğitimde, Divi global başlığına nasıl dinamik site başlığı ve sloganı ekleyeceğinizi göstereceğiz. Bu çözüm, site başlığını ve etiket satırını WordPress arka ucundan dinamik olarak çıkaracaktır. Ayrıca, başlığı ve sloganı istediğiniz gibi özelleştirmek için Divi'nin tüm güçlü tasarım seçeneklerine sahip olacaksınız!

Olası Sonuç

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

Dinamik site başlığı genel başlık şablonu 6

Dinamik olarak görüntülenen üst ortadaki site başlığına ve sloganına dikkat edin.

Divi başlık değiştirme örneği

Bedava indir

Divi Newlsetter'a katılın ve size Ultimate Divi Landing Page Layout Pack'in bir kopyasının yanı sıra tonlarca ücretsiz ve şaşırtıcı Divi kaynağı, ipucu ve püf noktalarının bir kopyasını e-postayla göndereceğiz. Onu takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten abone olduysanız, e-posta adresinizi aşağıya girin ve düzen paketine erişmek için indir'i tıklayın.İNDİR

Şablonu içe aktarmak için Divi> Tema oluşturucu'ya gidin.

Sayfanın sağ üst köşesindeki taşınabilirlik simgesine tıklayın.

Taşınabilirlik açılır penceresinde, içe aktar sekmesini seçin ve bilgisayarınızdan indirilecek dosyayı seçin.

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

Bir divi şablonu seçin

Tamamlandığında, genel başlık şablonu Divi Theme Builder'da mevcut olacaktır.

Global divi başlığını değiştir

Takip eden bölümde tasarıma geçeceğiz.

WordPress'teki sitenin başlığı ve sloganı

Her WordPress sitesinin bir site başlığı ve bir sloganı vardır. Site başlığı, temelde sitenin adıdır ve slogan, genellikle ne olduğunu açıklayan kısa bir ifadedir.

WordPress'i kurarken site başlığını eklemek ve unutmak alışılmadık bir durum değildir.

Divi başlığını özelleştirin

Ve bazı insanlar güncellemek için zaman ayırmak şöyle dursun, sloganın var olduğunun farkında bile değiller. Ek olarak, Divi temasını kullandığınızda, site başlığı ve sloganı sitenizde varsayılan olarak görünmez, bu yüzden onları görmezden gelmek kolaydır. Bununla birlikte, site başlığı ve slogan, web sitesinin önemli parçalarıdır ve arama motorları tarafından tanınacaktır.

WordPress panosuna gidip Ayarlar> Genel'e giderek site başlığını ve sloganını WordPress'te istediğiniz zaman bulabilir ve güncelleyebilirsiniz.

Veya genel ayarlar altında site başlığını güncellemek için tema özelleştiriciyi kullanarak başka bir rotaya gidebilirsiniz.

WordPress kimliğini özelleştirin

Artık site başlığı ve sloganın WordPress arka ucunda nerede olduğunu bildiğimize göre, bunları bir Divi başlığına nasıl ekleyebileceğimizi keşfedelim!

Divi'de küresel bir başlığa dinamik site başlığı ve sloganı ekleme

Önceden tasarlanmış genel başlık şablonunu içe aktarma

Bu eğitimde, sıfırdan tam bir başlık oluşturmak yerine dinamik site başlığını ve sloganını mevcut bir başlığa nasıl ekleyeceğimize odaklanacağız. Size zaman kazandıracak ve netliği artıracaktır. Bu yüzden, bu başlık tasarımına başlamak için, önceden tanımlanmış bir genel başlık şablonunu dördüncü tema üreteci paketi .

Bir kez sahip olduğunuzda paketini indirdi oluşturulması tema , dosyayı açın ve varsayılan web sitesi şablonu JSON dosyasını bulun.

Ardından Divi> Tema Oluşturucu'ya gidin.

Sağ üstteki taşınabilirlik simgesine tıklayın. Taşınabilirlik açılır penceresinde, varsayılan web sitesi şablonu JSON dosyasını seçin ve İçe Aktar düğmesini tıklayın.

Divi model içe aktarma

Şablon, tema oluşturucuya eklendikten sonra, altbilgi şablonunu silin ve genel başlığı düzenlemek için tıklayın.

Şablonu altbilgiden kaldır

Başlığa dinamik site başlığı ve kısa açıklama ekleme

Şablon düzen düzenleyicisinin içinde, önceden tasarlanmış başlığı göreceksiniz. Özelleştirmelerimizi hemen yapmaya başlayabiliriz.

Logoyu taşı

Başlamak için, logoyu (dinamik olarak) görüntüleyen görüntü modülünü üst satırın orta sütunundan üst satırın sol sütununa sürükleyin.

Site başlığını ve sloganını görüntülemek için bir harekete geçirici mesaj modülü ekleyin

Ardından, üst satırın (logonun bulunduğu yer) orta sütununa yeni bir Harekete Geçirici Mesaj modülü ekleyin.

Harekete geçirici mesajı özelleştirin

Site başlığını ve sloganını görüntülemek için Harekete Geçirici Mesaj modülünü kullanacağız.

Ancak içerik eklemeye başlamadan önce, arka plan rengini kullanmak için önce HAYIR'ı seçin.

Harekete geçirici mesaj eylemlerini yapılandırın

Dinamik bir site başlığı ekleyin

İçerik ayarları altında, başlık giriş kutusunun üzerine gelin ve "Dinamik içerik kullan" simgesini tıklayın. Ardından listeden "Site Başlığı" nı seçin.

Dinamik bir site sloganı ekleyin

Ardından, fareyi vücut alanının üzerine getirin ve "Dinamik içerik kullan" simgesini seçin. Ardından listeden "Site Etiketi" ni seçin.

Divi site sloganı ekle

Dinamik bir ana sayfa bağlantısı ekleyin

Site başlığının, özellikle logoyu değiştiriyorsanız, tıklandığında ana sayfaya yönlendirilmesi yaygındır. Tüm kursu ana sayfaya yeniden yönlendirmek için, ana sayfa bağlantısını kurs bağlantısı URL'sine dinamik içerik olarak ekleyin.

Ana sayfaya bir bağlantı ekleyin

Başlık metninin ve sitenin sloganının tasarımı

Artık site başlığı ve kısa açıklama, başlıkta dinamik olarak görüntülenir. Şimdi tek yapmamız gereken biraz stil eklemek. Unutmayın, site başlığını tasarlamak için başlık metnini ve sloganı tasarlamak için gövde metnini özelleştirmemiz gerekir.

Tasarım sekmesine atlayın ve aşağıdakileri güncelleyin:

  • Başlık Yazı Tipi: Heebo
  • Başlık Yazı Tipi Ağırlığı: Kalın
  • Başlık Yazı Tipi Stili: TT
  • Başlık Metin Boyutu: 32 piksel (masaüstü), 24 piksel (tablet ve telefon)
  • Başlık Mektubu Aralığı: 0.3em
  • Gövde Yazı Tipi: Roboto
  • Gövde Yazı Tipi Stili: italik
  • Gövde Metin Rengi:
  • Gövde Metin Boyutu: 13 piksel
  • Gövde Mektubu Aralığı: 0.1em
  • Gövde Hattı Yüksekliği: 1em
Divi başlık yazı tipini özelleştirin

Merkezlemeye yardımcı olması için, Promo Açıklaması'na aşağıdaki özel CSS'yi ekleyerek gövde metninin altındaki varsayılan dolguyu çıkarın:

dolgu alt: 0 piksel
Özel divi css kodu ekle

Ek Tasarım Ayarları

Eğiticinin bu son kısmı için, öğelerin her sütunda dikey olarak ortalanmış kaldığından emin olmak ve düğmeye benzersiz bir tasarım vermek için başlığa bazı ek tasarım ayarlamaları yapacağız. Ayrıca slogana dalgalı bir çizgi öncesi ve sonrası satır ekleyeceğiz (sadece vuruşlar için).

Sütunları / İçeriği Dikey Olarak Ortalama

Şu anda en üst satır, flex özelliğini kullanan “Sütun Yüksekliklerini Eşitle” etkin. Tüm sütunların satır içinde dikey olarak ortalanmış olduğundan emin olmak için küçük bir css snippet'i ekleyerek bundan yararlanabiliriz. Bunu yapmak için, üst satırın ayarlarını açın ve Ana Öğeye aşağıdaki CSS'yi ekleyin:

hizalama ögeleri: orta;

Sütunu Düğmeyle Güncelleme

Ardından, üst satırdaki sütun 3 ayarlarını açın ve arka plan rengini ve dolguyu çıkarın.

Divi iletişim düğmesini özelleştirin

Düğme Arka Planını Güncelleme

Ardından düğme modülü ayarını açın ve arka planı aşağıdaki gibi yeni bir arka plan gradyanıyla güncelleyin:

  • Degrade arka plan Sol renk: #ffffff
  • Sağ arka plan gradyan rengi: # 1dbf73
  • Gradyan Yönü: 135deg
  • Başlama Konumu:% 10
  • Bitiş Pozisyonu:% 0
Divi düğmesinin arka planını özelleştirin

Slogana karakter öncesi ve sonrası ekleme

Her dinamik içerik öğesi, dişli simgesine tıklanarak değiştirilebilir. Sloganın önüne ve arkasına karakter eklemek için, sloganı içeren harekete geçirici mesaj modülünün ayarlarını açın ve site sloganının dinamik içeriğindeki düzenle simgesine tıklayın. Daha sonra karakterleri girişlerden önce ve sonra ekleyin.

Divi sloganını göster

Nihai sonuç

Sonucu görmek için sitenizdeki herhangi bir sayfayı açın. Dinamik site başlığının ve sloganının güzelce görüntülendiğini görmelisiniz!

Nihai sonuç divi

Son düşünceler

Dinamik bir site başlığı ve sloganla genel bir başlığı özelleştirebilmeniz gerçekten güzel. Bu, birçok site için faydalı olacak bir şey gibi görünüyor. Markanın daha güçlü bir şekilde temsil edilmesi için logoya ek olarak site başlığını ve sloganını dahil etme fikrini de seviyorum.

Kaynak: Zarif Tema

Divi'de Kaydırma Efektleriyle Sorunsuz Geçiş Nasıl Oluşturulur

Divi'de Kaydırma Efektleriyle Sorunsuz Geçiş Nasıl Oluşturulur

Hizmetler sayfanızı tasarlarken, ziyaretçilerinizin sunduğunuz tüm farklı hizmetleri fark ettiğinden emin olmak istersiniz. Çoğu durumda, bu yalnızca aradıkları belirli bir hizmet olacaktır, ancak hizmet yapınızda modern bir yol sağlarsanız, ziyaretçilerinizin hepsini ele alma olasılığı daha yüksektir. 

Bu eğitimde, Divi'nin kaydırma efektleriyle nasıl yaratıcı olacağınızı ve sorunsuz bir hizmet geçişi oluşturacağınızı göstereceğiz. JSON dosyasını ücretsiz olarak da indirebilirsiniz!

Gidelim.

Olası Sonuç

Eğiticiye geçmeden önce, farklı ekran boyutlarında sonuca bir göz atalım.

Bölüm divi arasındaki geçiş

1, elemanların yapısını yeniden

1. bölüm ekle

aralık

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve farklı ekran boyutlarında dolgu değerlerini değiştirin.

  • Üst dolgu: 80 piksel (masaüstü ve tablet), 0 piksel (telefon)
  • Alt doldurma: 80px
Divi parametre bölümü

Yeni bir satır ekle

Sütun yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır eklemeye devam edin:

boyutlandırma

Daha fazla modül eklemeden, çizgi parametrelerini açın ve boyutlandırma parametrelerine aşağıdaki değişiklikleri uygulayın:

  • Özel bir oluk genişliği kullanın: Evet
  • Oluk genişliği: 1
  • Genişlik:% 90
  • Maksimum genişlik: 1580 piksel
Divi aralığı yapılandırması

aralık

Ardından özel bir üst ve alt kenar boşluğu ekleyin.

  • Üst kenar boşluğu: 200px
  • Alt kenar boşluğu: 200px
Divi satır aralığı yapılandırması

1 sütununa bir metin modülü ekleyin

H2 içeriği ekle

1. sütundaki bir metin modülünden başlayarak modüller ekleme zamanı. İstediğiniz herhangi bir H2 içeriğini girin.

Anın uzmanları tarafından sunulan hizmetlerimiz

H2 metin ayarları

Modül tasarımı sekmesine gidin ve H2 metin ayarlarını aşağıdaki şekilde değiştirin:

  • Başlık 2 Polis: Üç Aylık
  • Başlık 2 Metin boyutu: 80 piksel (masaüstü), 50 piksel (tablet), 40 piksel (telefon)
  • Kafanın 2. çizgisinin yüksekliği: 1.2em
Baş divi polisi

aralık

Ardından tablete ve telefona daha düşük bir kenar boşluğu ekleyin.

  • Alt kenar boşluğu: 50 piksel (yalnızca tablet ve telefon)
Divi metin aralığı yapılandırması

2 sütununa bir metin modülü ekleyin

İçerik ekle

İkinci sütuna geçelim. Orada ihtiyacımız olan ilk modül, bazı açıklama içeriğine sahip bir metin modülüdür.

İçerik divi metin kutusu

Metin ayarları

Modül tasarımı sekmesine geçin ve metin ayarlarını buna göre değiştirin:

  • Metin yazı tipi: kabin
  • Metin yazı tipi stili: büyük harf
  • Metin rengi: # 000000
  • Metin boyutu: 18 piksel (masaüstü), 15 piksel (tablet), 13 piksel (telefon)
  • Metin harf aralığı: 3 piksel (masaüstü), 1 piksel (tablet ve telefon)
  • Metin satırının yüksekliği: 3em
Divi metin parametresi

Sütun 2'ye ayırma modülü ekleme

görünürlük

Bu sütunda ihtiyacımız olan sonraki ve son modül bir ayırma modülüdür. "Ayırıcıyı Göster" seçeneğinin etkinleştirildiğinden emin olun.

  • Ayırıcıyı göster: Evet
Görünür bölücü

Hat

Ardından modülün çizgi rengini değiştirin.

  • Çizgi rengi: # 000000
Bölücü renkli arka plan

boyutlandırma

Ardından boyutlandırma parametrelerinde bazı değişiklikler yapın.

  • Bölücü ağırlık: 3px
  • Genişlik:% 28
Divi ayırıcı boyutlandırma

aralık

Üst kenar boşluğu da ekliyoruz.

  • Üst kenar boşluğu: 10px
Divi ayırıcı modül aralığı

2. bölüm ekle

aralık

Bir sonraki normal bölüme geçelim. Bölümden varsayılan üst dolguyu kaldırın.

  • Üst dolgu: 0 piksel
Bölüm 2 divi aralığı

taşmaları

Ayrıca taşmaları gizleyin.

  • Yatay taşma: gizli
  • Dikey taşma: gizli
Divi modülü taşmalarını gizle

Yeni bir satır ekle

Sütun yapısı

Aşağıdaki sütun yapısını kullanarak ilk satırı eklemeye devam edin:

Bir divi düzeni seçin

boyutlandırma

Daha fazla modül eklemeden, çizgi parametrelerini açın, boyutlandırma parametrelerine erişin ve aşağıdaki değişiklikleri yapın:

  • Özel bir oluk genişliği kullanın: Evet
  • Oluk genişliği: 1
  • Sütun yüksekliklerini eşitle: Evet
  • Genişlik:% 90
  • Maksimum genişlik: 1580 piksel
Cilt payı yapılandırma divi bölümü

aralık

Ardından, varsayılan üst ve alt dolguların tümünü kaldırın.

  • Üst dolgu: 0 piksel
  • Alt doldurma: 0px
Divi 1 hat modülü aralık ayarları

Sütun 1 ayarları

Arka plan rengi

Ardından 1. sütunun ayarlarını açın ve arka plan rengini değiştirin.

  • Arka Plan Rengi: # f7f7f7
Divi hat modülü arka plan yapılandırması

aralık

Farklı ekran boyutlarına özel dolgu değerleri ekleyerek sütun ayarlarını tamamlayın.

  • Üst dolgu: 200 piksel (masa), 100 piksel (tablet ve telefon)
  • Alt dolgu: 200 piksel (masa), 100 piksel (tablet ve telefon)
  • Sol dolgu:% 8
  • Sağ dolgu:% 8
Satır modülü sütun ayarları

Sütun 2 ayarları

aralık

2. sütundaki ayarları açarak devam edin. Gelişmiş sekmesine gidin ve farklı ekran boyutlarında özel dolgu değerleri ekleyin.

  • Üst dolgu: 100 piksel (masaüstü), 50 piksel (tablet ve telefon)
  • Alt doldurma: 200px
  • Sol dolgu: 150 piksel (masa), 0 piksel (tablet ve telefon)
Divi modülü aralık ayarları

Sütun 1'ye ayırma modülü ekleme

görünürlük

İlk sütunda ihtiyacımız olan ilk modül bir ayırma modülüdür. "Ayırıcıyı Göster" seçeneğinin etkinleştirildiğinden emin olun.

  • Ayırıcıyı göster: Evet
Divi 1 ayırıcısını göster

Hat

Ardından modülün çizgi rengini değiştirin.

  • Çizgi rengi: # 000000
Divi ayırıcı ayarları

boyutlandırma

Ayrıca boyutlandırma parametrelerinde değişiklikler yapın.

  • Bölücü ağırlık: 3px
  • Genişlik:% 50
Divi ayırıcı boyutlandırma

1 sütununa bir metin modülü ekleyin

H3 içeriği ekle

Sütun 1'de ihtiyacımız olan bir sonraki modül, H3 içeriğine sahip bir metin modülüdür.

Divi içerik bölümü ayarı

H3 metin ayarları

Modül tasarımı sekmesine geçin ve H3 metin ayarlarını değiştirin:

  • Başlık 3 Polis: Üç Aylık
  • 3. öğenin metin rengi: # 000000
  • Öğe 3 Metin boyutu: 50 piksel (masaüstü), 40 piksel (tablet), 35 piksel (telefon)
  • Kafanın 3. çizgisinin yüksekliği: 1.1em

2 sütununa bir metin modülü ekleyin

İçerik ekle

İkinci sütunda, ihtiyacımız olan ilk modül, bazı açıklama içeriğine sahip bir metin modülüdür.

Divi metin modülü ayarı

Metin ayarları

Modülün metin ayarlarını aşağıdaki gibi değiştirin:

  • Metin yazı tipi: kabin
  • Metin yazı tipi stili: büyük harf
  • Metin boyutu: 18 piksel (masaüstü), 15 piksel (tablet), 13 piksel (telefon)
  • Metin harf aralığı: 3 piksel (masaüstü), 1 piksel (tablet ve telefon)
  • Metin satırının yüksekliği: 3em
Divi metin kalıbı yazı tipi ayarı

2 sütununa bir düğme modülü ekleyin

Bir kopya ekle

İhtiyacımız olan bir sonraki ve son modül bir düğme modülü. Seçtiğiniz bir kopyasını girin.

Metin modülü içerik ayarı

Düğme ayarları

Ardından düğmeyi biçimlendirin.

  • Düğme için özel stiller kullan: Evet
  • Düğme metni boyutu: 20 piksel
  • Düğme metni rengi: #ffffff
  • Düğme arka plan rengi: # 000000
  • Düğme kenarlığı genişliği: 0 piksel
Divi düğme stili ayarı
  • Düğme Yazı Tipi: Üç Aylık
  • Düğme yazı tipi ağırlığı: kalın
Divi düğmesi renk ayarları

aralık

Ayrıca özel dolgu ekleyin.

  • Üst dolgu: 50 piksel
  • Alt doldurma: 50px
  • Sol doldurma: 100px
  • Sağ dolgu: 100 piksel
Divi modülü düğme aralığı ayarları

Pozisyon

Ve düğmeyi uygun şekilde yeniden konumlandırın:

  • Pozisyon: Mutlak
  • Yer: sol alt
Divi düğme modülü konum ayarı

Çizgiyi gerektiği kadar klonlayın

Tüm hattı ve tüm modüllerini tamamladıktan sonra, tüm hattı üç kez klonlayabilirsiniz.

Klon divi modülü

Tüm içeriği değiştir

Yinelenen satırlardaki tüm içeriği düzenlediğinizden emin olun.

Divi bölüm içeriğini düzenleyin

2. Kaydırma efektleri uygulayın

İlk satır kaydırma efektleri

Yatay hareket

Bölümünüzdeki tüm satırları tamamladıktan sonra, kaydırma efektlerini eklemenin zamanı geldi. Bölümün ilk sırasını açın ve yatay hareket ekleyin.

  • Yatay hareketi etkinleştir: Evet
  • Başlangıç ​​ofseti: -5
  • Ortalama ofset: 0 (% 26'de)
  • Bitiş ofseti: 0
  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Divi kaydırma efektleri uygulayın

İçeri ve dışarı solmaya

Ayrıca gelen ve giden bir solma efekti kullanın.

  • Solmaya giriş ve çıkışı etkinleştir: Evet
  • Başlangıç ​​opaklığı:% 100
  • Ortalama opaklık:% 100 (% 50'de)
  • Uç opaklığı:% 0 (% 53'ye kadar)
  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Soluk animasyon divi bölümünü yapılandırın

Orta sıra kaydırma efektleri

Dikey hareket

Ardından, bölümün ilk ve son satırı arasındaki tüm satırlara kaydırma efektleri ekleyeceğiz. Önce dikey bir hareket kullanın:

  • Dikey hareketi etkinleştir: Evet
  • Başlangıç ​​ofseti: -4
  • Ortalama ofset: 0 (% 26'de)
  • Bitiş ofseti: 0
  • Hareket tetikleme efekti: elemanın ortası
Divi kaydırma aniation yapılandırması

İçeri ve dışarı solmaya

Ayrıca içeri ve dışarı solma efektini de etkinleştirin.

  • Solmaya giriş ve çıkışı etkinleştir: Evet
  • Başlangıç ​​opaklığı:% 0
  • Ortalama opaklık:% 100 (% 27 ila% 50)
  • Bitiş ofseti: 0 (% 53'da)
  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Divi hattı solmaya animasyon

Son Satır Kaydırma Efektleri

Dikey hareket

Sonra bölümün son satırını açın ve aşağıdaki dikey hareketi ekleyin:

  • Dikey hareketi etkinleştir: Evet
  • Başlangıç ​​ofseti: -4
  • Ortalama ofset: 0 (% 26'de)
  • Bitiş ofseti: 0
  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Animasyon kaydırma divi hattı modülü

İçeri ve dışarı solmaya

Gelen ve giden solma efekti ile işiniz bitti!

  • Solmaya giriş ve çıkışı etkinleştir: Evet
  • Başlangıç ​​opaklığı:% 0
  • Ortalama opaklık:% 100 (% 27 ila% 50)
  • Uç opaklığı:% 100 (% 53'ye kadar)
  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Divi hat modülü görünüm animasyon ayarları

Nihai sonuç

Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.

Nihai demo

Son düşünceler

Bu yazıda, Divi'nin kaydırma efektleri ile nasıl güzel bir hizmet geçişi oluşturacağınızı gösterdik. Bir servis kaybolmadan önce bile diğeri görünmeye başlar ve göze hoş gelen hoş bir geçiş sağlar. Bu yaklaşım, her hizmeti bireysel düzeyde vurgulamanıza yardımcı olacaktır. JSON dosyasını ücretsiz olarak da indirebilirsiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum yapmaktan çekinmeyin.

Divi ile kayan bir ekip üyesi nasıl oluşturulur

Divi ile kayan bir ekip üyesi nasıl oluşturulur

Hakkında sayfanızı oluştururken, muhtemelen ekip üyelerinizi de tanıtmak isteyeceksiniz. Bunu yaparken, ziyaretçilerin işletmenizin arkasındaki insanlarla etkileşim kurmasına izin verirsiniz. Listedeki ekip üyelerinizi canlandırmanın bir yolunu arıyorsanız, bu eğitim sizin için olabilir. Ziyaretçileriniz sayfayı kaydırırken hareket eden, otomatik olarak kayan bir ekip üyesi atlı karıncası oluşturacağız. 

gösteri

Eğiticiye geçmeden önce, farklı ekran boyutlarında sonuca bir göz atalım.

Divi takım üyesini kaydır

Gebe kalmanın başlangıcı

Yeni bölüm ekle

aralık

Üzerinde çalıştığınız sayfaya yeni bir normal bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve farklı ekran boyutlarına özel dolgu ekleyin.

  • Üst dolgu: 200 piksel (masa), 100 piksel (tablet ve telefon)
  • Alt dolgu: 200 piksel (masa), 100 piksel (tablet ve telefon)
Parametre yapılandırması

taşmaları

Tasarımımızda yatay kaydırma çubuğunun görünmediğinden emin olmak için, gelişmiş sekmede bölüm taşmalarını gizleyeceğiz.

  • Yatay taşma: gizli
  • Dikey taşma: gizli
Taşma yapılandırması

1 numaralı satır ekle

Sütun yapısı

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

Divi düzenini seçin

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın, tasarım sekmesine geçin ve boyutlandırma ayarlarında genişliği ve maksimum genişliği değiştirin.

  • Genişlik:% 90
  • Maksimum genişlik: 1580 piksel
Divi hattı parametresi

aralık

Ayrıca özel üst ve alt dolgu ekliyoruz.

  • Üst dolgu: 100 piksel
  • Alt doldurma: 100px
Satır aralığı divi yapılandırması

Sütuna metin modülü ekleme

H2 içeriği ekle

İlk metin modülünden başlayarak modüller eklemenin zamanı geldi. Seçtiğiniz H2 içeriğini girin.

Ekiple tanış

H2 metin ayarları

Modül tasarımı sekmesine gidin ve H2 metin ayarlarını aşağıdaki şekilde değiştirin:

  • Yazı tipi başlığı 2: Quicksand
  • Yazı tipi başlığı 2: yarı kalın
  • 2. öğenin metin rengi: # 000000
  • Başlık 2 Metin boyutu: 70 piksel (masaüstü), 50 piksel (tablet), 40 piksel (telefon)
Divi metin aralığı

Sütuna bir ayırma modülü ekleme

görünürlük

Ardından bir ayırma modülü ekleyin. "Ayırıcıyı Göster" seçeneğinin etkinleştirildiğinden emin olun.

  • Ayırıcıyı göster: Evet
Divi ayırıcısını göster

Hat

Ardından hat ayarlarında bazı değişiklikler yapın.

  • Çizgi rengi: # edf000
  • Çizgi stili: düz
  • Çizgi Konumu: Üst
Divi aralığı stili

boyutlandırma

Ve boyutlandırma parametrelerini uygun şekilde değiştirerek modül parametrelerini tamamlayın:

  • Bölücü ağırlık: 20px
  • Genişlik:% 11
  • Modülün hizalanması: sol
  • Yükseklik: 20px
Divi hat modülünün boyutlandırılması

Satır # 2 ekle

Sütun yapısı

Bir sonraki sıraya! Aşağıdaki sütun yapısını kullanın:

Divi sütun yapılandırması

boyutlandırma

Daha fazla modül eklemeden, çizgi parametrelerini açın ve boyutlandırma parametrelerini aşağıdaki gibi değiştirin:

  • Özel bir oluk genişliği kullanın: Evet
  • Oluk genişliği: 2
  • Genişlik:% 100
  • Maksimum genişlik:% 100
Cilt payı genişliği yapılandırması

aralık

Ardından, yalnızca daha küçük ekranlara sol ve sağ dolgu ekleyin.

  • Sol dolgu:% 5 (yalnızca tablet ve telefon)
  • Sağ dolgu:% 5 (yalnızca tablet ve telefon)
Satır aralığı stili yapılandırması

Sütun parametreleri (5x)

Şimdi, bu eğitimin sonraki üç adımında, sütunlarda bazı değişiklikler yapacağız. Üç adımı sıranızdaki sütunların her birine uygulayın.

Divi parametre hattı yapılandırması

Gradyan arka planı

İlk olarak, her sütuna bir gradyan arka planı ekleyin.

  • 1 renk: rgba (255,255,255,0)
  • 2 renk: rgba (0,0,0,0,84)
  • Gradyan türü: doğrusal
  • Başlama Konumu:% 25
  • Bitiş Pozisyonu:% 86
  • Gradyanı arka plan resminin üzerine yerleştirin: Evet
Divi arka sütun yapılandırması

Arka plan resmi

Ardından, seçtiğiniz bir arka plan resmini yükleyin. Bu arka plan resmi her ekip üyesini temsil ettiğinden, her sütun için farklı bir resim kullanın.

  • Arka Plan Resim Boyutu: Kapak
  • Arka plan resminin konumu: Merkez
Divi sütun arka plan resmi ekle

Ana eleman

Her bir sütunun ana tablet öğesine özel CSS ekleyerek sütun ayarlarını tamamlayın. Bu CSS kodu satırları, iki yan yana yerleştirmek yerine, sütunları tablette üst üste yerleştirmemize yardımcı olacaktır.

genişlik:% 100! önemli; kenar boşluğu: 50px 0px 50px 0px! önemli;
Kod css divi sütunu

Sütuna kişi modülü ekleme

İçerik ekle

Ekip üyeleri hakkında bilgi paylaşmak için bir Kişi modülü kullanacağız. Birinci Kişi modülünü 1. sütuna ekleyin ve istediğiniz içeriği kullanın.

Divi kişi adı

Resmi Sil

Ardından görüntüyü silin. Bunun yerine sütunun arka plan resmini kullanıyoruz.

Divi görüntüsünü kaldır

Arka plan resmi

Daha sonra, modülün arka plan görüntüsü olarak bir görüntü bindirmesi ekleyeceğiz. Kullandığımız dosyayı, bu eğitimin başındaki klasörü indirerek bulabilirsiniz.

  • Arka Plan Resim Boyutu: Kapak
  • Arka plan resminin konumu: Merkez
Kişi modülü arka plan yapılandırması

Başlık metni ayarları

Modül tasarımı sekmesine gidin ve başlık metni ayarlarını aşağıdaki şekilde değiştirin:

  • Başlık seviyesi: H3
  • Başlık yazı tipi: Quicksand
  • Başlık yazı tipi ağırlığı: kalın
  • Başlık metni rengi: #ffffff
  • Başlık metni boyutu:% 230
Divi modülü başlık özelleştirme

Gövde metni ayarları

Ayrıca gövde metni ayarlarını da değiştirin.

  • Gövde Yazı tipi: Açık Sans
  • Gövde metni rengi: #ffffff
  • Gövde çizgisi yüksekliği: 2,2 em
Divi gövde özelleştirme

Metin ayarlarını konumlandırma

Ardından konum metni ayarlarında bazı değişiklikler yapın.

  • Yazı Tipi Konumu: Açık Sans
  • Metin rengini konumlandır: # edf000
Divi konumu

aralık

Ve aralık ayarlarına özel dolgu değerleri ekleyerek modül ayarlarını tamamlayın.

  • Üst dolgu:% 70
  • Alt dolgu:% 10
  • Sol dolgu:% 10
  • Sağ dolgu:% 10
Divi kişi modülü aralığı

Kişi modülünü 4 kez çoğaltın

Kişi modülünü tamamladıktan sonra, tüm modülü dört kez klonlayabilirsiniz.

Geri kalan sütunlara kopyalar yerleştirin

Yinelenen modülleri satırın kalan dört sütununa yerleştirin. İçeriği de düzenlediğinizden emin olun.

Satırı Otomatik Kaydırma Karuseline Dönüştür

Satır # 2'nin boyutunu değiştirme

Şimdi bu satırı otomatik kaydırılan bir ekip üyesi atlı karıncasına dönüştürmek için, satır ayarlarını yeniden açmamız ve boyutlandırma ayarlarında genişliği ve maksimum genişliği değiştirmemiz gerekiyor.

  • Genişlik:% 180
  • Maksimum genişlik:% 220 (masa),% 100 (tablet ve telefon)
Satır divi değişiklik aralığı

2 numaralı satırın yatay hareketini ekleyin

Gelişmiş sekmedeki kaydırma efekti ayarlarına yatay hareket ekleyerek çizgi ayarlarını tamamlayın ve bitirdiniz!

  • Yatay hareketi etkinleştir: Evet
  • Başlangıç ​​ofseti:
    • Ofis: 2,5
    • Tablet ve telefon: 0
  • Ortalama ofset: 0 (% 40'de)
  • Bitiş ofseti:
    • Ofis: -25 (% 62'de)
    • Tablet ve telefon: 0
  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Divi kaydırma animasyonu yapılandırması

anket

Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.

ofis

Divi takım üyesini kaydır

Son düşünceler

Bu eğitimde, Divi'nin yerleşik kaydırma efektleriyle nasıl yaratıcı olacağınızı gösterdik. Özellikle, güzel, otomatik kayan bir ekip üyesi atlıkarıncasını yeniden oluşturduk. Ziyaretçiler sayfayı aşağı kaydırdıkça, atlı karıncanın başka bir bölümü görünür.

Divi'ye nasıl daha fazla sosyal medya simgesi eklenir

Divi'ye nasıl daha fazla sosyal medya simgesi eklenir

Divi, web sitenizin her ayrıntısını başlıktan alt bilgiye kadar kontrol etmenizi ve tasarlamanızı sağlar. Herhangi bir web sitesinin en çok tıklanan unsurlarından biri sosyal medya simgeleridir. Bağlı bir kitle sizi başka bir yerde bulmak ve sizi tanımak ister. Açıkçası, bunu olabildiğince kolaylaştırmak isteyeceksiniz. 

Bu yüzden Divi'nin tema seçeneklerinde ek sosyal medya simgelerini nasıl etkinleştireceğinizi, bir sayfada veya gönderide herhangi bir yere sosyal medya simgeleri eklemek için Divi Builder'ı nasıl kullanacağınızı ve güçten nasıl yararlanacağınızı göstereceğiz. Sitenizin her köşesine sosyal medya simgeleri eklemek için Divi Builder teması.

Divi altbilgisinde ek sosyal medya simgeleri kolayca nasıl etkinleştirilir

Divi sitenize daha fazla sosyal medya simgesi eklemenin en kolay yolu panele gitmektir. Tema ayarları , Facebook, Twitter, Instagram ve RSS seçeneklerini etkinleştiriyor. Sonra tek yapmanız gereken profilinizin URL'lerini alanlara girmek. Bunu yaptığınızda, bunları sitenizin altbilgisinde simge bağlantıları olarak göreceksiniz:

Sosyal simgeler divi

WordPress kontrol paneli menünüzde şu adrese gidin: Divi - Tema seçenekleri ve sekmeye tıklayın genel . Ağ anahtarını görmek için aşağı kaydırın. Ayrıca, bu geçişlerin hemen altında, etkinleştirdiğiniz her Divi sosyal simgesi için URL'leri girdiğinizden emin olun. Aksi takdirde simge görünecektir, ancak üzerine tıklamak kullanıcının hiçbir yerde olmamasına neden olacaktır. Bir # URL yerine kullanıcıyı potansiyel olarak bir URL'ye yönlendirmek yerine sayfada tutacaktır. 404 sayfa .

Divi tema seçenekleri

Tema seçeneklerinizin sonuna gidin ve Değişiklikleri Kaydet . Artık sitenizin altbilgisine gidebilir ve onları test etmek için sosyal ikonlara tıklayabilirsiniz!

Altbilginizde simgeleri görmüyorsanız, aşağıdaki tema özelleştiricinizi kontrol ettiğinizden emin olun. Görünüm - Özelleştir ve emin olun Sosyal simgeleri göster , altbilgi seçeneklerinin altında işaretlenir.

Bölme wordpress

Bununla birlikte, sosyal altbilgi simgeleri için daha fazla seçenek istiyorsanız, hem özel şablonları hem de genel varsayılanları tartıştığımız Divi Tema Oluşturucu bölümümüze kaydırmaya devam edin.

Bir sayfaya sosyal medya izleyici eklemek veya içerik yayınlamak için Divi Builder nasıl kullanılır?

Bazen sayfaların veya gönderilerin gövdesindeki metin, resim veya diğer içerik blokları arasına ek sosyal medya simgeleri koymak çok mantıklı olabilir. Örneğin açılış sayfanız veya Hakkında sayfası, ziyaretçilerin sizinle nasıl bağlantı kuracaklarını bilmelerini sağlamak için ek sosyal simgeler eklemek için iyi bir yer olabilir. Normal metin kullanarak sosyal profillerinize bağlanmaktan daha fazlasını kesinlikle öne çıkaracaklar. Artı, insanlar tanınabilir simgeler arıyor.

Sosyal medya simgelerini doğrudan sayfalarınıza veya yayınlarınıza eklemek için Divi Builder'ı kullanabilirsiniz. sosyal medya takibi .

WordPress panonuzda mevcut bir sayfayı veya makaleyi her oluşturduğunuzda veya açtığınızda, Divi Builder'ı kullanmak isteyip istemediğinizi soran büyük bir mor düğme görürsünüz.

Divi makale oluşturma

Ve tabii ki öyle. Sadece tıkla Divi Builder'ı Kullan sayfanızı oluşturmaya veya sıfırdan (veya bizim önceden tanımlanmış düzenler ). Ek olarak, varsayılan WordPress düzenleyicisini kullanıyorsanız Divi sosyal medya simgelerini ekleyebilirsiniz. Tek yapmanız gereken bir blok eklemek Divi düzeni ve aşağıda izlediğimiz adımları izleyin.

Divi gutenberg düzeni

Mevcut sayfa oluşturucu modüllerini kullanarak sayfanızı veya gönderinizi istediğiniz gibi tasarlamak için aracı kullanabilirsiniz. Divi Builder'ı ilk kez kullanıyorsanız, nasıl çalıştığını net bir şekilde anlamak için önce bu genel bakışı kontrol etmek isteyebilirsiniz.

Sayfanıza sosyal medya simgeleri eklemeye hazır olduğunuzda, siyah daire + sosyal medya simgelerinizi yerleştirmek istediğiniz bölümde ve sosyal medya takibi görüntülenir.

Sosyal medyada modül takibi eklenmesi

Kişiselleştirmeye başlamadan önce istediğiniz sosyal ağları seçmeniz istenecektir. Tıklamak Yeni bir sosyal ağ ekle .

Sosyal ağ sosyal modülü divi ekle

Ardından, açılır listeden birini seçin.

Yeni bir sosyal ağ ekle

Bunu seçtikten sonra profil URL'nizi ekleyin. İsteğe bağlı olarak bir renk, gradyan, arka plan vb. Seçebilirsiniz. simgesine özel.

Sosyal ağ düğmesini özelleştirin

İlk sosyal ağınızı ekledikten sonra, aynı adımları izleyerek başka ağlar eklemeye devam edebilirsiniz. Hepsi sekme altında listelenecek içindekiler arasında sosyal medya izleme ayarları . Yerlerine sürükleyip bırakarak düzenleyebilir, kopyalayabilir veya yeniden düzenleyebilirsiniz.

Sosyal simgeleri özelleştirin

Sosyal ağlarınızı ekledikten sonra sekmelere gidin içindekiler et Gebe kalma diğer özelleştirme seçenekleriyle oynamak için. Kutunun gölgesinden, sınırın yarıçapından, aralığından, filtrelerden ve hatta simge modülünün giriş animasyonundan her şeyi değiştirebilirsiniz. Ayrıca bir düğme ekleme seçeneğiniz de var Takip etmek tüm simgelerinizin onlara daha fazla dikkat çekmesi için. Bitirdiğinizde tıklayın yeşil kene .

Bizi takip et düğmesi divi

Ardından, uygun gördüğünüz boşlukları ve düzenleri üzerinde çalışarak, simgeleri sayfanızın etrafında hareket ettirebilirsiniz. (The Divi dönüştürme seçenekleri Bu arada inanılmaz.) Tüm kararlarınızdan memnun olduğunuzda, yeşil Kaydet (veya Yayınla) düğmesi Yeni sosyal medya simge modülünüzü kaydetmek için sağ alt köşede. Yayınla / Kaydet düğmesini görmüyorsanız, mor üç nokta (üç nokta) Menüyü genişletmek için ekranın alt orta kısmındaki.

Divi butonu bizi takip edin

Bundan sonra, sosyal medya simgeleriniz sitenizde yayınlanacak.

Sosyal medya simgeleri eklemek için Divi Tema Oluşturucu'yu kullanma

Yukarıda bahsettiğimiz gibi Divi Tema Oluşturucu, sitenizin hemen hemen her yönü üzerinde tam kontrol sahibi olmanızı sağlayan güçlü bir araçtır. Dolayısıyla, herhangi bir yere sosyal medya simgeleri eklemek istiyorsanız, tema oluşturucu sizi ele aldı.

Tema oluşturucu ile başlamak için şu adrese gidin: Divi - Tema oluşturucu WordPress dashboard.

Divi oluşturucu

Bu, mevcut bir Divi tema oluşturucu düzenine sosyal medya simgeleri eklemekle ilgili. Veya yenisine! Sitenizin üstbilgisine, altbilgisine veya genel gövdesine, hatta belirli kategorilere veya diğer özel sayfa türlerine ekleyip eklemediğiniz önemli değildir. Aynı süreci takip edeceksiniz.

Önce eklemek istediğimiz bölümü bulacağız. Yine, küresel veya kişiselleştirilmiş olabilir. Tema oluşturucuyu daha önce hiç kullanmadıysanız, çok kolay. Bireysel gönderilere sosyal medya simgeleri ekleyeceğiz. Bu nedenle üzerine tıklayarak başlayabilirsiniz Yeni bir model ekle ve seçerek Tüm mesajlar ou Belirli kategorilerdeki mesajlar . Ardından eklemek istediğiniz kategorileri kontrol edin. Sonra tıklayın Şablon oluşturma .

Divi modeli ekle

Önceden şablon ayarladıysanız, Kalemi düzenle veya değiştirmek istediğiniz bölümü çift tıklayın.

Divi düzeni

Buraya sosyal medya simgelerini ekleme işlemi, yukarıda jeneratörde açıklananla aynıdır. Ancak, yalnızca tek bir sayfayı düzenlemek yerine tema oluşturucuyu kullandığınız için, simgeler yalnızca seçtiğiniz yerde görünmeyecektir. Başlıklara, alt bilgilere ve genel şablonlara şablonlar eklenebilir. Ve bir kez yapılandırmanıza gerek kalmadan nasıl ve ne zaman görüneceklerini seçebilirsiniz. Yukarıda yapacağınız gibi sayfa sayfa değil.

Örneğin, sosyal medya simgelerini gönderi başlığının altına, ancak yayınladığımız her blog gönderisine gönderi içeriğinin üzerine eklemek istersek, suivi sosyal ağlar. Daireye tıklayın Noir + ve iletişim kutusunda seçin Modül ekle .

Sosyal modülü seçin

Ardından modülü sosyal medya simgelerinin görünmesini istediğiniz yere sürükleyin. (Bu yerleşim için tel kafes modunu kullanıyoruz). O zaman görüntülemek istediğiniz sosyal ağları eklemeniz yeterlidir. Ardından, yukarıda yaptığınız gibi boyutlandırmayı ve renklendirmeyi özelleştirirsiniz.

Sosyal simge medya modülü divi

Ve aynen bunun gibi, Divi tema oluşturucusuna bazı sosyal medya simgeleri eklediniz. Oluşturduğunuz herhangi bir blog gönderisinde görünecekler (bu örnekte).

Paylaş düğmeli divi üzerinde görünüm

Ve görünüşlerinden hoşlanmıyorsanız, tema oluşturucuyu özelleştirmek kolaydır. Bunları kenar çubuğunun üstü gibi farklı bir konuma sürüklemeniz yeterlidir.

Divi sosyal paylaşım modülü taşı

Yeşil düğmeye tıkladığınızdan emin olun Enregistrer köşede. Artık sitedeki bu şablona sahip her blog yazısı, kenar çubuğunun üst kısmındaki sosyal medya simgelerinizle birlikte yüklenecek.

kenar çubuğu simgeleri

Divi Theme Builder ile üstbilgi ve altbilgiye sosyal medya simgeleri ekleme

Belki Divi ayarlarındaki varsayılan sosyal medya simgeleri sizin için çalışmıyordu veya yeterince özelleştirme sunmuyordu. Bu durumda, daha tamamen özelleştirmek için her zaman tema oluşturucuyu kullanabilirsiniz. 

Herhangi bir şablonda, özel bir altbilgi ekleyebilirsiniz. Bu, varsayılan Divi'nin yerini alacaktır. Özel bir şablonu olmayan herhangi bir şablon, varsayılan tema öğesini görüntüler. Sosyal medya simgeleri, kullanıcılarınızın ihtiyaçlarına bağlı olarak gönderiden sayfa arşivine farklılık gösterebilir.

Kişiselleştirme teması divi düzeni

Ayrıca, yerini alacak global bir altbilgi de ekleyebilirsiniz. tüm oluşturduğunuz diğer altbilgiler. (Bu aynı zamanda genel gövdeler ve başlıklar için de geçerlidir). 

Gönderiler, Sayfalar, Projeler ve Kategoriler için 4 özel altbilgi tasarladıysanız, ancak daha sonra bir Genel Altbilgi oluşturduysanız, yalnızca Genel Altbilgi gösterilecektir. 

Global şablonlar, bir gazete veya marka için site genelindeki sosyal medya simgeleri için harikadır. Sosyal simgeler içeren özel şablonlar, bir ağın parçası olan bireysel içerik oluşturucular için en iyisi olabilir.

Genel bir divi altbilgisi ekle

Özel üstbilgiler, altbilgiler ve gövde şablonları için Divi Builder'ı kullanarak, istediğiniz Divi'nin neredeyse her yerine sosyal medya simgeleri ekleyebilirsiniz. Varsayılan tasarımlarla sınırlı değilsiniz veya WordPress dosya sistemine girmeniz gerekiyor. Ek olarak, tema oluşturucu ile, Divi'nin tasarım seçeneklerinden herhangi birini sosyal medya simgelerini oluşturmak ve her bir kitle için doğru şekilde öne çıkarmak için kullanabilirsiniz.

Sonuç

Varsayılan Divi altbilgi seçeneklerine, yayınlar ve sayfalar için Divi Builder aracına, Divi Theme Builder'ın gücüne sahip olduğunuzda, yüklemeniz için hiçbir neden yoktur Web sitenize sosyal medya simgeleri eklemek için bir eklenti. Divi, sosyal simgelerinizin nasıl göründüğü ve nerede oldukları konusunda size tam kontrol sağlar. 

İster bir markayı, bir konuk yazarı, bir sabit içerik oluşturucuyu veya yalnızca çevrimiçi bulunabileceğiniz yerleri tanıtmanız gerekse, Divi'nin bunu yapmanın bir yolu vardır. Biz tek yanlıyız, ancak web sitenize sosyal medya simgeleri eklemenin en kolay, en kolay ve en şık yolu olduğunu düşünüyoruz.

WooCommerce ürünleri için dinamik faydalar ızgarası oluşturma

WooCommerce ürünleri için dinamik faydalar ızgarası oluşturma

Ürün sayfanızı tasarlama şeklinizin ziyaretçilerinizin davranışları üzerinde anında etkisi vardır. İyi hazırlanmış ve kişiselleştirilmiş bir ürün sayfası tasarımı, ziyaretçilerin ürününüzü satın almak isteyip istemediklerine karar vermelerini kolaylaştırabilir. Ürün sayfanızı daha ilgi çekici hale getirmenin bir yolunu arıyorsanız, muhtemelen bu öğreticiyi beğeneceksiniz. 

Divi ve Advanced Custom Fields eklentisini kullanarak tasarımınıza dinamik bir ürün avantajı ızgarasını nasıl dahil edeceğinizi göstereceğiz. Faydalar için bir grup alan oluşturarak başlayacağız. Daha sonra ürün sayfamızdaki özel alanları dolduracağız ve dinamik içeriği ürün sayfası şablonumuza ekleyeceğiz. 

Olası Sonuç

Eğiticiye geçmeden önce, farklı ekran boyutlarındaki sonuca hızlıca göz atalım.

Olası sonuç divi

1. ACF Eklentisi ve Ürün Avantajı Alan Grubu eklentisini yükleyin

Gelişmiş Özel Alanlar eklentisini yükleme

Ürünlerimizin arka ucunda çeşitli ürün avantajlarını görüntülemek için ücretsiz Gelişmiş Özel Alanlar eklentisini kullanacağız. Erişim WordPress arka ucu> Eklentiler> Yeni ekle> ACF eklentisi bul> Yükle> Etkinleştir .

Gelişmiş özel alan eklentisini yükleyin

Özel alanlara gidin ve yeni bir alan grubu ekleyin

ACF eklentisini yükleyip etkinleştirdikten sonra, özel alanlarınıza erişebilir ve yeni bir alan grubu ekleyebilirsiniz.

ACF alanları oluştur

Alan grubu ayarları

Yeni alan grubunuza bir başlık verin ve yalnızca ürün sayfalarında görünmesine izin verin.

  • "İleti türü", "Ürün" e eşittir
Kural ekleyin

İlk alan ekle

İlk ürün avantajınızın başlığı için yeni bir alan ekleyerek devam edin.

  • Alan Etiketi: Fayda Başlığı 1
  • Alan türü: metin
Ac alanı ekle
Divi alan özelleştirme

Kalan alanlar için adımı tekrarlayın

Ürünün diğer faydaları ve açıklamaları için de aynısını yapın. Tüm bu alanlar, kendilerine atanmış "Metin" alan türünü gerektirir.

  • Hizmetin başlığı 1
  • Faydaların tanımı 1
  • Hizmetin başlığı 2
  • Faydaların tanımı 2
  • Hizmetin başlığı 3
  • Faydaların tanımı 3
  • Hizmetin başlığı 4
  • Faydaların tanımı 4
ACF alanlarını yapılandırın

2. Ürünlere fayda ekleyin

Yeni bir ürün açma veya ekleme

Saha grubunuz ve alanlarınız oluşturulduktan sonra, ürünlerinize ürün avantajlarını bireysel düzeyde ekleyebilirsiniz. Seçtiğiniz bir ürünü açın veya yeni bir tane oluşturun.

Divi ürün oluşturma

Ürün Avantajları alanlarını doldurun

Ve ürünün faydalarını yerine getirin.

Divi avantajları alanlarını doldurun

3. Divi Tema Oluşturucu'da bir ürün sayfası şablonu oluşturun

Divi Tema Oluşturucu'ya gidin ve yeni bir şablon ekleyin

Divi ile başlama zamanı! Yeni bir şablon oluşturmak için Divi Tema Oluşturucu'ya gidin ve "Yeni şablon ekle" üzerine tıklayın.

Divi tema oluşturucu

Tüm ürünlerde şablon kullanma

Bu şablonu tüm ürünlerde kullanıyoruz, ancak bunun yerine belirli bir kategoriye veya etikete sahip ürünleri seçmekten çekinmeyin.

Tüm woocommerce ürünlerini ekle

Model gövdesi şablon düzenleyicisine girin

Ardından, "Özel bir gövde ekle" yi tıklayıp "Özel bir gövde oluştur" u seçerek modelin gövdesini girin.

Divi gövdesi oluşturma

1. bölümü düzenle

Arka plan rengi

Şablon düzenleyicinin içine girdikten sonra bir bölüm göreceksiniz. Bu bölümü açın ve arka plan rengini siyaha değiştirin.

  • Arka plan rengi: # 000000
Divi bölümü arka plan yapılandırması

aralık

Bölümün tasarım sekmesine gidin ve bazı özel üst ve alt dolgu ekleyin.

  • Üst Dolgu: 10 piksel
  • Alt Dolgu: 10 piksel
Divi bölüm aralığı yapılandırması

Yeni bir satır ekle

Sütun yapısı

Aşağıdaki yapıya sahip bölüme yeni bir satır ekleyerek devam edelim:

Hat modülü düzen yapılandırması

aralık

Herhangi bir mod eklemeden satır ayarlarını açalım ve bazı boşluk ayarlamaları yapalım.

  • Kişiselleştirilmiş Oluk Kullanın: Evet
  • Oluk genişliği: 1
  • Genişlik:% 90
  • Maksimum genişlik:% 100
Hat modülü aralık ayarları

aralık

Tüm üst ve alt iç boşlukları kaldırın.

  • Yüksek İç Marj: 0 piksel
  • Düşük İç Marj: 0 piksel
Divi hat modülü aralık ayarları

Woo Cart Notice modülünü sütuna ekleyin

Dinamik İçerik

Bu hat ve bölümde ihtiyacımız olan tek modül Woo Cart Notice modülüdür. Dinamik bölümde "Bu Ürün" ün seçildiğinden emin olun.

  • Ürün: Bu Ürün
Ayarlar woo cart notice module divi

Renk arka plan

Ardından modül ayarlarını açın ve şeffaf bir arka plan kullanın.

  • Arka Plan Rengi: rgba (0,0,0,0)
Woo cart modülü divi ayarları

Metin ayarları

"Tasarım" sekmesine geçin ve metin yazı tipini değiştirin.

  • Metin Yazı Tipi: Karla
Divi modülü yazı tipi ayarları

Düğme ayarı

Stil ayarlarını tanımlayarak eklenti ayarlarını bitirin:

  • Düğme için Özel Stiller Kullan: Evet
  • Düğme Metin Boyutu: 20 piksel
  • Düğme Metin Rengi: # 000000
  • Düğme Arka Planı: # ffd623
  • Düğme kenarlığı genişliği: 0 piksel
  • Yuvarlak sınır Düğmesi: 0 piksel
Woo cart notice module renk ayarları
  • Düğme Yazı: Oswald
  • Düğme Yazı Tipi Stili: Büyük harf
Woo cart fark modülü renk tasarımı ayarı
  • Yüksek İç Marj: 20 piksel
  • Düşük İç Marj: 20 piksel
  • Sol Dahili Kenar Boşluğu: 50 piksel
  • İç Sağ Kenar Boşluğu: 50 piksel
Yapılandırma tasarım modülü woo cart notu

2. bölüm ekle

Gradyan arka planı

Bir öncekinin altına başka bir normal bölüm ekleyin. Ardından ayarları açın ve aşağıdaki gibi bir degrade arka planı kullanın:

  • Renk 1: # 000000
  • Renk 2: #ffffff
  • Başlangıç ​​konumu:
    • Masaüstü: 30%
    • Tablet:% 57
    • Telefon: 54%
  • Bitiş Konumu:
    • Masaüstü: 30%
    • Tablet:% 57
    • Telefon: 54%
Divi hat modülü arka ayarı

aralık

Tasarım sekmesine gidelim ve yüksek bir iç marj ekleyelim.

  • Üst Dolgu: 150 piksel
Divi hat modülü aralık yapılandırması

Yeni bir satır ekle

Sütun yapısı

Aşağıda gösterildiği gibi aynı yapıya sahip yeni bir satır ekleyerek devam edin:

Divi çizgi stili yapılandırması

boyutlandırma

Henüz herhangi bir mod eklemeden ayarları açıp aralığı aşağıdaki gibi değiştireceğiz:

  • Özel oluklar kullanın: Evet
  • Oluk alanı: 1
  • Genişlik:% 95
  • Maksimum genişlik: 2560 piksel
  • Satır Hizalama: Orta
Oluk konfigürasyonu divi modülü

aralık

Üst iç marjı da kaldıracağız.

  • Üst Dolgu: 0 piksel
Divi modülü aralık yapılandırması

Ana eleman

Sütunun içeriğini Masaüstünde ortalamak için, satır modülünün ana öğesinde iki satır CSS kodu kullanacağız.

Masaüstü:

display: flex; hizalama öğeleri: merkez;

Tablet ve Telefon:

Ekran bloğu;
Divi hat modülü stil ayarları

Woo Image modülünü 1. sütuna ekleyin

Dinamik İçerik

Modül ekleme zamanı, 1. sütunda Woo Images modülü ile başlayacağız. "Bu ürün" ün seçildiğinden emin olun.

  • Ürün: Bu Ürün
Woocommerce ürün resmi modülü ayarları

Dikey kaydırma animasyon efekti

Gelişmiş sekmedeki yatay hareket kaydırma efektini kullanarak görüntüye ince hareketler ekliyoruz.

  • Dikey hareketi etkinleştir: Evet
  • Başlangıç ​​ofseti:
    • Ofis: -4
    • Tablet ve telefon: 0
  • Ortalama ofset: 0
  • Bitiş ofseti: 0
  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Divi görüntü modülü ayarı

Woo başlık modülünü 2. sütuna ekleyin

Dinamik içerik

2. sütunda, ihtiyacımız olan ilk mod bir Woo başlık modudur. Dinamik içerik alanında "Bu ürün" ün seçildiğinden emin olun.

  • Ürün: Bu ürün
ürün avantajları tablosu

Başlık metni ayarları

Ardından tasarım sekmesine gidin ve başlık metninin stilini aşağıdaki gibi belirleyin:

  • Başlık yazı tipi: Oswald
  • Başlık yazı tipi stili: büyük harf
  • Başlık metni rengi: # ffd623
  • Başlık metni boyutu: 80 piksel
Divi başlık modülü tasarım ayarı

aralık

Sol ve sağ kenar boşlukları ekleyerek Woo başlık modülünü tamamlayın.

  • Sol kenar boşluğu:% 5
  • Sağ kenar boşluğu:% 5
Divi başlık modülü ayarı

Woo açıklama modülünü 2. sütuna ekleyin

Dinamik içerik

Woo açıklama modülü olan bir sonraki modüle geçelim. Bunun için aşağıdaki dinamik içeriği kullanıyoruz:

  • Ürün: Bu ürün
  • Açıklama türü: Kısa açıklama
Ürün açıklaması modül ayarları

Metin ayarları

Modül tasarımı sekmesine geçin ve metin ayarlarını buna göre değiştirin:

  • Metin Yazı Tipi: Karla
  • Metin rengi: #dbdbdb
  • Metin boyutu: 17 piksel (masaüstü ve tablet), 15 piksel (telefon)
  • Metin satır yüksekliği: 1,9 em
Renk ayar modülü açıklaması divi

boyutlandırma

Ardından farklı ekran boyutlarında genişliği değiştirin.

  • Genişlik:% 59 (masaüstü),% 82 (tablet ve telefon)
Divi özet modülü genişlik ayarı

aralık

Aralık ayarlarına özel kenar boşluğu değerleri ekleyerek Woo açıklama modülünü tamamlayın.

  • Üst kenar boşluğu: 50px
  • Alt kenar boşluğu: 100px
  • Sol kenar boşluğu:% 5
  • Sağ kenar boşluğu:% 5
Divi ürün açıklama modülü

Blurb modülünü 2 sütununa ekleyin

Dinamik içerik

Bu öğreticinin ilk bölümünde eklediğimiz ürün avantajlarını görüntülemek için Blurb modüllerini kullanacağız. İlk Blurb modülünü ekleyin ve başlık ve gövde için üretilen ilk avantajın dinamik içeriğini kullanın.

  • Başlık: Fayda Başlığı 1
  • Gövde: Fayda Tanımı 1
Divi özet modülü metin ayarı

Fotoğraf yükleniyor

Bir resim yükleyin veya bir sonraki simgeyi kullanın. Bu eğitim boyunca kullandıklarımızı, bu eğitimin başında indirebileceğiniz indirme klasöründe bulabilirsiniz.

Görüntü modülü özeti divi yapılandırması

Görüntü / Simge Ayarları

Modülün tasarım sekmesine gidin ve görüntü / simge ayarlarını aşağıdaki gibi değiştirin:

  • Görüntü / Simge Yerleşimi: Üst
  • Görüntü / Simge Hizalama: Sol
Divi ayar modülü

Başlık Metni Ayarları

Daha sonra başlık metni ayarlarını değiştiriyoruz.

  • Başlık Yazı Tipi: Oswald
  • Başlık Yazı Tipi Stili: Büyük harf
  • Başlık Metin Boyutu: 25px
Divi özet modülü yazı tipini yapılandırın

Gövde Metni Ayarları

Gövde metni ayarlarıyla birlikte.

  • Gövde Yazı Tipi: Karla
  • Metin boyutu: 17 piksel (masaüstü ve tablet), 15 piksel (telefon)
  • Gövde çizgisi yüksekliği: 1,9 em
Metin modülü özet div i'yi yapılandırın

boyutlandırma

Ardından boyutlandırma ayarlarına gidin ve genişlikleri değiştirin. Ana genişliği% 50'den az kullanmak önemlidir, bu, sonraki adımlarda iki Blurb modülünü yan yana göstermemize olanak tanır.

  • Resim Genişliği:% 25
  • Genişlik:% 49
Divi özet modülü boyutlandırmasını yapılandırın

aralık

Farklı ekran boyutlarında özel dolgu değerleri kullanarak Blurb modülünün etrafına boşluklar da ekleyeceğiz.

  • Üst dolgu:% 8
  • Alt dolgu:% 8
  • Sol dolgu:% 8 (masaüstü ve tablet),% 2 (telefon)
  • Sağ dolgu:% 8 (masaüstü ve tablet)% 2 (telefon)
Divi özet modülü aralığını yapılandırın

Ana eleman

Şimdi Özet modülünün metni yan yana iki adımda görüntülediğinden emin olacağız. İlk olarak, modül genişliğinin% 50'den az olduğundan emin olacağız (önceki adımda yaptığımız gibi). Sonra, satırdaki özelliği kullanacağız. Bu CSS özelliğini, gelişmiş bölümdeki ana öğeye ekleyeceğiz.

display: inline-block;
CSS kod divi modülü ekle

Özet modülünü 3 kez klonlayın

İlk Blurb modunu tamamladıktan sonra, onu üç kez klonlayabilirsiniz. Blurb modüllerinin bir ızgarada göründüğünü otomatik olarak fark edeceksiniz.

Ürün adı divi bölümü

Blurb modülü görüntülerini düzenleme

Her yinelenen Blurb bölmesindeki görüntüyü düzenleyin. Bunları, bu makalenin başında indirmiş olabileceğiniz indirme klasöründe bulabilirsiniz.

Divi özet modül resmi

Blurb modülünün dinamik içeriğini değiştirme

Ayrıca her yinelenen Blurb modülünün dinamik içeriğini değiştirin.

  • Başlık: Hizmetin başlığı (2,3 veya 4)
  • Gövde: avantajların açıklaması (2,3 veya 4)
Divi özet modülü kuralları

Blurb modüllerine ayrı ayrı kenarlık ekleme

Bulanıklaştırma modülü 1 kenarlık ayarları

Şimdi, ızgaramızı tasarlamayı bitirmek için, Blurb modüllerine bireysel düzeyde sınırlar ekleyeceğiz. İlk Blurb modunu açın ve düz bir kenarlık kullanın.

  • Sağ kenar genişliği: 1 piksel
  • Sağ kenarlık rengi: # ffd623
Yuvarlak kenar yapılandırması divi özet modülü

Ayrıca ilk Blurb modülüne bir alt kenarlık ekleyin.

  • Alt kenar genişliği: 1 piksel
  • Alt kenarlık rengi: # 000000
Divi alt kenar boşluğunu yapılandırın
Bulanıklaştırma modülü 2 kenarlık ayarları

Ardından ikinci Blurb modülünü açın ve bir alt kenarlık kullanın.

  • Alt kenar genişliği: 1 piksel
  • Alt kenarlık rengi: # 000000
Yapılandırma sınır modülü özeti divi
Bulanıklaştırma modülü 3 kenarlık ayarları

Üçüncü Blurb modülüne düz bir kenarlık ekleyerek ızgara tasarımını tamamlayın.

  • Sağ kenar genişliği: 1 piksel
  • Sağ kenarlık rengi: # ffd623
ürün avantajları tablosu

Sütun ekle Sepete ekle Modül 2 sütununda

Dinamik içerik

Tasarımımızda ihtiyacımız olan son modül bir Woo Add to Cart modülüdür. Dinamik içerik alanında "Bu ürün" ün seçildiğinden emin olun.

  • Ürün: Bu ürün
Kart divi modülü ayarlarına ekle

Saha ayarları

Sonraki tasarım sekmesine gidin ve saha ayarlarını değiştirin.

  • Alanların arka plan rengi: #ffffff
  • Alan metni rengi: # 000000
Stil rengi modülünü yapılandırın sepete divi ekle
  • Yuvarlak alanlar: 0 piksel (tüm köşeler)
  • Alanların alt kenarlık genişliği: 1 piksel
  • Alanların alt kenarlığının rengi: # 000000
Divi bölüm aralığını yapılandırma

Düğme ayarları

Ardından, düğmeyi buna göre şekillendirin:

  • Düğme için özel stiller kullan: Evet
  • Düğme metni boyutu: 20 piksel
  • Düğme metni rengi: # 000000
  • Düğme arka plan rengi: # ffd623
  • Düğme kenarlığı genişliği: 0 piksel
  • Düğme kenarlığı yarıçapı: 0 piksel
Divi düğme tasarımını yapılandırın
  • Düğme yazı tipi: Oswald
  • Düğme yazı tipi stili: büyük harf
Divi düğmesini yapılandır
  • Üst dolgu: 20 piksel
  • Alt doldurma: 20px
  • Sol doldurma: 50px
  • Sağ dolgu: 50 piksel
Divi modülü boyutlandırmasını yapılandırın

aralık

Ve özel kenar boşluğu değerleri ekleyerek modül parametrelerini tamamlayın.

  • Üst kenar boşluğu: 100px
  • Sol kenar boşluğu:% 5
Divi aralığını yapılandırın

3. Tema üreticisinin değişikliklerini kaydedin ve sonucu önizleyin

Ürün sayfası şablonunu tasarlamayı tamamladıktan sonra, tüm Tema Oluşturucu değişikliklerinizi kaydedebilir ve sonuçları ürünlerinizde görüntüleyebilirsiniz!

Divi tasarımını kaydedin
Divi değişikliklerini kaydedin

anket

Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.

Demo sonucu

Son düşünceler

Bu makalede, bir sonraki Divi ürün sayfası şablonunuzla nasıl yaratıcı olacağınızı gösterdik. Özellikle, ürün sayfanıza ek avantajlar eklemek için dinamik bir ürün avantajı tablosunu nasıl ekleyeceğinizi gösterdik. Bu öğreticiyi, Advanced Custom Fields eklentisi ile birlikte Divi kullanarak oluşturduk. JSON dosyasını ücretsiz olarak da indirebilirsiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum yapmaktan çekinmeyin.

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

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

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.

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:

  • 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.

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.