Divi kaydırıcı modülü ile hücresel kılavuz nasıl yapılır (ücretsiz indir!)
Kaydırıcı, web tasarımında her zaman çok popülerdir. En büyük avantajlarından biri, ziyaretçilerin onu mobil cihazlarda kaydırabilmeleridir. Şu anda, kaydırma yeni bir tıklamadır, bu nedenle bir kayan çubuk eklemenin web sitenizdeki ziyaretçilerin sahip olduğu hücresel kullanıcıların deneyimini geliştirmeye yardımcı olabileceğini söylemeye gerek yoktur. Divi ile bir web sitesi oluştururken, satırlara veya üzerinde çalıştığınız herhangi bir parçaya kolayca kaydırıcı modülleri ekleyebilirsiniz. Ve biraz yaratıcılık ve deneyle, muhteşem web tasarımı elde edebilirsiniz. Yapabileceğiniz şeylerden biri, bir kaydırıcı modülü ile hücresel bir kılavuz yapmaktır. İstediğiniz kadar slayt ekleyebilirsiniz ve başlangıçta mobil cihazlar için tasarlanmış olmasına rağmen, yönergeler masaüstü ve tablette iyi görünecektir. Bu yazıda, başlangıçtan itibaren inanılmaz bir örnek oluşturacağız ve sonunda indirilecek bir parça sunacağız.
Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, farklı ekran boyutlarında geri döneceğimiz sonuçlara bakalım. Statik
Üst Pilding: 4VW (masaüstü), 5VW (tablet), 3VW (Telefon)
Aşağıda dolgu: 4VW (masaüstü), 5VW (tablet), 3VW (Telefon)
Sol dolgu: 30VW (masaüstü), 18VW (tablet), 3VW (Telefon)
Sağ dolgu: 30VW (masaüstü), 18VW (tablet), 3VW (Telefon) Aşağıdaki sütun yapısını kullanarak bölüme yeni satır ekleyerek yeni sütun yapısı satır ekleyin: Herhangi bir modül eklemeden gradyan arka planı, satır ayarlarını açın ve radyal gradyan arka plan ekleyin. Renk 1: #f9f9f9
Renk 2: RGBA (255,255,255.0)
Gradyan Türü: Radyal
Radyal Yön: Üst
Başlangıç Pozisyonu:% 40
Son pozisyon:% 40
Yapıştırıcı Satır boyutu ayarlarını girerek devam edin ve sütunlar arasındaki tüm boşlukları silin. Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Bizim mesafemiz de sıraya biraz dolgu ekledi. Dolgu Alt: 30 piksel
Bir sonraki sınır, sınır ayarındaki her köşeye ’20px’ ekleyin. Son fakat değil -love kutusunun gölgesi, sayfada biraz derinlik sağlamak için pürüzsüz kutunun gölgesini satıra ekleyin. Bulanık Güç Gölgesi Kutusu: 80px
Gölge Rengi: RGBA (0.0,0,0.07)
Arka plan rengini değiştirmek için kaydırıcı modülünü ekleyin, satır ayarlarını değiştirmeyi bitirdikten sonra devam edebilir ve kaydırıcı modülünü ekleyebilirsiniz. Modül ayarlarını açın ve arka plan rengini değiştirin. Tasarım sekmesinde yaptığınız tüm değişiklikler, daha sonra eklediğiniz tüm slaytlara otomatik olarak uygulanır. Arka plan rengi: RGBA (255,255,255.0)
Ardından metin ayarları, tasarım sekmesini açın ve metin ayarlarını değiştirin. Metin Oryantasyonu: Orta
Gölge Rengi: RGBA (0.0,0,0)
Gövde metnini ayarlama Bir sonraki içerik metin ayarlarını değiştirin. Gövde yazı tipi: Varsayılan (SAN’ları aç)
Gövde metni boyutu: 0.6vw (masaüstü), 1.5vw (tablet), 2.4vw (telefon)
Vücut Hattı Yüksekliği: 2.2EM (Masaüstü), 2.3EM (Tablet), 2.4EM (Cep Telefonu)
Mesafe Biraz özel üst ve alt rulman da ekleyin. Dolma Üst: 2VW Dolgu Alt: 2VW
CSS Özel Düğmesi Ayrıca, özellikle kaydırıcı modülü düğmesine bazı özel dolgu ve marj değerleri eklememiz gerekir. Bu öğe, her slayttaki farklı öğelerle birleştirildiğinden, Gelişmiş sekmesinde CSS kodunu kullanarak dolgu ve kenar boşlukları eklemelisiniz.
Dolgu-sol: 80px; Dolgu-sağ: 80px;
Dolgu Top: 8px;
Dolgu Alt: 8px;
Marj-Alt: 80px;
Etkin sürücüyü silin Tüm genel slayt ayarlarını değiştirmeyi bitirdikten sonra, halihazırda orada olan etkin slaytlara devam edebilir ve silebilirsiniz. Bunu kullanmak yerine, yazının bir sonraki bölümünde başından beri yapacağız. Bu, her şeyi daha hızlı değiştirmemize ve ayarlamamıza yardımcı olacaktır.
İlk Slayt’ı Ayarla İçerik kutusundaki içeriği ayarlayın, kaydırıcı modülüne yeni bir slayt ekleyin ve içerik kutusundaki içeriği ayarlamaya başlayın. Aşağıdaki baskı ekranında, görüntüyü ayarlamak yerine içerik kutusuna resim eklediğimizi göreceksiniz. Bu, görüntüleri yazılı içeriğe yerleştirmemizi sağlayacaktır. Graphic Illustrator Düzen Paketlerinin gönderilmesini açarak ve sonunda görüntüleri indirerek kullandığımız illüstrasyonu bulabilirsiniz. Ayrıca, tam olarak istediğimiz yerde görünmesi için başlığın başlığı yerine H3 başlığını içerik kutusuna ekledik ve düzenledik. Düğme bağlantısı, bağlantı ayarlarını girerek ve ziyaretçileri söz konusu slayt hakkında daha ayrıntılı bir sayfaya yönlendirecek düğmeye bağlantıyı ekleyerek devam eder. Gradyan arka planı, aşağıdaki ayarları kullanarak gradyanın arka planını ekleyin: Renk 1: #AAACFF A 2: RGBA (255,255,255.0) Gradyan Türü: Radyal
Radyal Yön: Üst
Başlangıç Pozisyonu:% 30
Son pozisyon:% 30
Navigasyon sonraki metin ayarlarını değiştirir.
Özel renk oku: #f4f4f4
Özel nokta nav rengi: #000000 Slayt metin ayarlarında metin ayarları ve metin renklerini değiştirme.
Metin Rengi: Karanlık
Son düğme, tam olarak istediğiniz gibi görünmesi için düğmeyi değiştirin. Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 0.8VW (Masaüstü), 2VW (Tablet), 3VW (Telefon) Metin Renk Düğmesi: #fffffff
Arka Plan Renk Düğmesi: #AAACFF
Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 10px
Klonlama Slaytları, ilk slaydı oluşturmayı ve ayarlamayı bitirdikten sonra gerektiği kadar sık, slaytı istediğiniz kadar devam edebilir ve klonlayabilirsiniz. Her bir kopya için bazı manuel değişiklikler yapmanız gerekir.
İçerik kutusundaki içerik değiştirmeniz gereken ilk şey içerik kutusundaki içeriktir. Buna kullanılan resimler/çizimler dahildir. Graphic Illustrator Düzen Paketlerinin yayınlanmasını açarak ve sonunda resim indirerek bu öğreticide kullanılan iki illü çizimi bulabilirsiniz.
Düğme bağlantısını değiştirmek için bağlantıyı değiştirin. Degrade arka planınızı değiştirin, birinci gradyanın rengini değiştirerek her bir kopya slaytının renk paletini de ayarlayabilir. Renk 1: #ffccaa Arka plan renk düğmesini değiştirin Düğmenin arka plan rengini değiştirmek için aynı rengi kullanın. Yaptığınız ve bitirdiğiniz her kopya için bu adımları tekrarlayın! Arka Plan Renk Düğmesi: #ffccaa
Ücretsiz Hücresel Kılavuz bölümünü indirin Ücretsiz Hücresel Kılavuz bölümünü almak için, ö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 -posta Almayacaksınız. Dosyayı indirin 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 ÜCRETSİZ DIVI Düzen Paketine erişin! Önizleme Eğiticiye girmeden önce, farklı ekran boyutlarında geri döneceğimiz sonuçlara bakalım.
Statik
Gif
