Web Sitenizde Yeni Bir Divi Sınır Tarzı Seçeneği Nasıl Kullanılır (Bölüm 2)
Divi’nin yeni sınır seçeneği, yalnızca varsayılan Divi ayarlarıyla yeni bir web sitesi tasarlamak için birçok yeni olasılık ekledi. Sınır seçeneğiyle yapabileceğiniz birkaç şeyi açıklamanıza yardımcı olmak için, bir duyuru yazısı örneği oluştururuz. Bu yazının ilk bölümünde 13 örneğin 7’sini ele aldık. Ve bu yazıda, 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ına ulaşmanıza yardımcı olacak ortamlara daha fazla odaklanacağız. Öğreticiye girmeden önce adım adım bir adım atacağımız örneğe bakalım.
Bu gönderide yeniden yaratacağımız örnekler #8 örnek
Sol üst: 6px
Sol alt: 6px üst: 0px
Sağ alt: 0px
Üst sınır genişliği: 10 piksel
Üst sınır rengi: #7272ff
Kutunun gölgesini ayarla, Box Shadow alt kategorisini açın ve aşağıdaki ayarları kullanın: Yatay konum gölge kutusu: 0px
Dikey Konum Gölge Kutusu: 2px
Bulanık Güç Gölgesi Kutusu: 50px
Gölge kutularının dağılımının gücü: 0px
Gölge Rengi: RGBA (0.0,0,0.1)
Kutu Gölgesi Pozisyonu: Dış Gölge
İkinci fiyat tablosu, ikinci fiyat sınırının, aksine, aşağıdaki ayarlara sahip ayarlar: Sol üst: 6px
Sol alt: 6px
Sağ üst: 6px
Sağ alt: 6px
Üst sınır genişliği: 10 piksel
Üst sınır rengi: #09E1C0
Gölge kutusunu ayarlayın İlk fiyat tablosu için gölge ile aynı kutu gölgesini kullanın. Fiyat Tablo Üçüncü Sınır Ayarları Son fiyat tablosu, sınır alt kategorileri için aşağıdaki ayarları gerektirir: Sol üst: 0px
Sol alt: 0px
Sağ üst: 6px
Sağ alt: 6px
Kutunun gölgesini bir kez daha ayarlayarak, Aynı ayar kutusu Gölge Alt Kategorisi için geçerlidir. Örnek #9’un sınırını yeniden yapın Sınır Kavramları Bu sınır konsepti, hat boyunca sınırlar yapmanıza olanak tanır. Aynı rengi sıranın arka planı ve Sınır ve Sütun 2 ve Satırın arka plan görüntüleri arasındaki boşluğu yapmamıza yardımcı olan sınır için kullanıyoruz. Sütun Yapısı Satırını Ayarlama Bu örnek için, mevcut bölüme iki sütun eklemeniz gerekir. Arka plan rengi daha sonra, satır ayarlarını açın ve arka plan rengi olarak ‘#ffffff’ ekleyin. Sütun Arka Plan Görüntü 2 Ardından, o satıra her türlü modül ekleyebilir veya satırınızda görüntülemek istediğiniz sütunun arka plan görüntüsünü seçebilirsiniz. Yapışkan tasarım sekmesine geçer ve aşağıdaki ayarları boyutun alt kategorisine ekleyin: Özel Talang genişliğini kullanın: Evet Talang genişliği: 1
Yüksek sütunu eşitleyin: evet
Sınır Daha sonra aşağı kaydırın ve satırınıza aşağıdaki sınır kuvvetini ekleyin:
Sınır Genişliği: 20 piksel Sınır rengi: #ffffff
Sınır Gücü: Katı
Son kutu gölgesinde, daha derin hale getirmek için bazı gölge kutuları da ekleyebilirsiniz:
Yatay konum gölge kutusu: 0px Dikey Konum Gölge Kutusu: 2px
Bulanık Güç Gölgesi Kutusu: 67px
Gölge kutularının dağılımının gücü: 0px
Gölge Rengi: RGBA (0.0,0,0.23)
Kutu Gölgesi Pozisyonu: Dış Gölge
10 örnek #10 sınırını yeniden yapın
Sınır konsepti bir sonraki örnek için, yarım saygın tablet yapacağız. Bu, gradyanın arka planı ile bir kombinasyon halinde, güzel sonuçlar verir. Gradyan’ın arka plan kısmını ayarlamak Yeni bir standart parça ekleyerek ve gradyanın arka planını ekleyerek. Bu örnekte, aşağıdaki ayarları kullandık: İlk renk: #ca70ff Renk İkinci: #A530FF
Gradyan Türü: Doğrusal
Gradyan yönü: 180 derece
Başlangıç pozisyonu:% 0
Son pozisyon:% 100
Sütun yapısı satırını ayarla, yaptığınız parçaya bir sütunla satırı ekleyin.
Arka Plan Rengi Satır ayarlarını açın ve arka plan rengi olarak ‘RGBA (255.255.255.0.19)’ ekleyin. Mesafe O zaman, tasarım sekmesine devam edin ve aşağıdaki özel dolguyu ekleyin: Üst ve Alt:% 2 Sağ ve sol:% 5
Sınır aşağı kaydırın, sınır alt kategorisini açın ve aşağıdaki düzenlemeleri ekleyin:
Sol üst: 30 piksel
Sol alt: 30 piksel
Sağ üst: 30 piksel
Sağ alt: 30 piksel
Sınır Genişliği: 5 piksel
Sınır rengi: RGBA (255,255,255.0.07) Sınır Kuvvetleri: Katı
Son kutu gölgesi, kutunun aşağıdaki gölgesini satıra ekleyin:
Yatay konum gölge kutusu: 0px
Dikey Konum Gölge Kutusu: 13px
Kutunun gölgesinin dağılımının gücü: -11px
Gölge Renk: RGBA (26,54,68.0.36)
Kutu Gölgesi Pozisyonu: Dış Gölge
Son sütuna bir video modülü ekleyin, satır sütununuza bir video modülü ekleyin ve videolar yükleyin veya video bağlantısını girin. 11 numaranın sınırını yeniden yapın
Bir sonraki şaşırtıcı sınır ayarının sınır konsepti örnekleri görüntü modülüne uygulanır. Kutunun gölgesini ve sınırı birleştirerek görüntünüz için inanılmaz sonuçlar verebilirsiniz ve bu örnek bunu gösterir. Ayarlar Görüntü modülü sınırları görüntü modülünü mevcut sütuna ekleyin ve bir görüntü ekledikten sonra tasarım sekmesine devam edin. Sınır alt kategorisini açın ve aşağıdaki ayarları üst ve sol taraflara ekleyin:
Sınır Genişliği: 25px Sınır rengi: #333333 Ve sağ ve altta aşağıdaki ayarlar:
Sınır Genişliği: 25px
Sınır rengi: #FCD21D O zaman kutunun gölgesi aşağıdaki kutu gölgesini de ekleyin:
Yatay konum gölge kutusu: 0px
Dikey Konum Gölge Kutusu: 0px Bulanık Güç Gölgesi Kutusu: 0px
Gölge kutularının dağılımının gücü: 40 piksel
Gölge rengi: #ffffff
Gölge Kutusunun Konumu: İçerideki Gölge
12 #örnek sınırını yeniden yapın
Aşağıdaki sınır konsepti, web sitenizde kullandığınız bulanıklık modülü için daha büyük bir resim yapmanızı sağlar. Modül arasında sadece küçük bir fark olmasına rağmen, birbirleriyle öne çıkmasını sağlamak yeterlidir.
Yapı Ayarları Sütunun yapısı iki üç sütunla iki sıra ekleyerek başlar. Bulanık modül mesafesinin genel düzenlemesi, yapacağımız ilk şey tüm bulanık modüllere geçerli tüm ayarları eklemektir. Her seçenek için özel ’40 piksel’ dolgu bu ayarlardan biridir. Sınır kuvveti, sınır alt kategorisine aşağıdaki üst sınırı ekleyin: Sınır Genişliği: 6px
Sınır rengi: #ddddd Altta aşağıdaki ayarları gerektirecektir: Sınır Genişliği: 4px
Sınır rengi: #FCD21D
Son olarak, sol ve sağ taraflara aşağıdaki sınır kuvvetini ekleyin: Sınır Genişliği: 2 piksel
Sınır rengi: #ddddd
Blurb Klon Modülü Tüm Genel Ayarları Blurb modülüne ekledikten sonra, bu beş kez klonlayabilir ve kalan sütuna yerleştirebilirsiniz. Bir sonraki bölümde, her bir bulanıklık modülüne tek tek çeşitli yuvarlak açılar ekleyeceğiz. Yuvarlak açı Sol bulanıklık modülünün ilk sırası ilk sıradaki ilk bulanıklık modülü aşağıdaki yuvarlak açıya sahiptir: Sol üst: 60 piksel
Sol alt: 0px
Sağ üst: 0px Sağ alt: 60 piksel
Orta Bulanıklık Modülü Bulanık modülün ikinci yuvarlak köşesi aşağıdaki gibidir:
Sol üst: 0px
Sol alt: 60 piksel
Sağ üst: 0px Sağ alt: 60 piksel
Sağ Blurb Modül Birinci sıradaki son bulanık modül aşağıdaki yuvarlak açıya sahiptir:
Sol üst: 0px
Sol alt: 60 piksel
Sağ üst: 60 piksel Sağ alt: 0px
Sol bulanıklık modülünün ikinci sırasının yuvarlak açısı Sol ve ikinci sıradan birinci bulanıklık modülü, ilk sıradaki son ile aynı ayarlara sahiptir:
Sol üst: 0px
Sol alt: 60 piksel
Sağ üst: 60 piksel Sağ alt: 0px
Aşağıdaki yuvarlak açıya ihtiyaç duyan orta bulanıklık modülü:
Sol üst: 60 piksel alt: 0px
Sağ üst: 60 piksel
Sağ alt: 0px Sağ bulanıklık modülü Bulanıklık, ikinci sıranın son modülü, ilk sıradaki ilk bulanıklıkla aynı yuvarlak açıya sahiptir:
Sol üst: 60 piksel
Sol alt: 0px
Sağ üst: 0px
Sağ alt: 60 piksel Örnek #13 sınırını yeniden yapın
Sınır Kavramı Bu yazının son örneği, görüntünüze Polaroid efekti eklemenize yardımcı olur. Bu, örneğin, görüntüleri hatırlaması kolay bir şekilde görüntülemenin iyi bir yolu. Bir kez daha sınır ayarları ve kutu gölge ayarlarının bir kombinasyonunu kullanıyoruz. Ayarlar Görüntü modülü sınırları Görüntü modülünü mevcut satıra ekleyin ve üst, sağ ve sol taraflar için aşağıdaki ayarları kullanın:
Sınır Genişliği: 13px
Sınır rengi: #ffffff
Alt biraz farklı: Sınırlı genişlik: 60 piksel Sınır rengi: #ffffff
Son kutu gölgesi, aşağıdaki kutu gölgesini ekleyin:
Yatay konum gölge kutusu: 0px Dikey Konum Gölge Kutusu: 23px
Bulanık Güç Gölgesi Kutusu: 27px
Gölge kutularının dağılımının gücü: 16px Gölge Renk: RGBA (0.0,0,0.21)
Kutu Gölgesi Pozisyonu: Dış Gölge
