Otomatik animasyonlu hizmetleri görüntülemek için birkaç kaydırıcı nasıl kullanılır
Çoğu şirketin web sitelerinde ziyaretçilerine hizmet vermesi gerekir. Ve üst yarı yaşam hizmetini görüntülemenin bir yolu bir vardiya kullanmaktır. Bu, her hizmeti tek tek vurgulamanıza olanak tanır, ancak zayıflık, kullanıcıların ihtiyaç duydukları hizmetleri bulmak için ileri geri gezinmesi gerektiğidir. Kullanıcı tarafından gördüğü hizmeti istediğiniz zaman daha iyi kullanıcı deneyimi mümkündür. Bu öğreticide, her hizmet içeriğini kullanıcı tarafından herhangi bir zamanda görünür tutarak geçici bir kaydırıcı kullanarak bir hizmeti nasıl görüntüleyeceğinizi göstereceğim. Bunu yapmak için, her hizmetin belirli bir slayt tasarımına sahip tek tek vurgulanması için birkaç kaydırıcı ve otomatik animasyon kullanacağız. Ve bunu Divi’nin varsayılan tasarım seçeneklerini kullanarak yapacağız.
Başlayalım. Aşağıdaki gizlice göz atma, hizmetleri tek tek görüntülemek için birkaç kayan bıçak kullanan tasarımın bir görünümüdür.
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. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? YouTube kanalımıza Abone Olmaya başlamanız gereken şeylere abone olun, aşağıdakilere sahip olmanız gerekir:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Yapay içerik için kullanılacak görüntüler
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Bölüm ve satır 1 için birkaç kaydırıcının tasarımı ile bir vitrin hizmeti oluşturma Başlangıç olarak, bir satır sütun ile normal bölümü yapın.
Daha sonra herhangi bir modül eklemeden önce ayar 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 Tasarım için başlık metnini eklemek için başlık metnini metin modülüyle ekleyin, metin modülünü kullanalım. Lütfen ve metin modülünü satıra ekleyin. Ardından, metin modülünün içeriğini aşağıdaki html ile güncelleyin:
Sadece bir slayt kalacak şekilde ikinci varsayılan slaytı çıkarın. Ardından aşağıdakileri güncelleyin: Ekran Okları: Kontrolü Görüntüleme: Arka Plan Rengi Yok: RGBA (0.0,0,0) Metin Seviyesi: Sol Yazı Tipi Başlık: Montserrat Heavy Yazı Tipi Başlık: Yarı Kalınlık Renk Arka Plan Anahtar Düğmesi: #38B3CB Sınır Genişliği: 0px Ardından Otomatik Animasyon seçeneğini aşağıdaki gibi ayarlayın: Otomatik Animasyon: Aktif Otomatik Animasyon Hızı: 3000 Yaklaşırken Otomatik Slayt Devam Edin: Aktif Varsayılan olarak, Divi slaytlar arasında ince bir solma animasyonu ekleyecektir. Slaytlar arasında somut bir değişiklik olmayacak şekilde bunu devre dışı bırakmak istiyoruz. Bunu yapmak için, slayt açıklamasına aşağıdaki özel CSS ekleyin: Animasyon: Yok! Önemli;
Artık her sütunda aynı kaydırıcıya sahip olmalısınız. Ve her vardiyada, her 3000 MD’ye otomatik olarak geçiş yapmak üzere düzenlenmiş üç özdeş slayt vardır. Fade 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ı slaydın girdiğinde farkı görebileceğiz. Bu, otomatik animasyonla hizmetleri görüntülemek (veya vurgulamak) için her bir kaydırıcıdaki bir slayt tasarımını değiştirmemizi sağlar. Bunu yapmak için her vardiyayı bir slayt vitriniyle güncelleyin, kaydırıcı 1’deki ilk slayt tasarımını, kaydırıcı 2’deki ikinci slayt ve kaydırıcı 3’teki üçüncü slayt değiştireceğiz. sol sütun ve sağdaki üçüncü sütun ile bitiyor. Sonra bu otomatik animasyonu tekrarlamaya devam edecek. Kaydırıcı 1 için Slider 1 Showcase slaytını Güncelle Slider 1 için ayarları açarak ve ardından ilk ayrı slayt için ayarları açarak başlatın. Hizmeti vurgulamak için, slaytı bir arka plan rengiyle (düğmeye uygun) ve arka plan görüntüsünü birden fazla karışık mod kullanarak birleştireceğiz. Bunu yapmak için aşağıdaki güncellemeyi ekleyin: #00B2CA Şekil Arka Plan: [Seçtiğiniz Görüntü Yükle] Arka Plan Karışımı Görüntü: çarpın Ardından, bu slayt için düğme stilini şu şekilde güncelleyin: Metin Renk Düğmesi: #00B2CA Arka Plan Renk Düğmesi: #FFFFFFFFF
Ayarları kaydedin. Şimdi ilk slayta yeni bir tasarım eklendiğinde, slayt ilk slayda her ulaştığında ilk slaytın hizmeti vurguladığını göreceksiniz. Slider 2 Showcase slaytını kaydırıcı 2 için slayt, ikinci slaydın vitrin slaytımız olmasını istiyoruz, böylece kaydırıcı 1’deki bir vitrin kaydırmasından hemen sonra görünecek. Sütun 2’deki kaydırıcı modülü ayarlarını açın ve düğmenin arka plan rengini değiştirin. Arka Plan Renk Düğmesi: #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 Görüntü: [Görüntü Seçimi Yükle] Arka plan görüntüsü Mix: Yumuşak ışık (veya daha koyu bir etki için çarpın) Ardından slayt için düğme stilini güncelleyin. Metin Renk Düğmesi: #1D4E89 Arka Plan Renk Düğmesi: #ffffff Kaydırıcı 3 Vitrin Slaytını Güncelle Slider 3 (sütun 3’te), ikinci slayt vitrin kaydırıcısından hemen sonra görünecek şekilde üçüncü slaytını slayt vitrini olarak güncellememiz gerekir. İlk olarak, kaydırıcı 3 düğmesinin rengini aşağıdaki gibi değiştirin: düğmenin arka plan rengi: #EF476F
Ardından üçüncü slayt için ayarları açın ve aşağıdakileri güncelleyin: Arka Plan Rengi: #EF476F Arka Plan Görüntüsü [Görüntü seçeneğini girin] Arka plan karışımı: Sonra slayt için düğme stilini aşağıdaki gibi güncelleyin: Metin Renk Düğmesi: #EF476F Arka Plan Rengi Düğme: #ffffff Nihai sonuç Sonuç’a bakalım. Ve tasarım bu şekilde tabletlere ve cep telefonlarına yığıldı. Son zihin, otomatik animasyonlu birkaç kayan bıçak kullanan bir hizmet sergiler. Ama kavramı anladıktan sonra aslında oldukça kolay. Her vardiya bir hizmeti temsil ettiğinden, içeriği aynı tutmalı ve düğme URL’nizin her slayt için aynı olduğundan emin olmalısınız. Bu ayarı kullanmanın birçok yolu da vardır. Örneğin, hizmetin ara sıra vurgulanması için otomatik animasyon süresini farklı hızlara ayarlayabilirsiniz. Ve görünen daha fazla hizmet için her slayt için farklı hizmetler bile ekleyebilirsiniz. Mevcut ayarları kişisel olarak seviyorum çünkü geliştirme gösterir ve ziyaretçileri bir sürece göstermek için kullanılabilir. Ama düşüncelerinizi ve fikirlerinizi duymaktan mutluluk duyacağım. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? YouTube kanalımıza Abone Olmaya başlamanız gereken şeylere abone olun, aşağıdakilere sahip olmanız gerekir:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Yapay içerik için kullanılacak görüntüler
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Bölüm ve satır 1 için birkaç kaydırıcının tasarımı ile bir vitrin hizmeti oluşturma Başlangıç olarak, bir satır sütun ile normal bölümü yapın.
Daha sonra herhangi bir modül eklemeden önce ayar 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 Tasarım için başlık metnini eklemek için başlık metnini metin modülüyle ekleyin, metin modülünü kullanalım. Lütfen ve metin modülünü satıra ekleyin. Ardından, metin modülünün içeriğini aşağıdaki html ile güncelleyin:
Nasıl yardımcı olabiliriz?
Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin: Yazı Tipi Başlık: Montserrat Renk Metin Başlığı: #ffffff Metin Boyutu Başlık: 6VW Palyding:% 5 Üst,% 5 Daha Alt İkinci Satır Ekle, Üç sütunlu başka bir satır ekleyin. Ardından satır ayarlarını maksimum%80 genişliğinde güncelleyin. Maksimum genişlik:% 80 Sütun 1’e kaydırıcı ekleyin Şimdi her çıkış sütununa kaydırıcımızı eklemeye başlamaya hazırız. Sütun 1’e bir kaydırıcı modülü ekleyerek başlayın.Sadece bir slayt kalacak şekilde ikinci varsayılan slaytı çıkarın. Ardından aşağıdakileri güncelleyin: Ekran Okları: Kontrolü Görüntüleme: Arka Plan Rengi Yok: RGBA (0.0,0,0) Metin Seviyesi: Sol Yazı Tipi Başlık: Montserrat Heavy Yazı Tipi Başlık: Yarı Kalınlık Renk Arka Plan Anahtar Düğmesi: #38B3CB Sınır Genişliği: 0px Ardından Otomatik Animasyon seçeneğini aşağıdaki gibi ayarlayın: Otomatik Animasyon: Aktif Otomatik Animasyon Hızı: 3000 Yaklaşırken Otomatik Slayt Devam Edin: Aktif Varsayılan olarak, Divi slaytlar arasında ince bir solma animasyonu ekleyecektir. Slaytlar arasında somut bir değişiklik olmayacak şekilde bunu devre dışı bırakmak istiyoruz. Bunu yapmak için, slayt açıklamasına aşağıdaki özel CSS ekleyin: Animasyon: Yok! Önemli;
Kaydırıcı ayarlarını işler. Şimdi bireysel slaytlarımızı güncellememiz gerekiyor. Kaydırıcı için bir slayt oluşturma 1 Üç sütunun her birinde bir kaydırıcı olan üç kaydırıcı kullanacağız. Ve her hizmeti tek tek vurgulamak için bir slayt süresi elde etmek için, her kaydırıcı için üç slayt yapmamız gerekir. Ardından, hizmetleri görüntülemek veya vurgulamak için tasarlanacak slaytlardan birini seçebiliriz.
Slayt 1 için üç slayt yaparak başlayalım. Her slayt için ayarları açın. Ardından, içerik metninin içeriğini yalnızca kısa cümleler içerecek şekilde ayarlayın. Unutmayın, bu tasarım için, kaydırıcı/sütunda yaptığınız gibi aynı sayıda slayt olmalıdır. Kaydırıcıyı, kaydırıcı 1’deki üç slaytımızla kalan sütunların her birine geçip yapıştırarak kaydırıcı modülünü kopyalayabilir ve sütun 2 ve sütun 3’e takabiliriz.Artık her sütunda aynı kaydırıcıya sahip olmalısınız. Ve her vardiyada, her 3000 MD’ye otomatik olarak geçiş yapmak üzere düzenlenmiş üç özdeş slayt vardır. Fade 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ı slaydın girdiğinde farkı görebileceğiz. Bu, otomatik animasyonla hizmetleri görüntülemek (veya vurgulamak) için her bir kaydırıcıdaki bir slayt tasarımını değiştirmemizi sağlar. Bunu yapmak için her vardiyayı bir slayt vitriniyle güncelleyin, kaydırıcı 1’deki ilk slayt tasarımını, kaydırıcı 2’deki ikinci slayt ve kaydırıcı 3’teki üçüncü slayt değiştireceğiz. sol sütun ve sağdaki üçüncü sütun ile bitiyor. Sonra bu otomatik animasyonu tekrarlamaya devam edecek. Kaydırıcı 1 için Slider 1 Showcase slaytını Güncelle Slider 1 için ayarları açarak ve ardından ilk ayrı slayt için ayarları açarak başlatın. Hizmeti vurgulamak için, slaytı bir arka plan rengiyle (düğmeye uygun) ve arka plan görüntüsünü birden fazla karışık mod kullanarak birleştireceğiz. Bunu yapmak için aşağıdaki güncellemeyi ekleyin: #00B2CA Şekil Arka Plan: [Seçtiğiniz Görüntü Yükle] Arka Plan Karışımı Görüntü: çarpın Ardından, bu slayt için düğme stilini şu şekilde güncelleyin: Metin Renk Düğmesi: #00B2CA Arka Plan Renk Düğmesi: #FFFFFFFFF
Ayarları kaydedin. Şimdi ilk slayta yeni bir tasarım eklendiğinde, slayt ilk slayda her ulaştığında ilk slaytın hizmeti vurguladığını göreceksiniz. Slider 2 Showcase slaytını kaydırıcı 2 için slayt, ikinci slaydın vitrin slaytımız olmasını istiyoruz, böylece kaydırıcı 1’deki bir vitrin kaydırmasından hemen sonra görünecek. Sütun 2’deki kaydırıcı modülü ayarlarını açın ve düğmenin arka plan rengini değiştirin. Arka Plan Renk Düğmesi: #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 Görüntü: [Görüntü Seçimi Yükle] Arka plan görüntüsü Mix: Yumuşak ışık (veya daha koyu bir etki için çarpın) Ardından slayt için düğme stilini güncelleyin. Metin Renk Düğmesi: #1D4E89 Arka Plan Renk Düğmesi: #ffffff Kaydırıcı 3 Vitrin Slaytını Güncelle Slider 3 (sütun 3’te), ikinci slayt vitrin kaydırıcısından hemen sonra görünecek şekilde üçüncü slaytını slayt vitrini olarak güncellememiz gerekir. İlk olarak, kaydırıcı 3 düğmesinin rengini aşağıdaki gibi değiştirin: düğmenin arka plan rengi: #EF476F
Ardından üçüncü slayt için ayarları açın ve aşağıdakileri güncelleyin: Arka Plan Rengi: #EF476F Arka Plan Görüntüsü [Görüntü seçeneğini girin] Arka plan karışımı: Sonra slayt için düğme stilini aşağıdaki gibi güncelleyin: Metin Renk Düğmesi: #EF476F Arka Plan Rengi Düğme: #ffffff Nihai sonuç Sonuç’a bakalım. Ve tasarım bu şekilde tabletlere ve cep telefonlarına yığıldı. Son zihin, otomatik animasyonlu birkaç kayan bıçak kullanan bir hizmet sergiler. Ama kavramı anladıktan sonra aslında oldukça kolay. Her vardiya bir hizmeti temsil ettiğinden, içeriği aynı tutmalı ve düğme URL’nizin her slayt için aynı olduğundan emin olmalısınız. Bu ayarı kullanmanın birçok yolu da vardır. Örneğin, hizmetin ara sıra vurgulanması için otomatik animasyon süresini farklı hızlara ayarlayabilirsiniz. Ve görünen daha fazla hizmet için her slayt için farklı hizmetler bile ekleyebilirsiniz. Mevcut ayarları kişisel olarak seviyorum çünkü geliştirme gösterir ve ziyaretçileri bir sürece göstermek için kullanılabilir. Ama düşüncelerinizi ve fikirlerinizi duymaktan mutluluk duyacağım. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
