Divi's Gradient Builder ile Resimlerinizi Nasıl Şekillendirirsiniz?

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 şekle bakmasına izin verirler. Divi's Gradient Builder ile şekiller oluşturmak için mutlaka maske kullanmanız gerekmez. Bunun yerine, Gradient Stop'ları ve bunları oluşturmak için ayarları kullanabilirsiniz! Bu gönderide, resimlerinize benzersiz tasarımlar eklemenize yardımcı olmak için Divi's Gradient Builder ile resimlerinizi nasıl şekillendireceğinize bakacağız.

Başlayalım.

Ön izleme

İlk olarak, bu eğitimde ne inşa edeceğimize bir göz atalım.

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

masaüstü

Tablet

Telefon

İkinci Örnek – Doğrusal Görüntü Şekli

masaüstü

Tablet

Telefon

Üçüncü Örnek – Eliptik Görüntü Şekli

masaüstü

Tablet

Telefon

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

masaüstü

Tablet

Telefon

Düzeni Oluştur

Öncelikle tüm örneklerde kullanacağımız layoutu oluşturalı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 olarak, yeni bir Divi sayfası oluşturun ve Bölümü özelleştirin. Bölümün ayarlarını açın ve Arka Plan Rengini #f0f3fb olarak değiştirin.

• Arka Plan Rengi: #f0f3fb

Ardından, Tasarım sekmesine gidin ve Üst ve Aşağıya %10 Dolgu ekleyin. Ayarları kapatın.

• Dolgu: %10 Üst, Alt

Satır Ekle

Ardından, 2/3 sütunlu ve 1/3 sütunlu bir Satır ekleyin.

• 2/3, 1/3 Sıra

Tasarım sekmesine gidin. Özel Cilt Payı Genişliğini Kullan'ı etkinleştirin ve Maks Genişliği 1480 piksel olarak ayarlayın.

• Özel Oluk Genişliğini Kullan: Evet
• Maksimum Genişlik: 1480 piksel

İlk Sütun Ayarları

Satırın İçeriği sekmesinde, Satırın ilk sütununun ayarlarını açın, Tasarım sekmesine gidin ve Sol ve Sağa %9 Dolgu ekleyin. Sütun ve Satır ayarlarını kapatın.

• Dolgu: %9 Sol, Sağ

İlk Metin Modülü Ayarları

Ardından, sol sütuna bir Metin Modülü ekleyin.

İçerik metni için Başlık 4'ü seçin ve gövde içeriğinizi ekleyin.

• Başlık: 4
• Gövde: Divi'ye Hoş Geldiniz

Ardından, Tasarım sekmesine gidin. H4 Yazı Tipi'ni Montserrat'a, Ağırlığı kalına, Stili TT'ye ve Rengi #1d4eff'e ayarlayın.

• Başlık 4 Yazı Tipi: Montserrat
• Ağırlık: Kalın
• stil: TT
• Renk: #1d4eff

Masaüstü Yazı Tipi Boyutunu 16 piksele, tablet boyutunu 14 piksele ve telefon boyutunu 12 piksele ayarlayın. Harf Aralığını 0,3em ve Satır Yüksekliğini 1,6em olarak değiştirin.

• Boyut: 16px Masaüstü, 14px Tablet, 12px Telefon
• Harf Aralığı: 0.3em
• Satır Yüksekliği: 1,6em

Aralık'a ilerleyin ve Alt Kenar Boşluğunu 0 piksel olarak değiştirin. Modülü kapatın.

• Kenar Boşluğu: 0px Alt

İkinci Metin Modülü Ayarları

Ardından, ilkinin altına bir Metin Modülü ekleyin.

Metin türünü Başlık 1 olarak ayarlayın ve gövde içeriğinizi ekleyin.

• Başlık: 1
• Gövde: Finansal geleceğinizi planlayın

Ardından, Tasarım sekmesini seçin. Başlık Yazı Tipini Montserrat, Ağırlığı Kalın ve Rengi #0f1154 olarak değiştirin.

• Başlık 1 Yazı Tipi: Montserrat
• Ağırlık: Kalın
• Renk: #0f1154

Yazı Tipi Boyutunu masaüstü bilgisayarlar için 80 piksel, tabletler için 40 piksel ve telefonlar için 24 piksel olarak ayarlayın. Çizgi Yüksekliğini %110 olarak değiştirin. Modülü kapatın.

• Boyut: 80px Masaüstü, 40px Tablet, 24px Telefon
• Çizgi Yüksekliği: %110

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

Ardından, ikincisinin altına bir Metin Modülü ekleyin.

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

• Başlık: Paragraf
• Gövde: içerik

Ardından, Tasarım sekmesine gidin. Metin Yazı Tipini Roboto olarak değiştirin, Ağırlığı Orta ve Rengi siyah olarak ayarlayın.

• Metin Yazı Tipi: Roboto
• Ağırlık: Orta
• Renk: #000000

Masaüstü ve tabletler için Boyutu 18 piksel ve telefonlar için 14 piksel olarak değiştirin. Çizgi Yüksekliğini %180 olarak ayarlayın.

• Boyut: 18px Masaüstü, 18px Tablet, 14px Telefon
• Çizgi Yüksekliği: %180

Son olarak, Aralık'a ilerleyin ve Alt Kenar Boşluğunu %0'a ayarlayın. Modülün ayarlarını kapatın.

• Kenar Boşluğu: 0px Alt

Görüntü Modülü Ayarları

Şimdi, sağdaki sütuna bir Görüntü Modülü ekleyin.

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

Ardından, Arka Plan'ı aşağı kaydırın, Resim sekmesini seçin ve resminizi ekleyin. Tüm görüntü ayarlarını varsayılanlarında bırakın. Görüntü ilk başta pek bir şey göstermeyecek. Gittikçe bunu düzelteceğiz.

Ardından, Tasarım sekmesini seçin ve Aralık seçeneğine ilerleyin. Masaüstü bilgisayarlar için -%10 Üst, -%30 Sol, %10 Sağ Kenar Boşluğu ekleyin. 300px Üst ve Alt Dolgu ekleyin. Bunlar masaüstü ayarlarıdır. Tabletler ve telefonlar için ayarlamalar yapacağız.

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

Ardından, görüntü şeklinin duyarlı olduğundan emin olmak istiyoruz. Tabletler ve telefonlar için ayarları açmak için tablet simgesini seçin. Fareyle Kenar Boşluğu ayarlarının üzerine gelin ve görünen tablet simgesini seçin. Bu, her aygıt türü için bir sekme içeren bir dizi sekme açar. Tablet sekmesini seçin ve Kenar Boşluğunu %0 Üst, %0 Sol, %0 Sağ Kenar Boşluğu olarak değiştirin. Telefon sekmesi Tablet ayarlarını takip edecek, bu nedenle Margin için ayarlamamız gerekmeyecek.

• Kenar Boşluğu (Tablet/Telefon): %0 Üst, %0 Sol, %0 Sağ

Ardından, Doldurma ayarlarının üzerine geldiğinizde görünen tablet simgesini seçin. Telefon sekmesini seçin ve Dolguyu 150 piksel Üst ve 150 piksel Alt olarak değiştirin. Tablet Dolgusu, masaüstü ayarlarını izleyecektir. Modülün ayarlarını kapatın.

• Dolgu: 150 piksel Üst, 150 piksel Alt

Divi's Gradient Builder Örnekleriyle Görüntüleri Şekillendirin

Ardından, bu ayarları kullanacağız ve görüntüleri Divi's Gradient Builder ile şekillendireceğiz. Göreceğimiz gibi, çeşitli ayarlar Divi's Gradient Builder ile ilginç görüntü şekilleri oluşturmamıza yardımcı oluyor.

Akılda tutulması gereken bazı önemli ayarlar arasında Gradyan Duraklarının istiflenmesi ve tekrarlanacak desenin ayarlanması yer alır. Şekli beğendiğinizden emin olmak için desenlerinizi tüm ekran boyutlarında test ettiğinizden emin olun.

Divi's Gradient Builder'ı kullanma hakkında daha fazla bilgi için Elegant Themes blogunda “Gradient Builder” araması yapın. Kontroller ve ayarlarda size adım atmak için ayrıntılı öğreticiler içeren birkaç gönderi bulacaksınız.

İlk Örnek – Dairesel Gradyan Oluşturucu Görüntü Şekli

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

Görüntü Modülünün ayarlarını açın ve Arka Plan'a gidin . Arka Plan Degrade sekmesini seçin ve 6 Degrade 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üncünün üstünde): %69, #f0f3fb
• Altıncı: %100, #f0f3fb

Ardından, Gradyan Türü için Dairesel'i seçin, Konumu Merkez olarak ayarlayın, Birim için Yüzde'yi kullanın ve Gradyanı Arka Plan Resminin Üstüne Yerleştir'i etkinleştirin.

• Tür: Dairesel
• Pozisyon: Merkez
• Birim: Yüzde
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

İkinci Örnek – Doğrusal Gradyan Oluşturucu Görüntü Şekli

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

Ayarları açın, düğmeyi Arka Plan'a kaydırın ve Arka Plan Gradyanı sekmesini seçin. Dört Gradyan 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)

Gradyan Tipini 150deg Yönlü Doğrusal olarak ayarlayın. Tekrarla olarak ayarlayın. Birim için Yüzde'yi kullanın ve Gradyanı Arka Plan Resminin Üstüne Yerleştir'i etkinleştirin.

• Tür: Doğrusal
• Yön: 150deg
• Tekrar: Evet
• Birim: Yüzde
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Üçüncü Örnek – Eliptik Gradyan Oluşturucu Görüntü Şekli

İşte üçüncü görüntü şekli örneğimiz. Bu eliptik bir şekil kullanıyor.

Görüntü Modülünün ayarlarını açın ve Arka Plan'a gidin . Arka Plan Degrade sekmesini seçin ve dört Degrade Durağı oluşturun:

• İlk Durak: %0, #f0f3fb
• İkinci: %9, #f0f3fb
• Üçüncü (İkincinin üstünde): %9, rgba(175.175,175,0)
• Dördüncü: %21, rgba(41,196.169,0)

Ardından Gradyan Türünü Eliptik olarak değiştirin ve Konumu Sol Üst olarak ayarlayın. Degradeyi Tekrarla'yı seçin, Birim olarak Yüzde'yi kullanın ve Degradeyi Arka Plan Resminin Üstüne Yerleştir'i etkinleştirin.

• Tür: Eliptik
• Konum: Sol Üst
• Gradyan Tekrarı: Evet
• Birim: Yüzde
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Dördüncü Örnek – Konik Gradyan Oluşturucu Görüntü Şekli

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

Görüntü Modülünün ayarlarını açın, Arka Plan seçeneğine ilerleyin ve Arka Plan Gradyanı sekmesini seçin. 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üncünün üstünde): %65, #f0f3fb

Degrade Türünü Konik olarak ayarlayın ve Yönü varsayılan ayarda bırakın. Konumu Alt olarak ayarlayın, Birim için Yüzde'yi kullanın ve Gradyanı Arka Plan Resminin Üstüne Yerleştir'i etkinleştirin.

• Tür: Konik
• Yön: 180 derece
• Pozisyon: Alt
• Birim: Yüzde
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Gradyan Bulder Şekli Sonuçları

Tüm düzenler iyi çıktı. Görüntü şekilleri göze çarpıyor ve görüntülerin anlaşılması yine de kolay. Hepsi duyarlıdır, bu nedenle herhangi bir cihazda harika görünürler.

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

masaüstü

Tablet

Telefon

İkinci Örnek – Doğrusal Görüntü Şekli

masaüstü

Tablet

Telefon

Üçüncü Örnek – Eliptik Görüntü Şekli

masaüstü

Tablet

Telefon

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

masaüstü

Tablet

Telefon

Biten Düşünceler

Divi's Gradient Builder ile resimlerinizi nasıl şekillendireceğinize bakışımız bu. Gradient Builder bazı ilginç görüntü şekilleri oluşturabilir. Gradyan Duraklarıyla oynamak, farklı Gradyan Türlerini denemek ve Gradyan Tekrarını etkinleştirmek yeni tasarımlar oluşturmanın harika yollarıdır. Tasarımlarınızı tüm ekran boyutlarında kontrol ettiğinizden ve gerekirse ayarlamalar yaptığınızdan emin olun.

Senden duymak istiyoruz. Resimlerinizi şekillendirmek için Divi's Gradient Builder'ı kullandınız mı? Yorumlarda deneyiminizi bize bildirin.