Otomatik Animasyon ile Hizmetleri Sergilemek için Birden Çok Kaydırıcı Nasıl Kullanılır

Çoğu şirketin hizmetlerini web sitelerinde ziyaretçilerine sergilemesi gerekecek. Hizmetleri ekranın üst kısmında sergilemenin bir yolu da kaydırıcı kullanmaktır. Bu, her hizmeti tek tek vurgulamanıza olanak tanır, ancak dezavantajı, kullanıcının ihtiyaç duyduğu hizmeti bulmak için ileri geri gezinmesi gerekmesidir. Daha iyi bir kullanıcı deneyimi, bu hizmetleri kullanıcıya her zaman görünür kılmak olabilir.

Bu eğitimde, bir kaydırıcı kullanarak hizmetleri nasıl sergileyeceğinizi ve aynı zamanda her bir hizmet içeriğini kullanıcı tarafından her zaman görünür durumda tutmayı göstereceğim. Bunu yapmak için birden fazla kaydırıcı ve otomatik animasyon kullanacağız, böylece her hizmet belirli bir slayt tasarımıyla tek tek vurgulanacaktır. Ve bunu Divi'nin yerleşik tasarım seçeneklerini kullanarak yapacağız.

Başlayalım.

Gizlice Bakış

Hizmetleri tek tek sergilemek için birden fazla kaydırıcı kullanan tasarıma hızlı bir bakış.

Birden Çok Kaydırıcı Düzeni ile Vitrin Hizmetlerini ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.

Hadi öğreticiye geçelim mi?

Youtube Kanalımıza Abone Olun

Başlamak için Gerekenler

Başlamak için aşağıdakilere sahip olmanız gerekir:

1. Divi Teması yüklü ve etkin
2. Ön uçta sıfırdan oluşturmak için oluşturulan yeni bir sayfa (görsel oluşturucu)
3. Sahte içerik için kullanılacak resimler

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi'de Çoklu Kaydırıcı Tasarımlı Vitrin Hizmetleri Oluşturma

Bölümü ve 1. satırı oluşturun

Başlamak için tek sütunlu bir normal bölüm oluşturun.

Ardından herhangi bir modül eklemeden önce bölüm ayarlarını açın ve koyu bir arka plan görüntüsü (veya arka plan rengi) ekleyin.

Ardından satır ayarlarını açın ve aşağıdakileri güncelleyin:

Maksimum Genişlik: %80

Metin Modülü ile Başlık Metni Ekleyin

Tasarıma başlık metnini eklemek için bir metin modülü kullanalım. Devam edin ve satıra bir metin modülü ekleyin.

Ardından, metin modülü gövde içeriğini aşağıdaki HTML ile güncelleyin:

<h1>How can we help?</h1>

Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:

Başlık Yazı Tipi: Montserrat
Başlık Metni Rengi: #ffffff
Başlık Metni Boyutu: 6vw
Dolgu: %5 üst, %5 alt

İkinci Satırı Ekle

Ardından, üç sütun düzenine sahip başka bir satır ekleyin.

Ardından satır ayarlarını maksimum %80 genişlikle güncelleyin.

Maksimum Genişlik: %80

Sütun 1'e Kaydırıcı Ekle

Artık her bir sütuna kaydırıcılarımızı eklemeye hazırız. Sütun 1'e bir kaydırıcı modül ekleyerek başlayın.

Yalnızca bir slayt kalacak şekilde ikinci varsayılan slaydı silin.

Ardından aşağıdakileri güncelleyin:

Okları Göster: HAYIR
Kontrolleri Göster: HAYIR
Arka Plan Rengi: rgba(0,0,0,0)

Metin Hizalama: Sol
Başlık Yazı Tipi: Montserrat
Başlık Yazı Tipi Ağırlığı: Yarı Kalın
Düğme Arka Plan Rengi: #38b3cb
Düğme Kenar genişliği: 0px

Ardından otomatik animasyon seçeneklerini aşağıdaki gibi ayarlayın:

Otomatik Animasyon: AÇIK
Otomatik Animasyon Hızı: 3000
Hover'da Otomatik Kaydırmaya Devam Et: AÇIK

Varsayılan olarak Divi, slaytlar arasına ince bir solma animasyonu ekler. Slaytlar arasında gözle görülür bir değişiklik olmaması için bunu devre dışı bırakmak istiyoruz. Bunu yapmak için Slayt Açıklamasına aşağıdaki özel CSS'yi ekleyin:

animation: none !important;

Bu, kaydırıcı ayarlarıyla ilgilenir. Şimdi bireysel slaytlarımızı güncellememiz gerekiyor.

Slider 1 için Slaytlar Oluşturma

Üç sütunun her birinde bir kaydırıcı bulunan üç kaydırıcı kullanacağız. Slaytların zamanlamasını her bir hizmeti tek tek vurgulamak için elde etmek için, her bir kaydırıcı için üç slayda ihtiyacımız var. Ardından, hizmeti sergilemek veya vurgulamak için tasarlanacak slaytlardan birini seçebiliriz.

Kaydırıcı 1 için üç slayt oluşturarak başlayalım.

Bireysel slayt için ayarları açın. Ardından gövde metni içeriğini yalnızca kısa bir cümle içerecek şekilde ayarlayın.

Şimdi bireysel slayt ayarlarını kaydedin ve toplam üç slaytınız olması için slaydı 2 kez çoğaltın. Unutmayın, bu tasarım için kaydırıcılar/sütunlarla aynı sayıda slayta sahip olmanız gerekir.

Kaydırıcıyı Kalan Her Sütuna Kopyalama ve Yapıştırma

Kaydırıcı 1'deki üç slaytımızla, kaydırıcı modülünü kopyalayıp 2. ve 3. sütuna yapıştırabiliriz.

Şimdi her sütunda aynı kaydırıcıya sahip olmalısınız. Ve her kaydırıcı, her 3000 ms'de bir otomatik olarak geçiş yapacak şekilde ayarlanmış üç özdeş slayta sahiptir. Ve solma animasyonunu devre dışı bıraktığımız için slaytlar arasındaki geçişleri göremezsiniz. Ancak slaytlardan birinin tasarımını değiştirirsek, kaydırıcı o slayda gittiğinde farkı görebileceğiz. Bu, hizmeti otomatik animasyonla sergilemek (veya vurgulamak) için her kaydırıcıdaki bir slaydın tasarımını değiştirmemize olanak tanır.

Her kaydırıcıyı Vitrin Slaytıyla güncelleme

Bunu yapmak için, kaydırıcı 1'deki ilk slaydın, kaydırıcı 2'deki ikinci slaydın ve kaydırıcı 3'teki üçüncü slaydın tasarımını değiştireceğiz. Bu, sol sütundan başlayarak ve biten her hizmeti otomatik olarak (her 3000ms'de bir) vurgulayacaktır. sağdaki üçüncü sütun. Ardından bu otomatik animasyonu tekrarlamaya devam edecektir.

Kaydırıcıyı Güncelle 1 Vitrin Slaytı

Kaydırıcı 1 ayarlarını açarak ve ardından ilk bireysel slayt için ayarları açarak başlayın.

Hizmeti vurgulamak için, slaydı bir arka plan rengiyle (düğmeyle eşleşen) ve çarpma karıştırma modunu kullanarak arka plan rengiyle harmanlanmış bir arka plan görüntüsüyle güncelleyeceğiz.

Bunu yapmak için aşağıdakileri güncelleyin:

Arka Plan Rengi: #00b2ca
Arka Plan Resmi: [seçtiğiniz resmi yükleyin]
Arka Plan Resmi Karışımı: Çarpma

Ardından bu slayt için düğme stilini aşağıdaki gibi güncelleyin:

Düğme Metin Rengi: #00b2ca
Düğme Arka Plan Rengi: #ffffff

Ayarları kaydet.

Şimdi ilk slayda eklenen yeni tasarımla, kaydırıcı ilk slayda ulaştığında ilk slaydın hizmeti vurguladığını göreceksiniz.

Slider 2 Vitrin Slaytını Güncelle

Kaydırıcı 2 için, ikinci slaydın bizim vitrin slaydı olmasını istiyoruz, böylece kaydırıcı 1'deki vitrin slaydından hemen sonra görünecek.

2. sütundaki kaydırıcı için kaydırıcı modülü ayarlarını açın ve düğme arka plan rengini değiştirin.

Düğme Arka Plan Rengi: #1d4e89

Ardından ikinci slayt için ayrı slayt ayarlarını açın ve aşağıdakileri güncelleyin:

Arka Plan Rengi: #1d4e89
Arka Plan Resmi: [seçilen resmi yükleyin]
Arka Plan Görüntüsü Karışımı: Yumuşak Işık (veya daha koyu bir efekt için çarpın)

Ardından slayt için düğme stilini güncelleyin.

Düğme Metin Rengi: #1d4e89
Düğme Arka Plan Rengi: #ffffff

Slider 3 Vitrin Slaytını Güncelle

Slider 3 için (sütun 3), üçüncü slaydı vitrin slaydımız olarak güncellememiz gerekecek, böylece ikinci kaydırıcı vitrin slaydından hemen sonra görünecek.

İlk olarak, kaydırıcı 3'ün düğme rengini aşağıdaki gibi değiştirin:

Düğme Arka Plan Rengi: #ef476f

Ardından üçüncü slaydın ayarlarını açın ve aşağıdakileri güncelleyin:

Arka Plan Rengi: #ef476f
Arka Plan Resmi [seçilen resmi ekleyin]
Arka Plan Resmi Karışımı: Çarpma

Ardından slayt için düğme stilini aşağıdaki gibi güncelleyin:

Düğme Metin Rengi: #ef476f
Düğme Arkaplan rengi: #ffffff

Son sonuç

Nihai sonucu kontrol edelim.

Ve işte tasarımın tablette ve telefonda nasıl istiflendiği.

Son düşünceler

Otomatik animasyonlu birden fazla kaydırıcı kullanarak hizmetleri sergilemek biraz zor görünüyor. Ama konsepti anladıktan sonra aslında oldukça kolay.

Her kaydırıcı bir hizmeti temsil ettiğinden, içeriği aynı tutmak ve düğme URL'nizin her slayt için aynı olduğundan emin olmak isteyeceksiniz.

Bu kurulumu kullanmanın başka birçok yolu da vardır. Örneğin, hizmetlerin ara sıra öne çıkmasını sağlamak için otomatik animasyon süresini farklı hızlara ayarlayabilirsiniz. Ayrıca, daha fazla hizmetin açılması için kaydırıcıların her slaydının içine farklı hizmetler bile ekleyebilirsiniz.

Kişisel olarak mevcut düzeni beğendim çünkü ilerleme gösteriyor ve ziyaretçilere bir süreç göstermek için kullanılabiliyor. Ama düşüncelerinizi ve fikirlerinizi duymak isterim.

Yorumlarda sizden haber bekliyorum.

Şerefe!