Divi'nin Yeni Kenar Stili Seçeneklerini Web Sitenizde Nasıl Kullanabilirsiniz (1. Bölüm)

Divi'nin yeni kenarlık stili seçenekleri, en son güncellemelerden birinin parçası. Duyuru blog gönderisinde, herhangi bir ek CSS kullanmak zorunda kalmadan bu yeni seçeneklerle elde edebileceğiniz harika tasarımlar paylaştık. Muhtemelen bu tasarımlardan bazılarını beğenmişsinizdir ve bir sonraki web siteniz için bu sınırları nasıl yapacağınızı öğrenmek istiyorsunuzdur. Bu yüzden size tüm kenarlık seçeneklerini tam olarak nasıl yeniden oluşturabileceğinizi göstereceğiz.

Bu örneklerde kullanılan modüllerin her birinin belirli tasarım seçeneklerini size göstermek yerine, bu tasarımların çalışması için hangi sınır ayarlarının gerekli olduğuna odaklanacağız. Bundan sonra, modülleri ekleyip ihtiyaçlarınıza göre değiştirebileceksiniz.

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

Örnek 1

Örnek #2

Örnek 3

Örnek 4

Örnek #5

Örnek #6

Örnek #7

Divi'nin Yeni Kenar Stili Seçeneklerini Web Sitenizde Nasıl Kullanabilirsiniz (1. Bölüm)

Youtube Kanalımıza Abone Olun

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

Sınır Konsepti

Yukarıdaki baskı ekranında görebileceğiniz kenarlık ayarları, ilk bakışta farklı modüllere eklenmiş gibi görünse de, bir sıranın parçasıdır. Bu tür bir sonucu elde etmek için oluk genişliği ve sıra aralığı vazgeçilmezdir.

Satır Ayarları

Satır Sütun Yapısı

Yapmanız gereken ilk şey, mevcut bir bölüme yeni bir satır eklemek. Bu satır için aşağıdaki sütun yapısını seçin:

Satır Arka Plan Rengi

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

Sütun 2 Arka Plan Renkleri

Aynı sekmeyi aşağı kaydırın ve ikinci sütun için arka plan rengi olarak '#09e1c0' kullanın.

Satır Boyutlandırma

Ardından Tasarım sekmesine gidin ve Boyutlandırma alt kategorisi için aşağıdaki ayarları kullanın:

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

Satır Aralığı

Ardından, Aralık alt kategorisini açın ve aşağıdaki ayarları kullanın:

• Üst, Sağ, Alt ve Sol Dolgu: 0px
• Sütun 1 ve 2 Üst ve Alt Dolgu: 60px
• Sütun 1 ve 2 Sağ ve Sol Dolgu: 40px

Satır Kenarlığı

Kenarlık alt kategorisindeki tüm köşelerinize '16px' ekleyerek devam edin.

Satır Kutusu Gölgesi

Son olarak, Box Shadow alt kategorisine aşağıdaki ayarları ekleyin:

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 10px
• Kutu Gölge Bulanıklığı Gücü: 60px
• Kutu Gölge Yayılma Gücü: 0px
• Gölge Rengi: rgba(71,74,182,0.12)
• Kutu Gölge Konumu: Dış Gölge

Sütunlara Modül Ekle

Artık sütunlar içerisinde kullanmak istediğiniz modüllere göre bunları ekliyor ve tasarım ayarlarını ihtiyaçlarınıza göre değiştiriyorsunuz.

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

Sınır Konsepti

İkinci örnekte, telefon ve tablet efekti oluşturmak için iki Görüntü Modülü kullanıyoruz. Aynı anda hem kenarlık hem de kutu gölgesi kullanıyoruz. Yeni kenarlık ayarlarının kullanılması, maket dosyalarını kullanmak zorunda kalmadan 'mockup' efektini oluşturmayı kolaylaştıracaktır.

Mobil Görüntü Modülü

Tercih Edilen Görüntü Boyutları

Baskı ekranınız için tercih edilen resim boyutları bu durumda genişlik için '374px' ve yükseklik için '668px'dir.

boyutlandırma

Görüntü Modülünü ve görüntüyü ekledikten sonra Tasarım sekmesine gidin ve Boyutlandırma alt kategorisindeki Genişliğe '251px' ekleyin.

Sınır

Ardından, Border alt kategorisini açın ve tüm köşelere '30px' ekleyin.

Devam ederek, üst ve alt kenarlık stili için aşağıdaki ayarları kullanın:

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

Ve sağ ve sol kenarlık stili için aşağıdaki ayarlar:

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

Kutu Gölge

Son olarak, Görüntü Modülü için aşağıdaki kutu gölgesini kullanın:

• 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ü: 4px
• Gölge Rengi: rgba(0,0,0,0.56)
• Kutu Gölge Konumu: Dış Gölge

Tablet Görüntü Modülü

Tercih Edilen Görüntü Boyutları

Tablet baskı ekranının tercihen '1024 piksel' genişliğe ve '768 piksel' yüksekliğe ihtiyacı olacaktır.

Sınır

Tıpkı mobil ekran gibi, tablet sürümü de Border alt kategorisindeki tüm köşeler için '30px'e ihtiyaç duyacaktır.

Ardından, üst ve alt kenarlık için aşağıdaki ayarları kullanın:

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

Ve sağ ve sol kenarlık için aşağıdaki ayarlar:

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

Kutu Gölge

Son olarak, mobil sürüm için yaptığınızla aynı kutu gölgesini kullanın:

• 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ü: 4px
• Gölge Rengi: rgba(0,0,0,0.56)
• Kutu Gölge Konumu: Dış Gölge

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

Sınır Konsepti

Bu sonuç bir bütün ve bir satır gibi görünse de aslında 5 farklı satırın birleşimidir. Bu tür bir yapı kullanmak, çeşitli sütun yapılarından yararlanmanıza yardımcı olur. Aynı zamanda, daha büyük resmi oluşturmanıza da olanak tanır.

1. sıra

Sütun Yapısı

Mevcut bir bölüme ekleyeceğiniz ilk sütun için dört sütuna ihtiyacınız olacaktır. Elbette ihtiyaçlarınıza göre başka bir sütun yapısı da seçebilirsiniz; büyük resmi etkilemez.

Arka plan rengi

Ardından, satır arka plan rengi olarak '#f7691d' ekleyin.

aralık

Devam ederek, satırın üst ve alt kenar boşluğuna '0px' ekleyin.

Sınır

Son olarak, satıra aşağıdaki kenarlığı ekleyin. Bu, tüm sonucun ilk satırı olduğundan, aşağıdaki ayarlarla yalnızca bir üst, sağ ve sol kenarlık stiline ihtiyacımız olacak:

• Kenar Genişliği: 16px
• Kenar Rengi: #f9cc98

Doğal olarak, Alt Kenarlık Genişliğinin '0px' olduğundan emin olmalısınız.

2., 3. ve 4. sıra

Sütun Yapıları

İkinci, üçüncü ve dördüncü sıra aynı ayarlara sahiptir. Farklı olan tek şey sütun yapısıdır. Bu yüzden süreci sadece bir kez yaşayacağız. Paylaşmaya çalıştığınız içeriğe bağlı olarak, öğreticinin bu bölümüne aynı satırlardan istediğiniz kadar ekleyebilirsiniz.

Arka plan rengi

Satırların üçünün de arka plan rengi olarak '#f7691d' var.

aralık

Satırın üst ve alt kenar boşluğuna '0px' eklemek önemlidir. Bu, satırlar arasındaki boşluğu kaldırmaya yardımcı olur.

Sınır

Son olarak, üst ve alt kenarlık stillerinin Kenarlık Genişliğinin '0px' olduğundan emin olun.

Ve sağ ve sol kenarlık stilleri aşağıdaki gibidir:

• Kenar Genişliği: 16px
• Kenar Rengi: #f9cc98

5. sıra

Sütun Yapısı

Bu örneğin son satırı aşağıdaki Sütun Yapısına sahiptir:

Arka plan rengi

Yine arka plan rengi olarak '#f7691d' kullanılıyor.

aralık

Son satırın üst ve alt kenar boşluğuna da '0px' ekleyin.

Sınır

Ve son olarak, sol, alt ve sağ kenarlık stilleri aşağıdaki ayarlara ihtiyaç duyacaktır:

• Kenar Genişliği: 16px
• Kenar Rengi: #f9cc98

Yalnızca üst kenarlık stili, Kenarlık Genişliği olarak '0px' değerine ihtiyaç duyacaktır.

Sütunlara Modül Ekle

Bu tasarımın tamamına eklemek istediğiniz içeriğe bağlı olarak, getirdiğiniz içeriğe uygun her satır için farklı sütun yapılarına karar verebilirsiniz. Bundan sonra, modülleri çeşitli sütunlara ekleyin.

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

Sınır Konsepti

Bu örnek, Akordeon Modülünüzdeki akordeon öğelerinin her birine atayabileceğiniz üst kenarlığa odaklanmaktadır. Üst kenarlığı akordeon öğelerinin her birine ayrı ayrı atamanız gerekecek, bu da onun için kullanılan renklerle oynamanıza olanak tanır.

Satır Ayarları

Sütun Yapısı

Öncelikle mevcut bölümünüze tek sütunlu bir satır ekleyin.

Akordeon Modülü Ekle

Ardından, buna bir Akordeon Modülü ekleyin. Bu akordeona web sitenizde ihtiyaç duyduğunuz kadar ürün ekleyin.

Her Akordeon Öğesine Ayrı Ayrı Üst Kenarlık ve Aralık Ekleyin

Tüm akordeon öğelerinizi ekledikten sonra, her Akordeon Öğesinin Aralık alt kategorisine aşağıdaki ayarları eklemeniz gerekir:

• Alt Kenar Boşluğu: 0px
• Üst Dolgu: 30 piksel
• Alt Dolgu: 30px
• Sol Dolgu: 0px

Ardından, öğelerin her birine de bir üst kenarlık stili eklemeniz gerekecek:

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

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

Sınır Konsepti

Yeni kenarlık seçenekleri, yalnızca satırlar veya modüllerle değil, bölümlerle de denemeler yapmanıza olanak tanır. Yukarıdaki örnek bunun kanıtıdır. Bölüm kenarlıklarını eşleştirmek için Blurb Modüllerine ince kenarlıklar da ekledik.

Bölüm Ayarları

Arka Plan Ekle

Yeni bir standart bölüm ekledikten sonra, ihtiyacınızın arka planını ekleyin. Bu, tek renk, degrade arka plan rengi veya dokulu bir arka planın bir renk veya degrade renk kaplamasıyla birleşimi olabilir.

aralık

Ardından, bölümün Tasarım sekmesine gidin ve Aralık alt kategorisine aşağıdaki ayarları ekleyin:

• Üst, Alt ve Sol Kenar Boşluğu: %5
• Üst Dolgu: 60px (Masaüstü ve Tablet), %12 (Telefon)
• Sağ Doldurma: %5 (Masaüstü), 0px (Tablet ve Telefon)
• Alt Dolgu: 60px (Masaüstü ve Tablet), %12 (Telefon)
• Sol Dolgu: %6 (Telefon)

Sınır

Son olarak, Border alt kategorisine aşağıdaki köşeleri ekleyin:

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

Bulanıklık Ayarları

Arka plan rengi

Blurb Modülünü eklerken yapmanız gereken ilk şey arka plan rengi olarak '#ffffff' eklemektir.

boyutlandırma

Ardından Tasarım sekmesine gidin ve İçerik Genişliği'ne '550 piksel' ekleyin.

aralık

Ardından, Aralık alt kategorisine aşağıdaki Özel Dolguyu ekleyin:

• Üst ve Alt: 40 piksel
• Sağ ve Sol: 20px

Sınır

Blurb Modülünün kenarlığı her köşe için '6px'e ihtiyaç duyar.

Kutu Gölge

Ve son olarak, aşağıdaki Kutu Gölgesinden yararlanın:

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

Diğer Yan Kesit Kenarlığı

Bölüm kenarlığının bölümünüzün diğer tarafında uygulanmasını istiyorsanız, yuvarlatılmış köşeleri değiştirmeniz yeterlidir. Sol üst ve sol alt köşe için '240px' yerine '0px' elde edeceksiniz. Sağ üst ve sağ alt köşe için aynı sayılar; '0px' yerine '240px'e ihtiyaçları olacak.

Diğer Yan Bölüm Aralığı

Diğer tarafta kenarlık bulunan bölümün aralığı da biraz farklıdır:

• Üst, Alt ve Sağ Marj: %5
• Üst Dolgu: 60px (Masaüstü ve Tablet), %12 (Telefon)
• Sağ Doldurma: 0px (Masaüstü ve Tablet), %6 (Telefon)
• Alt Dolgu: 60px (Masaüstü ve Tablet), %12 (Telefon)
• Sol Dolgu: %5 (Masaüstü), 0px (Tablet ve Telefon)

Blurb Modülünü Klonla ve Tüm Sütunlara Yerleştir

Bölüm ve Bulanıklık Modülü oluşturmayı bitirdikten sonra, bölüm içindeki satır için sahip olduğunuz sütun yapısına bağlı olarak istediğiniz kadar kopyalayabilirsiniz.

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

Sınır Konsepti

Aşağıdaki örnek, normal bir bölüm yerine bir özel bölümü kullanmaktadır. Bu, sonucun tamamına kenarlık eklemek yerine, Blurb Modüllerini içeren satıra belirli bir kenarlık ekleyebilmesini sağlar. Sol taraftaki Metin Modülleri, Blurb Modüllerinin bulunduğu satırın parçası olmayan bir sütuna yerleştirilir.

Özel Bölüm Yapısı

Bu özel örnek için seçtiğimiz yapı şudur:

Satır Ayarları

Sütun Yapısı

Bulanıklık Modüllerini içeren satırda iki sütun bulunur.

boyutlandırma

Satırı ekledikten sonra Tasarım sekmesine gidin ve Özel Cilt Payı Genişliği seçeneğini etkinleştirin. Ardından, Oluk Genişliğine '1' ekleyin.

aralık

Devam ederek, tüm seçenekler için Özel Doldurmanın '0px' olduğundan emin olun.

Sınır

Ardından, Border alt kategorisindeki tüm köşelere '10px' ekleyin.

Kutu Gölge

Son olarak, aşağıdaki Kutu Gölgesini de kullanın:

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 10px
• Kutu Gölge Bulanıklığı Gücü: 60px
• Kutu Gölge Yayılma Gücü: 0px
• Gölge Rengi: rgba(71,74,182,0.12)
• Kutu Gölge Konumu: Dış Gölge

Bulanıklık Modülü

Arka plan rengi

Satır ayarları tamamlandıktan sonra sütunlardan birine Blurb Modülü eklemeye başlayabilirsiniz. Tanıtım yazısı modülünün arka plan rengi olarak '#ffffff' olması gerekir.

boyutlandırma

Ardından, Tasarım sekmesindeki Boyutlandırma alt kategorisine aşağıdaki ayarları uygulayın:

• Görüntü Genişliği: 64px
• İçerik Genişliği: 1100 piksel

aralık

Aşağı kaydırın, Aralık alt kategorisini açın ve tüm Özel Dolgu seçeneklerine '30px' ekleyin.

Sol Kenarlık

Son olarak, '#09e1c0' renk koduyla '8px'lik bir sol kenarlık ekleyin.

Blurb Modülünü Klonla ve Tüm Sütunlara Yerleştir

Blurb Module'ü tamamladıktan sonra, onu istediğiniz kadar klonlayabilir ve her iki sütuna da yerleştirebilirsiniz. Yapılması gereken tek şey, her bir Blurb Modülünü benzersiz kılmak için içeriği ve sol kenarlık rengini değiştirmek.

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

Sınır Konsepti

Bu gönderideki son örnek için, satır içindeki bölüm, satır ve Metin Modülü için bir kenarlık kombinasyonumuz var. Bu, tüm kenarlık seçeneklerini belirli bir bölümde birleştirdiğinizde ne tür sonuçlar alabileceğinizi mükemmel bir şekilde gösterir.

Bölüm Ayarları

aralık

Yeni bir standart bölüm ekleyerek başlayın ve buna aşağıdaki Özel Dolguyu ekleyin:

• Üst ve Alt: 240 piksel
• Sağ ve Sol: 0px

Sınır

Ardından, Kenarlık alt kategorisini açın ve aşağıdaki ayarlardan yararlanın:

• Kenar Genişliği: 26px
• Kenar Rengi:#747d88
• Kenar Stili: Katı

Kutu Gölge

Son olarak, bölüme bir kutu gölgesi de ekleyin:

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

Satır Ayarları

Sütun Yapısı

Bölüm ayarlarınız yapıldıktan sonra, ona tek sütunlu bir satır ekleyebilirsiniz.

Sınır

Ardından, bu satırın ayarlarını açın ve sol ve sağ tarafa aşağıdaki kenarlık stilini ekleyin:

• Kenar Genişliği: 16px
• Kenar Rengi: #f9cc98
• Bordür Stili: Çift

Metin Modülü

boyutlandırma

Şimdi, tek sütunlu satıra bir Metin Modülü ekleyin ve Boyutlandırma alt kategorisi için aşağıdaki ayarları kullanın:

• Genişlik: %90
• Modül Hizalaması: Merkez

aralık

Ardından, Aralık alt kategorisini açın ve tüm Özel Dolgu seçeneklerine '40 piksel' ekleyin.

Sınır

Son olarak, aşağıdaki ayarlarla tüm kenarlara hafif şeffaf bir kenarlık ekleyin:

• Kenar Genişliği: 16px
• Kenar Rengi: rgba(145,145,145,0.27)
• Kenar Stili: Katı

Son düşünceler

Yeni Divi bordür seçenekleri, web sitelerinizi tasarlarken size yepyeni bir deneyim sunuyor. Size nasıl yeniden oluşturacağınızı ve anlayacağınızı gösterdiğimiz örnekler, sizinle sınır duyurusu blog yazılarında paylaştığımız örneklerle aynıdır. Bu gönderinin ikinci bölümünde, kalan örnekleri nasıl oluşturacağınızı göstereceğiz. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!

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