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

yılından beri Blair Jersyer | Haziran 10, 2020 | Divi

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 olarak görüntülenen üst ortadaki site başlığına ve sloganına dikkat edin.

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.

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

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.

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.

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.

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

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.

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.

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.

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.

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

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

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.

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

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.

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!

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

yılından beri Blair Jersyer | Haziran 9, 2020 | Divi

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.

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

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

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

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.

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

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)

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.

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

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

Hat

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

• Çizgi rengi: # 000000

boyutlandırma

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

• Bölücü ağırlık: 3px
• Genişlik:% 28

aralık

Üst kenar boşluğu da ekliyoruz.

• Üst kenar boşluğu: 10px

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

taşmaları

Ayrıca taşmaları gizleyin.

• Yatay taşma: gizli
• Dikey taşma: gizli

Yeni bir satır ekle

Sütun yapısı

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

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

aralık

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

• Üst dolgu: 0 piksel
• Alt doldurma: 0px

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

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

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)

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

Hat

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

• Çizgi rengi: # 000000

boyutlandırma

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

• Bölücü ağırlık: 3px
• Genişlik:% 50

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.

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.

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

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.

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

• Düğme Yazı Tipi: Üç Aylık
• Düğme yazı tipi ağırlığı: kalın

aralık

Ayrıca özel dolgu ekleyin.

• Üst dolgu: 50 piksel
• Alt doldurma: 50px
• Sol doldurma: 100px
• Sağ dolgu: 100 piksel

Pozisyon

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

• Pozisyon: Mutlak
• Yer: sol alt

Çizgiyi gerektiği kadar klonlayın

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

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

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

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ı

İç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ı

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ı

İç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ı

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ı

İç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ı

Nihai sonuç

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

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

yılından beri Blair Jersyer | Haziran 9, 2020 | Divi

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.

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)

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

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:

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

aralık

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

• Üst dolgu: 100 piksel
• Alt doldurma: 100px

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.

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)

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

Hat

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

• Çizgi rengi: # edf000
• Çizgi stili: düz
• Çizgi Konumu: Üst

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

Satır # 2 ekle

Sütun yapısı

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

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

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)

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.

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

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

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;

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.

Resmi Sil

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

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

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

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

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

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

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)

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ı

anket

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

ofis

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

yılından beri Blair Jersyer | Haziran 8, 2020 | Divi

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:

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 .

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.

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.

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.

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.

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

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

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

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

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.

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.

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 .

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

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 .

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.

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

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.

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.

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.

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.

Ö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

yılından beri Blair Jersyer | Haziran 8, 2020 | Divi

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

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 .

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

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

İ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

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

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.

Ürün Avantajları alanlarını doldurun

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

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.

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.

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.

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

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

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:

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

aralık

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

• Yüksek İç Marj: 0 piksel
• Düşük İç Marj: 0 piksel

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

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)

Metin ayarları

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

• Metin Yazı Tipi: Karla

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

• Düğme Yazı: Oswald
• Düğme Yazı Tipi Stili: Büyük harf

• 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

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%

aralık

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

• Üst Dolgu: 150 piksel

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:

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

aralık

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

• Üst Dolgu: 0 piksel

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;

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

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ı

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

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

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

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

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

boyutlandırma

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

• Genişlik:% 59 (masaüstü),% 82 (tablet ve telefon)

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

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

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ü / 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

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

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

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

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)

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;

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

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.

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)

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

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

• Alt kenar genişliği: 1 piksel
• Alt kenarlık rengi: # 000000

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

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

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

Saha ayarları

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

• Alanların arka plan rengi: #ffffff
• Alan metni rengi: # 000000

• 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

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

• Düğme yazı tipi: Oswald
• Düğme yazı tipi stili: büyük harf

• Üst dolgu: 20 piksel
• Alt doldurma: 20px
• Sol doldurma: 50px
• Sağ dolgu: 50 piksel

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

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!

anket

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

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?

yılından beri Blair Jersyer | Haziran 1, 2020 | Divi

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.

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.

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

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

• Genişlik: 50px
• Modülün hizalanması: orta
• Yükseklik: 25px

• 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

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

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

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.

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

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

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.

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.

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.

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.

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

Ek Kaynaklar

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

• Divi üzerinde tipografi ve düzen nasıl özelleştirilir
• Divi'de yeniden kapatılabilir kayan harekete geçirici mesaj ekleme
• Divi üzerinde aynı satırdaki elemanlar nasıl hizalanır
• Divi Builder'a tıklayarak animasyonlu bölümler oluşturma

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.