Divi'nin Yeni Kenar Stili Seçeneklerini Web Sitenizde Nasıl Kullanırsınız (Bölüm 2)

Divi'nin yeni kenarlık seçenekleri, yalnızca Divi'nin yerleşik ayarlarıyla yeni bir web sitesi tasarlamaya bir sürü yeni olasılık ekler. Kenarlık seçenekleriyle yapabileceğiniz bazı şeyleri göstermenize yardımcı olmak için duyuru gönderisinin örneklerini yeniden oluşturuyoruz. Bu yazının ilk bölümünde, 13 örneğin 7'sini ele aldık. Ve bu gönderide, kalan örnekleri adım adım ele alacağız.

Kullanılan her modülün tüm ayarlarını paylaşmayacağız. Sınır sonuçlarını elde etmenize yardımcı olacak ayarlara odaklanmayı tercih edeceğiz. Öğreticiye dalmadan önce adım adım yeniden oluşturacağımız örneklere bir göz atalım.

Bu Yazıda Yeniden Oluşturacağımız Örnekler

Örnek #8

Örnek #9

Örnek #10

Örnek #11

Örnek 12

Örnek 13

Divi'nin Yeni Kenar Stili Seçeneklerini Web Sitenizde Nasıl Kullanırsınız (Bölüm 2)

Youtube Kanalımıza Abone Olun

Örnek #8'in Sınırlarını Yeniden Oluşturun

Sınır Konsepti

Bu örnek, Kenarlık alt kategorisinde sahip olduğunuz her iki seçeneği de kullanır; yuvarlatılmış köşeler ve kenarlık stilleri. Kenarlık ayarları, birbirinden biraz farklı olduğu için, tabloların hepsine birden değil, her birine ayrı ayrı yapılır.

Satır Ayarları

Sütun Yapısı

Mevcut bir bölüme tek sütunlu bir satır ekleyerek başlayın.

Fiyatlandırma Tabloları Modülü ve Tabloları Ekle

Ardından, o satıra bir Fiyatlandırma Tabloları Modülü ekleyin ve tabloları buna ekleyin.

İlk Fiyatlandırma Tablosu

Kenarlık Ayarları

Her fiyatlandırma tablosunun ayrı ayrı sınır ayarlarına ihtiyacı vardır. Bunun nedeni, birbirlerinden biraz farklı olmalarıdır. Soldaki ilk fiyatlandırma tablosunu açın ve aşağıdaki ayarları Border alt kategorisine ekleyin:

• Sol Üst: 6px
• Sol Alt: 6px
• Sağ Üst: 0px
• Sağ Alt: 0px
• Üst Kenar Genişliği: 10px
• Üst Kenar Rengi: #7272ff

Kutu Gölge Ayarları

Ardından Box Shadow alt kategorisini açın ve aşağıdaki ayarları kullanın:

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 2px
• Kutu Gölge Bulanıklığı Gücü: 50px
• Kutu Gölge Yayılma Gücü: 0px
• Gölge Rengi: rgba(0,0,0,0.1)
• Kutu Gölge Konumu: Dış Gölge

İkinci Fiyatlandırma Tablosu

Kenarlık Ayarları

İkinci fiyatlandırma tablosu bunun yerine aşağıdaki ayarlara sahiptir:

• Sol Üst: 6px
• Sol Alt: 6px
• Sağ Üst: 6px
• Sağ Alt: 6px
• Üst Kenar Genişliği: 10px
• Üst Kenar Rengi: #09e1c0

Kutu Gölge Ayarları

İlk fiyatlandırma tablosu için olanla aynı kutu gölgesini kullanın.

Üçüncü Fiyatlandırma Tablosu

Kenarlık Ayarları

Son fiyatlandırma tablosu, Sınır alt kategorisi için aşağıdaki ayarlara ihtiyaç duyacaktır:

• Sol Üst: 0px
• Sol Alt: 0px
• Sağ Üst: 6px
• Sağ Alt: 6px

Kutu Gölge Ayarları

Yine aynı ayarlar Box Shadow alt kategorisi için de geçerlidir.

Örnek #9'un Sınırlarını Yeniden Oluşturun

Sınır Konsepti

Bu sınır konsepti, tüm satırda bir sınır oluşturmanıza olanak tanır. Satır arka planı ve sütun 2 arka plan görüntüsü ile satır arasında biraz boşluk yaratmamıza yardımcı olan kenarlık için aynı rengi kullanıyoruz.

Satır Ayarları

Sütun Yapısı

Bu örnek için, mevcut bir bölüme iki sütunlu bir satır eklemeniz gerekecek.

Arka plan rengi

Ardından, satır ayarlarını açın ve arka plan rengi olarak '#ffffff' ekleyin.

Sütun 2 Arka Plan Resmi

Ardından, o satıra her türlü modülü ekleyebilir veya satırınızda görünmesini istediğiniz sütun arka plan resimlerini seçebilirsiniz.

boyutlandırma

Tasarım sekmesine gidin ve Boyutlandırma alt kategorisine aşağıdaki ayarları ekleyin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

Sınır

Ardından aşağı kaydırın ve satırınıza aşağıdaki kenarlık stilini ekleyin:

• Kenar Genişliği: 20px
• Kenar Rengi: #ffffff
• Kenar Stili: Katı

Kutu Gölge

Son olarak, daha fazla derinlik oluşturmak için biraz kutu gölgesi de ekleyebilirsiniz:

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 2px
• Kutu Gölge Bulanıklığı Gücü: 67px
• Kutu Gölge Yayılma Gücü: 0px
• Gölge Rengi: rgba(0,0,0,0.23)
• Kutu Gölge Konumu: Dış Gölge

Örnek #10'un Sınırlarını Yeniden Oluşturun

Sınır Konsepti

Bir sonraki örnek için, yarı saydam bir tablet oluşturacağız. Bu, degrade bir arka planla birlikte güzel bir sonuç verir.

Bölüm Ayarları

Degrade Arka Plan

Yeni bir standart bölüm ekleyerek başlayın ve buna degrade bir arka plan ekleyin. Bu örnekte, aşağıdaki ayarları kullandık:

• İlk Renk: #ca70ff
• İkinci Renk: #a530ff
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 180deg
• Başlangıç ​​Konumu: %0
• Bitiş Konumu: %100

Satır Ayarları

Sütun Yapısı

Ardından, oluşturduğunuz bölüme tek sütunlu bir satır ekleyin.

Arka plan rengi

Satır ayarlarını açın ve arka plan rengi olarak 'rgba(255,255,255,0.19)' ekleyin.

aralık

Ardından Tasarım sekmesine gidin ve aşağıdaki Özel Dolguyu ekleyin:

• Üst ve Alt: %2
• Sağ ve Sol: %5

Sınır

Aşağı kaydırın, Kenarlık alt kategorisini açın ve ona aşağıdaki ayarları ekleyin:

• Sol Üst: 30 piksel
• Sol Alt: 30px
• Sağ Üst: 30 piksel
• Sağ Alt: 30px
• Kenar Genişliği: 5px
• Kenar Rengi: rgba(255,255,255,0.07)
• Kenar Stili: Katı

Kutu Gölge

Son olarak, satıra aşağıdaki kutu gölgesini ekleyin:

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 13px
• Kutu Gölge Bulanıklığı Gücü: 64px
• Kutu Gölge Yayılma Gücü: -11px
• Gölge Rengi: rgba(26,54,68,0.36)
• Kutu Gölge Konumu: Dış Gölge

Sütuna Video Modülü Ekle

Son olarak, satırınızın sütununa bir Video Modülü ekleyin ve bir video yükleyin veya bir video bağlantısı ekleyin.

Örnek #11'in Sınırlarını Yeniden Oluşturun

Sınır Konsepti

Harika kenarlık ayarlarının bir sonraki örneği, bir Görüntü Modülüne uygulanandır. Kutu gölgelerini ve kenarlıkları birleştirerek resimleriniz için çarpıcı sonuçlar oluşturabilirsiniz ve bu örnek bunu gösteriyor.

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

Sınır

Mevcut bir sütuna bir Görüntü Modülü ekleyin ve görüntüyü ekledikten sonra Tasarım sekmesine geçin. Kenarlık alt kategorisini açın ve üst ve sol tarafa aşağıdaki ayarları ekleyin:

• Kenar Genişliği: 25px
• Kenar Rengi: #333333

Ve sağda ve altta aşağıdaki ayarlar:

• Kenar Genişliği: 25px
• Kenar Rengi: #fcd21d
  

Kutu Gölge

Ardından, aşağıdaki kutu gölgesini de ekleyin:

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü: 0px
• Kutu Gölge Yayılma Gücü: 40px
• Gölge Rengi: #ffffff
• Kutu Gölge Konumu: İç Gölge

Örnek #12'nin Sınırlarını Yeniden Oluşturun

Sınır Konsepti

Aşağıdaki örnek, web sitenizde kullandığınız Blurb Modülleri için daha büyük bir resim oluşturmanıza olanak tanır. Modüller arasında sadece küçük bir fark olsa da, birbirlerinden farklı olmaları için yeterlidir.

Satır Ayarları

Sütun Yapısı

Her iki üç sütunlu iki satır ekleyerek başlayın.

Blurb Modülü Genel Ayarları

aralık

Yapacağımız ilk şey, tüm Blurb Modülleri için geçerli olan tüm ayarları eklemek. Her seçenek için '40px' Özel Dolgusu bu ayarlardan biridir.

kenarlık stili

Ardından, Border alt kategorisine aşağıdaki üst kenarlığı ekleyin:

• Kenar Genişliği: 6px
• Kenar Rengi: #dddddd

Alt kısım aşağıdaki ayarlara ihtiyaç duyacaktır:

• Kenar Genişliği: 4px
• Kenar Rengi: #fcd21d

Son olarak, sol ve sağ tarafa aşağıdaki kenarlık stilini ekleyin:

• Kenar Genişliği: 2px
• Kenar Rengi: #dddddd

Blurb Modülünü Beş Kez Klonla

Tüm genel ayarları bir Blurb Modülüne ekledikten sonra, bu beş kez kopyalayabilir ve kalan sütunlara yerleştirebilirsiniz. Sonraki bölümde, çeşitli yuvarlak köşeleri her bir Blurb Modülüne ayrı ayrı ekleyeceğiz.

İlk Sıra Yuvarlatılmış Köşeler

Sol Blurb Modülü

İlk satırdaki ilk Blurb Modülü aşağıdaki yuvarlatılmış köşelere sahiptir:

• Sol Üst: 60 piksel
• Sol Alt: 0px
• Sağ Üst: 0px
• Sağ Alt: 60px

Orta Bulanıklık Modülü

İkinci Blurb Modülünün yuvarlatılmış köşeleri şunlardır:

• Sol Üst: 0px
• Sol Alt: 60px
• Sağ Üst: 0px
• Sağ Alt: 60px

Sağ Blurb Modülü

İlk satırın son Blurb Modülü aşağıdaki yuvarlatılmış köşelere sahiptir:

• Sol Üst: 0px
• Sol Alt: 60px
• Sağ Üst: 60px
• Sağ Alt: 0px

İkinci Sıra Yuvarlatılmış Köşeler

Sol Blurb Modülü

İkinci satırın sol ve ilk Blurb Modülü, ilk satırdaki sonuncuyla aynı ayarlara sahiptir:

• Sol Üst: 0px
• Sol Alt: 60px
• Sağ Üst: 60px
• Sağ Alt: 0px

Orta Bulanıklık Modülü

Ortadakinin aşağıdaki yuvarlak köşelere ihtiyacı var:

• Sol Üst: 60 piksel
• Sol Alt: 0px
• Sağ Üst: 60 piksel
• Sağ Alt: 0px

Sağ Blurb Modülü

İkinci sıranın son Blurb Modülü, ilk sıradaki ilk Blurb Modülü ile aynı yuvarlatılmış köşelere sahiptir:

• Sol Üst: 60 piksel
• Sol Alt: 0px
• Sağ Üst: 0px
• Sağ Alt: 60px

Örnek 13'ün Sınırlarını Yeniden Oluşturun

Sınır Konsepti

Bu yazının son örneği, resimlerinize bir Polaroid efekti eklemenize yardımcı olur. Bu, örneğin, görüntüleri akılda kalıcı bir şekilde sergilemenin harika bir yoludur. Yine, kenarlık ayarları ve kutu gölgesi ayarlarının bir kombinasyonunu kullanıyoruz.

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

Sınır

Mevcut bir satıra bir Görüntü Modülü ekleyin ve üst, sağ ve sol taraf için aşağıdaki ayarlardan yararlanın:

• Kenar Genişliği: 13px
• Kenar Rengi: #ffffff

Alt biraz farklı:

• Kenar Genişliği: 60px
• Kenar Rengi: #ffffff

Kutu Gölge

Son olarak, aşağıdaki kutu gölgesini ekleyin:

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 23px
• Kutu Gölge Bulanıklığı Gücü: 27px
• Kutu Gölge Yayılma Gücü: 16px
• Gölge Rengi: rgba(0,0,0,0.21)
• Kutu Gölge Konumu: Dış Gölge

Görüntü Modülünü Gerektiği Kadar Kez Klonlayın

Tüm sonucu oluşturmak için, Görüntü Modülünü istediğiniz kadar kopyalayabilir ve farklı sütunlara yerleştirebilirsiniz. Değiştirmeniz gereken tek şey görüntü.

Son düşünceler

Bu, yeni Divi kenarlık seçeneklerini keşfetmenin ikinci bölümüydü. Bu blog gönderisinde yapılan tüm örnekler Divi'nin yerleşik ayarlarının bir parçasıdır ve herhangi bir ek CSS kodu gerektirmez. Eğer sorunuz varsa; Onları aşağıdaki yorum bölümünde bıraktığınızdan emin olun!

Öne Çıkan Görsel: estherpoon / Shutterstock.com