Divi ile tam ekran kaydırıcısı nasıl yapılır
Tam ekran kayması, web sitenizin ana sitesinin bir başlığı olarak çok iyi çalışabilir. Tam ekran yönü, en iyi parodaki önemli içeriği sürekli olarak korur. Ve kaydırıcı işlevi, kullanıcının sayfayı aşağı kaydırmak zorunda kalmadan ek içerik (veya CTA) görüntülemesine izin verir. Divi ile tam ekran kaydırıcısı yapmak çok kolay çıktı. Anahtar, kaydırıcınıza tarayıcının yüksekliğine göre bir yükseklik vermek ve daha sonra dolgu sınırını ve satırdaki veya ana parçadaki ek genişliği çıkarmaktır. Sadece birkaç dakika içinde, sayfayı yüklerken tüm ekranı doldurmak için genişleyen ve tüm cihazlarda harika görünen tam ekran kayması yapabilirsiniz.
Başlayalım. Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız tasarımın bir bakış. Bu öğreticinin tasarımını almak için tam ekran kaydırıcısının düzenini indirin, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone olmayacak” veya ek e -postalar almayacaksınız.
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Birlikte takip edin ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Parçanın düzenini Divi kütüphanenize aktarmak için Divi kütüphanesine gidin.
İçe Aktar düğmesini tıklayın. Taşınabilirlik açılır penceresinde, İçe Aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin. Ardından İçe Aktar düğmesini tıklayın.
Bittiğinde, parçanın düzeni Divi Builder’da mevcut olacak. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacın var Başlamak için aşağıdakileri yapmanız gerekir: Değilse, divi temasını yükleyin ve etkinleştirin.
WordPress’te yeni bir sayfa oluşturun ve ön taraftaki sayfaları düzenlemek için Divi Builder’ı kullanın (görsel yapımcı).
“Başından Uyan” seçeneğini seçin.
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Divi Bölüm 1’de tam ekran kaydırıcısı yapın: Bölüm ve satırı başlatmak için hazırlayın, bölüme bir satır bir sütun ekleyin.
Modülü eklemeden önce dolgu bölümü, parçaların ayarlarını açın ve üst ve alt dolguyu aşağıdaki gibi çıkarın: Dolgu: 0px üst, 0px aşağıda
Sonraki satır ayarları, aşağıdaki satırlar için ayarları açın ve güncelleme: Genişlik:% 100
Maksimum genişlik:% 100
Dolgu: 0px üst, 0px aşağıda
Şimdi sıralarımızın kısmı ve dolgusu kaldırıldı ve sıra genişliğimiz%100, satıra ekleyeceğimiz kaydırıcı, herhangi bir boşluk olmadan satır/parçanın genişliğine ve yüksekliğine ulaşabilecek. Bölüm 2: Tam ekran kaydırması yapmak için tam ekran kaydırıcısı yapın, satıra yeni bir yükseltme modülü ekleyin. Genel slayt ayarlarını güncellemeden önce her slayta resim ekleyin, ilk varsayılan slayt için ayarları açın ve resimler ve arka plan resimleri ekleyin slayt. Bu örnek için, slayt görüntüleri ve arka plan görüntüleri için aynı görüntüyü kullanıyorum (yaklaşık 1920px kez 1500px). Ardından ikinci slayt ayarlarını açın ve slayta farklı arka plan görüntüleri ve görüntüleri ekleyin. Kaydırma Ayarlarını Güncelle Şimdi her bir slayt benzersiz bir görüntü ve arka plan görüntüsü vardır, genel olarak kaydırıcılar için ayarları güncellemeye hazırız. Kaydırıcı ayarlarına geri dönün ve tasarım sekmesi altında aşağıdakileri güncelleyin: Arka plan streç Bir arka plan streç kullanın: evet
Arka plan rengi: RGBA (27,18,38,0,74)
Resim Kutusu Resim
Resim Kutusu Gölgesi: Ekran görüntüsüne bakın Yatay Konum Gölge Kutusu: -8VW
Kutu gölgesinin dikey konumu: -8vw
Kutunun gölgesinin dağılımının gücü: -6.5vw
Gölge Renk: #CF1259
Başlık metni
Yazı tipi başlığı: Montserrat Ağır yazı tipi başlığı: Ultra Kalın
Boyut Metin Başlığı: 5VW (masaüstü), 40px (tablet ve cep telefonu)
Gövde metni
Vücut ağırlığı: yarı kalın Vücut Metin Boyutu: 16px
Vücut Hattı Yüksekliği: 1.8EM
Düğme Stili
Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 16px
Arka Plan Renk Düğmesi: #CF1259
Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 0px
Mektup Ağırlığı Düğmesi: Kalın
Yazı tipi stili düğmesi: TT
Dolgu düğmesi: 15px üst, 15px alt, 30px sol, 30px sağ
Kaydırıcı yüksekliği ve içerik genişliği
Maksimum Genişlik İçeriği:% 90 Yükseklik min: 100vh
Minimum 100VH yüksekliği vermek sürücünün tarayıcı penceresinin tam yüksekliğine ulaşmasını sağlayacaktır. Bu tam ekran kaydırıcısı yapmanın anahtarıdır. Sıra genişliği%100 olduğu için sürücü tarayıcı penceresinin tam genişliğine ulaşacaktır. Okları Gelişmiş sekmesinin altına kaydırarak, Oklar Slayt kutusuna aşağıdaki özel CSS ekleyerek kaydırıcı okunun boyutunu ve konumunu güncelleyin CSS: Yazı Tipi: 8VW! Önemli;
Marj -TOP: -4VW; Bu, titreyen okları büyük ekran boyutlarında daha büyük hale getirecek ve hücreseldeki daha küçük boyutlara düşürecektir.
Bölüm 3: Yükseklik yüksekliğinin kaydırıcı yüksekliğinden azaltılması Sayfada gölgelik varsa, tam ekran kayması aslında tarayıcı penceresinin altına hafifçe uzanacaktır. Bunun nedeni, başlığın yüksekliğinin şu anda 100VH yüksekliğine sahip kaydırıcıya (ViewPort/tarayıcı yüksekliğinin% 100’ü) basmasıdır. Sürücünün tarayıcı görünüm alanı altına itilmemesi için, kanopinin yüksekliğini sürücünün yüksekliğinden azaltmak için CSS calc () işlevini ekleyebilirsiniz. Bu işlev görmesi için gölgenin yüksekliğini (masaüstü ve hücresel) bilmeniz gerekir. Divi varsayılan başlığını kullanırsanız, başlık yüksekliği 80 piksel olacaktır. Böylece kaydırıcı yüksekliği 100vh – 80px olmalıdır. Özel yükseklik eklemek için, vardiya ayarlarını açın ve vardiyanın ana öğelerine aşağıdaki özel CSS ekleyin ve ayrıca her bir slayt için: Min -Height: Calc (100VH – 80PX)! Önemli;
Buradaki nihai sonuç nihai sonuçtur. Ve bu tabletler ve cep telefonlarında tasarım ekranı.
Divi’de tam ekran kayması yapmak için anahtar adımların son zihni, bölümü ve satırı tarayıcının tam genişliğine ulaşmak ve daha sonra minimum 100VH yüksekliğe sahip bir vardiya vermektir.Başlığı kullanırsanız, tam ekran kaymasının tarayıcının altını aşmadığından emin olmak için kanopinin yüksekliğini azaltacak özel bir CSS görüntüsü ekleyebilirsiniz.Anahtar adımlar uygulandığında, Divi Builder’da bulunan tüm gelişmiş tasarım özelliklerini kullanmak istediğiniz herhangi bir şekilde daha fazla kaydırıcıyı (ve slaytları) ayarlayabilirsiniz. Herhangi bir ekranı dolduran kahramanlarınız için güzel ve etkili bir kayar çubuk yapmak için kullanabilirsiniz herhangi bir cihazda.Umarım divi siteniz için bu yararlı eklemeden hoşlanırsınız.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
Parçanın düzenini Divi kütüphanenize aktarmak için Divi kütüphanesine gidin.
İçe Aktar düğmesini tıklayın. Taşınabilirlik açılır penceresinde, İçe Aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin. Ardından İçe Aktar düğmesini tıklayın.
Bittiğinde, parçanın düzeni Divi Builder’da mevcut olacak. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacın var Başlamak için aşağıdakileri yapmanız gerekir: Değilse, divi temasını yükleyin ve etkinleştirin.
WordPress’te yeni bir sayfa oluşturun ve ön taraftaki sayfaları düzenlemek için Divi Builder’ı kullanın (görsel yapımcı).
“Başından Uyan” seçeneğini seçin.
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Divi Bölüm 1’de tam ekran kaydırıcısı yapın: Bölüm ve satırı başlatmak için hazırlayın, bölüme bir satır bir sütun ekleyin.
Modülü eklemeden önce dolgu bölümü, parçaların ayarlarını açın ve üst ve alt dolguyu aşağıdaki gibi çıkarın: Dolgu: 0px üst, 0px aşağıda
Sonraki satır ayarları, aşağıdaki satırlar için ayarları açın ve güncelleme: Genişlik:% 100
Maksimum genişlik:% 100
Dolgu: 0px üst, 0px aşağıda
Şimdi sıralarımızın kısmı ve dolgusu kaldırıldı ve sıra genişliğimiz%100, satıra ekleyeceğimiz kaydırıcı, herhangi bir boşluk olmadan satır/parçanın genişliğine ve yüksekliğine ulaşabilecek. Bölüm 2: Tam ekran kaydırması yapmak için tam ekran kaydırıcısı yapın, satıra yeni bir yükseltme modülü ekleyin. Genel slayt ayarlarını güncellemeden önce her slayta resim ekleyin, ilk varsayılan slayt için ayarları açın ve resimler ve arka plan resimleri ekleyin slayt. Bu örnek için, slayt görüntüleri ve arka plan görüntüleri için aynı görüntüyü kullanıyorum (yaklaşık 1920px kez 1500px). Ardından ikinci slayt ayarlarını açın ve slayta farklı arka plan görüntüleri ve görüntüleri ekleyin. Kaydırma Ayarlarını Güncelle Şimdi her bir slayt benzersiz bir görüntü ve arka plan görüntüsü vardır, genel olarak kaydırıcılar için ayarları güncellemeye hazırız. Kaydırıcı ayarlarına geri dönün ve tasarım sekmesi altında aşağıdakileri güncelleyin: Arka plan streç Bir arka plan streç kullanın: evet
Arka plan rengi: RGBA (27,18,38,0,74)
Resim Kutusu Resim
Resim Kutusu Gölgesi: Ekran görüntüsüne bakın Yatay Konum Gölge Kutusu: -8VW
Kutu gölgesinin dikey konumu: -8vw
Kutunun gölgesinin dağılımının gücü: -6.5vw
Gölge Renk: #CF1259
Başlık metni
Yazı tipi başlığı: Montserrat Ağır yazı tipi başlığı: Ultra Kalın
Boyut Metin Başlığı: 5VW (masaüstü), 40px (tablet ve cep telefonu)
Gövde metni
Vücut ağırlığı: yarı kalın Vücut Metin Boyutu: 16px
Vücut Hattı Yüksekliği: 1.8EM
Düğme Stili
Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 16px
Arka Plan Renk Düğmesi: #CF1259
Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 0px
Mektup Ağırlığı Düğmesi: Kalın
Yazı tipi stili düğmesi: TT
Dolgu düğmesi: 15px üst, 15px alt, 30px sol, 30px sağ
Kaydırıcı yüksekliği ve içerik genişliği
Maksimum Genişlik İçeriği:% 90 Yükseklik min: 100vh
Minimum 100VH yüksekliği vermek sürücünün tarayıcı penceresinin tam yüksekliğine ulaşmasını sağlayacaktır. Bu tam ekran kaydırıcısı yapmanın anahtarıdır. Sıra genişliği%100 olduğu için sürücü tarayıcı penceresinin tam genişliğine ulaşacaktır. Okları Gelişmiş sekmesinin altına kaydırarak, Oklar Slayt kutusuna aşağıdaki özel CSS ekleyerek kaydırıcı okunun boyutunu ve konumunu güncelleyin CSS: Yazı Tipi: 8VW! Önemli;
Marj -TOP: -4VW; Bu, titreyen okları büyük ekran boyutlarında daha büyük hale getirecek ve hücreseldeki daha küçük boyutlara düşürecektir.
Bölüm 3: Yükseklik yüksekliğinin kaydırıcı yüksekliğinden azaltılması Sayfada gölgelik varsa, tam ekran kayması aslında tarayıcı penceresinin altına hafifçe uzanacaktır. Bunun nedeni, başlığın yüksekliğinin şu anda 100VH yüksekliğine sahip kaydırıcıya (ViewPort/tarayıcı yüksekliğinin% 100’ü) basmasıdır. Sürücünün tarayıcı görünüm alanı altına itilmemesi için, kanopinin yüksekliğini sürücünün yüksekliğinden azaltmak için CSS calc () işlevini ekleyebilirsiniz. Bu işlev görmesi için gölgenin yüksekliğini (masaüstü ve hücresel) bilmeniz gerekir. Divi varsayılan başlığını kullanırsanız, başlık yüksekliği 80 piksel olacaktır. Böylece kaydırıcı yüksekliği 100vh – 80px olmalıdır. Özel yükseklik eklemek için, vardiya ayarlarını açın ve vardiyanın ana öğelerine aşağıdaki özel CSS ekleyin ve ayrıca her bir slayt için: Min -Height: Calc (100VH – 80PX)! Önemli;
Buradaki nihai sonuç nihai sonuçtur. Ve bu tabletler ve cep telefonlarında tasarım ekranı.
Divi’de tam ekran kayması yapmak için anahtar adımların son zihni, bölümü ve satırı tarayıcının tam genişliğine ulaşmak ve daha sonra minimum 100VH yüksekliğe sahip bir vardiya vermektir.Başlığı kullanırsanız, tam ekran kaymasının tarayıcının altını aşmadığından emin olmak için kanopinin yüksekliğini azaltacak özel bir CSS görüntüsü ekleyebilirsiniz.Anahtar adımlar uygulandığında, Divi Builder’da bulunan tüm gelişmiş tasarım özelliklerini kullanmak istediğiniz herhangi bir şekilde daha fazla kaydırıcıyı (ve slaytları) ayarlayabilirsiniz. Herhangi bir ekranı dolduran kahramanlarınız için güzel ve etkili bir kayar çubuk yapmak için kullanabilirsiniz herhangi bir cihazda.Umarım divi siteniz için bu yararlı eklemeden hoşlanırsınız.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
