Divi'nin Yeni Seçeneklerini Kullanarak Güzel Görüntü Kenarlıkları Nasıl Oluşturulur

Bugünün Divi eğitiminde, oluşturacağınız bir sonraki web sitesinde nasıl güzel resim kenarlıkları oluşturacağınızı göstereceğiz. Bu gönderinin amacı, kullandığınız görsellerle (ve web sitenizin geri kalanıyla) eşleşen güzel sonuçları nasıl oluşturabileceğinizi göstermektir.

Yeni Divi seçenekleriyle çarpıcı sonuçlara ulaşmak her zamankinden daha kolay. Sadece size nasıl yapılacağını göstereceğimiz bazı değişiklikleri yapmanız gerekecek ve web tasarımınızı bir sonraki seviyeye taşımaya hazır olacaksınız. Sizinle paylaşacağımız 8 örneğin tamamı, Divi Builder ve Image Module'ün sunduğu yerleşik seçeneklerden başka bir şey kullanmayacaktır.

gizlice bakmak

Bu gönderiden bekleyebileceğiniz sonuçlara bir göz atalım:

Divi'nin Yeni Seçeneklerini Kullanarak Güzel Görüntü Kenarlıkları Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Degrade Arka Plan

Güzel görüntü sınırları elde etmek için sahip olmanız gereken ilk olasılık, yalnızca degrade bir arka plan kullanmaktır. Çeşitli degrade arka plan ayarlarını deneyerek basit ama zarif sonuçlar elde edebilirsiniz. Size yalnızca degrade bir arka plandan oluşan üç resim kenarlığı örneği göstereceğiz.

Standart

Ele alacağımız ilk örnek, hepsinden en basit ve en mütevazı olanıdır; standart bir degrade görüntü sınırı. Sonuç olarak size create'in nasıl göründüğünü göstereceğiz:

İçerik Sekmesi

İçerik sekmesinde bir gradyan arka planı seçerek başlayın. Bu örnek için aşağıdaki ayarları kullandık:

• İlk Renk: #081e8c
• İkinci Renk: #764f9b
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 269deg
• Başlangıç ​​Konumu: %40
• Bitiş Konumu: %60

Tasarım Sekmesi

Yapmanız gereken bir sonraki ve son şey, görüntüye biraz dolgu eklemektir. Bu kadar basit. Tasarım sekmesine gidin ve üst, alt, sağ ve sol dolguya '10px' ekleyin.

Taraflar

Sırada, görüntünün yalnızca sol ve sağ tarafında gösterilen bir görüntü kenarlığımız var. Bu tür bir görüntü kenarlığının kullanılması, kenarlığın kendisine çok fazla odaklanmadan görüntüye hoş bir ekstra dokunuş sağlar.

İçerik Sekmesi

Bu tür bir görüntü kenarlığı elde etmek için, görüntünüze aşağıdaki degrade arka planını ekleyerek başlayın:

• İlk Renk: rgba(255,255,255,0)
• İkinci Renk: #0a8da8
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 166deg
• Başlangıç ​​Konumu: %29
• Bitiş Konumu: %52

Tasarım Sekmesi

Tasarım sekmesinde, ihtiyacınız olan tek şey, sağ ve sol taraf için '10 piksel' dolgudur.

Bir Köşe

Devam ederek, web sitenizdeki resimler için köşe arka planları da oluşturabilirsiniz. Bu tür kenarlık, görüntü içinde kullanılan bir rengi vurgulamak istediğinizde kullanmak için harikadır.

İçerik Sekmesi

Üçüncü resim örneği için aşağıdaki gradyan arka planını kullanın:

• İlk Renk: rgba(58,8,1,0.58)
• İkinci Renk: rgba(41,196.169,0)
• Gradyan Yönü: 152deg
• Başlangıç ​​Konumu: %34
• Bitiş Konumu: %28

Tasarım Sekmesi

Ardından, dolguların her birine de '20px' ekleyin.

Görüntü Kenarlığı ve Gradyan Arka Planı

Sahip olduğunuz diğer bir olasılık da degrade bir arka planı bir görüntü kenarlığıyla birleştirmektir. Bu da, sonraki dört örnekte tanık olabileceğiniz gibi çarpıcı sonuçlar verebilir.

İnce Gradyan

Degrade arka plan ve görüntü kenarlığının ilk kombinasyonu basit ama güzel. Degrade arka plan ve kenarlık için aynı renkleri kullanarak, görüntü kenarlığı bir şekilde renkle doluyormuş gibi hissettiriyor.

İçerik Sekmesi

Resminize aşağıdaki degrade arka plan ayarlarını ekleyerek başlayın:

• İlk Renk: rgba(255,255,255,0)
• İkinci Renk: #777777
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 180deg
• Başlangıç ​​Konumu: %65
• Bitiş Konumu: %78

Tasarım Sekmesi

Tasarım sekmesine gidin ve Kenarlık alt kategorisinde aşağıdaki ayarları kullanın:

• Kenarlık Kullan: Evet
• Kenar Rengi: #777777
• Kenar Genişliği: 3px
• Kenar Stili: Katı

Son olarak, tüm dolgu seçeneklerine '7px'lik bir dolgu ekleyin.

şekilli

Ardından, ziyaretçilerin dikkatini çekmek için harika bir örneğimiz var. Bu durumda görüntünün kendisi çoğunlukla daha açık renkler içerir, bu da koyu kenarlıkla güzel bir denge oluşturur.

İçerik Sekmesi

Bu görüntü kenarlığı için ihtiyaç duyacağınız degrade arka plan ayarları şunlardır:

• İlk Renk: rgba(53,0,188,0.1)
• İkinci Renk: #680061
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %80
• Bitiş Konumu: %80

Tasarım Sekmesi

Tasarım sekmesine geçin ve aşağıdaki kenarlığı kullanın:

• Kenarlık Kullan: Evet
• Kenar Rengi: #9a00bc
• Kenar Genişliği: 1px
• Kenar Stili: Katı

Aşağı kaydırın ve resme aşağıdaki dolguyu ekleyin:

• Üst: 7 piksel
• Sağ: 5 piksel
• Alt: 7 piksel
• Sol: 5 piksel

Çift Kenarlık

Degrade bir arka planla birlikte çift kenarlık kullanmak da bazı çarpıcı sonuçlar verebilir. Bir göz at:

İçerik Sekmesi

Bu örnekte kullandığımız degrade arka plan rengi şudur:

• İlk Renk: rgba(224,43,32,0.61)
• İkinci Renk: rgba(12,113,195,0.87)
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %71
• Bitiş Konumu: %93

Tasarım Sekmesi

Devam ederek, Kenarlık alt kategorisi için aşağıdaki ayarları kullanın:

• Kenarlık Kullan: Evet
• Kenarlık Rengi: #f4f4f4 (bölüm arka plan renginizle eşleştirin)
• Kenar Genişliği: 8px
• Bordür Stili: Çift

Ve görüntünün üstüne, altına, sağına ve soluna '10px' ekleyin.

Üçgen Köşeler

Devam ederken, degrade arka plan seçeneğini kesikli bir kenarlıkla birlikte kullanarak sınırınızda bazı küçük köşeler de oluşturabilirsiniz.

İçerik Sekmesi

Size yukarıda gösterdiğimiz görüntü kenarlığını elde etmek için aşağıdaki degrade arka plan ayarlarını kullanın:

• İlk Renk: rgba(163,103,6,0)
• İkinci Renk: #e09900
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %97
• Bitiş Konumu: %97

Tasarım Sekmesi

Tasarım sekmesinde aşağıdaki kenarlık ayarlarına da sahip olmamız gerekecek:

• Kenarlık Kullan: Evet
• Kenar Rengi: #e09900
• Kenar Genişliği: 2px
• Kenarlık Stili: Kesikli

Son olarak, üst, alt, sol ve sağ dolgu için '8px'lik bir dolguya ihtiyacımız olacak.

Desen ve Degrade Arka Plan

Ön plana çıkarmak istediğimiz son olasılık, aynı anda bir desen ve gradyan arka planı kullanmaktır. Bu, resimlerinizin görünümü ve hissi ile oynamanıza izin verir.

oynak

Bu kenarlık, görüntünün kendisinde de kullanılan iki renkten oluşan bir gradyan arka planı içerir. Bir arka plan deseni de ekleyerek, görüntü web sitenize biraz daha fazla atmosfer katar.

İçerik Sekmesi

Son örnek için aşağıdaki gradyan arka plan ayarlarını kullanacağız:

• İlk Renk: rgba(4,49,96,0.51)
• İkinci Renk: rgba(119,74,15,0.51)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 180deg
• Başlangıç ​​Konumu: %0
• Bitiş Konumu: %100

Tasarım Sekmesi

Ardından, bir desen arka planı da ekliyoruz. Bu örnekte kullandığımız desen Toptal'dan geliyor. Kalıplarını her türlü amaç için kullanabilirsiniz, sadece SSS'lerinde belirtildiği gibi kodunuza kredi verdiğinizden emin olun. Desen arka planını ekledikten sonra aşağıdaki ayarları da kullanın:

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Çarpma

Yapmanız gereken son şey, resminizin üst, alt, sağ ve sol dolgusuna '12px'lik bir dolgu eklemektir.

Son düşünceler

Bu gönderide, size güzel resim kenarlıkları oluşturmanın bazı farklı yollarını gösterdik. Bu seçenekler, herhangi bir ek CSS kullanmadan yeni Divi seçenekleriyle yapabileceğiniz şeyler hakkında size bir bakış açısı sunar. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!

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!

Bay Estetik / Shutterstock.com tarafından Öne Çıkan Görsel