Divi'nin Yerleşik Kenar Boşluğu ve Oluk Kontrollerini Kullanmanın 5 Yaratıcı Yolu

Divi kenar boşluğu ve oluk kontrolleri, mizanpajlarınızı yaratıcı yollarla gerçekten dönüştürebilen iki güçlü tasarım ayarıdır. Ve nasıl çalıştıklarını anlarsanız, dışarı çıkmaktan ve kendiniz için yeni şeyler denemekten daha az korkacaksınız. Bu yazıda size Divi kenar boşluğu ve oluk kontrollerini kullanmanın 5 yaratıcı yolunu göstereceğim. Bazılarını başarmak diğerlerinden daha kolay olacak, ancak genel olarak, bu iki tasarım ayarı için yeni bir takdirle ayrılacağınızı düşünüyorum.

Kenar Boşluğu ve Oluk genişliği hakkında

Kenar boşluğu, öğeler arasındaki (veya dışındaki) boşluk anlamına gelir. Bu yüzden bir bölümü, satırı veya modülü bir kutu olarak düşünün. Kenar boşluğu, kutunun dışına boşluk ekleyen ve sayfadaki kutuları ayırmak için kullanılan şeydir (bu, burada daha ayrıntılı olarak ele alınmaktadır).

Oluk genişliği, bir satırdaki sütunlar arasındaki kenar boşluğu için süslü bir terimdir. Anında doğru marjlara sahip bir ızgara oluşturmak zordur. Bu nedenle Divi, her satır için Oluk genişliği seçeneğine sahiptir. Sütunları eşit aralıklarla ayırmanın acısını hafifletmeye yardımcı olur.

Oluk genişliği aralığı için isteğe bağlı değerler 1 ila 4 arasındadır.

1, sütunlar arasındaki sıfır kenar boşluğunu temsil eder.
2, sütunlar arasında %3'lük bir sağ kenar boşluğunu temsil eder.
3, sütunlar arasında %5.5'lik bir sağ kenar boşluğunu temsil eder.
4, sütunlar arasında %8'lik bir sağ kenar boşluğunu temsil eder.

Artık neyle uğraştığımızı daha iyi anladığımıza göre, onları kullanmaya başlayalım!

Divi kenar boşluğu ve cilt payı denetimlerini kullanmanın 5 yaratıcı yolu:

Gizlice Bakış

İşte bu tekniklerle mümkün olan tasarımlara hızlı bir bakış:

Divi'nin Yerleşik Kenar Boşluğu ve Oluk Kontrollerini Kullanmanın 5 Yaratıcı Yolu

Youtube Kanalımıza Abone Olun

#1 Sıra Dışına Genişletilmiş Görüntü Modülleri

Kırık ızgara tasarımı bugünlerde çok moda olduğundan, modülleri kaplarının (veya sıralarının) dışına genişletmek, benzersiz bir görünüm için geleneksel ızgara düzenini kırmanın harika bir yoludur. İşin püf noktası, modülü belirli bir yönde genişletmek için negatif kenar boşlukları kullanmaktır.

Bu yaratıcı tekniğin harika bir örneği Fitness Salonu Açılış Sayfası Düzeninde bulunur. “Üye ol” başlıklı bölümde, görüntünün satır kapsayıcısının dışına nasıl genişletildiğini görebilirsiniz.

İşte bu tasarımın nasıl gerçekleştirileceğine dair temel fikir.

İki dört sütunlu satır içeren yeni bir bölüm oluşturun. Her satıra aşağıdaki ayarları verin:

Oluk genişliği: 1
Özel Kenar Boşluğu: 0 piksel üst
Özel Dolgu: 0 piksel üst, 0 piksel alt

Ardından bölüm ayarlarını aşağıdaki gibi güncelleyin:

Arka Plan Gradyanı Sol Renk: #fa2a20
Arka Plan Gradyanı Sağ Renk: rgba(16,23,45,0.85)
Gradyan Yönü: 90deg
Başlangıç ​​Konumu: %50
Bitiş Konumu: %50
Özel Dolgu: 0px Üst, 0px Alt

En üst sırada, sütun 3'e bir görüntü modülü ekleyin ve modüle bir görüntü ekleyin. Ardından, negatif üst kenar boşluğu ile ayarları aşağıdaki gibi güncelleyin:

Özel Marj: -6vw Üst

İkinci satırda, 2. sütuna bir resim modülü ekleyin ve modüle bir resim ekleyin. Ardından, ayarları negatif bir alt kenar boşluğu ile aşağıdaki gibi güncelleyin:

Ardından aynı satırdaki 4. sütuna bir görüntü modülü ekleyin ve modüle bir görüntü ekleyin. Ardından, ayarları negatif bir alt kenar boşluğu ile aşağıdaki gibi güncelleyin:

Özel Marj: -5vw alt

Oluk genişliği 1 olarak ayarlandığından, görüntüler/modüller aralarında boşluk olmadan birbirine yaslanır. Bu, %50 gradyan başlangıç ​​konumuyla birleştiğinde, arka planda güzel bir simetrik kırılma noktası sağlar.

Özel kenar boşlukları için vw uzunluk birimini kullandığımı fark etmiş olabilirsiniz. vw (görünüm alanı genişliği) uzunluk birimi, tarayıcının genişliğine bağlıdır. Yani 10vw temelde tarayıcı penceresinin %10'udur. Bu, tasarımın gezinmeden tarayıcıyla birlikte ölçeklenmesini sağlar. Daha fazla bilgi için uzunluk birimleri hakkındaki tam makalemize bakın.

İşte son tasarım.

#2 Metin Modüllerini ve Sütunların Dışına Bölücüleri Genişletme

Metin modüllerini bir sütun veya satırın dışına genişletmek, benzersiz başlık tasarımları için kapıyı açar. Metin, benzersiz bir görünüm için arka plan öğesinin ötesine sola ve sağa doğru uzandığından, satır veya sütun özel bir arka plan öğesi işlevi görebilir.

İşte bu nasıl yapılır. Önce iki sütunlu bir satır içeren yeni bir bölüm oluşturun. Herhangi bir modül eklemeden önce satır ayarlarını aşağıdaki gibi güncelleyin:

Sütun 1 arka plan rengi: #00ca8f
Özel Genişlik: 700 piksel
Oluk Genişliği: 4
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: -10px
Kutu Gölgesi Dikey Konumu: -10px
Kutu Gölge Rengi: rgba(100,113,248,0.37)

Oluk genişliğini 4'e ayarlamak, modülleri sütunun dışına genişletmemizi kolaylaştırmak için sütunlar arasındaki boşluğu en üst düzeye çıkarır.

Şimdi sütun 1'e bir metin modülü ekleyelim ve ayarları aşağıdaki gibi güncelleyelim:

Başlık Yazı Tipi: Fira Sans Condensed
Başlık Yazı Tipi Ağırlığı: Ultra Kalın
Başlık Yazı Tipi Stili: TT
Başlık metni Hizalama: orta
Başlık Metni Rengi: #0f135d
Başlık Metni Boyutu: 100px (60
Başlık Harf Aralığı: 10px
Genişlik: 600 piksel
Özel Kenar Boşluğu: -100 piksel Sol, -100 piksel Sağ
Özel Dolgu: 0 piksel üst, 0 piksel alt, 0 piksel sol, 0 piksel sağ

Bu tasarımın anahtarı, modülün genişliğini artırmaktır, böylece negatif sağ ve sol kenar boşluğunu eklediğimizde, metin modülünün her iki taraftaki sütunun ötesine uzanacak yeri olur.

Ek tasarım öğesi olarak, sütun 2'ye sütunun dışına da uzanan bir ayırıcı da ekleyebilirsiniz. Bunu yapmak için 2. sütuna bir ayırıcı modül ekleyin ve aşağıdaki ayarları güncelleyin:

Renk: #0f135d
Bölücü Ağırlığı: 12px
Genişlik: %150
Özel Kenar Boşluğu: 15 piksel üst, -%25 sol, -%25 sağ

Aynı tasarım tekniği burada da kullanılmaktadır. Modülü sol ve sağ sütunun dışına uzatabilmemiz için genişliği (veya maksimum genişliği) %150'ye çıkarıyoruz.

İşte nihai sonuç.

İşte mobilde.

Ayrıca, tamamen şimdi bir görünüm için ayarlarda birkaç güncelleme yaparak bunu tek sütunlu bir düzene kolayca değiştirebilirsiniz. Bunu yapmak için satırın sütun düzenini tek sütun olarak değiştirin ve satır genişliğini 400 piksel olarak değiştirin.

İşte sonuç.

Daha fazla ilham almak için Divi'de benzersiz sütun düzenleri oluşturmak için modüllerin nasıl genişletileceğine ilişkin bu gönderiye göz atın.

#3 Düğmeli Örtüşen Modüller

Tasarımınız boyunca düğmeleri benzersiz yerlere yerleştirmek için özel kenar boşlukları kullanılabilir. Yapmayı en sevdiğim şeylerden biri, düğmeleri diğer modüllerle örtüşecek şekilde konumlandırmak.

Bu kavramı göstermek için, Soccer Club Layout Pack'ten Soccer Club Açılış Sayfası Düzenini kullanacağım. Düzenin üst bölümünde, videonun üstüne ve altına yerleştirilmiş iki düğme olduğunu fark edeceksiniz. En üstteki düğmeye 0 piksellik bir alt kenar boşluğu verilmiştir, böylece videonun üstüne tam olarak oturur. Ve video modülüne 0px'lik bir alt kenar boşluğu verilmiştir, böylece alttaki düğme videonun alt kısmı ile aynı hizadadır. Yapacağım şey, bu düğmelerin her birini video modülüyle örtüşecek şekilde hareket ettirmek.

Bunu yapmak için, üst düğme modülü ayarlarını açın ve ona -56 piksellik (temelde düğmenin yüksekliği) özel bir alt kenar boşluğu verin.

Ardından alt düğme ayarlarını açın ve -56 piksellik özel bir üst kenar boşluğu verin.

İşte son tasarım.

Negatif kenar boşluklarımız için bir piksel uzunluğu değeri kullandığımızdan, düğmeler mobilde de yerinde kalacak.

Daha fazla ilham almak için, benzer teknikleri kullanarak hareketli bir kaydırma düğmesinin nasıl ekleneceğine ilişkin bu gönderiye göz atın.

#4 Satırlarla Örtüşen Bölümler

Bir bölümü bir satırla çakıştırmak basit bir işlemdir, ancak sayfanızın tasarımını geliştirmek ve içeriği öne çıkarmak için gerçekten bir dereceye kadar yaratıcılık ekleyebilir.

Bu kavramı örneklendirmek için, Emlak Yerleşim Paketindeki Emlak Açılış Sayfasına bir göz atalım. İkinci bölümdeki içerik satırının, üst bölümle örtüşecek şekilde nasıl yukarı çekildiğine ve içeriğin öne çıktığına dikkat edin.

Bunun nasıl yapıldığını hızlıca gözden geçirelim.

İçeriği güzel bir şekilde çerçevelemek için her iki tarafta biraz boşluk olması için satıra 1440 piksellik özel bir genişlik verilir.

Üç tanıtım yazısı ve içeriği için gereken alanı en üst düzeye çıkarmak için oluk genişliği 1 olarak ayarlanır.

Ve son olarak, satıra -10vw'lik özel bir üst kenar boşluğu verilir. Bu, satırı, yukarıdaki bölümle örtüşecek şekilde yukarı çekin.

Basit şeyler değil mi?

Bu konsept hakkında daha fazla bilgi için modüllerin ve satırların nasıl üst üste bindirileceği hakkındaki gönderiye bakın.

#5 Hover'da Satırları Genişletme

Bu vurgulu stil, web sitenizdeki belirli bir hizmet veya promosyon teklifi hakkında daha fazla bilgi ortaya çıkarmanın harika bir yoludur. Bu vurgulu efektin anahtarı, bir satırın yarısını tarayıcı penceresinin dışına genişletmek için özel kenar boşluğu kullanmaktır. Ardından, satırın görünen yarısının üzerine gelindiğinde kenar boşluğu geri döner ve satır içeriğinin diğer yarısını ortaya çıkarır.

Bunun nasıl yapıldığını size göstermek için Tesisatçı Düzen Paketindeki Tesisatçı Hizmetleri Sayfasını kullanacağım. Tesisatçı Hizmetleri Düzenini sayfanıza yükledikten sonra, "%10 İNDİRİM" yazan büyük promosyon teklifinin bulunduğu bölüme gidin. Bu, 1. sütunda büyük tanıtım metni ve 2. sütunda tanıtım hakkında daha fazla bilgi içeren iki sütunlu bir satırdır.

Bunu yapmak için satır ayarlarını açın ve aşağıdakileri güncelleyin:

Sütun 1 Arka Plan Rengi: rgba(12,113,195,0.16)
Satır Hizalama: sağ
Özel Genişlik: 800 piksel
Oluk genişliği: 1

Şimdi vurgulu efekti elde etmek için özel kenar boşluğu ayarlarımızı eklememiz gerekiyor. Oluk genişliği 1 kullandığımız için, 1. sütuna biraz dolgu eklememiz gerekiyor. Aşağıdakileri güncelleyin:

Özel Kenar Boşluğu (masaüstü): -400 piksel sağ
Sütun 2 özel dolgusu: 2vw sol, 2vw sağ

Satır genişliğimiz 800 piksel olduğu için 400 pikseli (satırın yarısı) gizlemek istiyoruz. Bu yüzden sağ kenar boşluğunu -400px olarak ayarladık.

Özel Kenar Boşluğu (fareyle üzerine gelin): 0 piksel sağ
Özel Kenar Boşluğu (tablet): 0 piksel sağ

Fareyle üzerine gelindiğinde sağ kenar boşluğu tekrar 0 piksele ayarlandığında, tüm satır görünür hale gelir!

İşte nihai sonuç.

Ve tüm satır mobilde görünür hale gelir.

Daha Fazla İlham

Hazır mizanpajlarımızda kenar boşluğu ve cilt payı değerlerini kullanan tonlarca benzersiz stil örneği vardır. Bu gönderide bu unsurlardan birkaçını zaten öne çıkardım.

Bunun gibi daha fazla eğitim istiyorsanız, blogumuzdaki aşağıdaki gönderilere göz atın:

• Divi'de metin soyut tasarım öğesi olarak nasıl kullanılır?
• Divi'de içerik dikey olarak nasıl hizalanır
• Opaklık, Doldurma ve Negatif Kenar Boşlukları Divi Modüllerini Katmanlamak İçin Nasıl Kullanılır

Son düşünceler

Umarım bu yazı, özel kenar boşlukları ve cilt payı değerleri kullanan birkaç basit ama benzersiz tasarıma işaret etmede yardımcı olmuştur. Ve bu kullanıma hazır tasarım tekniklerine bir kez daha aşina olduğunuzda, kendi benzersiz düzenlerinizi oluşturmanın ne kadar kolay olacağına şaşıracağınızdan eminim.

Yorumlarda sizden haber bekliyorum.

Şerefe!