Divi'nin Arka Plan Ayarlarıyla Degrade Arka Plan Kaplamaları Nasıl Oluşturulur

Yayınlanan: 2017-06-13

Bugünkü eğitimde, yeni Divi arka plan tasarım özelliklerinin web sitelerinize getirdiği yeni ve zarif olasılıkları keşfedeceğiz ve daha özel olarak; degrade arka plan bindirmeleri kullanarak.

Bu yeni arka plan güncellemesiyle, Divi oluşturucuya, kendi web sitenizi veya bir müşteriniz için web sitesi tasarlarken ihtiyaçlarınızı karşılamanıza yardımcı olacak birçok yeni seçenek eklendi. Bu yeni seçenekler, web sitenizin görünümü ve hissi ile oynamanıza olanak tanır.

Bu güncellemenin yayınlanmasından önce, artık Divi oluşturucu içinde yapılabilecek değişikliklerin çoğu, özel CSS kodu aracılığıyla yapılmalıydı. Arka planınızda tasarım değişiklikleri yapmak artık her zamankinden daha kolay hale geldi. Birkaç basit tıklama ile web sitenizin tüm farklı bölümleri için güzel arka planlar oluşturabilirsiniz.

Degrade Arka Plan Kaplama Örnekleri

Yeni seçeneklerin web sitenizin yansıttığı tüm duyguyu nasıl iyileştirebileceğini ve ona belirli bir “je ne sais quoi” faktörü kazandırabileceğini size gösterecek bir öncesi ve sonrası görüntüsüyle üç bölüm oluşturduk.

Kahraman Bölümü

Yalnızca arka plan resmi eklerken kahraman bölümü şu şekilde görünür:

Ve yukarıdaki resimde kullanılan aynı arka plan resmine degrade arka plan kaplamasını eklediğimizde, nihai sonucumuz şöyle görünecek:

Bulanıklık Bölümü

Tek renkli bir arka plan kullanıldığında tanıtım yazısı bölümü şöyle görünür:

Ve desen arka planına degrade arka plan kaplamasını eklediğimizde ortaya çıkan sonuç şu şekilde görünür:

Fiyatlandırma Bölümü

Fiyatlandırma bölümü, tek renk kullandığımızda (daha açık ve koyu tonda) şu şekilde görünür:

Ve degrade arka plan kaplamasını kullandıktan sonra sonuç şu şekilde görünecektir:

Her birinin farklı ayarları vardır ve bu görünümü kendi web sitelerinizde kullanabilmeniz için tam olarak ve adım adım nasıl oluşturacağınızı size göstereceğiz.

Adım Adım: Kahraman Bölümü

Bu gönderinin ilk bölümü için bir kahraman bölümü oluşturuyoruz. Bu örnek, arka plan tasarım özelliğinin görüntüde kullanılan renkleri nasıl değiştirebileceğini yansıtacaktır. Ve bir degrade arka plan kaplaması kullanmış olsak da, yaptığımız değişiklikler çok ince. Farklı renkli bir gökyüzü ile birlikte görüntüye daha koyu bir ton hissi ekledik.

Oluşturmaya Başla

WordPress web sitenizde yeni bir sayfa oluşturarak başlayalım. Şimdi, bu sayfaya tam genişlikte bir satırla standart bir bölüm ekleyin. Ardından, farklı modülleri sıranıza yerleştirin. İki Metin Modülü ve bir Düğme Modülü kullandık.

İlk Metin Modülü Ayarları

İlk Metin Modülü, kahraman bölümünüzün başlığının görüneceği yerdir. İçerik sekmesinin Metin alt kategorisi içindeki içerik kutusuna görünmesini istediğiniz metni yazın ve Tasarım sekmesine geçin.

Tasarım sekmesinde, Metin alt kategorisinde aşağıdaki değişiklikleri yapın:

Metin Yönü: Merkez
Metin Yazı Tipi Boyutu: 30
Metin Yazı Tipi Rengi: #FFFFFF

İkinci Metin Modülü Ayarları

Şimdi, bir sonraki Metin Modülünü açın ve metni de içerik kutusuna girin. Ardından Tasarım sekmesine gidin ve Metin alt kategorisinde aşağıdaki değişiklikleri yapın:

Metin Yönü: Merkez
Metin Yazı Tipi Boyutu: 16
Metin Yazı Tipi Rengi: #FFFFFF

Aynı sekmeyi aşağı kaydırın ve Boyutlandırma alt kategorisindeki Maksimum Genişliğe '500px' ve Aralık alt kategorisindeki Alt Kenar Boşluğuna '%2' ekleyin.

Düğme Ayarları

Son olarak, Düğme Modülünün ayarlarını açın. Düğmenize bağlamak istediğiniz CTA'yı İçerik sekmesinin Metin alt kategorisine yazın ve Tasarım sekmesine gidin.

Tasarım sekmesinde, Düğme alt kategorisinde aşağıdaki ayarlamaları yapın:

Düğme için Özel Stilleri Kullan: Evet
Düğme Metin Boyutu: 20
Düğme Metin Rengi: #FFFFFF
Düğme Arka Plan Rengi: rgba(0,0,0,0)
Düğme Kenar Genişliği: 2
Düğme Kenar Rengi: #FFFFFF
Düğme Sınır Yarıçapı: 7

Şimdi satır bölümlerini açın ve Tasarım modülünün boşluk alt kategorisinde aşağıdaki ayarlamaları yapın:

Üst Marj: %15
Alt Marj: %10

Degrade Arka Plan Yerleşimi Ayarları

Şimdi işin eğlenceli kısmına geliyoruz; degrade arka plan kaplamasını arka plan görüntüsüne ekleme. Devam edin ve bölümün ayarını açın. Ardından, Arka Plan alt kategorisine gidin ve degrade arka planı ekleyerek başlayın.

Yaptığımız örnek için aşağıdaki ayarları kullandık:

İlk Renk: #3730ff
İkinci Renk: #e02b20
Gradyan Türü: Doğrusal
Gradyan Yönü: 272deg
Başlangıç Konumu: %40
Bitiş Konumu: %100

Şimdi arka plan resmi sekmesine gidin ve istediğiniz resmi ekleyin. Yaratmaya çalıştığımız efekti geliştirmek için kasıtlı olarak gökyüzünü içeren bir görüntü seçtik.

Şimdi aynı sekmeyi aşağı kaydırın. Arka plan görüntüsünü ortalayın ve Arka plan görüntüsü karışımı açılır menüsündeki Çarp seçeneğini etkinleştirin. İstediğiniz kesin sonuca ulaşmanıza yardımcı olabilecek birçok başka seçeneğiniz de var.

Ve işte nihai sonuca sahipsiniz:

Adım Adım: Bulanıklık Bölümü

Size nasıl oluşturulacağını göstereceğimiz ikinci örnek, tanıtım yazısı bölümüdür. Tanıtım yazısının içeriğine odaklanmak istiyoruz, bu yüzden yoğun bir arka plan değil, bunun yerine desenli bir arka plan seçtik.

Bu örnekte kullanılan arka plan deseni Toptal'dan gelmektedir. Ticari olanlar da dahil olmak üzere her türlü amaçla kullanmak için beğendiğiniz kalıpları indirebilirsiniz. SSS'lerinde anlatıldığı gibi web sitenizin kaynağına eklemeyi unutmayın.

Ayrıca, degrade renklerin ortaya çıkması için tanıtım yazı simgelerini biraz saydam yaptık. Tanıtım yazılarının her biri aynı ayarlara sahip olsa da, simgelerden gelen renk biraz farklıdır ve kullandığımız degrade renklerle uyumludur.

Oluşturmaya Başla

Yeni bir sayfaya veya mevcut bir sayfaya standart bir bölüm ekleyerek başlayın. Bu bölümde, üç sütunlu bir satıra ihtiyacımız olacak.

Satırın ilk sütununa bir Blurb Modülü ekleyerek devam edin. Her sütunda aynı tanıtıcı modül ayarlarını kullanacağız. Bu yüzden tanıtım modülünü yalnızca bir kez yapmamız ve diğer iki sütun için klonlamamız gerekiyor.

Bulanıklık Ayarları

Blurb Module ayarlarını açın ve içerik sekmesinin Metin alt kategorisine başlığı ve içeriği yazın. Tasarım sekmesine gidin ve Görüntü ve Simge alt kategorisinde aşağıdaki ayarlamaları yapın:

Simge Rengi: rgba(255,255,255,0.36)
Daire Simgesi: Evet
Daire Rengi: rgba(255,255,255,0)
Daire Kenarlığını Göster: Evet
Daire Kenarlığı Rengi: rgba(255,255,255,0.36)
Resim/Simge Yerleşimi: Üst
Simge Yazı Tipi Boyutunu Kullan: Evet
Simge Yazı Tipi Boyutu: 96px

Aynı sekmeyi aşağı kaydırın ve Metin Yönlendirmesini Metin alt kategorisinde 'Merkez'e getirin.

Kaydırmaya devam edin ve Başlık Metni alt kategorisini açın. Devam edin ve aşağıdaki ayarları kullanın:

Başlık Yazı Tipi Boyutu: 18
Başlık Metni Rengi: #FFFFFF
Başlık Çizgisi Yüksekliği: 1em

Şimdi, değiştirilecek tek şey Gövde Metni alt kategorisidir. Aşağıdaki ayarların geçerli olduğundan emin olun:

Gövde Yazı Tipi Boyutu: 14
Gövde Metni Rengi: #FFFFFF
Gövde Çizgisi Yüksekliği: 1.5em

Blurb Module'ü iki kez klonlamayı, kalan iki sütuna yerleştirmeyi ve içeriği buna göre değiştirmeyi unutmayın.

Satır Ayarları

Satır ayarlarını açın ve Tasarım sekmesindeki Aralık alt kategorisine gidin. Yapmanız gereken tek şey, üst ve alt kenar boşluğunu '%5' olarak değiştirmek.

Degrade Arka Plan Yerleşimi Ayarları

Son olarak, degrade kaplamalı arka plan resmini ekleyeceğiz. Bölümünüzün ayarlarını açın ve İçerik sekmesinin Arka Plan alt kategorisine gidin.

Ardından, degrade seçeneğinde aşağıdaki değişiklikleri yapın:

İlk Renk: #52009b
İkinci Renk: #0edeed
Gradyan Türü: Radyal
Radyal Yön: Sağ
Başlangıç Konumu: %28
Bitiş Konumu: %100

Arka plan seçeneğine geçin, tercih ettiğiniz deseni yükleyin ve aşağıdaki değişiklikleri yapın:

Arka Plan Resmi Konumu: Merkez
Arka Plan Görüntüsü Tekrarı: Tekrarla (deseninize bağlı olarak)
Arka Plan Resmi Karışımı: Çarpma

Bu kadar! Şimdi aşağıdaki çarpıcı sonuca sahip olmalısınız:

Adım Adım: Fiyatlandırma Bölümü

Bu yazının son örneği fiyatlandırma bölümüdür. Bu bölümde degrade arka planı her yerde kullanabileceğinizi göstermek istedik. Sadece bölümlerde değil, sütunlarda da kullanılmak üzere yapılmıştır. Yalnızca iki sütun için degrade arka planı kullanacağız ve ikinci sütun için degrade arka plan kaplaması yapacağız.

Bunu yapmamızın nedeni, öne çıkan fiyatlandırma paketini vurgulamaktır. Diğer iki sütundakinden daha yoğun renkler kullanıyoruz ve ayrıca bir desen arka planı ekliyoruz. Bu iki şey bir araya geldiğinde, insanları en çok tanıtmak istediğiniz öne çıkan fiyatlandırma paketinize çekme şansınızı artırır.

Oluşturmaya Başla

Web sitenizdeki yeni veya mevcut bir sayfaya yeni bir standart bölüm ekleyerek başlayın. Bölümün üç sütunlu bir satıra ihtiyacı var. Kullanacağımız modüller her sütun için aynıdır ve aynı ayarları içerir. Bu yüzden onları ilk sütun için yapacağız ve daha sonra diğer iki sütuna klonlayacağız.

İlk Metin Modülü Ayarları

İlk sütuna yeni bir Metin Modülü ekleyin, içerik sekmesinin Metin alt kategorisindeki içerik kutusuna fiyat paketinin türünü ekleyin ve Tasarım sekmesine geçin.

Tasarım sekmesinin Metin alt kategorisine aşağıdaki değişiklikleri uygulayın:

Metin Yönü: Merkez
Metin Yazı Tipi Boyutu: 24
Metin Yazı Tipi Rengi: #FFFFFF
Metin Satırı Yüksekliği: 1.5em

Aynı sekmeyi aşağı kaydırın ve Aralık alt kategorisinde aşağıdaki değişiklikleri yapın:

Üst Kenar Boşluğu: 50px
Alt Kenar Boşluğu: 20px

İkinci Metin Modülü Ayarları

Aynı sütuna başka bir Metin Modülü ekleyin. İçerik sekmesinin Metin alt kategorisindeki içerik kutusuna paketin fiyatını yazın ve Tasarım sekmesine geçin.

Tasarım sekmesinde aşağıdaki ayarlamaları yapın:

Metin Yönü: Merkez
Metin Yazı Tipi Boyutu: 82px
Metin Yazı Tipi Rengi: #FFFFFF
Metin Satır Yüksekliği: 1.1em

Aynı sekmeyi aşağı kaydırın ve alt kenar boşluğuna '10px' ekleyin.

Üçüncü Metin Modülü Ayarları

Son Metin Modülümüz için, İçerik sekmesinin Metin alt kategorisindeki içerik kutusuna metni ekleyin. Ardından Tasarım sekmesine gidin ve Metin alt kategorisinde aşağıdaki değişiklikleri yapın:

Metin Yönü: Merkez
Metin Yazı Tipi Boyutu: 16
Metin Yazı Tipi Rengi: #FFFFFF
Metin Satır Yüksekliği: 1.1em

Aynı sekmeyi aşağı kaydırın ve Aralık alt kategorisinde alt kenar boşluğuna '33px' ekleyin.

Düğme Ayarları

Bu sütuna ekleyeceğimiz bir sonraki modül Düğme Modülüdür. İçerik sekmesinin Metin alt kategorisindeki içerik kutusuna görünmesini istediğiniz CTA'yı yazın ve Tasarım sekmesine geçin.

Tasarım sekmesinde, Hizalama alt kategorisindeki Düğme Hizalama'yı 'Merkez'e getirin ve Düğme alt kategorisinde aşağıdaki değişiklikleri yapın:

Düğme için Özel Stilleri Kullan: Evet
Düğme Metin Boyutu: 13
Düğme Metin Rengi: #FFFFFF
Düğme Arka Plan Rengi: rgba(255,255,255,0.11)
Düğme Kenar Genişliği: 2
Düğme Kenar Rengi: #FFFFFF
Düğme Sınır Yarıçapı: 4
Düğme Harf Aralığı: 1

Bölücü Ayarları

Son olarak, boşluk oluşturmak için sütuna bir ayırıcı ekleyeceğiz. İçerik sekmesinde 'Bölücüyü Gösterme'yi seçin ve yükseklik alanına '25px' koyduğunuz tasarım sekmesine gidin.

Artık tüm modülleri eklediğimize göre, onları klonladığınızdan ve diğer sütunlara da yerleştirdiğinizden emin olun.

Degrade Arka Plan Yerleşimi Ayarları

Bu örnekte, farklı sütunlar için iki farklı arka plan ayarı kullanacağız. İlk ve son sütun aynı olacak ve ikincisi biraz farklı olacak.

Satır ayarlarına gidin ve İçerik sekmesinin Arka Plan alt kategorisindeki birinci ve üçüncü sütunun degrade seçeneğine aşağıdaki değişiklikleri uygulayın:

İlk Renk: rgba(10,122,178,0.57)
İkinci Renk: rgba(142,0,142,0.47)
Sütun 1 Gradyan Türü: Radyal
Sütun 1 Radyal Yön: Sol Üst
Sütun 1 Başlangıç Konumu: 0
Sütun 1 Bitiş Konumu: %100

Ardından, Sütun 2'ye gidin ve degrade seçeneğinde aşağıdaki değişiklikleri yapın:

İlk Renk: #0a7ab2
İkinci Renk: #8e008e
Sütun 2 Gradyan Türü: Doğrusal
Sütun 2 Gradyan Yönü: 180deg
Sütun 2 Başlangıç Konumu: 0
Sütun 2 Bitiş Konumu: 100

Arka plan görüntüsü seçeneğine gidin, arka plan görüntüsünü yükleyin ve ayarları değiştirin:

Sütun 2 Arka Plan Resmi Konumu: Sol Üst
Sütun 2 Arka Plan Resmi Tekrarla: Tekrarla
Sütun 2 Arka Plan Resmi Karışımı: Çarpma

Son düşünceler

Bu blog gönderisinde size gösterdiğimiz örnekler, yeni arka plan tasarım özelliklerini kullanırken elde edebileceğiniz sonuçların sadece bir kısmıdır. Gelecek yayınlarda, yaptığınız web siteleri için harika tasarımlar oluşturmanıza yardımcı olacak diğer örnekleri de kesinlikle ele alacağız. Herhangi bir sorunuz, yorumunuz veya öneriniz varsa; Aşağıdaki yorum bölümüne bir yorum bırakın!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!