Divi'de Taşma Seçeneklerini Kullanmanın 3 Faydalı Yolu

Divi'nin yerleşik Taşma Seçenekleri, sayfadaki herhangi bir öğeye taşma css özellikleri (ör. görünür, gizli, kaydırma) eklemeyi son derece basit hale getirir. Bu, benzersiz tasarımlar ve kolayca kaydırılabilir içerik oluşturmak için yararlıdır. Bu yazıda, bu taşma seçeneklerinin gerçekte ne yaptığını gözden geçireceğim. Ayrıca, kendi Divi sitenizde taşmayı kullanmanın üç yararlı yolunu anlatacağım.

Başlayalım.

Divi'nin Taşma Seçeneklerini Anlama

Divi'nin taşma seçenekleri, bir öğenin css taşma özelliğini aşağıdaki değerlerden birine ayarlamanıza olanak tanır:

1. Varsayılan – Varsayılan değer görünür (aşağıya bakın).
2. Görünür – Taşan içerik görünür kalacak ve kutunun dışına çıkarken kırpılmayacaktır. Divi'deki varsayılan ayar bu olduğundan, nadiren seçmeniz gerekecektir.
3. Kaydır - Taşan içerik gizlenecek, ancak kullanıcılar gizli içeriği dikey veya yatay olarak kaydırabilecek.
4. Gizli – Kutunun dışındaki taşan içerik gizlenecek (kaydırma özelliği olmadan)
5. Otomatik – Bu seçenek, gerektiğinde kaydırma işlevini devreye sokar (yani, içerik kutunun dışına taşar). Bu, daha küçük tarayıcılarda kaydırma özelliklerine sahip olması gereken belirli bir yüksekliğe veya genişliğe sahip tasarımlar için kullanışlı olacaktır.

Divi, her biri için farklı özellik değerleri ayarlamanıza olanak tanıyan hem yatay hem de dikey taşma için bir taşma seçeneğine sahiptir. Bu, bir öğeye dikey kaydırma işlevi eklemek istediğinizde ancak kaydırma çubuğunun yatay olarak da görünmesini istemediğinizde kullanışlıdır.

Taşma seçeneklerinin nasıl çalıştığını anlamanıza yardımcı olmak için bu eğitimdeki tasarımlardan alınan birkaç hızlı resim.

Taşma Görünür (varsayılan)

Bu örnekte, Divi'deki tüm öğeler için varsayılan ayar olan satır kabının dışına yerleştirilmiş içerik görünür durumda kalır.

Taşma Gizli

Satıra taşma gizli özelliğini eklediğinizde, kutunun dışındaki içerik kırpılır ve görünümden tamamen gizlenir.

Taşma Kaydırma

Taşma kaydırmayı kullanmak, içeriği kutu kabının dışında gizlemenize olanak tanır (gizli taşma gibi). Temel fark, kullanıcının kapsayıcı sınırlarının ötesinde var olan içeriği kaydırmasına izin veren bir kaydırma çubuğunun görünmesidir.

Örneğin, burada 400 piksel yüksekliğinde bir metin modülü var. Metin modülünün içeriği metin modülünün ötesine uzanır ancak varsayılan olarak görünür durumda kalır.

Ancak metin modülüne dikey taşma kaydırma özelliğini eklediğinizde, kullanıcının gizli içeriği kaydırmasına izin veren kaydırma çubuğu görünür.

Artık taşma seçeneklerini biraz daha iyi anladığınıza göre, bunları gerçek hayatta kullanmanın yararlı yollarından bazı örnekler oluşturmaya başlayalım.

Youtube Kanalımıza Abone Olun

Divi'de Divi'nin Taşma Seçeneklerini Kullanmanın 3 Faydalı Yolu

#1 Benzersiz Tasarımlar için Taşan İçeriği Kırpmak İçin Gizli Taşmayı Kullanma

Taşma gizli özelliğinin nasıl kullanılacağını anlamak için, taşan metin ve taşan bir görüntü ile hızlı bir örnek tasarım oluşturacağız. Ardından, satırımızı gizli olarak taşmaya ayarlarken tasarımın nasıl değiştiğini göreceğiz.

İlk olarak, bir sütun satırı olan normal bir bölüm oluşturun. Modül eklemeye başlamadan önce bölüme aşağıdaki padding'i verelim:

Özel Dolgu: 12vw üst, 12vw alt

Ardından satır ayarlarını aşağıdaki gibi güncelleyin:

Genişlik: 80vw
Maksimum Genişlik: 80vw
Dolgu: 0 piksel üst, 0 piksel alt
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Bulanıklığı Gücü: 80px

Ardından satıra bir metin modülü ekleyin ve aşağıdaki metin modülü ayarlarını güncelleyin:

Önce içerik kutusuna aşağıdaki gibi bir h2 başlığı ekleyin:

<h2>Overflow</h2>

Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:

Başlık 2 Yazı Tipi: Lato
Başlık 2 Yazı Tipi Ağırlığı: Kalın
Başlık 2 Yazı Tipi Stili: TT
Başlık 2 Metin Hizalama: orta
Başlık 2 Metin Rengi: #dddddd
Başlık 2 Metin Boyutu: 15vw
Başlık 2 Harf Aralığı: 0.1em
Başlık 2 Metin Gölgesi: ekran görüntüsüne bakın
Başlık 2 Metin Gölge Rengi: rgba(0,0,0,0.05)

Şimdi, metnin satır içeriği alanından taşmasını sağlamak için özel kenar boşlukları kullanmamız gerekiyor. Satırın üzerinde (dikey olarak) ve satırın her iki tarafında (yatay olarak) taşmasını sağlamak için metin modülüne aşağıdaki özel kenar boşluğunu ekleyin.

Marj: -6vw üst, -10vw sol, -10vw sağ

Ardından, az önce oluşturduğunuz modülün altına başka bir metin modülü ekleyin ve aşağıdakileri güncelleyin:

İçerik:

<h3>design</h3>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

(Bu arada, bunun gibi kod parçacıkları, taşma kaydırma seçeneğinden yararlanmanın harika bir yoludur.)

Metin Yazı Tipi: Lato
Metin Metin Hizalama: sağ
Metin Metin Boyutu: 24px (masaüstü), 16px (telefon)
Metin Satırı Yüksekliği: 1.3em
Maksimum Genişlik: %50
Modül Hizalama: sağ
Dolgu: 4vw sağ

Şimdi satırın dışına taşan bir resim ekleyelim. İki metin modülünün altında yeni bir resim modülü oluşturun ve ardından istediğiniz bir resmi yükleyin.

Ardından görüntü ayarlarını aşağıdaki gibi güncelleyin:

Maksimum Genişlik: 35vw
Marj: -12vw üst, -8vw alt, -5vw sol
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: -40px
Kutu Gölgesi Dikey Konumu: -50px
Gölge Rengi: rgba(0,0,0,0.17)

Satır Taşma Görünür olarak ayarlı tasarım (varsayılan)

Şimdi satır taşmamızı görünür (varsayılan) olarak ayarlayan tasarımı kontrol edelim.

Gördüğünüz gibi, bu varsayılan taşma görünür seçenekleri, bazı güzel ve modern tasarımlar oluşturmak için harika.

Satır Gizli Taşma olarak ayarlı tasarım

Şimdi satır için Overflow Hidden özelliğini kullandığımızda ne olacağını görelim. Satır ayarlarını açın ve aşağıdakileri güncelleyin:

Yatay Taşma: gizli
Dikey Taşma: gizli

İşte sonuç.

Gördüğünüz gibi, taşan içerik (üst başlık ve resim) artık benzersiz bir tasarım oluşturmak için kırpılmış ve gizlenmiştir. Ve bu kurulumla, tasarımı tam olarak doğru yapmak için öğeleri ölçeklendirmek ve hareket ettirmek için dönüştürme seçeneklerinden kolayca yararlanabilirsiniz.

#2 Kullanıcıların İçeriği Dikey Olarak Kaydırmasına İzin Vermek için Taşma Kaydırmasını Kullanma

Bu sonraki örnek, dikey taşma kaydırmasını tanıtır. Bu taşma seçeneği, bağlantı veya kaynak listelerine kaydırılabilir içerik eklemek için kullanışlıdır. Kaydırılabilir içerik için herhangi bir modülü veya satırı bir kapsayıcıya dönüştürebilirsiniz. İşte bir metin modülü ile nasıl yapılacağı.

Tek sütunlu bir satırla normal bir bölüm oluşturun. Ardından, aşağıdaki içeriğe sahip bir metin modülü ekleyin:

<h3>overflow scroll</h3>
<ol>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">consectetur adipiscing elit</a></li>
<li><a href="#">sed do eiusmod tempor</a></li>
<li><a href="#">incididunt ut labore et dolore</a></li>
<li><a href="#">Ut enim ad minim veniam</a></li>
<li><a href="#">quis nostrud exercitation</a></li>
<li><a href="#">ullamco laboris nisi ut</a></li>
<li><a href="#">aliquip ex ea commodo</a></li>
<li><a href="#">Duis aute irure dolor in</a></li>
<li><a href="#">reprehenderit in voluptate</a></li>
<li><a href="#">velit esse cillum dolore eu</a></li>
<li><a href="#">fugiat nulla pariatur</a></li>
<li><a href="#">Excepteur sint occaecat</a></li>
<li><a href="#">cupidatat non proident</a></li>
<li><a href="#">sunt in culpa qui officia</a></li>
<li><a href="#">deserunt mollit anim id</a></li>
<li><a href="#">est laborum</a></li>
</ol>

Ardından metin modülü tasarım ayarlarını aşağıdaki gibi güncelleyin:

Metin Yazı Tipi: Lato

Bağlantı Metni rengi: #333333
Bağlantı Metni Boyutu: 18px

Sıralı Liste Metin Rengi:
Sıralı Liste Metin Boyutu: 20px
Sıralı Liste Satır Yüksekliği: 1.8em
Sıralı Liste Stil Türü: ondalık-başlık-sıfır

Başlık 3 Yazı Tipi Ağırlığı: Ultra Kalın
Başlık 3 Metin Boyutu: 50px
Maksimum Genişlik: 500 piksel
Dolgu: %3 üst, %3 alt, %8 sol, %8 sağ

Bir yükseklik ve taşma kaydırma vermeden önce metin modülünün nasıl göründüğü aşağıdadır.

Şimdi, metin modülünü maksimum 400 piksel yükseklikte güncelleyin. Metin modülü için varsayılan taşma değeri görünür olduğundan, modülün altından metnin taştığını fark edeceksiniz.

Şimdi tek yapmamız gereken dikey taşmayı aşağıdaki gibi kaydırmak için ayarlamak:

Dikey Taşma: kaydırma

İşte son tasarım.

Divi sitenizde dikey taşma kaydırmanın nasıl kullanılacağına ilişkin daha fazla örnek için şu gönderilere göz atın:

• Divi'nin Yeni Taşma Seçenekleriyle Kaydırmalı Galeri Modeli Nasıl Oluşturulur
• Divi'de Kaydırılabilir Son Gönderiler Widget Alanı Nasıl Tasarlanır

#3 Kullanıcıların İçeriği Yatay Olarak Kaydırmasına İzin Vermek için Taşma Kaydırmayı Kullanma

Yatay kaydırma için taşma kaydırmayı kullanmak, içeriğinize kısa ve öz bir konumdan erişmenin başka bir yoludur. Ayrıca, eklenti olmadan yandan kaydırma işlevini mobil cihazlara dahil etmenin harika bir yoludur.

Size nasıl yapılacağını göstermek için birlikte hızlı bir örnek oluşturacağız.

İlk olarak, bir sütun satırı olan normal bir bölüm oluşturun.

Ardından satıra bir tanıtıcı modül ekleyin.

Varsayılan resmi yeni bir resim veya simgeyle değiştirebilirsiniz. Ardından tasarım ayarlarını birkaç ince ayar ile güncelleyin:

Metin Hizalama: orta
Başlık Yazı Tipi: Lato
Başlık Yazı Tipi Ağırlığı: Ağır
Dolgu: %3 sol, %3 sağ

Satır sütununuzda toplam 6 tanıtım yazısı olması için tanıtım yazısı modülünü 5 kez çoğaltın.

Ardından, aşağıdaki özel CSS ile satır ayarlarını Sütun Ana Öğesine güncelleyin.

display: grid;
grid-template-columns: repeat(6, 50%);

Bu, tanıtım yazısı sütununuzu, her biri kapsayıcının (veya bu durumda satırın) %50'si olan genişliğe sahip 6 sütunlu yatay bir ızgara düzenine verecektir. Bu, iki tanıtım yazısının/sütununun satır içindeki alanı kaplayacağı anlamına gelir. Diğer 4 modül, sıranın dışına sağ tarafa doğru uzanacaktır. Taşma kaydırma özelliğinin kullanışlı olduğu yer burasıdır. Aşağıdaki taşma seçeneğini güncelleyin:

Yatay Taşma: Kaydır

Artık satırın genişliğini gerektiği gibi ayarlayabilirsiniz ve iki tanıtım yazısı her zaman güzel bir şekilde sıralanacaktır. İşte son tasarım.

İçerik kutusunu biraz daha iyi görebilmeniz için satıra bir kutu gölgesi ekledim. Kullanıcı sağa kaydırana kadar iki tanıtım yazısının başlangıçta nasıl görüntüleneceğine dikkat edin.

Daha fazla bilgi için yatay kaydırmalı kartlar oluşturma hakkındaki gönderiye göz atın.

Son düşünceler

Örtüşen öğeler ve tipik ızgara düzeninin dışındaki konumlandırma öğeleri bu günlerde daha yaygın hale geliyor. Çoğunlukla, bu tamamen tasarım amaçlı yapılır. Divi'nin taşma seçeneklerini nasıl kullanacağınızı anlamak, bu benzersiz tasarımları oluşturmak için içeriği bir kapsayıcının dışında nasıl gizleyeceğinizi veya göstereceğinizi anlamanıza yardımcı olacaktır. Ayrıca, taşma kaydırmasını anlamak, web sitenize kaydırılabilir içerik eklemek için de kullanışlı olacaktır.

Umarım bu makale, taşma özelliğine ve onu bir sonraki Divi projeniz için nasıl kullanabileceğinize biraz ışık tutmaya yardımcı olmuştur.

Yorumlarda sizden haber bekliyorum.

Şerefe!