Divi Blog Sayfanızı Izgara Düzeni için Tasarlanmış Bir Arka Planla Yükseltin

Blogunuz için bir ızgara düzeni oluşturmak, gönderilerinizi düzenlemenin harika bir yoludur. Divi, Blog Modülü ile bunu son derece kolaylaştırır. Sadece birkaç saniye içinde sayfanıza işleyen bir blog ızgara düzeni yerleştirebilirsiniz. Hatta blog kılavuzunuzun görünümünü birçok şekilde özelleştirmek için birçok tasarım ayarını bile kullanabilirsiniz. Ama bugün, işleri başka bir seviyeye taşıyorum.

Bu öğreticide, üç sütunlu blog ızgaranızı güzel ve simetrik bir tasarımla çerçevelemek için birden çok arka plan katmanını nasıl oluşturabileceğinizi göstereceğim. Umarım, etkilemesi garanti edilen bir blog sayfası oluşturmak için bu tasarım tekniklerini kullanabilirsiniz.

Başlayalım.

Youtube Kanalımıza Abone Olun

Izgara Düzen Tasarımının Gizli Zirvesi

İşte tasarıma bir göz atın.

Başlarken

Bu eğitim için tek ihtiyacınız olan Divi. Divi Temasını yükledikten ve etkinleştirdikten sonra, yeni bir sayfa oluşturun ve sayfanıza bir başlık verin. Ardından Visual Builder'ı dağıtın. "Bir Hazır Düzen Seçin"i seçin ve ardından Terapist Blog Sayfası Düzenini sayfanıza yükleyin ve yayınlayın.

İçerik ve öne çıkan görseller içeren en az 6 blog yayınınız olduğundan emin olun. Bunu yapmazsanız, blog gönderileri sayfada görünmez.

Artık düzenlemeye başlamaya hazırsınız.

Bölüme İlk Arka Plan Katmanını Ekleyin

Blog modülünü tutan mizanpajın ikinci bölümüne özel tasarım eklenecektir. İlk arka plan katmanımızı oluşturmak için bölüm ayarlarını aşağıdaki gibi şekillendireceğiz:

Arka Plan Rengi: #5873dd
Özel Dolgu (masaüstü): 4vw Üst, 4vw Alt, 7vw Sol
Özel Dolgu (tablet): 0vw Sol

Özel 7vw sol dolgu, benzersiz bir görünüm için bölümün (satırın) içeriğini temel olarak dengeler. Her şeyin sizin için güzel ve merkezli olmasını istiyorsanız, bunu dışarıda bırakabilirsiniz.

İkinci ve Üçüncü Arka Plan Katmanlarını Satıra Ekleyin

İkinci ve üçüncü arka plan katmanları, tüm satıra bir arka plan rengi ve ardından satır içindeki sütuna bir arka plan gradyanı eklenerek oluşturulacaktır.

Satır ayarlarını açın ve aşağıdakileri güncelleyin:

Arka Plan Rengi: rgba(255,255,255,0.3)
Sütun 1 Arka Plan Sol Rengi: rgba(255,255,255,0.0)
Sütun 1 Arka Plan Sağ Renk: rgba(255,255,255,0.3)
Sütun Gradyan Yönü: 90deg
Sütun Başlangıç ​​Konumu: Sütun Başlangıç ​​Konumu: %33,3
Sütun Bitiş Konumu: %0

Mavi bölüm arka planının görünmesini sağlayan tutarlı bir beyaz kaplama rengi derecesi oluşturmak için %30 opaklığa sahip beyaz bir renk kullandığıma dikkat edin. Her renk üst üste bindiğinde, kullanıcı mavi bölüm arka planının %30 daha hafif bir versiyonunu görür. Bu şekilde, yerleşimin renk şemasını değiştirmek isterseniz, tek yapmanız gereken bölümün arka plan rengini değiştirmek olacaktır.

Sütun gradyan başlangıç ​​konumunun %33,3 olarak ayarlanması, degradenin blog kılavuzumun birinci ve ikinci sütunu arasında bölünmesini sağlar. Ancak bu başlangıçta doğru görünmeyecek çünkü diğer şeylerin yanı sıra satırımıza hala %100'lük özel bir genişlik vermemiz gerekiyor.

Özel Genişlik: %100
Oluk Genişliği: 4
Özel Dolgu: %4 Üst, %4 Alt

Özel dolgu, genel tasarıma eklemek için katmanları dikey olarak ortaya çıkarır.

Ayarları kaydet.

Dördüncü Arka Plan Katmanını Blog Modülümüze Ekleme

İşte burada her şey yerine oturuyor. Dördüncü ve son katman, blog modülümüze eklenen bir arka plan gradyanı olacaktır. Ardından, tam boşluk eklendiğinde, blog modülü arka plan katmanlarımızla mükemmel bir şekilde hizalanacaktır. Ayrıca bazı son dokunuşlar eklemek için blog kartlarına birkaç stil ayarı ekleyeceğim.

Blog modülü ayarlarına gidin ve aşağıdakileri güncelleyin:

Izgara Döşeme Arka Plan Rengi: rgba(255,255,255,0.7)

Arka plan gradyanını eklemek için, satır ayarlarına gidebilir ve sütun 1 arka plan gradyanını kopyalayabilir ve ardından blog ayarlarına geri dönüp sağ tıklama seçeneklerini kullanarak yapıştırabilirsiniz.

Ardından aşağıdakileri güncelleyin:

Başlangıç ​​Konumu: %66,6

Özel Marj: %4 Üst, %4 Alt
Özel Dolgu: %4 Üst, %4 Alt, %4 Sol, %4 Sağ

Gördüğünüz gibi, tasarımımıza eşit boşluk vermek için %4 uzunluk değeri kullanılmıştır. Ve bu %4 değerinde göründüğünden daha fazlası var. Hatırlarsanız, satırımızı özel bir oluk genişliğine 4 olarak ayarladık. Divi'de, 4 oluk genişliğine sahip bir satıra ızgara düzenine sahip bir blog modülü eklerseniz, blog ızgara sütunlarınız yatay olarak% 8 oranında ayrılacaktır. marjın. Bu nedenle, modüle %4 sol ve sağ dolgu eklemek, tam ihtiyacımız olan aralığı yaratacaktır.

Bu noktada, arka plan tasarımı ile işimiz bitti. Şimdiye kadar elimizde ne olduğuna bakın.

Şimdi tek yapmamız gereken blog modülüne birkaç son dokunuş eklemek.

Son dokunuşlar

Blog Modülü Ayarlarının tasarım sekmesi altında aşağıdakileri güncelleyin:

Gövde Metni Rengi: rgba(0,0,0,0.8)
Meta Metin Rengi: rgba(0,0,0,0.5)
Sayfalandırma Yazı Tipi Stili: Altı Çizili
Sayfa Altı Çizgi Rengi: rgba(166.221.217.0.39)
Sayfalandırma Metin Rengi: #ffffff
Sayfalandırma Metin Boyutu: 3vw(masaüstü), 40px(tablet), 30px(akıllı telefon)

Tasarımınıza biraz daha doku kazandırmak istiyorsanız, bölümünüze ayırıcı arka planlar ekleyebilirsiniz.

Bölücü Üst: Ekran Görüntüsüne Bakın
Bölücü Rengi: rgba(88,115,221,0.5)
Bölücü Yüksekliği: 32vw
Bölücü Yatay Tekrar: 0.3X

Bölücü Alt: Ekran Görüntüsüne bakın
Bölücü Rengi: rgba(88,115,221,0.5)
Bölücü Yüksekliği: 43vw
Bölücü Yatay Tekrar: 0.3X

Şimdi nihai sonuca bakın…

Sorumlu tasarım

Izgara sütunlarını çerçeveleyen katmanlar, tüm masaüstü tarayıcı boyutlarında mükemmel şekilde ölçeklenir.

Arka plan katmanları, tablette iki sütun ve akıllı telefonda bir sütun için ayarlanmayacak olsa da, sonuç yine de çok simetriktir ve iyi çalışan ince bir kırık ızgara tasarımı sağlar.

İşte mobilde nasıl görüneceği…

Son düşünceler

Bu katmanlı arka plan tekniği, aslında yalnızca bir sütunun olduğu üç sütun arka planı olduğu izlenimini yaratmanın bir yoludur (çünkü blog modülü bir sütunda oturur). Bunu blog modülü düzeyinde özel CSS'de yapmak elbette mümkün, ancak Divi Builder'ı kullanarak yaratıcı bir çözüm sunmanın daha yararlı olacağını düşündüm. Ve tasarımın varyasyonları, diğer içeriklerin arka planı olarak da kullanılabilir.

Bu eğitimde kullanılan bazı stillerin arkasındaki mantığı açıklamaya çalıştım, ancak sorularınız varsa, kulaklarım var. Ve blog ızgara düzeninizi renklendirmek isteyenler için, umarım bu yazı size en azından bunu yapmak için bazı tasarım ipuçları verir.

Yorumlarda sizden haber bekliyorum.

Şerefe!