Desenleri Kullanarak Resminizin Renklerini Nasıl Vurgularsınız (7 Ücretsiz Desen İndirin!)

Web sitenize görseller eklerken, ilk bakışta dikkat çekmelerini istersiniz. Görüntünüzü hayata geçirebilecek şeylerden biri, görüntünün içinde kullanılan renkleri vurgulayan desenler kullanmaktır. Sadece görüntünüzün renklerini vurgulamakla kalmayacak, aynı zamanda tasarımınızı bir adım öteye taşıyacaktır.

Bu yazının devamında, 7 farklı deseni ücretsiz olarak indirebilecek ve herhangi bir kısıtlama olmaksızın herhangi bir tasarımınızda kullanabileceksiniz.

Hadi hadi bakalım!

Ön izleme

Bu Eğitimin Dosyalarını İndirin

Ücretsiz görüntü dosyalarına el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Desenleri Kullanarak Resminizin Renklerini Nasıl Vurgularsınız (7 Ücretsiz Desen İndirin!)

Youtube Kanalımıza Abone Olun

Yaklaşmak

• İndirilen klasörde bulabileceğiniz desen görüntü dosyaları şeffaf desenler ve beyaz bir arka plan içerir.
• Resmimizden iki renk seçeceğiz ve bunları resmimizin degrade arka planına uygulayacağız (degrade arka planı desenler arasında görünür)
• Tasarımın genel adımlarından geçerek başlayacağız
• Ardından, desen yerleşimini (sağ üst, sağ alt ve sol üst) değiştirmek için ürün resminin ve desen resminin özel kenar boşluğuyla oynayacağız.

Genel Adımlar

Yeni Bölüm Ekle

Arka plan rengi

Yeni bir bölüm ekleyerek ve arka plan rengi olarak '#ffffff' kullanarak başlayın.

Özel Dolgu

Bölümümüzün üstünde ve altında biraz boşluk yaratmak istiyoruz. Bu nedenle, Aralık alt kategorisindeki üst ve alt dolgu seçeneklerine '150px' ekleyeceğiz.

Bölüme Yeni Satır Ekle

Sütun Yapısı

Bölümünüze önceki adımları uyguladıktan sonra devam edin ve aşağıdaki sütun yapısına sahip bir satır ekleyin:

Sütun 1'e Desen Görüntüsü Modülü Ekle

Degrade Arka Plan

Şimdi çeşitli modülleri eklemeye başlayabilirsiniz. Bir Görüntü Modülü ekleyerek sütun 1 ile başlayacağız. İndirilen kalıplardan hangisini kullanmak istiyorsanız onu yükleyin. Ardından ürün görselinizden deseninizde de kullanmak istediğiniz iki rengi seçin. Bunu yaptıktan sonra, Görüntü Modülünüzün Arka Plan alt kategorisini açın ve degrade bir arka plan oluşturmak için bu iki rengi kullanın:

• Renk 1: #ebe2e3
• Renk 2: #94bce0

boyutlandırma

Bu Görüntü Modülünün Tasarım sekmesine gidin ve genişlik için '%60'ı kullanın.

Sütun 1'e Ürün Resmi Modülü Ekle

Görüntü Hizalama

Model Görsel Modülünün hemen altına, ürün görseliniz için başka bir Görsel Modülü ekleyin. Resminizi yükledikten sonra yapmanız gereken ilk şey, Hizalama alt kategorisindeki 'Görüntüyü Mobilde Her Zaman Ortala' seçeneğini devre dışı bırakmaktır.

boyutlandırma

Daha sonra Boyutlandırma alt kategorisini açın ve Genişlik için '%80'i kullanın.

Kutu Gölge

Son olarak, varsayılan ayarlarını değiştirmeden ilk kutu gölge seçeneğini etkinleştirin.

Sütun 2'ye Başlık Metin Modülü Ekle

Arka plan rengi

İlk sütunda ihtiyacımız olan tüm modüllere sahibiz, o yüzden ikinciye geçelim. Orada, ihtiyacımız olan ilk şey, arka plan rengi olarak '#94bce0' olan bir Metin Modülü başlığıdır.

Metin Ayarları

Tasarım sekmesine gidin ve daha sonra bu Metin Modülüne aşağıdaki metin ayarlarını uygulayın:

• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Boyutu: 52px
• Metin Rengi: #ffffff
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

boyutlandırma

Boyutlandırma alt kategorisini açarak ve ona aşağıdaki ayarları uygulayarak devam edin:

• Genişlik: %83
• Modül Hizalama: Sol

Özel Dolgu

Üstte ve altta fazladan boşluk oluşturmak için aşağıdaki özel dolguyu da uygulayacağız:

• Üst: 30 piksel
• Alt: 30 piksel

Sınır

Son olarak, '20px' ekleyerek sol üst ve sağ üst için yuvarlatılmış köşeler oluşturacağız.

Sütun 2'ye Açıklama Metni Modülü Ekle

Metin Ayarları

Metin Modülü başlığının hemen altında, devam edin ve aşağıdaki metin ayarlarını kullanarak bir Metin Modülü açıklaması ekleyin:

• Metin Boyutu: 17px
• Metin Rengi: #6b8ea5

Sütun 2'ye Düğme Modülü Ekle

Düğme Ayarları

Bu sütundaki son modül, aşağıdaki düğme ayarlarını içeren bir Düğme Modülüdür:

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Rengi: #6b8ea5
• Düğme Arka Plan Rengi: #ebe2e3
• Düğme Kenar Genişliği: 0px
• Yazı Ağırlığı: Kalın
• Yazı Tipi Stili: Büyük Harf
• Düğme Simgesini Göster: Evet
• Düğme Simge Yerleşimi: Sol
• Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: Hayır

Özel Dolgu

Aşağıdaki özel dolguyu da ekleyerek sol ve sağda biraz boşluk yaratacağız:

• Sağ: 30 piksel
• Sol: 50 piksel

Geçici Sonuç

Bu noktaya kadar şu sonuca ulaştık:

Şimdi, deseninizin nerede görünmesini istediğinize bağlı olarak:

• Sağ üst
• Sağ alt
• Sol üst

Hem desen resmine hem de ürün resmine farklı özel kenar boşluğu değerleri uygulayabilirsiniz. Bu yazının bir sonraki bölümünde, üç olasılığın hepsini ve bunların nasıl kurulacağını inceleyeceğiz.

Sağ Üst Model Konumu

Desen Görüntü Modülü Özel Kenar Boşluğu

Resminizin sağ üstte görünmesini istiyorsanız, desen Resim Modülünüze aşağıdaki özel kenar boşluğunu ekleyin:

• Sol Kenar Boşluğu: 250px (Masaüstü, Tablet ve Telefon)

Ürün Resmi Modülü Özel Kenar Boşluğu

Ardından, ürün Görüntü Modülünü açın ve ona aşağıdaki özel kenar boşluğunu uygulayın:

• Üst Kenar Boşluğu: -240px (Masaüstü), -220px (Tablet), -100px (Telefon)

Sağ Alt Model Konumu

Desen Görüntü Modülü Özel Kenar Boşluğu

Desen Görüntü Modülünün sağ altta görünmesini sağlamak için desen Görüntü Modülünü açın ve ona aşağıdaki özel kenar boşluğunu uygulayın:

• Üst Kenar Boşluğu: 200px (Masaüstü), 0px (Tablet ve Telefon)
• Sol Kenar Boşluğu: 330 piksel (Masaüstü ve Tablet), 200 piksel (Telefon)

Ürün Resmi Modülü Özel Kenar Boşluğu

Daha sonra ürün Görüntü Modülünü açın ve aşağıdaki özel kenar boşluğu değerlerini ekleyin:

• Üst: -450px (Masaüstü), -400px (Tablet), -300px (Telefon)

Sol Üst Model Konumu

Desen Görüntü Modülü Özel Kenar Boşluğu

Şimdi, son kalıp konumu aşağıdaki özel kenar boşluğuna ihtiyaç duyar:

• Sol Kenar Boşluğu: -100px (Masaüstü, Tablet ve Telefon)

Ürün Resmi Modülü Özel Kenar Boşluğu

Son olarak, ürün Görüntü Modülünü açın ve aşağıdaki özel kenar boşluğunu kullanın:

• Üst Kenar Boşluğu: -250px (Masaüstü), -230px (Tablet), -150px (Telefon)

Ön izleme

Tüm adımların üzerinden geçtik, şimdi sonuca son bir göz atalım.

Son düşünceler

Resimlerinizi desenlerle vurgulamak, tasarımınızın genel görünümünü ve verdiği hissi geliştirmenize gerçekten yardımcı olabilir. Bu gönderide ücretsiz olarak indirebileceğiniz ve kısıtlama olmadan kullanabileceğiniz 7 farklı desen paylaştık. Divi'nin yerleşik seçeneklerini kullanarak bunları tasarımınıza nasıl ekleyeceğinizi de gösterdik. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!