Kutu düzeni için tasarlanmış bir arka planla divi blog sayfanızı artırın
Blogunuz için bir kutu düzeni oluşturmak, yayınınızı ayarlamanın iyi bir yoludur. Divi bunu bir blog modülü ile çok kolaylaştırır. Sadece birkaç saniye içinde sayfanıza çalışan blog ızgarasının düzenini uygulayabilirsiniz. Ve blog ızgaranızın görünümünü birçok yönden ayarlamak için birçok tasarım ayarı bile kullanabilirsiniz. Ama bugün, şeyleri başka bir seviyeye getiriyorum. Bu öğreticide, üç sütununuzu güzel ve simetrik bir tasarımla çerçevelemek için nasıl bazı arka plan katmanları oluşturabileceğinizi göstereceğim. Umarım bu tasarım tekniğini garantili bir blog sayfası oluşturmak için kullanabilirsiniz.
Başlayalım. Aşağıdaki ızgara düzeni tasarımından Sneak Peak’imize abone olun Sneak Peek tasarımı.
İlk arka plan katmanını özel tasarım bölümüne ekleyin Düzenin blog modülünü tutan ikinci kısmına eklenecektir. İlk arka plan katmanımızı oluşturmak için ayarları aşağıdaki gibi ayarlayacağız: Arka Plan Rengi: #5873DD Pilding Custom (Masaüstü): Top 4VW, 4VW’nin altında, sol 7vw dolgu özelliği (tablet): sol 0VW Sol dolgu 7VW özel olarak benzersiz bir ekran için bölümün (satır) içeriğini dengeleyin. Her şeyin iyi olmasını ve tasarımınıza odaklanmasını istiyorsanız, onu görmezden gelebilirsiniz. İkinci ve üçüncü arka plan katmanlarını ikinci ve üçüncü arka plan katmanlarına ekleyin Tüm satıra arka plan renkleri ve daha sonra arka plan gradyanını satır içindeki sütuna ekleyerek yapılacaktır. 255,255,255,0.3) Solun 1 Sol RGBA (255.255 (255.255 .255.0.0) Sütun 1 Sağ Renk Arka Plan: RGBA (255,255,255,0.3) yön Sütunun Sonu:% 0
Mavi parçanın arka planına izin veren tutarlı bir beyaz kaplama renk seviyesi yapmak için% 30 opaklık ile beyaz kullandığımı unutmayın. Her renk çakıştığından, kullanıcılar mavi kısmın arka plan versiyonunu% 30 daha parlak görür. Bu şekilde, düzen renk şemasını değiştirmek istiyorsanız, tek yapmanız gereken parçanın arka plan rengini değiştirmek. Sütun gradyanının başlangıç konumunu% 33.3 olarak ayarlayın, gradyanın blog ızgaramın birinci ve ikinci sütunları arasında tam olarak bölünmesini sağlayın. Ancak bu ilk başta doğru görünmeyecek çünkü diğerlerinin yanı sıra hala% 100 özel genişlik vermemiz gerekiyor. Özel Genişlik:% 100 Talang 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ı kaydedin. Blog modülümüze dördüncü arka plan katmanını ekleyin, burası her şeyin yerine düştüğü yerdir. Dördüncü ve son katman, blog modülümüze eklenen bir arka plan gradyanı olacaktır. Daha sonra doğru alan eklendiğinde, blog modülü arka plan katmanımıza mükemmel bir şekilde paralel olacaktır. Ayrıca finalin birkaç dokunuşunu eklemek için blog kartına bazı stil ayarları ekleyeceğim. Blog modülünün ayarlarını açın ve aşağıdakileri güncelleyin: Renk Arka Plan ızgarası: RGBA (255,255,255,0.7)
Bir arka plan gradyanı eklemek için, satır ayarlarına gidip arka plan gradyanı sütunu 1 kopyalayabilir ve ardından blog ayarlarına dönüp sağ -tıklama seçeneğini kullanarak ekleyebilirsiniz. Sonra aşağıdakileri güncelleyin: Başlangıç Pozisyonu:% 66.6
Özel kenar:% 4 üst,% 4 alt özel dolgu:% 4 üst,% 4 alt,% 4 sol,% 4 sağ
Gördüğünüz gibi, tasarımımıza aynı mesafeyi sağlamak için% 4 uzunluk değeri kullanılır. Ve görülenden% 4’ten fazla değer var. Hatırlarsanız, çizgilerimizi özel bir oluk genişliğine sahip olacak şekilde ayarlıyoruz. sınır. Bu nedenle, modüle% 4 sol ve sağ dolgu eklemek, ihtiyacımız olan doğru mesafeyi yaratacaktır. Bu noktada bir arka plan tasarımı ile bitirdik. Şimdiye kadar sahip olduğumuzu görün.
Şimdi yapmamız gereken blog modülüne birkaç son dokunuş eklemek. Blog Modülü Ayarlarının Tasarım Sekmesi Altındaki Son Dokunma Aşağıdakileri Güncelleyin: Gövde Metni Rengi: RGBA (0.0,0,0.0.8) Renk Meta Metin: RGBA (0,0,0,0.5) Yasavat Paginasyon Stili : Alt çizgi renk paginasyon alt çizgisi: RGBA (166.221.217.0.39) Renk Painings Metin: #FFFFFF Metin Boyutu Sayma: 3VW (masaüstü), 40px (tablet), 30px (akıllı telefon) Tasarımınıza biraz daha fazla doku vermek istiyorsanız, parçanıza bölünme arka planı ekleyebilirsiniz.Üst bölücü: bkz. Ekran yakalama Rengi Rengi: RGBA (88.115.221.0.5) Bölüğün Yüksekliği: 32VW Yatay Bölücü Tekrar: 0.3x Alt Bölüm: Bkz. Renk Renk Merkezleri Tarama: RGBA (88.115.221.0.5) Civic Yükseklik: 43VW yatay bölücü Tekrar: 0.3x Şimdi sonucu görün …
Tüm masaüstü tarayıcı boyutlarında bir kafes ölçekli sütunu mükemmel bir şekilde çerçeveleyen katmanın duyarlı tasarımı. Arka plan katmanı tabletteki iki sütuna ve bir akıllı telefondaki bir sütuna ayarlanmasa da, sonuçlar hala çok simetrik ve düzgün çalışan ince bir kafes tasarımı sağlıyor. Cep telefonuna göre takip eden … Arka plan katmanlı tekniğin son zihni, aslında sadece bir sütunun olduğu üç katlı bir arka plana sahip olma izlenimi yaratmanın bir yoludur (çünkü blog modülü bir sütunda). Tabii ki bu blog modülü düzeyinde özel bir CSS’de yapılabilir, ancak Divi Builder’ı kullanmak için yaratıcı çözümler sunmanın daha yararlı olacağını düşünüyorum. Ve tasarım varyasyonları başka bir içerik arka planı olarak kullanılabilir. Bu öğreticide kullanılan bazı stillerin arkasındaki nedenleri açıklamaya çalıştım, ancak sorularınız varsa hazırım. Ve blog ızgara düzeninizi renklendirmeyi umanlar için, umarım bu yazı en azından size bunu yapmak için bazı tasarım ipuçları verecektir. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
