Modülleri Divi ile Sütun Kaplarında Sabit Tutma

Sayfanızda birden çok harekete geçirici mesaj gösterirken, farklı öğeleri birleştiren etkileşimli bir kaydırma efekti oluşturmanıza yardımcı olabilir. Buna yaklaşmanın bir yolu, modülleri sütun kaplarında hareket ederken sabit elemanlara dönüştürmektir. Bugünkü eğitimde size bu tekniği uygulayan güzel bir tasarımın nasıl oluşturulacağını göstereceğiz ve JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Tablet ve Mobil

Yapışkan Sütun Konteyner Tasarımını ÜCRETSİZ İndirin

Ellerinizi ücretsiz yapışkan sütun konteyner tasarımına koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Youtube Kanalımıza Abone Olun

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

Üzerinde çalıştığınız sayfaya yeni bir normal bölüm ekleyerek başlayın.

aralık

Bölüm ayarlarını açın ve farklı ekran boyutlarında üst ve alt dolguyu değiştirin.

• Üst Dolgu: 7vw (Masaüstü), 10vw (Tablet), 15vw (Telefon)
• Alt Dolgu: 20vw (Masaüstü), 7vw (Tablet), 10vw (Telefon)

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın bölümün tüm genişliğini kaplamasına izin verin. 'Sütun Yüksekliklerini Eşitle' seçeneğini etkinleştirmek de gerçekten önemlidir . Bunu yaparak, sayfayı aşağı kaydırırken sabit modüllerin serbestçe hareket etmesine izin verecek sütunlarda bir miktar boş alan yaratacaksınız.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %100
• Maksimum Genişlik: %100

Sütun 2 Üst Dolgu

Sonraki sütun 2 ayarlarını açın ve masaüstüne biraz üst dolgu ekleyin.

• Üst Dolgu: 20vw (Masaüstü), 0vw (Tablet ve Telefon)

Sütun 3 Üst Dolgu

Üçüncü sütuna da özel bir üst dolgu değeri ekleyin.

• Üst Dolgu: 40vw (Masaüstü), 0vw (Tablet ve Telefon)

Sütun 4 Üst Dolgu

Ve 4. sütuna da bir üst dolgu değeri ekleyerek satırın ayarlarını tamamlayın.

• Üst Dolgu: 60vw (Masaüstü), 0vw (Tablet ve Telefon)

1. Sütun'a CTA ekle

İçerik Ekle

Modül eklemeye başlama zamanı! 1. sütunda ihtiyacımız olan ilk modül bir CTA Modülüdür. Seçtiğiniz bazı içeriği ekleyin.

Bağlantı

Düğmeye bir bağlantı da ekleyin. Bunu yapmak, düğmenin tasarımda görünmesini sağlar.

• Düğme Bağlantı URL'si: #

Arka plan rengi

Ardından modülün arka plan rengini değiştirin.

• Arka Plan Rengi: #ffffff

Metin Ayarları

Tasarım sekmesine gidin ve genel metin ayarlarını değiştirin.

• Metin Hizalama: Merkez
• Metin Rengi: Koyu

Başlık Metni Ayarları

Başlık metni ayarlarını da değiştirin.

• Başlık Başlık Düzeyi: H3
• Başlık Yazı Tipi: Spektral
• Başlık Metin Rengi: #000000
• Başlık Metin Boyutu: 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)

Gövde Metni Ayarları

Gövde metni ayarlarıyla birlikte.

• Gövde Yazı Tipi: Fira Sans
• Gövde Yazı Tipi Ağırlığı: Hafif
• Gövde Metni Rengi: #000000
• Gövde Metni Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Gövde Çizgisi Yüksekliği: 1.8em

Düğme Ayarları

CTA Modülünüzün düğmesine de stil vermeyi unutmayın.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #444eff
• Düğme Kenar Genişliği: 0px

• Düğme Sınır Yarıçapı: 50vw
• Düğme Yazı Tipi: Fira Sans

• Üst Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Alt Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Sol Dolgu: 3vw (Masaüstü), 7vw (Tablet), 13vw (Telefon)
• Sağ Doldurma: 3vw (Masaüstü), 7vw (Tablet), 13vw (Telefon)

aralık

Ardından, boşluk ayarlarına gidin ve bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 8vw
• Alt Dolgu: 8vw

Sınır

Modüle bazı yuvarlak köşeler de ekleyin.

• Yuvarlatılmış Köşeler: 1vw (Tüm Köşeler)

Kutu Gölge

İnce bir kutu gölgesi ekleyerek modülün tasarımını tamamlayın.

• Kutu Gölgesi Yatay Konum: 10px
• Kutu Gölge Bulanıklığı Gücü: 50px
• Gölge Rengi: rgba(0,0,0,0.08)

CSS Sınıfı

Şimdi, kaydırmalı yapışkan efektin çalışması için bu öğreticinin sonuna birkaç satır CSS kodu eklememiz gerekecek. Buna hazırlık olarak, CTA Modülüne bir CSS sınıfı ekleyeceğiz.

• CSS Sınıfı: yapışkan-cta

Sütun 1'e Görüntü Modülü Ekle

Fotoğraf yükleniyor

Bir Görüntü Modülü olan sütun 1'de ihtiyacımız olan sonraki ve son modüle geçiyoruz. Seçtiğiniz bir PNG resmini yükleyin.

hizalama

Sonraki görüntü hizalamasını değiştirin.

• Görüntü Hizalama: Merkez

boyutlandırma

Modülü de tam genişliğe zorladığınızdan emin olun.

• Tam Genişliği Zorla: Evet

aralık

Aralık ayarlarına giderek ve farklı ekran boyutlarına bazı özel aralık değerleri ekleyerek modülün ayarlarını tamamlayın.

• Üst Marj: -5vw (Tablet ve Telefon)
• Alt Kenar Boşluğu: -12vw (Masaüstü), 5vw (Tablet ve Telefon)
• Sol Dolgu: 3vw (Masaüstü), 10vw (Tablet), 25vw (Telefon)
• Sağ Doldurma: 3vw (Masaüstü), 10vw (Tablet), 25vw (Telefon)

Her İki Modülü Üç Kez Klonla ve Kalan Sütunlara Yerleştir

1. sütundaki her iki modülü de tamamladıktan sonra, ikisini de üç kez kopyalayabilir ve kopyaları satırın kalan sütunlarına yerleştirebilirsiniz.

Resimleri Değiştir

Her yinelenen Görüntü Modülündeki görüntüyü değiştirdiğinizden emin olun.

CTA İçeriğini ve Düğme Arka Plan Renklerini Değiştirin

Düğme arka plan renkleri ile birlikte CTA içeriğini de değiştirin.

• CTA Modülü #2: #89ffb4
• CTA Modülü #3: #ff89f1
• CTA Modülü #4: #ffd389

Sütun 1, 2 ve 3'teki Görüntü Modüllerine CSS Sınıfı Ekleme

Şimdi, yapışkan efektin resimler üzerinde de çalıştığından emin olmak için, Sütun 1, 2 ve 3'teki Görüntü Modüllerine bir CSS sınıfı eklememiz gerekecek.

• CSS Sınıfı: yapışkan görüntü

2. Satır Ekle

Sütun Yapısı

Geriye sadece CSS kodunu eklemek kalıyor. Bunu yapmak için yeni bir satır ekleyin.

CSS Kodu ile Kod Modülü Ekleme

Satıra bir Kod Modülü ekleyin, aşağıdaki CSS kodunu ekleyin ve işiniz bitti!

<style>
@media only screen and (min-width: 980px) {
.sticky-cta {
position: sticky;
position: -webkit-sticky;
top: 8vw !important;
}

.sticky-image {
position: sticky;
position: -webkit-sticky;
top: 28vw !important;
}
}</style>

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Tablet ve Mobil

Son düşünceler

Bu gönderide, modülleri sütun kaplarında nasıl sabit tutacağınızı gösterdik. Tekniği kullanmak, sayfanızdaki çeşitli harekete geçirici mesajları vurgulamanıza olanak tanıyan bazı çarpıcı kaydırma efektleriyle sonuçlanabilir. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.