Statik açıklama metni ile bir divi kaydırıcı stili nasıl düzenlenir
Bu yazı, Divi kaydırıcı modüllerini organize etmenin 5 ilginç yolunu başlıklı mini serimizde 5’in 4. bölümünde yer alıyor. Kaydırıcı modüllerinin ve bunların nasıl başarılacağına dair öğreticilerin beş benzersiz örneğini dört gözle bekleyin!
Slayt açıklamasındaki animasyonun adını değiştirmek yerine bugünün kaydırıcı eğitiminde, aslında tamamen sileceğim ve aşağıdaki nedenini açıklayacağım. Ayrıca birkaç gradyan getirdim, çünkü kim de gradyanları sevmiyor? AAAA ve ben size iki (veya istediğiniz kadar) değil, üç düğme nasıl olacağını göstereceğiz. Başlayalım! Bugün ve sonra bugün: Divi kaydırıcı modülü aşağıdaki kukla görüntüleri ve metin eklenmiş bir divi kaydırıcı modülü örneğidir, ancak ayar değiştirilmez. Bu başlangıç noktamızı temsil eder. Alacağımız şey, kalın bir gradyan sınır ekranı veren, gradyan arka plana sahip neredeyse dolu ve ince bir kahraman. YouTube kanalı abonelik açıklamamızın geçişini kaldırarak statik bir açıklama ile bir divi kaydırıcı stili nasıl düzenlenir. Çok sinir bozucu olduklarını ve insanlar her şeyi tıklamayacaklar. Tabii ki herkesin siteleri – veya müşterileri için en iyisini yapması gerekiyor – ancak doğru olsa bile, tüm sevgili kahramanlardan kurtulmak için hala yeterli bir neden olmadığını söylüyorum.
Üst yarıdaki görsel hareket, şimdi bir web tasarımında neredeyse beklenen bir şeydir, bu nedenle bu adım adım öğreticide, kaydırma görsel hareketleri korur, ancak dönen kelimeleri kaldırır. Bir kazan-kazan diyorum! Tasarım öğelerine hazırlanırken önceki arka plan görüntülerimi topladım. En iyisi, önceki görüntünüzü optimize etmek ve ayrıca mümkünse ön uçta gerçek boyuta yakın boyutu en aza indirmektir. Bu örnekte resmim 1920px genişliğinde 1280 piksel yüksekliğe sahip. Bu, tam genişliğe sahip görüntüler için iyi bir boyuttur. Yapabileceğiniz başka bir şey, bazı varlıkları toplamaktır, böylece tasarım sürecinde bir referans noktasına sahip olabilirsiniz, eğer alışkınsanız bir ruh hali panosuna benzer şekilde. Bu, istediğiniz kadar basit veya karmaşık olabilir. Burada sadece birkaç gradyan ve resim topluyoruz.
Tasarımı aşağıdaki bölümde divi ile uygulayarak, bölümün ayarlarından modül ayarlarına, slayt ayarlarına ve son olarak CSS kısa görüntülerine gireceğiz. İşte burada! Parça ayarımız Bölüm 1 standart sütunu ile başlayacak ve ona bir kaydırıcı modülü ekleyecektir. Sonra bölümün modülündeki bazı ayarları değiştireceğiz. Genel ayar bölümü için #EF4136 arka plan rengini ayarladım ve üst ve alt dolguyu 0 koydum. Arka plan rengi, slayt değişiklikleri arasında hızlı bir şekilde gördüğünüz şeydir ve gradyanımda kullanılan renkleri seçtim. Sanırım çoğu insan bu küçük ayrıntıyı unutma ve varsayılan beyaz rengi arka plan olarak bırakma eğilimindedir, ancak eşleşmesi için iyi bir dokunuş. Özel CSS ayar bölümünde birkaç CSS ekledim ve bu bölüme bir kimlik ayarladım . “Gradyan kaydırıcı” adını kullanıyorum ama istediğiniz her şeyi kullanabilirsiniz.
Ana Eleman – Çapraz doğrusal gradyanlar kullanırız ve tahmin edebileceğiniz gibi, ilk altıgen kodunun sol üst köşede kullanılan renk için geçerli olduğunu, ikinci altıgen kodu sağ altta geçerlidir. Farklı tarayıcılar için tüm varyasyonlara ihtiyaç vardır. Arka plan: #EF4136; Arka plan: -Webkit-linear-gradyan (sol üst, #EF4136, #F18F01); Arka plan: -o-doğrusal dereceli (sağ alt, #EF4136, #F18F01);
Arka plan: -moz-linear-gradyent (sağ alt, #EF4136, #F18F01);
Arka plan: doğrusal gradyan (sağ alt, #EF4136, #F18F01);
Geçerli satır modülü ayarları, ayarları genel satır ayarlarında ayarlayalım. Gelişmiş Tasarım veya Özel CSS sekmesinde hiçbir şeyi değiştirmeyeceğiz.
Kaydırıcı Modül Ayarları Kaydırma modülünün genel ayarı için aşağıdakileri ayarlayın:
Oku gizle Kontrolü Göster: Hayır
Otomatik animasyon: aktif
Animasyon hızı 7000 olarak ayarlandı
Yönetmenlik yaparken otomatik slaytlara devam edin: etkin
Kaydırıcı modülünün devamı tasarım ayarlarında bir yazı tipi başlığı olarak Arvo kullanıyorum ve gövde yazı tipi ayarlarını değiştiriyorum, ancak istediğinizi ayarlayabilirsiniz. Özel kaydırıcı modülünün CSS ayarları için aşağıdaki kodu ekleyin: Slayt Açıklaması – Burada I – Burada I Açıklama metnine uygulanan görülen animasyon/geçiş efektlerini silin. Temel olarak, metnin asla hareket etmeyeceği anlamında onu “statik” bir kaydırıcı yapacak olan budur. Tabii ki bu gerçekten işe yarayacak şekilde, her slayt tam olarak aynı başlığa ve içeriğe sahip olmalıdır.
Animasyon adı: yok; Slayt Genel Ayarları için Slayt Ayarları Aşağıya bakın, gördüğünüz bulanık siyah RGBA’dır (0.0,0,0.0.5).
Değiştirilen Gelişmiş Tasarım veya Özel CSS sekmesinde hayır. Sonunda, açıklama metnimizi görsel değil, metin modunda birkaç HTML koduyla birlikte eklediğimizi göreceksiniz. Eklediğimiz kod üç düğme için bir koddur, düğmenin son ekran görüntüsünde nasıl boş bırakıldığına dikkat edin? “Statik” görünmesini sağlamak için çok sayıda metin gövdesi gösterme yeteneğini ortadan kaldırdığımız için, dava (veya CTA) davet şansının kaybını telafi etmemiz gerekir, bu yüzden voila! Daha fazla düğme! Dikkate değer, sınıfı “ET_PB_BUTTON” temasını kullanmaya hazır kullanıyorum. Bunu yapmamın nedeni, bu düğmenin ayarlama düğmesine ayarladığınız ayarları uygulamasını istiyorsanız> aşağıda ekleyeceğimiz CSS eklemenize gerek yoktur. Bu öğreticinin amacı için, bu düğmeye yalnızca kendileri için geçerli olacak kendi stillerini vereceğiz. Slaytınızı eklemeye başlayabilir ve fotoğrafta gösterildiği gibi HTML kodunu kopyaladığınızdan/eklediğinizden emin olun, elbette URL bağlantısı ve düğmeniz metniyle değiştirin. Ayrıca şu anda başka başlıklar veya özellikler de eklemeniz gerekir. Bunun gerçekten işe yaradığını unutmayın, her slayt tam olarak aynı başlığa ve içeriğe sahip olmalıdır. İlk slayt yapmayı ve sonra çoğaltmayı öneririm, sadece her slayt için arka plan görüntüsünü değiştirir. <a class="et_pb_button"
CSS ile tamamlayın "gradyan klibi" kimliğini başlangıçta nasıl ayarladığımızı hatırlıyor musunuz? Kimliği kullanacağımız yer burası. Bu, bu stilin yalnızca bu kaydırma düğmesi için geçerli olmasını sağlayacaktır. Onaltılık kodunu beğeninize göre değiştirebilirsiniz, bölümün arka planında kullandığımız gibi aynı çapraz doğrusal gradyan stili burada kullanılır. #degrade-clider .et_pb_button {
Metin-Transform: büyük harf;
yazı tipi boyutu: 16px;
Ekran: satır içi blok;
Marj: 5 piksel;
Sınır rengi: #02998A;
Arka plan: #2F9C95;
Arka plan: -Webkit-linear-gradyan (sol üst, #2F9C95, #40C9A2);
Arka plan: -o-doğrusal-sınıflandırıcı (sağ alt, #2F9C95, #40C9A2); Arka plan: -moz-linear-gradyan (sağ alt, #2F9C95, #40C9A2);
Arka plan: doğrusal gradyan (sağ alt, #2F9C95, #40C9A2);
}
#gradyan kleni .et_pb_button: hover {
Sınır rengi: #15bf9f;
}
Ve hepsi bu!Metin hareket ettirmeden oldukça havalı bir kahraman kaydırması ve slayt dizisinin dikkatini çekmek için birbirinizle savaşmak zorunda olmayan bazı ek düğmelere sahip olmalısınız.Umarım bu öğreticiyi iyi kullanabilirsiniz!
Yarın: Divi kaydırıcı modülü ile navigasyon mozaiği nasıl yapılır yarın ilginç olacak!Sadece bir divi titreme modülü ile tasarım konseptleri sunmak yerine, benzersiz bir site navigasyon şekli oluşturmak için bazılarını nasıl birleştireceğinizi göstereceğim.Sonra görüşürüz!Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!
