Yeni bir Divi Overflow seçeneği ile bir kaydırma galerisi maketi nasıl yapılır
Web sitenizde resimleri görüntülemenin yaratıcı yollarını mı arıyorsunuz? Okumaya devam ettiğinizden emin olun, çünkü bu yazıda size DIVI varsayılan seçeneğini kullanarak nasıl bir kaydırma galerisi yapacağınızı göstereceğiz. Somut olarak, parçayı bir maket haline getireceğiz ve Mockup’ın tüm sıraları yapacağız. Tekniği aldıktan sonra, mobil makette istediğiniz her türlü içeriği görüntüleyebilir ve kısa sürede sayfanıza etkileşimler ekleyebilirsiniz. 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! Yaratıcı başlayalım!
YouTube kanalına abone olun Yeni bir sayfa oluşturarak veya mevcut olanı açarak ve normal parçayı ekleyerek yapışkan başlangıcının yeni bir bölümünü ekliyoruz. Parçanın ayarlarını açın ve boyut ayarlarındaki genişliği ve maksimum genişliği değiştirin.
Genişlik: 25VW (masaüstü), 60vw (tablet), 80VW (telefon)
Maksimum genişlik: 25VW (masaüstü), 60VW (tablet), 80VW (telefon)
Mesafe Ardından, açık alan ayarları, tüm üst ve alt dolgu varsayılanını silin ve alan oluşturmak için bazı üst ve alt kenar boşlukları ekleyin. Üst Marj: 9VW
Aşağıda: 9VW
Üst dolgu: 0px
Aşağıda dolgu: 0px
Sınır, parçanın ayarlarına girerek devam edin ve her köşeye ’30px’ ekleyerek hücre maketini oluşturun. Kutunun gölgesi, şeklinin görünmesi için pürüzsüz bir kutunun gölgesini ekler. Bulanık Güç Gölgesi Kutusu: 100 PX
Gölge Renk: RGBA (0.0,0,0.18)
Sıra #1 sütun yapısı ekleyin Aşağıdaki sütun yapısını kullanarak bölüme ilk satırı ekleyerek devam edin: Herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve arka plan rengini değiştirin. Arka plan rengi: #ffffff
Yapıştırıcı daha sonra boyut ayarlarını açın ve satırın parçanın tüm genişliğini karşılamasına izin verin. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Bir sonraki varsayılan dolgunun üst ve altını çıkarın. Üst dolgu: 0px
Aşağıda dolgu: 0px
Gölge kutusu ve kutuların gölgelerini de ekleyin. Bulanık Güç Gölgesi Kutusu: 80px
Gölge Rengi: RGBA (0.0,0,0,92)
Z Son fakat en azından en az değil, görünürlük düzenlemesindeki Z dizinini artırarak satırların (ve özellikle kutunun gölgesinin) bir sonraki satırla örtüşmesini sağlayacağız. Dizin Z: 99 Metin modülünü sütuna ekle H2 içeriğini ekle Bu satırda ihtiyacımız olan tek modül bazı H2 içeriğine sahip metin modülüdür.
H2 Metin Ayarları H2’nin bir kopyasını ekledikten sonra, H2 metin ayarlarını açın ve bazı değişiklikler yapar. Başlık 2 Yazı Tipi: Abril Fatface Başlık 2 Metin Seviyesi: Orta
Başlık 2 Renk Metni: #000000
Başlık 2 Metin Boyutu: 1.5VW (Masaüstü), 3.5VW (Tablet), 5VW (Telefon)
Mesafe Bir sonraki geleneğin üst ve alt kenar boşluklarını ekleyin.
Üst kenar: 1.5vw (masaüstü ve tablet), 3.5vw (telefon) Alt kenar boşluğu: 1.5VW (masaüstü ve tablet), 3.5vw (telefon)
İkinci sıraya satırlar #2 sütun yapısı ekleyin! Burada aşağıdaki sütun yapısını kullanıyoruz:
Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve satırın parçanın tüm genişliğini karşılamasına izin verin. Sonraki adımlarda dikey bir yükseltme efekti oluşturmak için maksimumun yüksekliğini ve yüksekliğini de değiştiriyoruz. Özel Talang genişliği kullanın: evet Talang genişliği: 1
Daha önce de belirtildiği gibi dikey taşmalar, bu çizginin dikey olarak yuvarlanabileceğini yapıyoruz. Bunu yapmak için, hat görünürlüğü hattındaki dikey taşmayı değiştirmemiz gerekir.
Dikey Taşma: Kaydırma Görüntü modülünü yükleme sütununa ekleyin, devam edin ve ilk görüntü modülünü satıra ekleyin ve seçtiğiniz resmi yükleyin. Duyarlı sonuçlar sağlamak için görüntü modülündeki ‘Zorla Tam Genişlik’ seçeneğini etkinleştirdiğinizden emin olun.
Tam geniş zorla: Evet Bir sonraki boşluk ayarlarına açık mesafe ve bu ve daha düşük marjlar ekleyerek bir sonraki görünen modül arasında biraz boşluk oluşturun. Alt marj: 1VW
Klon görüntü modülü, ilk görüntü modülünü değiştirmeyi bitirdikten sonra istediğiniz sıklıkta, istediğiniz kadar klonlayabilirsiniz. Farklı görüntüler yükleyin Tabii ki, her kopyadaki görüntüleri değiştirmek istersiniz.
Üçüncü ve son satıra satırlar #3 sütun yapısı ekleyin! Aşağıdaki sütun yapısını kullanıyoruz: Herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve beyaz arka plan rengini ekleyin. Arka plan rengi: #ffffff Yapıştırıcı daha sonra boyut ayarlarını açın ve satırın parçanın tüm genişliğini karşılamasına izin verin. Özel Talang genişliği kullanın: evet
Talang genişliği: 1 Genişlik:% 100
Maksimum genişlik:% 100
Mesafe Bir sonraki gelenekte yukarı ve aşağı bazı dolgu değerleri ekleyin.
Üst Pilding: 2.1vw (masaüstü), 3.5vw (tablet), 5VW (telefon)
Aşağıda dolgu: 2.1vw (masaüstü), 3.5vw (tablet), 5VW (telefon) Derinlik oluşturmak için kutunun gölgesi ve kutunun gölgesini ekleyin.
Bulanık Güç Gölgesi Kutusu: 80px
Gölge Rengi: RGBA (0.0,0,0,92) Dizin Z Bu çizginin (ve özellikle kutunun gölgesinin) önceki satırla örtüşmesini sağlamak için Z endeksini artıracağız.
Dizin Z: 99 Sütuna Bir Düğme Modülü Ekle Bu satırda ihtiyacımız olan tek modülün bir kopyasını ekleyin Düğme Modülü. Seçtiğiniz bazı kopyaları ekleyin.
Daha sonra hizalama, tasarım sekmesini açın ve düğme hizalamasını değiştirin. Düğmenin hizalanması: orta
Düğme ayarlarını da değiştir düğmesini ayarlayın. Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 1VW (masaüstü), 2.5vw (tablet), 3.5vw (telefon)
Metin Renk Düğmesi: #fffffff Arka Plan Renk Düğmesi: #000000
Sınır sınır genişliği: 1px
Yazı tipi düğmesi: Abril Fatface
Mesafe ve özel bir dolgu değeri kullanarak istediğiniz şekli yapın.
Üst Dolgu: 0.5VW (masaüstü), 1VW (tablet), 2VW (Telefon)
Aşağıda dolgu: 0.5vw (masaüstü), 1VW (tablet), 2vw (telefon)
Sol dolgu: 3VW (masaüstü), 7vw (tablet), 9vw (telefon) Sağ dolgu: 3VW (masaüstü), 7vw (tablet), 9vw (telefon)
Style Scroll Style Sıra #2’ye CSS kimliği ekleyin, kaydırma çubuğunu ayarlamak isteyip istemediğiniz size bağlıdır. Evet ise, ikinci satırı açın ve CSS sınıfını ekleyin.
CSS Sınıfı: Resim Kaydırma Bilah
Sayfa ayarlarını açın, sonra satır ayarlarını açın.
CSS’yi kullanarak kaydırma kuvveti ve Gelişmiş sekmesindeki özel CSS kutusuna aşağıdaki CSS kodu satırını ekleyin:. Image-scollbar ::-WebKit-Scllolbar { Genişlik: 10 piksel;
} .Image-Sclollbar ::-WebKit-Sclollbar-Track { Arka plan: #f1f1f1;
}
.Image-Sclolbarbar ::-WebKit-Sclolbar-Thumb {
Arka plan: #000000;
}
Ö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! Yaratıcı başlayalım!
YouTube kanalına abone olun Yeni bir sayfa oluşturarak veya mevcut olanı açarak ve normal parçayı ekleyerek yapışkan başlangıcının yeni bir bölümünü ekliyoruz. Parçanın ayarlarını açın ve boyut ayarlarındaki genişliği ve maksimum genişliği değiştirin.
Genişlik: 25VW (masaüstü), 60vw (tablet), 80VW (telefon)
Maksimum genişlik: 25VW (masaüstü), 60VW (tablet), 80VW (telefon)
Mesafe Ardından, açık alan ayarları, tüm üst ve alt dolgu varsayılanını silin ve alan oluşturmak için bazı üst ve alt kenar boşlukları ekleyin. Üst Marj: 9VW
Aşağıda: 9VW
Üst dolgu: 0px
Aşağıda dolgu: 0px
Sınır, parçanın ayarlarına girerek devam edin ve her köşeye ’30px’ ekleyerek hücre maketini oluşturun. Kutunun gölgesi, şeklinin görünmesi için pürüzsüz bir kutunun gölgesini ekler. Bulanık Güç Gölgesi Kutusu: 100 PX
Gölge Renk: RGBA (0.0,0,0.18)
Sıra #1 sütun yapısı ekleyin Aşağıdaki sütun yapısını kullanarak bölüme ilk satırı ekleyerek devam edin: Herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve arka plan rengini değiştirin. Arka plan rengi: #ffffff
Yapıştırıcı daha sonra boyut ayarlarını açın ve satırın parçanın tüm genişliğini karşılamasına izin verin. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Bir sonraki varsayılan dolgunun üst ve altını çıkarın. Üst dolgu: 0px
Aşağıda dolgu: 0px
Gölge kutusu ve kutuların gölgelerini de ekleyin. Bulanık Güç Gölgesi Kutusu: 80px
Gölge Rengi: RGBA (0.0,0,0,92)
Z Son fakat en azından en az değil, görünürlük düzenlemesindeki Z dizinini artırarak satırların (ve özellikle kutunun gölgesinin) bir sonraki satırla örtüşmesini sağlayacağız. Dizin Z: 99 Metin modülünü sütuna ekle H2 içeriğini ekle Bu satırda ihtiyacımız olan tek modül bazı H2 içeriğine sahip metin modülüdür.
H2 Metin Ayarları H2’nin bir kopyasını ekledikten sonra, H2 metin ayarlarını açın ve bazı değişiklikler yapar. Başlık 2 Yazı Tipi: Abril Fatface Başlık 2 Metin Seviyesi: Orta
Başlık 2 Renk Metni: #000000
Başlık 2 Metin Boyutu: 1.5VW (Masaüstü), 3.5VW (Tablet), 5VW (Telefon)
Mesafe Bir sonraki geleneğin üst ve alt kenar boşluklarını ekleyin.
Üst kenar: 1.5vw (masaüstü ve tablet), 3.5vw (telefon) Alt kenar boşluğu: 1.5VW (masaüstü ve tablet), 3.5vw (telefon)
İkinci sıraya satırlar #2 sütun yapısı ekleyin! Burada aşağıdaki sütun yapısını kullanıyoruz:
Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve satırın parçanın tüm genişliğini karşılamasına izin verin. Sonraki adımlarda dikey bir yükseltme efekti oluşturmak için maksimumun yüksekliğini ve yüksekliğini de değiştiriyoruz. Özel Talang genişliği kullanın: evet Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Yükseklik: 38VW (masaüstü), 100vw (tablet), 120vw (telefon)
Maksimum Yükseklik: 38VW (masaüstü), 100VW (tablet), 120VW (Telefon)
Mesafe Ardından, boşluk ayarlarını açın ve tüm dolguyu varsayılan olarak silin.
Üst dolgu: 0px
Daha önce de belirtildiği gibi dikey taşmalar, bu çizginin dikey olarak yuvarlanabileceğini yapıyoruz. Bunu yapmak için, hat görünürlüğü hattındaki dikey taşmayı değiştirmemiz gerekir.
Dikey Taşma: Kaydırma Görüntü modülünü yükleme sütununa ekleyin, devam edin ve ilk görüntü modülünü satıra ekleyin ve seçtiğiniz resmi yükleyin. Duyarlı sonuçlar sağlamak için görüntü modülündeki ‘Zorla Tam Genişlik’ seçeneğini etkinleştirdiğinizden emin olun.
Tam geniş zorla: Evet Bir sonraki boşluk ayarlarına açık mesafe ve bu ve daha düşük marjlar ekleyerek bir sonraki görünen modül arasında biraz boşluk oluşturun. Alt marj: 1VW
Klon görüntü modülü, ilk görüntü modülünü değiştirmeyi bitirdikten sonra istediğiniz sıklıkta, istediğiniz kadar klonlayabilirsiniz. Farklı görüntüler yükleyin Tabii ki, her kopyadaki görüntüleri değiştirmek istersiniz.
Üçüncü ve son satıra satırlar #3 sütun yapısı ekleyin! Aşağıdaki sütun yapısını kullanıyoruz: Herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve beyaz arka plan rengini ekleyin. Arka plan rengi: #ffffff Yapıştırıcı daha sonra boyut ayarlarını açın ve satırın parçanın tüm genişliğini karşılamasına izin verin. Özel Talang genişliği kullanın: evet
Talang genişliği: 1 Genişlik:% 100
Maksimum genişlik:% 100
Mesafe Bir sonraki gelenekte yukarı ve aşağı bazı dolgu değerleri ekleyin.
Üst Pilding: 2.1vw (masaüstü), 3.5vw (tablet), 5VW (telefon)
Aşağıda dolgu: 2.1vw (masaüstü), 3.5vw (tablet), 5VW (telefon) Derinlik oluşturmak için kutunun gölgesi ve kutunun gölgesini ekleyin.
Bulanık Güç Gölgesi Kutusu: 80px
Gölge Rengi: RGBA (0.0,0,0,92) Dizin Z Bu çizginin (ve özellikle kutunun gölgesinin) önceki satırla örtüşmesini sağlamak için Z endeksini artıracağız.
Dizin Z: 99 Sütuna Bir Düğme Modülü Ekle Bu satırda ihtiyacımız olan tek modülün bir kopyasını ekleyin Düğme Modülü. Seçtiğiniz bazı kopyaları ekleyin.
Daha sonra hizalama, tasarım sekmesini açın ve düğme hizalamasını değiştirin. Düğmenin hizalanması: orta
Düğme ayarlarını da değiştir düğmesini ayarlayın. Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 1VW (masaüstü), 2.5vw (tablet), 3.5vw (telefon)
Metin Renk Düğmesi: #fffffff Arka Plan Renk Düğmesi: #000000
Sınır sınır genişliği: 1px
Yazı tipi düğmesi: Abril Fatface
Mesafe ve özel bir dolgu değeri kullanarak istediğiniz şekli yapın.
Üst Dolgu: 0.5VW (masaüstü), 1VW (tablet), 2VW (Telefon)
Aşağıda dolgu: 0.5vw (masaüstü), 1VW (tablet), 2vw (telefon)
Sol dolgu: 3VW (masaüstü), 7vw (tablet), 9vw (telefon) Sağ dolgu: 3VW (masaüstü), 7vw (tablet), 9vw (telefon)
Style Scroll Style Sıra #2’ye CSS kimliği ekleyin, kaydırma çubuğunu ayarlamak isteyip istemediğiniz size bağlıdır. Evet ise, ikinci satırı açın ve CSS sınıfını ekleyin.
CSS Sınıfı: Resim Kaydırma Bilah
Sayfa ayarlarını açın, sonra satır ayarlarını açın.
CSS’yi kullanarak kaydırma kuvveti ve Gelişmiş sekmesindeki özel CSS kutusuna aşağıdaki CSS kodu satırını ekleyin:. Image-scollbar ::-WebKit-Scllolbar { Genişlik: 10 piksel;
} .Image-Sclollbar ::-WebKit-Sclollbar-Track { Arka plan: #f1f1f1;
}
.Image-Sclolbarbar ::-WebKit-Sclolbar-Thumb {
Arka plan: #000000;
}
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
