Yeni bir divi seçeneği kullanarak güzel bir görüntü sınırı nasıl yapılır
Bugünün Divi öğreticisinde, oluşturduğunuz bir sonraki web sitesinde nasıl güzel bir görüntü sınırı oluşturacağınızı göstereceğiz. Bu yazının amacı, kullandığınız görüntüyle (ve tüm web siteleriniz) eşleşen güzel sonuçlar verebileceğinizi göstermektir. Yeni Divi seçeneğiyle, şaşırtıcı sonuçlar elde etmek eskisinden daha kolay. Yalnızca size nasıl yapılacağını göstereceğimiz bazı değişiklikler yapmanız gerekir ve web tasarımınızı bir sonraki seviyeye getirmeye hazır olacaksınız. Sizinle paylaşacağımız 8 örnek, Divi Builder ve görüntü modülü tarafından sunulan varsayılan seçeneklerden başka bir şey kullanmayacaktır.
PEEK Bu gönderiden bekleyebileceğiniz sonuçları görelim:
İlk renk: #081E8C
Renk İkinci: #764F9B
Gradyan Türü: Doğrusal
Gradien yönü: 269deg
Başlangıç Pozisyonu:% 40
Son pozisyon:% 60 Yapmanız gereken bir sonraki ve son tasarım sekmesi görüntüye biraz dolgu eklemektir. Bu böyle basit. Tasarım sekmesini açın ve üst, alt, sağ ve sol dolguya ’10px’ ekleyin. Ardından, yalnızca görüntünün solunda ve sağında görünen bir görüntü sınırımız var. Bu tür görüntü sınırını kullanmak, sınırın kendisine çok fazla odaklanmadan görüntüye iyi bir dokunuş sağlar. İçerik sekmesi Bu tür görüntü sınırını elde etmek için, görüntünüze aşağıdaki gradyan arka plan ekleyerek başlayın: Birinci Renk: RGBA (255,255,255.0)
Renk İkinci: #0A8da8
Gradyan Türü: Doğrusal
Gradyan yönü: 166deg
Başlangıç Pozisyonu:% 29
Son pozisyon:% 52
Tasarım sekmesindeki tasarım sekmesi, ihtiyacınız olan tek şey sağ ve sol taraflar için ’10px’ yataktır. Bir sonraki köşe, web sitenizdeki görüntüler için bir açı arka plan da yapabilirsiniz. Bu tür bir sınırın, resimde kullanılan rengi vurgulamak istediğinizde kullanımı çok iyidir. Üçüncü resim örneği için İçerik sekmesi, aşağıdaki gradyan arka planını kullanın: Birinci renk: RGBA (58,8,1,0,58)
İkinci renk: RGBA (41,196,169.0)
Gradyan yönü: 152deg
Başlangıç Pozisyonu:% 34
Son pozisyon:% 28
Tasarım sekmesi daha sonra, her dolguya da ’20px’ ekleyin. Gradyan Görüntü ve Arka Plan Sınırı Sahip olduğunuz başka bir olasılık, gradyanın arka planını bir görüntü limitiyle birleştirmektir. Bu, sonraki dört örnekte görebileceğiniz gibi şaşırtıcı sonuçlar da sağlayabilir. İnce gradyan Gradyanın arka planının ilk kombinasyonu ve basit ama güzel görüntülerin sınırları. Gradyan ve sınırın arka planı için aynı rengi kullanarak, görüntünün sınırı bir şekilde renkle dolu gibi hissediyor. İçeriğin içeriği, resminize aşağıdaki gradyan arka plan ayarlarını ekleyerek başlar: Birinci Renk: RGBA (255,255,255.0) Renk İkinci: #777777
Gradyan Türü: Doğrusal
Gradyan yönü: 180 derece
Başlangıç Pozisyonu:% 65
Son pozisyon:% 78
Tasarım sekmesi tasarım sekmesine geçer ve sınır alt kategorisindeki aşağıdaki ayarları kullanır:
Sınırı kullanın: Evet Sınır rengi: #777777
Sınır Genişliği: 3px
Sınır Gücü: Katı
Son olarak, tüm dolgu seçeneklerine ‘7px’ dolgusunu ekleyin.
Bir sonraki şeklinde, ziyaretçilerin dikkatini çekmek için iyi bir örneğimiz var. Bu durumda resmin kendisi çoğunlukla daha koyu bir sınırla iyi bir denge oluşturan daha parlak bir renk içerir. Bu görüntünün sınırı için ihtiyacınız olan gradyan arka plan ayarlarının içerik sekmesi aşağıdaki gibidir: Birinci Renk: RGBA (53,0,188,0.1) Renk İkinci: #680061
Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç Pozisyonu:% 80
Son pozisyon:% 80
Tasarım sekmesi tasarım sekmesine geçer ve aşağıdaki sınırı kullanın:
Sınırı kullanın: Evet Sınır rengi: #9A00BC
Sınır Genişliği: 1 piksel
Sınır Gücü: Katı
Aşağı kaydırın ve resme aşağıdaki dolguyu ekleyin:
Yukarıda: 7 piksel Doğru: 5 piksel
Aşağıda: 7pxiiri: 5px
Çift kenarlık, gradyan arka planı olan bir kombinasyonda çift sınır kullanır, bazı şaşırtıcı sonuçlar da sağlayabilir. Görmek:
Bu örnekte kullandığımız gradyan arka plan rengi içeriği sekmesi aşağıdaki gibidir:
Birinci 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ıç Pozisyonu:% 71
Son pozisyon:% 93
Bir sonraki tasarım sekmesi, sınır alt kategorileri için aşağıdaki ayarları kullanın:
Sınırı kullanın: Evet
Sınır rengi: #f4f4f4 (parçanızın arka plan rengine ayarlayın) Sınır Genişliği: 8px
Sınır Gücü: Çift
Ve üst, alt, sağ ve sol dolgu görüntülerine ’10px’ ekleyin.
Bir sonraki üçgen açısı, noktalı sınırlarla birlikte gradyan arka plan seçeneğini kullanarak sınırınızda birkaç küçük açı da yapabilirsiniz.
İçerik sekmesi yukarıda gösterdiğimiz görüntü sınırına ulaşmak için aşağıdaki gradyan arka plan ayarlarını kullanın: Birinci renk: RGBA (163,103,6,0) Renk İkinci: #E09900 Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç Pozisyonu:% 97
Son pozisyon:% 97
Tasarım sekmesindeki Tasarım sekmesi, aşağıdaki sınır ayarlarına da sahip olmalıyız:
Sınırı kullanın: Evet
Sınır rengi: #E09900 Sınır Genişliği: 2 piksel
Sınır Stili: Çizgili
Son olarak, üst, alt, sol ve sağ dolgu için ‘8px’ dolgulamaya ihtiyacımız var.
Gradyan Desenleri ve Arka Planını vurgulamak istediğimiz son olasılık, gradyanın desenini ve arka planını eşzamanlı olarak kullanmaktır. Bu, görünüşünüz ve gölgelerinizle oynamanızı sağlar.
Bu neşeli sınır, resmin kendisinde de kullanılan iki renkli gradyanın arka planını içerir. Bir arka plan deseni de ekleyerek, resim web sitenize biraz daha fazla atmosfer verir. Son örnek için İçerik sekmesi, aşağıdaki gradyan arka plan ayarlarını kullanacağız: Birinci renk: RGBA (4,49,96.0.51) İkinci renk: RGBA (119,74,15,0.51)
Gradyan Türü: Doğrusal Gradyan yönü: 180 derece
Başlangıç pozisyonu:% 0
Son pozisyon:% 100
Bir sonraki tasarım sekmesi, ayrıca bir desen arka plan ekliyoruz. Bu örnekte kullandığımız desen Toptal’dan gelir. Desenlerini her türlü hedef için kullanabilir, bunları SSS’de belirtildiği gibi kodunuza koyduğunuzdan emin olabilirsiniz. Desenin arka planını ekledikten sonra aşağıdaki ayarları da kullanın:
Arka Plan Görüntü Boyutu: Kapak
Arka Plan Görüntü Pozisyonu: Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok Arka plan görüntü karışımı: çarpın
Yapmanız gereken son şey, üst, alt, sağ ve sol dolgulara ’12px’ dolgu eklemektir.
Bu yazıdaki son zihin, size güzel bir görüntü sınırı oluşturmanın birkaç farklı yolunu gösterdik. Bu seçenek, ek CSS kullanmadan yeni bir Divi seçeneğiyle yapabileceğiniz şeylere bakış açısı verir. Sorularınız veya önerileriniz varsa; Aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun! Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun! Bay Aesthetics / Shutterstock.com tarafından Üstün Görüntü
