Divi’de taşma seçeneğini kullanmanın 3 yararlı yolu
Divi’nin varsayılan taşma seçenekleri, sayfadaki tüm öğelere CSS taşma özellikleri (örn. Görüldü, gizli, kaydırma) eklemeyi çok kolaylaştırır. Bu, kolayca sunulabilecek benzersiz tasarımlar ve içerik yapmak için kullanışlıdır. Bu yazıda, bu taşma seçeneğiyle gerçekte neler yapıldığını tartışacağım. Ve taşmayı kendi divi sitenizde kullanmanın üç yararlı yolunu tartışacağım. Başlayalım. Divi taşma seçeneğini anlayın
Divi Taşma seçeneği, taşma CSS özelliğini bir öğeden aşağıdaki değerlerden birine ayarlamanıza olanak tanır:Varsayılan – Varsayılan değer görülür (aşağıya bakın).
Görüldü – taşan içerik görünür kalacak ve kutunun dışında uzatıldığında kesilmeyecektir. Bu, Divi’deki varsayılan ayarlar olduğundan, nadiren seçmeniz gerekir.
Taşınmanın gizleneceği kaydırır, ancak kullanıcı gizli içeriği hem dikey hem de yatay olarak yuvarlayabilir.
Gizli – Kutunun dışında taşan içerik gizli olacak (kaydırma yeteneği olmadan)
Otomatik – Bu seçenek, gerektiğinde kaydırma işlevini etkinleştirir (örn. İçerik kutuyu aşar). Bu, daha küçük bir tarayıcıda kaydırma yeteneğine sahip olması gereken belirli bir yükseklik veya genişliğe sahip tasarım için yararlı olacaktır.
Divi, her biri için farklı özellik değerleri ayarlamanızı sağlayan yatay ve dikey taşma için taşan bir seçeneğe sahiptir. Bu, öğeye dikey kaydırma işlevselliği eklemek istediğinizde kullanışlıdır, ancak kaydırma boşluklarının yatay olarak görünmesini istemezsiniz.
Taşma seçeneğinin nasıl çalıştığını anlamanıza yardımcı olmak için bu öğretici tasarımdan alınan bazı kısa resimler. Taşma Bu örnekte, satır kabının dışında konumlandırılan içerik görünür kalır, bu da divi’deki tüm öğeler için varsayılan ayardır. Gizli ay, taşmanın gizli özelliğini çizgiye ekledikten sonra, kutunun dışındaki içerik haline gelir, Kesin ve ekrandan tamamen gizlenir. Taşma kaydırma kullanarak taşma, içeriği kutu kabının dışına (ve gizli taşmaların yanı sıra) gizlemenizi sağlar. Temel fark, kaydırma çubuğunun görünmesi, kullanıcının kap sınırının dışındaki içeriği kaydırmasına izin vermesidir. Örneğin, 400 piksel yüksekliğe sahip bir metin modülü. Metin modülünün içeriği metin modülünün ötesine geçer, ancak varsayılan olarak görülebilir.
Ancak metin modülüne dikey bir taşma özelliği ekledikten sonra, kaydırma çubuğu görünür. Kullanıcının gizli içeriği kaydırmasına izin verir. Taşma seçeneğinin biraz daha iyi olduğunu anladığınıza göre, bunları gerçek hayatta kullanmanın yararlı yollarına birkaç örnek alalım. YouTube Kanal 3’ümüze abone olun Divi #1’de taşma divi seçeneklerini kullanmanın yararlı yolları, taşma gizli özelliği nasıl kullanacağınızı anlamak için benzersiz tasarım için taşma içeriğini klipsli taşma içeriğini kullanarak, taşma metni ve taşma görüntüleri ile hızlı bir tasarım örneği oluşturacağız. O zaman çizgimizi gizlenecek şekilde ayarlarken tasarımın nasıl değiştiğini göreceğiz. İlk olarak, bir satır sütun içeren normal bir bölüm oluşturun. Modülü eklemeye başlamadan önce, aşağıdaki dolgu bölümünü verelim: Özel Dolgu: 12VW TOP, 12VW Alt satır ayarlarını aşağıdaki gibi güncelleyin: 80VW maksimum genişlik: 80VW dolgu: 0px üst, ekran ekran mukavemeti bkz. Catch Box: 80px
Ardından metin modülünü satıra ekleyin ve aşağıdaki metin modülü ayarlarını güncelleyin: Önce içerik kutusundaki H2 başlığını aşağıdaki gibi ekleyin:
Taşma
Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin: Başlık 2 Yazı Tipi: Lato Başlık 2 Ağırlık Yazı Tipi: Kalın Başlık 2 Yazı Tipi Stil: TT Başlık 2 Metin Seviyesi: Orta Başlık 2 Renk Metin: #DDDDDD Başlık 2 Metin Boyutu: 15VW Aralık Başlık 2 Mektup: 0.1m Başlık 2 Metin Gölgesi: Bkz. : RGBA (0.0 0.0, 0.0.05)
Şimdi, metnin çizgi içeriği alanına taşınmak için özel bir marj kullanmamız gerekiyor. Sıranın üzerinde (dikey olarak) ve satırın her iki tarafına (yatay olarak) taşmak için metin modülüne aşağıdaki özel marjı ekleyin. Marj: -6vw üst, -10vw sol, -10vw sağ Ardından, aşağıdakileri yeni oluşturduğunuz ve güncellediğiniz başka bir metin modülü ekleyin: İçindekiler:Tasarım
İçeriğiniz buraya gidiyor. Bu metni satır içi veya modül içerik ayarlarında düzenleyin veya kaldırın. Ayrıca, bu içeriğin her yönünü modül tasarım ayarlarında şekillendirebilir ve hatta modül gelişmiş ayarlarında bu metne özel CSS uygulayabilirsiniz. (Bu arada, bunun gibi kod parçacıkları taşma kaydırma seçeneğinden yararlanmanın iyi bir yoludur.)Metin Yazı Tipi: Lato Tesviye Metin: Doğru Metin Boyutu: 24 Piksel (Masaüstü), 16px (Cep Telefonu) Hat Metin Yüksekliği: 1.3EM Genişlik Maksimum:% 50 Modül Hizalama: Sağ Dolgu: 4VW Gerçekten şimdi, dışarıya taşan görüntüleri ekleyelim satır. İki metin modülü altında yeni bir görüntü modülü oluşturun ve ardından görüntü seçiminizi yükleyin. Ardından görüntü ayarlarını aşağıdaki gibi güncelleyin: maksimum genişlik: 35vw marj: -12vw üst, -8vw daha düşük, -5vw sol gölge kutusu: bkz. 0 0, 0.0,0.17)
Sıralı tasarım, taşma görünür (varsayılan) olarak ayarlanmıştır Şimdi, bol miktarda çizgilerimizi varsayılan olarak önleyen tasarımı kontrol edelim.
Gördüğünüz gibi, varsayılan taşma seçeneği bazı güzel ve modern tasarımlar yapmak için çok iyi görünüyor. Sıralı tasarım Gizli Overflow olacak şekilde ayarlanmıştır Şimdi, hat için taşma gizli özelliğini kullandığımızda ne olacağını görelim. Aşağıdaki satır ayarlarını açın ve güncelleme: Yatay taşma: gizli dikey taşma: gizli Sonuç bu. Gördüğünüz gibi, taşan içerik (en iyi başlık ve görüntü) artık benzersiz bir tasarım oluşturmak için kesilmiş ve gizlenmiştir. Ve bu ayarla, doğru tasarımı elde etmek için öğeleri taramak ve taşımak için Dönüşüm seçeneğini kolayca kullanabilirsiniz.
#2 Kullanıcıların içeriği dikey olarak kaydırmasına izin vermek için taşma kaydırma kullanmak, aşağıdaki örnek dikey taşma kaydırma getirir. Bu taşma seçeneği, bağlantı veya kaynak listesine kaydırılabilecek içerik eklemek için kullanışlıdır. İş getirilebilecek içerik için herhangi bir modül veya satırı bir kapta değiştirebilirsiniz. Bunu bir metin modülü ile nasıl yapacağınız aşağıda açıklanmıştır. Bir satır bir sütunu içeren normal bir bölüm oluşturun. Ardından aşağıdaki içerikle metin modülünü ekleyin:
Taşma Kaydırma
lorem iPsum Dolor oturma amet Konsept Adipiscing elitsed do eiusmod tempomu
incididunt ut labore et dolore
uiM reklam minimal veniam
quis nostrud egzersizi
ullamco laboratis nisi ut
aliquip e -ea commodo
duis aute Irure Dolor,
yourduptate raporu
velit esse cillum dolore eu
fugiat nulla pariatur
hariç, sint occaecat
<a href = "#PPI
culpa qui memurunda güneşli
<a href="# Mollit anim id
est laborum
Ardından metin modülünün tasarım ayarlarını şu şekilde güncelleyin: Metin Yazı Tipi: Lato
Bağlantı Metni Rengi: #333333 Metin Boyutu Bağlantı: 18px
Renk Metin Listesi Sipariş Edildi: Metin Boyutu Kayıt Sipariş Edildi: 20PX Yükseklik Hattı Listesi Sipariş Edildi: 1.8EM Stil Listesi Tür Sıralı: Decimal-Front-Zero
Başlık 3 Yazı Tip Ağırlığı: Ultra Kalın Başlık 3 Metin Boyutu: 50px Maks Genişlik: 500px Dolgu:% 3 üst,% 3 alt,% 8 sol,% 8 sağ
Yüksek kaydırma ve taşma vermeden önce metin modülünün görüntülenmesi.
Izgara-TEMPLATE sütunları: Tekrar (6,%50);
Bu, açıklama sütununuzu, kabın% 50 genişliğine sahip 6 sütunla yatay kutu düzenine (veya bu durumda satır) verecektir. Bu, iki açıklamanın/sütunun sırada yer kaplayacağı anlamına gelir. 4 Diğer modüller satırın dışına sağ tarafa uzanır. Yararlı kaydırma taşma özelliği burada. Aşağıdaki taşma seçeneklerini güncelleyin: Yatay taşma: Kaydırma
Artık satırın genişliğini ihtiyaçlarınıza göre ayarlayabilirsiniz ve iki açıklama her zaman iyi sıralanır. İşte son tasarım. İçerik kutusunu biraz daha iyi görebilmeniz için kutunun gölgesini satıra ekledim. Kullanıcı sağa eğitilene kadar ilk başta iki açıklamanın nasıl görüntüleneceğine dikkat edin.
