Divi: Resimlerinizi güzelleştirmek için "Gradient Builder" nasıl kullanılır?

Gradyan oluşturucuyu kullanarak resimlerinize şekil vermek ister misiniz? Divi ?

Görüntü maskeleri genellikle görüntülere ilginç şekiller eklemek için kullanılır. Sayfaya benzersiz bir tasarım öğesi vererek görüntünün şekli görmesine izin verirler.

Ile Gradyan Oluşturucu de Divi, şekiller oluşturmak için mutlaka maske kullanmanız gerekmez. Bunun yerine, Gradyan Durakları ve bunları oluşturmak için parametreler!

Bu yazıda Gradient Builder ile görsellerinizi nasıl güzelleştireceğinizi göreceğiz. Divi resimlerinize benzersiz tasarımlar eklemenize yardımcı olmak için.

Başlayalım.

anket

İlk olarak, bu eğitimde farklı ekran boyutlarında ne oluşturacağımıza bakalım.

İlk Örnek – Dairesel Görüntü Şekli

Masaüstü bilgisayar

Divi'nin gradyan oluşturucusunu kullanarak resimlerinize şekil verin

tablet

telefon

İkinci örnek – Doğrusal görüntü şekli

ofis

tablet

telefon

Üçüncü örnek – Eliptik görüntü şekli

Masaüstü bilgisayar

tablet

telefon

Dördüncü Örnek – Konik Görüntü Şekli

Masaüstü bilgisayar

tablet

telefon

Divi ile mizanpaj tasarımı

Tüm örneklerde kullanacağımız layoutu oluşturarak başlayalım. Bu düzen bir kahraman bölümü olarak kullanılabilir.

Bir tarafta bir başlık ve açıklama, diğer tarafta resim içerecektir. Daha sonra örnekler için bu düzeni ve resmi kullanacağız.

Bölümü özelleştir

İlk önce yeni bir Divi sayfası oluşturun ve bölümü özelleştirin. Bölüm ayarlarını açın ve renk #f0f3fb'nin arka planı.

Arkaplan: #f0f3fb

Ardından sekmeye gidin Dizayn ve boşluk ayarlarını aşağıdaki gibi değiştirin:.

Dolgu (Üst ve Alt): %10

Satır ekle

Sonra bir ekleyin hat Aşağıdaki sütun yapısı ile.

Sekmedeki hat parametrelerine erişin Dizayn, seçeneğe gidin Boyutlandırma ve boyutlandırma parametrelerini değiştirin.

Özel Oluk Genişliğini Kullan: EVET
Maksimum Genişlik: 1 piksel

İlk sütun ayarları

Sekmede içerik satırın, satırın ilk sütununun ayarlarını açın, sekmeye gidin Dizayn. Boşluğu aşağıdaki gibi değiştirin.

Dolgu (Sol ve Sağ): %9 Sol, Sağ

İlk Metin modülünün parametreleri

Sonra bir ekleyin Metin modülü sol sütuna.

seçmek 4 Başlık metni için içindekiler ve şunu ekleyin içindekiler Vücudunuzun.

Metin: "BlogPasCher'a Hoş Geldiniz"

Ardından sekmeye gidin Dizayn ve başlık ayarlarını değiştirin.

Yazı Tipi: Montserrat
Yazı Ağırlığı: Kalın
stil: TT
Metin Rengi: #1d4eff

Metin Boyutu: Masaüstü 16px, Tablet 14px, Telefon 12px
Harf Aralığı: 0,3em
Satır Yüksekliği: 1,6 em

Kaydırın aralık ve alt kenar boşluğunu değiştirin.

Kenar Boşluğu (Alt): 0px

İkinci Metin modülünün parametreleri

Sonra bir ekleyin Metin modülü ilk altında.

Metin türünü şu şekilde ayarlayın: “Başlık 1” ve şunu ekleyin içindekiler Vücudunuzun.

İçerik: “Finansal geleceğinizi planlayın”

Ardından sekmeyi seçin Dizayn ve başlığın seçeneklerini değiştirin.

Yazı Tipi: Montserrat
Yazı Ağırlığı: Kalın
Metin Rengi: #0f1154

Boyut: 80px Masaüstü, 40px Tablet, 24px Telefon
Satır Yüksekliği: %110

Üçüncü Metin modülünün parametreleri

Sonra bir ekleyin Metin modülü ikinci altında.

Metin türünü "Paragraf" olarak bırakın ve gövde içeriğinizi ekleyin.

Gövde: içerik

Ardından sekmeye gidin Gebe kalma ve metin ayarlarını değiştirin.

Metin Yazı Tipi: Roboto
Yazı Tipi Ağırlığı: orta
Metin Rengi: #000000

Metin Boyutu: 18px (Masaüstü ve Tablet), 14px (Telefon)
Çizgi Yüksekliği: %180

Son olarak, aşağı kaydırın aralık ve alt kenar boşluğunu ayarlayın. Modül ayarlarını kapatın.

Kenar Boşluğu (Alt): 0px

Görüntü modülü ayarları

Şimdi bir ekleyin Resim modülü sağ sütuna.

İlk olarak, kukla resmi kaldır çöp kutusuna veya resmin üzerindeki sıfırlama simgesine tıklayarak.

Sonra aşağı kaydırın arka plan sekmeyi seçin Resim ve resminizi ekleyin. Tüm görüntü ayarlarını varsayılan değerlerinde bırakın. Görüntü ilk başta pek bir şey göstermeyecek. Gittikçe bunu çözeceğiz.

Ardından sekmeyi seçin stil ve kaydır aralık.

Kenar Boşluğu (Masaüstü): -%10 (Üst), -%30 (Sol), %10 (Sağ)
Dolgu (Üst ve Alt): 300 piksel

Marj (Tablet/Telefon): %0 (Üst), %0 (Sol ve Sağ)

Dolgu (Telefon): 150 piksel (Üst ve Alt)

Divi's Gradient Builder ile şekillendirilmiş resim örnekleri

İlk örnek – Dairesel şekil

İlk örneğimiz görüntüye ortasında bir delik bulunan dairesel bir şekil veriyor.

Görüntü modülü ayarlarını açın ve aşağı kaydırın Olayın Arka Planı . seçin Arka Plan Degrade sekmesi ve 6 gradyan durağı ayarlayın:

İlk durak: %0, #f0f3fb
İkinci: %45, #f0f3fb
Üçüncü (saniyenin üstünde): %45, rgba(41,196,169,0)
Dördüncü: %69, rgba(250,255,214,0)
Beşinci (dördün üzerinde): %69, #f0f3fb
Altıncı: %100, #f0f3fb

Tür: Yuvarlak
Pozisyon: Merkez
Birim: Yüzde
Arka Plan Resminin Üzerinde Kare Gradyan: EVET

İkinci örnek – Doğrusal form

İşte ikinci görüntü şekli örneğinin bir önizlemesi. Bu örnek, görüntü boyunca çapraz çizgiler yerleştirir.

Ayarları açın, aşağı kaydırın backgound ve seçinArka Plan Degrade sekmesi. Dört degrade durağı ekleyin:

İlk durak: %0, #f0f3fb
İkinci: %5, #f0f3fb
Üçüncü (saniyenin üstünde): %5, rgba(175,175,175,0)
Dördüncü: %13, rgba(41,196,169,0)

Tür: Doğrusal
Direksiyon: 150 derece
Gradyan Tekrarı: EVET
Gradyan Birimi: Yüzde
Arka Plan Resminin Üzerinde Kare Gradyan: EVET

Üçüncü örnek – Eliptik şekil

Bu bizim üçüncü resim şekli örneğimiz. Bu eliptik bir şekil kullanır.

Görüntü modülü ayarlarını açın ve aşağı kaydırın Olayın Arka Planı . Sekme seç Arka Plan Gradyanı ve dört gradyan durağı oluşturun:

İlk durak: %0, #f0f3fb
İkinci: %9, #f0f3fb
Üçüncü (saniyenin üstünde): %9, rgba(175,175,175,0)
Dördüncü: %21, rgba(41,196,169,0)

Tür: Eliptik
Gradyan Konumu: Sol Üst
Gradyan Tekrarı: EVET
Gradyan Birimi: Yüzde
Arka Plan Resmin Üzerinde Kare Gradyan : VAR

Dördüncü örnek – Konik Şekil

Dördüncü örneğimiz kullanır "Konik" tek bir görüntü şekli oluşturmak için.

Görüntü modülü ayarlarını açın, aşağı kaydırın Olayın Arka Planı ve sekmeyi seçin Arkaplan Resmi. Bunun 5 Gradyan Durağı var:

İlk durak: %23, #f0f3fb
İkinci: %35, #f0f3fb
Üçüncü (saniyenin üstünde): %35, rgba(41,196,169,0)
Dördüncü: %65, rgba(250,255,214,0)
Beşinci (dördün üzerinde): %65, #f0f3fb

tip: konik
Gradyan Yönü: 180 derece
Gradyan Konumu: Alt
Birim: Yüzde
Arka Plan Resminin Üzerinde Kare Gradyan: EVET

Nihai sonuçlar

Tüm düzenler iyi gitti. Görüntü şekilleri göze çarpar ve görüntülerin anlaşılması her zaman kolaydır. Hepsi duyarlıdır, bu nedenle herhangi bir cihazda harika görünürler.