Divisor Divis altında güzel bir altbilgi kaydırma nasıl ortaya çıkarılır
Tüm tasarım trendleri boyunca, altbilgi önemlidir. İnsanlar onlara çok alışkınlar, bu da onları çok kullanıcı dostu hale getirdi. Ziyaretçilerin web sitenizde kalmalarına ve aradıkları doğru sayfalara geçmelerine yardımcı olurlar. Divi ile, her türlü altbilgiyi bir kısımda kolayca yapabilirsiniz. Şimdi, altbilginize birkaç boyut ve ekstra etkileşim vermek istiyorsanız, bu gönderiyi beğeneceksiniz. Bir kaydırma açıklaması yapmak için altbilgiyi parçanın böleniyle yaratıcı bir şekilde birleştireceğiz.
Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım. Masaüstü
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. Takip et 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.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! YouTube kanalımıza abone olun
1. Yeni bir Boş Sayfa Oluştur ve Düzen Seçenekleri Yükle Yeni Bir Boş Sayfa Ekle Yapmanız gereken ilk şey yeni bir boş sayfa oluşturmaktır.
Visual Builder’a dönen Saas Şirketi Düzeninin Düzen Paketini yükleyin ve SaaS Company Düzen Paketini yükleyin. Bu özel düzeni kullansak da, bu tekniği üzerinde çalıştığınız her türlü sayfada çalıştırabilirsiniz. 2. Her bölüme Dizin Z ekleyin ve Animasyon Bölümü Sil Z ekleyin, Kahraman’a Dizin Z ekleyin. Dizin Z: 3
Z & macun dizinini, Kopyala Z Kopyala ve Kopyala sayfasını sayfadaki diğer tüm parçalara yapıştırın. Her bölüm için Z endeksinin arttırılması, bir çalışma eğitimi yapmak için önemli bir adımdır. Bu, her bölümün daha sonra yayında ekleyeceğimiz altbilgi bölümünün üzerinde görünmesine izin verecektir. Kahramanların animasyonunu kaldırın, altbilginin sayfanın altına gizli kalmasını sağlamak için bölümün tüm animasyonlarını da sileceğiz. Kahraman bölümünü açın ve animasyonu silin. Animasyon Stili: Hiçbir Şey
Animasyonu sayfadaki tüm parçalara genişletin Animasyon stilini tüm sayfalardaki tüm parçalara genişletin. 3. Sayfadaki son parçayı değiştirin Arka plan rengini değiştirin, sayfadaki son parçaya taşının ve arka plan rengini değiştirin. Arka plan rengi: #f2f2f2
4. Normal Bölüm #1’i Arka Plan Renk Ayarları sayfasının altına ekleyin Bu yayının önizlemesinde gördüğünüz gibi, altbilgi bölüm ayırıcı altında görünecektir. Bu bölümü bölmek için sayfamızın altında yeni bir parça ayıracağız. Bölüm ayarlarını açın ve tamamen şeffaf bir arka plan rengi kullanın. Bu, altbilginin konumu altında olmasına rağmen kabın bir kısmı aracılığıyla görüntülenmesine izin verecektir. Arka plan rengi: RGBA (0.0.0,0) Üst bölücü bölümün tasarım sekmesine geçer ve seçtiğiniz bölücüyü ekler.
Bölme Stili: Listede bulun Eşitsiz Yükseklik: 250 piksel (masaüstü), 150 piksel (tablet), 100 piksel (cep telefonu)
Yatay bölücü tekrar: 2x
Yeni Z indeksinde ayrıca Z indeksinde bir artış gerektirir.
Dizin Z: 3 5. Normal Bölüm #2’yi arka plan renk ayarı sayfasının altına ekleyin. Altbilgiyi yapma zamanı! Sayfanın altına başka yeni normal bölümler ekleyin ve istediğiniz arka plan rengini seçin.
Arka plan rengi: #202332 Yapıştırıcı Tasarım sekmesini açın ve genişliğin ‘%100’ olduğundan emin olun.
Genişlik:% 100 Mesafemizin üst dolguyu da artırması gerekiyor.
Üst dolgu: 500 piksel Bu bölüme ayarladığımız Z dizininin Z index’i sayfanın diğer kısımlarından daha düşüktür. Bu, sayfanın altına gelene kadar bölümü gizlememize yardımcı olacaktır.
Dizin Z: 2 Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:
Yüksek sütunu eşitleyin: evet
Sütun Aralığı Bir sonraki sütun 1 ayarlarını açın ve sol dolgu ekleyin. Sol dolgu: 20px
Sütunun sağ sınırı, sütuna da doğru sınırı ekler. Sağ sınır genişliği: 1 piksel
Sağ kenar renk: #515151 Sütun Stilini Kopyala
Resim Modülünü Sütun 1’e ekleyin Modül eklemeye başlama zamanını yükleyin! İlk sütuna yeni bir resim modülü ekleyin ve logonuzu yükleyin.
Yapıştırıcı tasarım sekmesine taşındı ve çeşitli ekran boyutlarında geniş değişti. Genişlik:% 35 (masaüstü),% 30 (tablet),% 25 (cep telefonu) Modül hizalaması: sol Mesafe biraz alt kenar boşlukları da ekleyin.
Resmin altındaki alanı göster: Evet
Alt kenar boşluğu: 50 piksel Sütun 2’ye Metin Modülü #1 ekleyin İkinci sütuna doldurun! İstediğiniz içerikten bazılarıyla ilk metin modülünü ekleyin.
Metin Ayarları Metin ayarlarını değiştirin.
Metin yazı tipi: nunito sans Metin yazı tipi ağırlığı: yarı kalınlık Metin rengi: #ffffff
Metin Boyutu: 19px
Mesafe ve özellikle çeşitli ekran boyutlarında üst ve alt kenar boşlukları ekleyin.
Üst kenar: 15px (masaüstü ve tablet), 10 piksel (telefon)
Alt kenar boşluğu: 15px (masaüstü ve tablet), 10 piksel (telefon) Metin Modülü #2 ekle Sütun 2 Dolgu Ekle İkinci metin modülünü ikinci sütuna ekleyin ve istediğiniz içerikten bazılarını girin.
Bir bağlantı ekleyin, altbilgi öğesiyle eşleşen bir bağlantı ekleyin.
Modül Bağlantı URL’si: # Metin Ayarları Sonraki metin ayarlarını değiştirir. Metin yazı tipi: nunito sans
Metin rengi: #dbdbdb Metin Boyutu: 17 piksel
Mesafe ve çeşitli ekran boyutlarında bazı özel üst ve alt yatak ekleyin.
Üst kenar: 15px (masaüstü ve tablet), 10 piksel (telefon)
Alt kenar boşluğu: 15px (masaüstü ve tablet), 10 piksel (telefon) Clon Metin Modülü #2 Gerektiğinde sık sık ikinci metin modülünü Sütun 2’deki klonlamak gerektiği kadar. İçeriği değiştirin içeriği değiştirdiğinizden emin olun.
Bağlantıyı bağlantı ile birlikte değiştirin.
Modül Bağlantı URL’si: # Sütun 2’deki klon modülü, ikinci sütunu tamamladıktan sonra kalan sütuna yerleştirin, hem gerektiği kadar modülü klonlayabilir ve kalan iki sıra sütuna yerleştirebilirsiniz. İçeriği Değiştir Her bir kopyanın içeriğini değiştirin. Bağlantı ile bağlantıyı değiştirin.
Modül Bağlantı URL’si: # 6. Bölüm #2 Sayfanın Altında Kalın Şimdi Özel CSS ekleyin, kaydırma açıklamaları yapmak için, altbilgi bölümünün sayfamızın alt kısmına iki sıra CSS kodu ekleyerek yapışmasını sağlayacağız. bölüm. Konum: Sabit; Alt: 0; 7. Bir Açıklama Etkisi Oluşturmak İçin Alt Marjı Bölüm 1’e ekleyin Çeşitli Ekran Boyutlarına Alt Kenar Ekleyin, Aybağımızın alt kısmında altbilginin görünmesini sağlayan alana da ihtiyacımız var. Divisor içeren parçayı açın ve çeşitli ekran boyutlarına bazı alt kenar boşlukları ekleyin ve tamamlayın!
Alt marj: 400 piksel (masaüstü), 700 piksel (tablet), 800 piksel (telefon) Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! YouTube kanalımıza abone olun
1. Yeni bir Boş Sayfa Oluştur ve Düzen Seçenekleri Yükle Yeni Bir Boş Sayfa Ekle Yapmanız gereken ilk şey yeni bir boş sayfa oluşturmaktır.
Visual Builder’a dönen Saas Şirketi Düzeninin Düzen Paketini yükleyin ve SaaS Company Düzen Paketini yükleyin. Bu özel düzeni kullansak da, bu tekniği üzerinde çalıştığınız her türlü sayfada çalıştırabilirsiniz. 2. Her bölüme Dizin Z ekleyin ve Animasyon Bölümü Sil Z ekleyin, Kahraman’a Dizin Z ekleyin. Dizin Z: 3
Z & macun dizinini, Kopyala Z Kopyala ve Kopyala sayfasını sayfadaki diğer tüm parçalara yapıştırın. Her bölüm için Z endeksinin arttırılması, bir çalışma eğitimi yapmak için önemli bir adımdır. Bu, her bölümün daha sonra yayında ekleyeceğimiz altbilgi bölümünün üzerinde görünmesine izin verecektir. Kahramanların animasyonunu kaldırın, altbilginin sayfanın altına gizli kalmasını sağlamak için bölümün tüm animasyonlarını da sileceğiz. Kahraman bölümünü açın ve animasyonu silin. Animasyon Stili: Hiçbir Şey
Animasyonu sayfadaki tüm parçalara genişletin Animasyon stilini tüm sayfalardaki tüm parçalara genişletin. 3. Sayfadaki son parçayı değiştirin Arka plan rengini değiştirin, sayfadaki son parçaya taşının ve arka plan rengini değiştirin. Arka plan rengi: #f2f2f2
4. Normal Bölüm #1’i Arka Plan Renk Ayarları sayfasının altına ekleyin Bu yayının önizlemesinde gördüğünüz gibi, altbilgi bölüm ayırıcı altında görünecektir. Bu bölümü bölmek için sayfamızın altında yeni bir parça ayıracağız. Bölüm ayarlarını açın ve tamamen şeffaf bir arka plan rengi kullanın. Bu, altbilginin konumu altında olmasına rağmen kabın bir kısmı aracılığıyla görüntülenmesine izin verecektir. Arka plan rengi: RGBA (0.0.0,0) Üst bölücü bölümün tasarım sekmesine geçer ve seçtiğiniz bölücüyü ekler.
Bölme Stili: Listede bulun Eşitsiz Yükseklik: 250 piksel (masaüstü), 150 piksel (tablet), 100 piksel (cep telefonu)
Yatay bölücü tekrar: 2x
Yeni Z indeksinde ayrıca Z indeksinde bir artış gerektirir.
Dizin Z: 3 5. Normal Bölüm #2’yi arka plan renk ayarı sayfasının altına ekleyin. Altbilgiyi yapma zamanı! Sayfanın altına başka yeni normal bölümler ekleyin ve istediğiniz arka plan rengini seçin.
Arka plan rengi: #202332 Yapıştırıcı Tasarım sekmesini açın ve genişliğin ‘%100’ olduğundan emin olun.
Genişlik:% 100 Mesafemizin üst dolguyu da artırması gerekiyor.
Üst dolgu: 500 piksel Bu bölüme ayarladığımız Z dizininin Z index’i sayfanın diğer kısımlarından daha düşüktür. Bu, sayfanın altına gelene kadar bölümü gizlememize yardımcı olacaktır.
Dizin Z: 2 Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:
Yapıştırıcı Satır ayarlarını açın ve uygun boyut ayarlarını değiştirin:
Özel Talang genişliği kullanın: evet Talang genişliği: 1Yüksek sütunu eşitleyin: evet
Sütun Aralığı Bir sonraki sütun 1 ayarlarını açın ve sol dolgu ekleyin. Sol dolgu: 20px
Sütunun sağ sınırı, sütuna da doğru sınırı ekler. Sağ sınır genişliği: 1 piksel
Sağ kenar renk: #515151 Sütun Stilini Kopyala
Resim Modülünü Sütun 1’e ekleyin Modül eklemeye başlama zamanını yükleyin! İlk sütuna yeni bir resim modülü ekleyin ve logonuzu yükleyin.
Yapıştırıcı tasarım sekmesine taşındı ve çeşitli ekran boyutlarında geniş değişti. Genişlik:% 35 (masaüstü),% 30 (tablet),% 25 (cep telefonu) Modül hizalaması: sol Mesafe biraz alt kenar boşlukları da ekleyin.
Resmin altındaki alanı göster: Evet
Alt kenar boşluğu: 50 piksel Sütun 2’ye Metin Modülü #1 ekleyin İkinci sütuna doldurun! İstediğiniz içerikten bazılarıyla ilk metin modülünü ekleyin.
Metin Ayarları Metin ayarlarını değiştirin.
Metin yazı tipi: nunito sans Metin yazı tipi ağırlığı: yarı kalınlık Metin rengi: #ffffff
Metin Boyutu: 19px
Mesafe ve özellikle çeşitli ekran boyutlarında üst ve alt kenar boşlukları ekleyin.
Üst kenar: 15px (masaüstü ve tablet), 10 piksel (telefon)
Alt kenar boşluğu: 15px (masaüstü ve tablet), 10 piksel (telefon) Metin Modülü #2 ekle Sütun 2 Dolgu Ekle İkinci metin modülünü ikinci sütuna ekleyin ve istediğiniz içerikten bazılarını girin.
Bir bağlantı ekleyin, altbilgi öğesiyle eşleşen bir bağlantı ekleyin.
Modül Bağlantı URL’si: # Metin Ayarları Sonraki metin ayarlarını değiştirir. Metin yazı tipi: nunito sans
Metin rengi: #dbdbdb Metin Boyutu: 17 piksel
Mesafe ve çeşitli ekran boyutlarında bazı özel üst ve alt yatak ekleyin.
Üst kenar: 15px (masaüstü ve tablet), 10 piksel (telefon)
Alt kenar boşluğu: 15px (masaüstü ve tablet), 10 piksel (telefon) Clon Metin Modülü #2 Gerektiğinde sık sık ikinci metin modülünü Sütun 2’deki klonlamak gerektiği kadar. İçeriği değiştirin içeriği değiştirdiğinizden emin olun.
Bağlantıyı bağlantı ile birlikte değiştirin.
Modül Bağlantı URL’si: # Sütun 2’deki klon modülü, ikinci sütunu tamamladıktan sonra kalan sütuna yerleştirin, hem gerektiği kadar modülü klonlayabilir ve kalan iki sıra sütuna yerleştirebilirsiniz. İçeriği Değiştir Her bir kopyanın içeriğini değiştirin. Bağlantı ile bağlantıyı değiştirin.
Modül Bağlantı URL’si: # 6. Bölüm #2 Sayfanın Altında Kalın Şimdi Özel CSS ekleyin, kaydırma açıklamaları yapmak için, altbilgi bölümünün sayfamızın alt kısmına iki sıra CSS kodu ekleyerek yapışmasını sağlayacağız. bölüm. Konum: Sabit; Alt: 0; 7. Bir Açıklama Etkisi Oluşturmak İçin Alt Marjı Bölüm 1’e ekleyin Çeşitli Ekran Boyutlarına Alt Kenar Ekleyin, Aybağımızın alt kısmında altbilginin görünmesini sağlayan alana da ihtiyacımız var. Divisor içeren parçayı açın ve çeşitli ekran boyutlarına bazı alt kenar boşlukları ekleyin ve tamamlayın!
Alt marj: 400 piksel (masaüstü), 700 piksel (tablet), 800 piksel (telefon) Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
