Web Sitenizde Yeni Bir Divi Sınır Tarzı Seçeneği Nasıl Kullanılır (Bölüm 1)
Divi’nin yeni sınır tarzı seçeneği en son güncellemelerin bir parçasıdır. Duyuru blog yazısında, herhangi bir ek CSS kullanmak zorunda kalmadan bu yeni seçenekle elde edebileceğiniz bazı olağanüstü tasarımları paylaştık. Büyük olasılıkla bu tasarımlardan bazılarını beğenirsiniz ve bir sonraki web siteniz için bu sınırı nasıl oluşturacağınızı öğrenmek istersiniz. Bu yüzden tüm sınır seçeneklerini nasıl yeniden yaratabileceğinizi tam olarak göstereceğiz. Bu örnekte kullanılan her modülün tüm özel tasarım seçeneklerini göstermek yerine, bu tasarım işlevini yapmak için hangi sınırların gerekli olduğuna odaklanmayı tercih ediyoruz. Bundan sonra, bir modül ekleyebilir ve ihtiyaçlarınıza göre değiştirebilirsiniz.
Bu yazıda yeniden yaratacağımız örnekler Örnek 1
Talang genişliği: 1
Yüksek sütunu eşitleyin: evet
Bir sonraki satır alanı, boşluk alt kategorisini açın ve aşağıdaki ayarları kullanın: Üst, sağ, alt ve sol dolgu: 0px
Sütunlar 1 ve 2 Üst ve Alt Dolgu: 60px
Sütun 1 ve 2 Dolgu sağ ve sol: 40 piksel
Sıra kenarlığı, sınır alt kategorisindeki tüm açılarınıza ’16px’ ekleyerek devam eder. Son satır kutusu gölgesi, Box Shadow Alt Kategorisine aşağıdaki ayarları ekleyin: Yatay konum gölge kutusu: 0px
Dikey Konum Gölge Kutusu: 10px
Bulanık Güç Gölgesi Kutusu: 60 PX
Gölge kutularının dağılımının gücü: 0px
Gölge Renk: RGBA (71,74,182.0.12)
Kutu Gölgesi Pozisyonu: Dış Gölge
Modülü geçerli sütuna ekleyin, sütunda kullanmak istediğiniz modüle bağlı olarak, eklersiniz ve tasarım ayarlarını ihtiyaçlarınıza göre değiştirirsiniz. Yeni #2’nin sınırını yeniden yapın Sınır konsepti İkinci örnek için, mobil ve tablet efekti oluşturmak için iki görüntü modülü kullanıyoruz. Kutunun sınırlarını ve gölgelerini aynı anda kullanıyoruz. Yeni bir sınır ayarı kullanmak, bir Mockup dosyası kullanmak zorunda kalmadan bir ‘Mockup’ efekti oluşturmayı kolaylaştıracaktır. Hücresel Görüntü Modülü Boyut Boyutu Boyut Boyutları Bu durumda yazdırma ekranınız için tercih edilen boyutlar genişlik için ‘374px’ ve yükseklik için ‘668px’. Yapıştırıcılar Görüntü ve görüntü modülünü ekledikten sonra, tasarım sekmesini açın ve boyut alt kategorisindeki genişliğe ‘251px’ ekleyin. Daha sonra sınır alt kategorisini açın ve tüm açılara ’30px’ ekleyin. Ardından, üst ve alt sınırlar için aşağıdaki ayarları kullanın: Sınırlı genişlik: 50 piksel Sınır rengi: #333333
Ve sağ ve sol sınır kuvveti için aşağıdaki ayarlar:
Sınır Genişliği: 10 piksel Sınır rengi: #333333
Son kutu gölgesi, görüntü modülü için aşağıdaki kutu gölgesini kullanın:
Yatay konum gölge kutusu: 0px Dikey Konum Gölge Kutusu: 0px
Bulanık Güç Gölgesi Kutusu: 0px
Kutunun gölgesinin dağılımının gücü: 4px
Gölge Rengi: RGBA (0.0,0,0,56)
Kutu Gölgesi Pozisyonu: Dış Gölge
Tablet Görüntü Modülü Boyut Boyut Boyut Baskı Ekranı Seçimi, tercihen ‘1024px’ genişliği ve ‘768px’ yüksekliği gerektirir. Cep telefonu ekranıyla aynı sınırda olan tablet sürümü, sınır alt kategorisindeki tüm açılar için ’30px’ gerektirir.
Ardından, üst ve alt sınırlar için aşağıdaki ayarları kullanın: Sınır Genişliği: 15px Sınır rengi: #333333
Ve sağ ve sol sınır için aşağıdaki ayarlar:
Sınırlı genişlik: 50 piksel Sınır rengi: #333333
Son Kutu Gölgesi, Hücresel Sürüm için Yaptığınız gibi Aynı Kutu Gölgesini Kullan: Yatay Konum Gölge Kutusu: 0px
Dikey Konum Gölge Kutusu: 0px Bulanık Güç Gölgesi Kutusu: 0px
Kutunun gölgesinin dağılımının gücü: 4px
Gölge Rengi: RGBA (0.0,0,0,56)
Kutu Gölgesi Pozisyonu: Dış Gölge
Örnek #3’ün sınırını yeniden yapın
Sınır konsepti Bu sonuç bir birime ve bir satıra benzese de, aslında bu 5 farklı çizginin bir kombinasyonudur. Bu tür bir yapı kullanmak, çeşitli sütun yapılarından yararlanmanıza yardımcı olur. Aynı zamanda, bu aynı zamanda daha büyük görüntüler yapmanıza da izin verir. Satır 1 Sütun Yapısı Mevcut bölüme eklediğiniz ilk sütun için dört sütuna ihtiyacınız vardır. Tabii ki, ihtiyaçlarınıza bağlı olarak diğer sütun yapılarını da seçebilirsiniz; Daha büyük bir resmi etkilemez.
Arka plan rengi daha sonra, satırın arka plan rengi olarak ‘#f7691d’ ekleyin. Sonraki mesafe, satırın üst ve alt kenarına ‘0px’ ekleyin. Son sınır, aşağıdaki sınırı çizgiye ekleyin. Bu, genel sonuçların ilk satırı olduğundan, aşağıdaki ayarlarla yalnızca üst, sağ ve sol sınırlara ihtiyacımız var: Sınır Genişliği: 16px Sınır rengi: #f9cc98 Doğal olarak, alt sınır genişliğinin ‘0px’ olduğundan emin olmalısınız.
2, 3 & 4 Satırlar ikinci, üçüncü ve dördüncü sıra sütun yapıları aynı ayarlara sahiptir. Tek farklı ş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, bu öğretici bölümüne mümkün olduğunca aynı satır ekleyebilirsiniz. Üç satırın arka plan rengi arka plan rengi olarak ‘#f7691d’ bulunur.
Satırların üst ve alt kenarlarına ‘0px’ eklemek için önemli mesafe. Bu, çizgiler arasındaki boşluğu ortadan kaldırmaya yardımcı olur. Son sınırda, üst ve alt sınır kuvvetinin ‘0px’ sınır genişliğine sahip olduğundan emin olun. Ve sağ ve sol sınır kuvvetinin aşağıdaki gibidir:
Sınır Genişliği: 16px Sınır rengi: #f9cc98 Satır 5 Bu örneğin son satır sütun yapısı aşağıdaki sütun yapısına sahiptir: Arka plan rengi bir kez daha, ‘#f7691d’ arka plan rengi olarak kullanılır.
Mesafe Son sıradan üst ve alt kenar boşluklarına ‘0px’ ekleyin.
Sınır ve son olarak, sol, alt ve sağ sınır kuvveti aşağıdaki ayarları gerektirecektir: Sınır Genişliği: 16px Sınır rengi: #f9cc98 Sadece üst sınır kuvveti, sınırın genişliği olarak ‘0px’ gerektirir. Modülü sütuna ekleyin Bu tasarımın tümüne eklemek istediğiniz içeriğe bağlı olarak, taşıdığınız içeriğe uyacak şekilde her satır için farklı sütun yapısını kırabilirsiniz. Bundan sonra, çeşitli sütunlara modül ekleyin. 4 Örnek #4 sınırını yeniden yapın
Bu örneğin sınır konsepti, modülünüzdeki Cordon öğelerinin her biri için ayarlayabileceğiniz üst sınıra odaklanır. Accordshell’in her bir öğesi için üst sınırı tek tek ayarlamalısınız, bu da bunun için kullanılan renklerle oynamanıza izin verir. Sütun yapısı satırını ayarlayın Önce, mevcut bölüme bir sütunlu bir satır ekleyin. Accordeon modülünü ekleyin, ardından Accordeon modülünü ekleyin. Web sitenizde ihtiyacınız olan bu Chordeon’a çok fazla öğe ekleyin. Her Accordeon öğesine Üst Limit ve Alanı Ekleyin Tüm koordinasyon öğelerini ekledikten sonra, aşağıdaki ayarları her bir Chordeon öğesinin boşluk alt kategorisine eklemeniz gerekir:
Alt kenar boşluğu: 0px Üst dolgu: 30px
Dolgu Alt: 30 piksel
Sol dolgu: 0px Ardından, her öğeye üst sınır kuvvetini de eklemeniz gerekir:Sınır Genişliği: 6px
Sınır rengi: #000000
Örnek #5 sınırını yeniden yapın
Yeni Sınır Seçeneği Sınır Kavramı, sadece hatlar veya modüllerle değil, aynı zamanda bölümlerle de denemenizi sağlar. Yukarıdaki örnek kanıttır. Parçanın sınırına uymak için, bulanıklık modülüne düzgün bir sınır ekleriz. Arka plan bölümünü ayarlayın Yeni bir standart bölüm ekledikten sonra, ihtiyaçlarınızın arka planını ekleyin. Bu bir renk, gradyanın arka plan rengi veya bir renk veya gradyan rengi ile dokulu arka plan kombinasyonu olabilir. Mesafe O zaman, bölümün tasarım sekmesine devam edin ve uzay alt kategorisine aşağıdaki ayarları ekleyin: Üst, alt ve sol kenar boşluğu:% 5
Üst Pilding: 60 piksel (masaüstü ve tablet),% 12 (cep telefonu)
Sağ dolgu:% 5 (masaüstü), 0px (tablet ve mobil) dolgu aşağıda: 60px (masaüstü ve tablet),% 12 (cep telefonu) Sol dolgu:% 6 (telefon) Son sınır, sınır alt kategorisine aşağıdaki açıyı ekleyin:
Sol üst: 240 piksel
Sol alt: 240 piksel
Sağ üst: 0px
Sağ alt: 0px
Blurb ayarları Arka plan rengi Bir bulanıklık modülü eklerken, yapmanız gereken ilk şey arka plan rengi olarak ‘#ffffff’ eklemektir. Yapıştırıcı daha sonra tasarım sekmesine geçin ve içerik genişliğine ‘550px’ ekleyin.
Sonraki mesafe, aralık alt kategorisine aşağıdaki özel dolguyu ekleyin:
Üst ve Alt: 40 piksel
Sağ ve sol: 20px
Bulanık modül sınırlarının sınırlanması, her köşe için ‘6px’ gerektirir. Kutunun gölgesi ve son olarak, aşağıdaki kutu gölgesini kullanın: Yatay konum gölge kutusu: 0px Dikey Konum Gölge Kutusu: 24 piksel
Koşu Güç Şişesi Gölgesi: 28 Piksel
Kutunun gölgesinin dağılımının gücü: -16px Gölge Rengi: RGBA (0.0,0,0.24) Kutu Gölgesi Pozisyonu: Dış Gölge
Diğer tarafın sınırı, sınırın parçanızın diğer tarafına uygulanmasını istiyorsanız, yuvarlak açıyı değiştirebilirsiniz. Sol üst ve alt köşeler için ‘240 piksel’ olmak yerine ‘0px’ olacak. Sağ üst ve alt köşe için aynı miktar; ‘0px’ yerine ‘240px’e ihtiyaç duyacaklar.
Diğer tarafta sınır olan parçanın diğer tarafının mesafesi de biraz farklıdır:
Üst, alt ve sağ kenar boşluğu:% 5
Üst Pilding: 60 piksel (masaüstü ve tablet),% 12 (cep telefonu)
Sağ dolgu: 0px (masaüstü ve tablet),% 6 (cep telefonu)
Aşağıda dolgu: 60px (masaüstü ve tablet),% 12 (cep telefonu) Sol dolgu:% 5 (masaüstü), 0px (Tablet ve Cep Telefonu) Klon bulanık modülü ve tüm sütunlara yerleştirin Parça ve bulanık modüller oluşturmayı bitirdikten sonra, istediğiniz kadar klonlayabilirsiniz. o bölümdeki satır için sahip olduğunuz sütun. Örnek #6’nın sınırını yeniden yapın Aşağıdaki sınır konsepti olağan kısım yerine özel bir bölüm kullanır. Bu, tüm sonuçlara bir sınır eklemek yerine, bulanıklık modülünü içeren satıra belirli bir sınır eklemesini sağlar. Sol taraftaki metin modülü, bir bulanıklık modülü ile satırın bir parçası olmayan bir sütuna yerleştirilir. Özel Yapı Bu özel örnek için seçtiğimiz yapı aşağıdaki gibidir:
Blurb modülünü içeren satır sütun yapısının satır düzenlemesi iki sütuna sahiptir.
Yapıştırıcı Sıralar ekledikten sonra, tasarım sekmesini açın ve özel oluk genişliği seçeneğini etkinleştirin. Ardından, oluğun genişliğine ‘1’ ekleyin.
Sonraki mesafe, tüm seçenekler için özel dolgunun ‘0px’ olduğundan emin olun.
Daha sonra sınırlama, sınır alt kategorisindeki tüm açılara ’10px’ ekleyin.
Son Kutu Gölgesi, aşağıdaki kutu gölgesini de kullanın: Yatay konum gölge kutusu: 0px Dikey Konum Gölge Kutusu: 10px Bulanık Güç Gölgesi Kutusu: 60 PX Gölge kutularının dağılımının gücü: 0px Gölge Renk: RGBA (71,74,182.0.12) Kutu Gölgesi Pozisyonu: Dış Gölge Arka Plan Rengi Blurb Modülü Satır ayarları tamamlandıktan sonra, sütunlardan birine bulanık modül eklemeye başlayabilirsiniz. Açıklama modülü, arka plan rengi olarak ‘#ffffff’ gerektirir.
Yapıştırıcı Daha sonra, Tasarım sekmesindeki Boyut Alt Kategorisi için aşağıdaki ayarların uygulanmasını sağlar:
Resim Genişliği: 64px
İçerik genişliği: 1100px aşağı kaydırın, alanı açın ve tüm özel dolgu seçeneklerine ’30px’ alt kategorisi ekleyin.
Sol sınır son olarak, ancak en az değil, ‘#09E1C0’ renk kodu ile sol sınırını ‘8px’ ekleyin.
Klon bulanık modülü ve tüm sütunlara yerleştirin Bulanıklık modülünü tamamladıktan sonra, istediğiniz kadar klonlayabilir ve her iki sütuna da yerleştirebilirsiniz. Yapılması gereken tek şey, her benzersiz bulanık modül yapmak için sol sınırın içeriğini ve rengini değiştirmek. 7 #7’nin sınırını yeniden yapın
Sınır Kavramı Bu yazıdaki son örnek için, satırdaki parçalar, satırlar ve metin modülleri için bir sınır kombinasyonu var. Bu, tüm sınır seçeneklerini belirli parçalarda birleştirdiğinizde ne tür sonuçları elde edebileceğinizi mükemmel bir şekilde göstermektedir. Mesafe parçasını ayarlama Yeni bir standart parça ekleyerek ve aşağıdaki özel dolguyu ekleyerek başlayın: Üst ve Alt: 240px Sağ ve sol: 0px
Daha sonra sınırda, sınır alt kategorisini açın ve aşağıdaki ayarları kullanın:
Sınır Genişliği: 26px Sınır rengi: #747d88 Sınır Gücü: Katı Son kutu gölgesi, kutunun gölgesini de bölüme ekleyin: Yatay konum gölge kutusu: 0px
Dikey Konum Gölge Kutusu: 0px
Bulanık Güç Gölgesi Kutusu: 80px Gölge kutularının dağılımının gücü: 0px
Gölge Rengi: RGBA (0.0,0,0.54)
Kutu Gölgesi Pozisyonu: Dış Gölge
Sütun Yapısı Satırını Ayarlama Bölüm ayarlarınız tamamlandıktan sonra, bir sütunlu satır ekleyebilirsiniz. Sınır Daha sonra, bu satır ayarlarını açın ve sol ve sağ taraflara aşağıdaki sınır kuvvetini ekleyin:
Sınır Genişliği: 16px
Sınır Rengi: #F9CC98GAYA Sınır: Çift
Geçerli yapıştırıcı metin modülü, metin modülünü bir sütun satırına ekleyin ve boyut alt kategorisi için aşağıdaki ayarları kullanın:
Genişlik:% 90
Modül hizalaması: merkez
Mesafe Ardından, aralık alt kategorisini açın ve tüm özel dolgu seçeneklerine ’40 piksel’ ekleyin. Son sınır, aşağıdaki ayarlarla her tarafa biraz şeffaf bir sınır ekleyin: Sınır Genişliği: 16px
Sınır rengi: RGBA (145,145,145.0.27)
Sınır Gücü: Katı
Yeni Divi Sınır seçeneğinin son zihni, web sitenizi tasarlarken sizin için yeni deneyimler açar. Size nasıl yeniden yapacağımızı ve anlayacağımızı gösterdiğimiz örnekler, blog yayınlaması blog gönderisinde sizinle paylaştığımız örneklerle aynı. Bu yazının ikinci bölümünde, kalan örneklerin nasıl yapılacağını göstereceğiz. Sorularınız veya önerileriniz varsa; Aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun! Estherpoon / Shutterstock.com’dan Üstün Görüntü
