Divi 2.4'ü Keşfetmek: Divi 2.4 Blog Serisinde Öğrendiğimiz Her Şeyden Oluşturulan ÜCRETSİZ Kitaplık Paketi

Bu ayın başlarında, Divi tarihindeki en büyük yükseltme ve en popüler WordPress temamız için dev bir adım olan Divi 2.4'ü tanıttık. Bu güncellemede keşfedilecek o kadar çok harika özellik var ki, hepsini sürüm gönderisinde açıklamak zordu, bu yüzden size nasıl alınacağını öğretmeyi amaçlayan 2 haftalık bir dizi bilgilendirici blog gönderisi yapmaya karar verdik. Divi 2.4'ün tam avantajı ve yeni seçenekleri. Bu serinin 13. bölümünde, Divi 2.4'ün gücünü göstermek için oluşturduğumuz bir demo sayfasının tamamını gözden geçireceğim. Ayrıca, kişisel kullanımınız için kendi Divi Kitaplığınıza ekleyebileceğiniz sayfadaki tüm öğeleri içerecek bir kitaplık paketi de derleyeceğim.

Divi 2.4 mini blog serisini takip etmediyseniz, buna dalmadan önce önceki yazılarımızı okumanızı şiddetle tavsiye ederim. Dizi boyunca birçok özelliği uzun uzadıya ele aldığımız için, size tekrar eden içerik vermek yerine, onlar hakkında konuşurken bu gönderilere bağlantı vereceğim.

Yapacağımız Demo Sayfasına Hızlı Bir Bakış

Yeni tema ayarları, tam genişlikli satırlar, tam ekran üstbilgiler, genel öğeler, şeffaf arka plan renkleri, özel css, gelişmiş modül ayarları ve çok daha fazlası gibi çok çeşitli Divi 2.4 özellikleri nedeniyle bu sayfayı kapsayacak şekilde seçtim.

Canlı Demoyu Görüntüle

Üst Düzey Sayfa Yapısına Bakmak

İnce ayrıntılara girmeden önce, burada sayfa yapısının ana hatları verilmiştir. Bu bölümlerin her birini daha ayrıntılı olarak inceleyeceğim, ancak sayfanın nasıl bölündüğünü anlamak için birkaç dakikanızı ayırın.

Her şey sırayla. Tipografiyi Tanımlamak

Her zaman yaptığım ilk şeylerden biri tipografimi tanımlamaktır. Bu, sayfanın rengini, içeriğini ve genel dokusunu bilgilendirmeye yardımcı olur. İşte bu demo için tipografi ayarlarıma bir bakış. Diğer tüm genel ayarlarım Divi'nin varsayılanlarını kullanır.
Yeni tema özelleştirici hakkında daha fazla bilgi

Tam Ekran Başlığını Oluşturma

Interior's ana sayfasının ilk bölümü, Fullwidth Header Module içeren Fullwidth Bölümüdür. Bu modülde bir paralaks arka plan resmi, Logo, Başlık, Alt Başlık ve Kaydırma Oku ekledim.
Tam Ekran Başlık Modüllerine derinlemesine bir bakış

İşte Genel ve Gelişmiş Modül Ayarlarıma bir bakış. Daha büyük bir görünüm için ekran görüntülerine tıklayabilirsiniz. Burada dikkat edilmesi gereken bazı özelleştirmeler, kaydırma oku (genel ayarlar) ve alt başlık yazı tipi stili (gelişmiş ayarlar) seçimimdir.

Tam Genişlik, Eşit Yükseklik, 3 Sütun Satırı

Sayfamızdaki bir sonraki bölüm, tam genişliğe ayarlanmış ve sütunlar arasındaki boşluğu kaldıran özel bir cilt payı verilen üç sütunlu bir satırdır. Her sütunun içinde, simgeyi ve metni oluşturmak için bir tanıtım yazısı modülü ve ardından sayfanın daha aşağısındaki bölümlere bağlanan bir simge eklemek için başka bir tanıtım yazısı modülü bulunur.

Bölüm Ve Satır Ayarları – Buradaki içeriğe bakmadan önce, Bölüm ve Satırın nasıl oluşturulduğuna bakalım. İlk olarak, bölüm ve satır için özel üst ve alt dolgu sıfır tanımladım ve "Mobilde Özel Dolgu Tut"u açtım çünkü bu oluksuz görünümü mobil cihazlarda da tutmak istiyorum. Aşağıdaki ekran görüntüleri.

Genel Satır Ayarları – “Tam Genişlik Yap”ı açtım ve Satır Ayarlarında özel bir '1' oluk genişliği kullandım, böylece kullanıcının tarayıcı genişliği ne olursa olsun, 3 sütun tam genişliğe yayılır. Oluk genişliği '1' değerinin sütunlar arasındaki tüm boşluğu kaldırdığını unutmayın.

Gelişmiş Satır Ayarları – Her bir sütuna kendi arka plan rengini, özel dolgusunu (%5) verdim ve içeriği ne olursa olsun sütun yüksekliklerinin her zaman aynı olması için “Sütun Yüksekliklerini Eşitle”yi açtım. Daha akıcı bir deneyim için tarayıcı genişliğiyle orantılı olarak büyüyüp küçülmesi için sütun dolgum için yüzdeler kullandım.
Divi'nin Yeni Satır Ayarları Hakkında Daha Fazla Bilgi

Her Sütunun İçindeki İçeriği Oluşturma

Daha önce de belirtildiği gibi, her sütunun içinde iki modül vardır. İlk içerik parçası, özel bir resim, başlık ve içeriğe sahip bir Blurb Modülünden oluşur. Başlık ve içerik, aşağıdaki sağdaki resimde bulunan Gelişmiş Tasarım Ayarları aracılığıyla şekillendirilmiştir. Her sütun farklı bir arka plan rengine sahip olduğundan, üç tanıtım yazısının tümü farklı gelişmiş renk değerlerine sahiptir.

Kaydırma Simgeleri – Kaydırma Simgesi, "Simge Kullan" etkinleştirilmiş başka bir tanıtım modülü aracılığıyla eklendi. İstenen simge ve simge rengini seçtim ve ardından gelişmiş ayarlarda özel bir simge boyutu belirledim. Aynı modülü üç sütun arka plan renginin tümüne klonlayabilmem için simge rengi için şeffaf bir siyah kullandığıma dikkat edin.

Düzgün Kaydırılan Bağlantılar Ekleme – Ayrıca, aşağı kaydırma simgesine bir #son-interiors URL'si verdiğimi de görebilirsiniz. Ayrıca sayfamın Son İç Mekanlar bölümüne "son iç mekanlar" için bir CSS kimliği verdim. Kimliğin önüne bir '#' ekleyerek benzersiz bir CSS kimliğine sahip herhangi bir öğeye bağlantı verebilirsiniz. Normalde bu hızlı bir şekilde yerine oturur, ancak Divi, sayfanıza eklediğiniz tüm dahili bağlantılara sorunsuz bir şekilde kaydırır. Üç kaydırma okuna da farklı dahili sayfa bağlantıları verdim, böylece hepsi uygun bölüme sorunsuzca kaydırılır.

Kesintisiz Tam Genişlikte Görüntü

Ardından, önceki adımda eklediğim üç sütunla mükemmel şekilde çalışan tam genişlikte bir görüntü ekledim. Dürüst olalım, bu kusursuz ilişki biraz fotoğraf manipülasyonu ve biraz da şans gerektiriyordu. Kısacası, bir stok görüntüsünü mükemmel 3 sütuna sahip olacak şekilde düzenledim ve her sütunun üst kısmını yukarıdaki sütunların tam renk değerlerine soldurdum.

Bu, bu özel düzeni büyük ölçüde geliştirirken, onu güçlü bir sayfa haline getirmek gerekli değildir. Kesintisiz geçiş olmadan bu sayfanın nasıl görüneceğini görebilirsiniz.

Bölümün Kenarına Dokunan Görüntüler Ekleme

Bu iki bölüm tam genişlikte yapılmış 2 sütun satırıdır. Yukarıdaki tam genişlikli 3 sütun satırından farklı olarak, içeriğin hala biraz nefes alma odası (kırmızı ile vurgulanmış) olması için özel bir oluk genişliği kullanmıyorum. Bununla birlikte, sandalye bölümün alt kenarına (mavi çizgi) değecek şekilde alt dolguyu ilk bölümden ve sıradan çıkardım. Benzer şekilde, lamba bölümün üst kenarına değecek şekilde üst dolguyu lamba bölümünden ve sırasından çıkardım. Burada dikkat edilmesi gereken bir diğer özelleştirme ise aşağıdaki resmin sağ alt kısmındaki Metin Modülüne eklediğim özel üst dolgudur.

Kesintisiz Görüntüler ve Bölüm Arka Plan Renkleri
Bu bölümlerin metin içeriği daha büyük bir arka plan görüntüsünün üzerindeymiş gibi görünebilir, ancak aslında görüntüler 1/2 sütunlarındadır, ancak bölümün arka plan renginde mükemmel bir şekilde soluyorlar.

Bu, doğru görüntülerin doğru arka plan renkleriyle birlikte kullanılmasının sayfa tasarımını nasıl büyük ölçüde iyileştirebileceğinin bir başka örneğidir, ancak dürüst görüşüme göre, sayfa düzenini tanımlayan şey bu değildir. Örneğin, bu düzen, değiştirilmemiş görüntülerle hala harika görünüyor.

Metin Bloklarını Ekleme ve Şekillendirme
Metin blokları, Görsel Metin Düzenleyicisine kıyasla metin düzenleyicide oluşturulan basit Metin Modülleridir. Girişim şöyle görünüyor ve tema tipografi ayarlarımın, özel bağlantım için biraz satır içi stilin dışındaki tüm metin stillerini, boyutları ve renkleri işlemesine izin verdim.

<h2>Handmade Furniture</h2>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel.</p>
<a style="font-style: italic;" href="#"><strong>Latest Project</strong></a>

Peki Ya Bu Üç Küçük Resim?
Galeri modülüyle bir resim ızgarası ekleyebilecekken, Divi'nin yeni Özel CSS özelliğini göstermek adına biraz özel css içeren üç ayrı resim modülü ekledim. Yani bunun aslında inşaatçıda nasıl göründüğü şudur.

Her görüntünün Özel CSS'sinde, modüle %5'lik bir kenar boşluğu ile %30 genişliğinde olmasını söyledim (son görüntünün sağ kenar boşluğu 0'dır).
Özel CSS Sekmesi Hakkında Tam Bir Gönderi

İşte görüntü genişlikleri ve kenar boşluklarının %100'e varan genişliğe eklendiği nihai sonuç.

Tam Genişlikli Bir Satıra Galeri Ekleme

Galeri modülü, yeni tam genişlikte oluksuz sıralarla gerçekten harika görünüyor. Sayfamızdaki bir sonraki bölüm, bu örneği 2/3 :: 1/3 sütun satırında göstermektedir. Yine bu satır ve bölüm için 0 üst ve alt dolgu tanımladım. 2/3 satırının içeriği önceki örnekteki diğer metin bloklarıyla hemen hemen aynıdır, bu yüzden bu bölümde esas olarak 1/3 sütun galerisinden bahsedeceğim. Bununla birlikte, burada soldaki metin modülünün, çok fazla nefes alma alanı sağlamak için her tarafında %15'lik özel dolguya sahip olduğunu belirteceğim.

Bu Düzeni Kullanırken Dikkat Edilmesi Gerekenler
Bu düzen, tümü aynı yükseklikte olan görüntüler kullanıldığında çok daha güçlüdür. Bu şekilde galeri ve bölüm, geçerli slayta göre sürekli olarak yükseklik değiştirmez. Başka bir yükseklik sorunu, çok fazla metin içeriği varsa veya resimlerinizin yüksekliği çok kısaysa, metin sütununun galeriden daha uzun olma olasılığıdır. Metin içeriğiniz çok uzun olursa, galerinin altında bir boşluk yaratacaktır, ancak dünyanın sonu değildir.

Üç Sütunlu Resim Galerisi

Bu, tam genişlikte bir satırdaki bir galeri gibi görünebilir, ancak aslında her sütunda bir Görüntü Modülü bulunan üç sütunlu bir satırdır.

Neden Galeri Modülü Kullanmıyorsunuz?
Galeri Modülü kullanmanın avantajları ve dezavantajları vardır. Bu noktaları yükseltmek için özellikle bu sezgisel olmayan yöntemi kullanmayı seçtim.

Galeri Modülü Avantajları – Bir galeri modülü kullansaydım, üç yerine yalnızca bir modül kullanmam gerekirdi. Bu bölüme daha fazla resim eklemek istemem durumunda bu avantaj katlanıyor. Diğer bir büyük avantaj, kullanıcının daha sonra ışık kutusu modunda resim galerisinde ok atabileceği galeri ışık kutusunu tetiklemek için bir resme tıklayabilmektir.

Galeri Modülünün Dezavantajları – Burada yalnızca tek bir satırda üç resim göstermek istediğimi biliyordum ve galeri modülü 1 sütun satırında dört sütun gösteriyor ve belirli kesme noktalarında iki sütuna ayrılıyor. Bu, düzensiz bir arızaya neden olur, bu yüzden üç ayrı görüntü modülü kullanmayı seçtim.

Her Sayfada Aynı İletişim Formunu Kullanma

Her sayfada aynı kişi alt bilgisini eklemek için Divi 2.4'teki yeni Global Element Özelliğini kullandım. Yine de önceki yazılarımızı okumak için tavsiyemi atladıysanız, ben burada ayağımı yere basıyorum ve yapmanızı şiddetle tavsiye ediyorum En azından lütfen Global Öğeler ve Divi Kitaplığı hakkındaki ayrıntılı yazımızı okuyun.

Artık bunu global bir bölüm olarak kaydettiğime göre, bölümümün telefon numarası veya 'Gönder' e-posta adresi gibi içeriğini ne zaman istersem, web sitemin her sayfasında değil, yalnızca bir kez yapmam gerekiyor.

İletişim Formumun Genişliğini Sınırlama
Bunun olduğunu görmek zor, ancak yeni “Özel Genişliği Kullan” satır seçeneğini kullanarak bu bölümdeki içeriğin genişliğini sınırlandırıyorum. Bu yeni ayarı kullanarak, varsayılan 1080 piksel genişliğini kullanırken fiyatlandırma tablosu modülünün ve metin satır uzunluğunun çok geniş olduğunu düşündüğüm için satırlarıma asla 680 pikselden geniş olmamasını söyledim. Kaçırmış olmanız durumunda, İşte Tüm Yeni Satır Ayarları Hakkında Daha Fazla Bilgi.

İletişim Formunu Şekillendirme
Bu seride defalarca bahsedildiği gibi, Gelişmiş Tasarım Ayarlarını kullanarak modüllerinizi şekillendirmenin pek çok yolu vardır. Yeni ayarlarla form alanlarım için şeffaf bir arka plan rengi kullanabildim. İşte Divi'de Saydam Renkleri Kullanma hakkında ayrıntılı bir yazı.

Divi gazisi iseniz, ortalanmış 'Gönder' düğmesini fark etmiş olabilirsiniz. Bu bir captcha ile çok iyi görünmeyebilir, ancak bir captcha görüntülemediğim için, düğmeyi basit css satırında manuel olarak ortalamak için İletişim Formu Modülü Özel CSS sekmesini kullandım.

Gezinme Başlığını Yapılandırma

Başlık Formatı Seçme
Birkaç sayfa daha oluşturduktan sonra, navigasyonu stilize etme zamanı gelmişti. Zaten sayfanın üst kısmındaki tam ekran başlığında logoyu görüntülüyorum ve kullanıcının diğer sayfalara gitmeden önce sitenin ana sayfasını keşfetmesini istiyorum, bu yüzden gezinmeyi kullanıcı kaydırana kadar gizlemeyi seçtim. Logom da simetrik ve sadece birkaç bağlantım var, bu yüzden ortalanmış bir satır içi logo kullanmak da bu site için gerçekten işe yaradı.
Yeni Navigasyon Ayarlarının Kapsamlı Bir İncelemesi

Navigasyonu Şekillendirme
Navigasyonu yalnızca kullanıcı kaydırdıktan sonra gösteriyorum, yani kullanıcı yalnızca Sabit Navigasyonu görecek. Ancak yine de navigasyonumdaki metin stillerini yapılandırmak için Birincil Menü Çubuğuma stil vermem gerekiyor. Ayrıca, sabit gezinme kaydırmada göründüğünde ince bir yakınlaştırma efektine sahip olması için Sabit Gezinme'de yüksekliğinden biraz daha küçük bir logo yüksekliği ayarladım.

ÜCRETSİZ İç-Demo Kitaplığı Paketi

Söz verdiğimiz gibi, bu gönderide incelediğimiz tüm parçalar indirilebilir, böylece bunları içe aktarabilir ve kendi sitenizde kullanabilirsiniz. Aşağıda, Kitaplık Paketinde bulunan tüm öğelerin hızlı bir özetini yapacağım. Her zaman olduğu gibi, Elegant Themes'te lisanslamayı çok ciddiye alıyoruz, bu nedenle bu demoda kullanılan resimlerin tam olarak aynısını paylaşamıyoruz, ancak diğer her şeyi Demo'da göründüğü gibi ekleyeceğiz. Çoğunuz iç tasarım web siteleri oluşturmadığınız için metni de genelleştireceğim.

Tam Ekran Başlık

Kütüphane Öğe Türü: Modül

3 Sütun Tam Genişlikte Oluksuz Sıra

Kitaplık Öğe Türü: Bölüm
Bu bölümü sayfanıza eklerseniz, aşağı oklarınıza dahili bağlantılar atadığınızdan emin olun. Bunu yapmak için, benzersiz bir CSS kimliğine bağlamak istediğiniz bölümü verin, örneğin, CSS kimliği = contact_footer. Ardından, Blurb Module Settings'deki url alanına #contact_footer yazın ve işlem tamam!

2 Sütun Tam Genişlik Satırı

Kitaplık Öğe Türü: Bölüm
Bu öğenin bölümde ve satırda sıfır alt dolgusu vardır, böylece görüntünüz bölümün alt kenarına dokunur.

2 Sütun Tam Genişlik Satırı

Kitaplık Öğe Türü: Bölüm
Bu öğenin bölümde ve satırda sıfır üst dolgusu vardır, böylece görüntünüz bölümün üst kenarına dokunur.

2/3_1/3 Sütun Tam Genişlik Oluksuz Satır

Kitaplık Öğe Türü: Bölüm
Bunu sayfanıza eklerseniz galerinin görünmeyeceğini unutmayın. Divi, galeriler oluşturmak için WordPress Medya Kitaplığı'nı kullanır, bu da bizim Divi Kitaplığı paketlerindeki galerileri önceden doldurmamıza izin vermez.

3 Sütun Tam Genişlikte Oluksuz Sıra

Kitaplık Öğe Türü: Bölüm

Küresel İletişim Altbilgisi

Kitaplık Öğe Türü: Bölüm
Dikkat, bu genel bir bölümdür, bu yüzden birden fazla sayfaya eklerseniz hepsi senkronize olur. Ayrıca kütüphane paketine global olmayan bir sürüm ekledim.

Tam Düzen

Kitaplık Öğe Türü: Düzen
Ayrıca, her şeyi kullanmak istemeniz durumunda, kitaplık paketine tüm düzen dahildir! Genel iletişim alt bilgisini mizanpaja dahil etmedim, ancak indirmeye dahil edildi, böylece küresel olmayan iletişim alt bilgisini küresel olanla değiştirmek istiyorsanız bunu kolayca yapabilirsiniz.

Bu Kitaplık Paketi Nasıl Kullanılır

Bu paketi indirip kendi sitenize aktarmak sadece birkaç adımla yapılabilir. İlk olarak, aşağıdaki bağlantılı dosyayı indirin ve sıkıştırılmış dosyayı açın. Bu, WordPress'e aktaracağınız dosyadır. Bunları kitaplığınıza aktarmak için Araçlar > İçe Aktar seçeneğine gidin. İçe aktarma türü listesinin altındaki WordPress bağlantısını seçin ve sizden dosyayı yüklemeniz istenecektir. Daha sonra kendi kullanımınız için bu modüllere erişebileceksiniz. Hatırlatma: Yüklemeden önce zip dosyasını açtığınızdan emin olun! Yalnızca XML dosyaları içe aktarılabilir.

Sayfanıza Kitaplık Öğeleri Ekleme

Bir öğe kitaplığa kaydedildikten sonra, sayfaya yeni bir modül, satır veya bölüm eklerken “Kütüphaneden Ekle” düğmesine tıklanarak Divi Builder içinden herhangi bir yeni sayfaya eklenebilir. Divi Kitaplığınızda zaten çok sayıda başka öğe varsa, bu kategoriye göre filtreleme yapabilmeniz için bu paketteki her öğeye bir 'İç Mekan' kategorisi ekledim.

Kütüphane Paketini İndirin

Umarız bu seri sizi çok daha fazla bilgilendirilmiş, motive etmiş ve harika web siteleri oluşturmak için bu yepyeni Divi'yi kullanmak için ilham vermiştir. Bu seride 14 gönderi sözü verdik, bu yüzden yarın bir başka heyecan verici Divi gönderisi için bizi izlemeye devam edin