Divi için 9 ÜCRETSİZ Şekilli Görüntü Bindirmelerini İndirin

Web sitenizde görselleri gösterme şekliniz, oluşturduğunuz genel tasarımda gerçekten fark yaratabilir. Divi'nin yerleşik seçenekleriyle, görüntüleri çarpıcı bir şekilde görüntülemenize, örneğin kenarlıkları ve kutu gölgelerini düşünmenize yardımcı olacak çeşitli tasarım ayarlarını zaten uygulayabilirsiniz. Ancak resimlerinize daha benzersiz bir şekil vermek istiyorsanız, bu gönderi size yardımcı olacaktır. Oluşturduğunuz herhangi bir web sitesinde indirebileceğiniz ve kullanabileceğiniz 9 ÜCRETSİZ şekilli görüntü bindirmeleri paylaşacağız. Bu şekilli görüntü katmanlarını paylaştıktan sonra, Divi ile bir web sitesi oluştururken bunlardan nasıl yararlanabileceğinizi de göstereceğiz. Bu öğreticinin, kendi türdeki şekilli görüntü bindirmeleri oluşturmanız için size ilham vereceğini umuyoruz.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan ve indirmeden önce, farklı ekran boyutlarında bekleyebileceğiniz sonuca hızlıca bir göz atalım.

masaüstü

Telefon

Şekilli Görüntü Bindirmeleri'ni ÜCRETSİZ İndirin

Ellerinizi şekilli görüntü bindirmeleri üzerine 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 ve Cuma günü 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.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Yaklaşmak

• İndirme klasöründe bulabileceğiniz şekilli görüntü bindirmeleri, bunları beyaz bir satır ve/veya bölüm arka plan rengiyle birleştirirseniz kullanıma hazırdır.
• Şekilli görüntü bindirmeleri başka bir arka plan rengine göre ayarlamak isterseniz, yukarıdaki indirmeye dahil olan illüstratör dosyasını kullanarak şekilli görüntü bindirmeleri başka bir renkte dışa aktarmanız gerekir.
• Eğiticinin ilk bölümünde (Adobe Illustrator kullanarak) şekilli görüntü bindirme rengini nasıl değiştireceğinizi göstereceğiz.
• Ardından Divi'ye geçeceğiz ve şekilli görüntü bindirmelerinden birini bir Görüntü Modülüne yükleyeceğiz.
• Ayrıca, Şekilli görüntü bindirmesi aracılığıyla gösterilecek olan Görüntü Modülüne bir arka plan görüntüsü ve gradyan arka planı ekleyeceğiz.

Adobe Illustrator ile Şekillendirilmiş Görüntü Bindirmelerini Bölüm Arka Plan Rengine Değiştirme

Illustrator Dosyasını İndirme Klasöründe açın

Bu yazının yaklaşım bölümünde belirtildiği gibi, beyaz bir arka plan üzerinde görüntü şeklindeki bindirmeleri kullanmak istiyorsanız, indirme klasöründe bulabileceğiniz PNG dosyalarını kullanmaya hazırsınız. Ancak, şekillendirilmiş görüntü bindirmeleri farklı bir satır ve/veya bölüm arka plan renginde kullanmak istiyorsanız, indirme klasöründe bulunan Adobe Illustrator dosyasını kullanarak rengi manuel olarak değiştirmeniz gerekecektir. Rengi değiştirmek çok az zaman alır veya hiç zaman almaz ve şekillendirilmiş görüntü bindirmeleri oluşturduğunuz herhangi bir web sitesinde tam anlamıyla kullanmanıza izin verir, bu yüzden adımlardan geçelim. Öncelikle Adobe Illustrator dosyasını açmanız gerekecek.

Tercih Edilen Görüntü Şekli Kaplamasını Seçin

Dosyayı açtıktan sonra, her türlü amaç için kullanabileceğiniz, şekilli görüntü bindirmeleri içeren 9 farklı çalışma yüzeyi bulacaksınız. Düzenlemek istediğinizi seçin.

Bölümün Arka Plan Rengiyle Eşleşecek Rengi Değiştir

Şeklin rengini, sıranız ve/veya bölümünüz için kullanmayı planladığınız arka plan rengiyle değiştirerek devam edin.

Çalışma Yüzeyini Seç

Renk değiştirildiğinde, şekilli görüntü bindirmesini içeren çalışma yüzeyinin tamamını seçebilirsiniz.

Web için PNG Şekilli Görüntü Yerleşimini Kaydet

Ve File > Export > Save for Web seçeneğine giderek web için bir PNG görüntü dosyası olarak kaydedin .

Hadi Yaratmaya Başlayalım!

Youtube Kanalımıza Abone Olun

Yeni Bölüm Ekle

Divi'ye geçme ve sonucu yaratma zamanı! Yeni bir sayfa oluşturun veya mevcut bir sayfayı açın ve yeni bir normal bölüm ekleyin.

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

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

Şekilli Görüntü Bindirme Yükle

Sütun 1'de ihtiyaç duyacağımız tek modül bir Görüntü Modülüdür. İşte tüm sihir burada gerçekleşecek. Şekillendirilmiş görüntü bindirmesini yükleyerek başlayacağız. Resmin bir bölümünün tamamen şeffaf olduğunu fark edeceksiniz. Bu, arka plan görüntüsünün ve gradyan arka planının sonraki adımlarda gösterilmesini sağlar.

Degrade Arka Plan

Devam edin ve bir sonraki adımda seçtiğiniz bir degrade arka planı ekleyin.

• Renk 1: #aa2bff
• Renk 2: #09f7eb

Arka plan görüntüsü

Ve bir PNG arka plan resmi veya degrade arka planın görünmesini istemiyorsanız normal bir arka plan resmi yükleyin. Ayrıca, fareyle üzerine gelindiğinde bir gradyan arka planının nasıl değiştirileceğine ilişkin oluşturduğumuz aşağıdaki gönderiye giderek kullandığımız illüstrasyonları da indirebilirsiniz.

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Alt Orta
• Arka Plan Resmi Tekrarı: Tekrar Yok

boyutlandırma

Bu öğreticinin çalışması için bir diğer önemli adım, Görüntü Modülünün boyutlandırma ayarlarında 'Force Fullwidth' seçeneğini etkinleştirmektir. Bu, gradyan arka planının ve arka plan görüntüsünün yalnızca şekillendirilmiş görüntü bindirmesinin şeffaf alanı boyunca gösterilmesini sağlayacaktır.

• Tam Genişliği Zorla: Evet

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

İçerik Ekle

İkinci sütuna geçelim. Burada ihtiyacımız olan ilk modül, bir Metin Modülü başlığıdır. Seçtiğiniz bazı içeriği ekleyin.

Metin Ayarları

Ardından, başlık metni ayarlarına gidin ve bazı değişiklikler yapın.

• Başlık 2 Yazı Tipi: Antik Didone
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Metin Boyutu: 45px
• Başlık 2 Harf Aralığı: -2px

aralık

Bazı özel üst kenar boşluğu da ekleyin.

• Üst Kenar Boşluğu: 100 piksel

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

İçerik Ekle

İhtiyacımız olan ikinci modül bir açıklama Metin Modülü. Seçtiğiniz bazı içeriği girin.

Metin Ayarları

Ardından, metin ayarlarına gidin ve modülün metin yönünü değiştirin.

• Metin Yönü: Yasla

boyutlandırma

Boyutlandırma ayarlarında da genişliği değiştirin.

• Genişlik: %63

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

Kopya Ekle

İhtiyacımız olan sonraki ve son modül bir Düğme Modülü. Seçtiğiniz bazı içeriği girin.

Düğme Ayarları

Düğme ayarlarına giderek ve düğmenin görünümünü değiştirerek devam edin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 17px
• Düğme Metin Rengi: #ffffff
• Gradyan Rengi 1: #aa2bff
• Gradyan Rengi 2: #09f7eb
• Gradyan Yönü: 111deg

• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 100 piksel
• Düğme Harf Aralığı: -2px
• Yazı Tipi Ağırlığı: Ultra Kalın
• Yazı Tipi Stili: Büyük Harf

aralık

Düğmeye bazı ekstra özel dolgular da ekleyin.

• Üst Dolgu: 10px
• Alt Dolgu: 10px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Kutu Gölge

Son olarak, düğmeye ince bir yay gölgesi ekleyerek tasarımı tamamlayın.

• Kutu Gölge Bulanıklığı Gücü: 50px
• Kutu Gölge Yayılma Gücü: -5px

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Telefon

Son düşünceler

Bu gönderide, oluşturduğunuz her tür web sitesi için kullanabileceğiniz Divi için 9 ÜCRETSİZ şekilli görüntü bindirmesi paylaştık. Bu öğreticinin, sürekli olarak yeniden kullanabileceğiniz kendi benzersiz şekilli görüntü bindirmeleri oluşturmanız için size ilham verdiğini umuyoruz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!