16 İnanılmaz Modern Ev Hareketi’nden İlham Örneği
Evde kaydırıcı! Ya da söylemeliyim ki, başlangıçtan hiç ayrılmamışlardı. Perkeser karşıtı tugayına inanıyorsanız, davlumbazlar slayt bıçakları sıkıcı, sinir bozucu ve dönüşüm için kötüdür. Ancak somut kanıt bunun tersini kanıtlıyor. Modern kaydırıcılar, 7 yıl önce her yerde var olan temel slayt gösterisinin ötesinde gelişti. SpaceX veya Microsoft gibi büyük markalar, web sitelerinde iyi tasarlanmış bir sürgülü çubuk sergiler. Çağdaş kaydırıcı çok güzel. Akıllıca bir metin yazarlığı, iyi yerleştirilmiş CTA ve kullanıcıların her slaytta içeriği emebilmeleri için zaman hakkında bilgi sağlayan tasarım öğeleri ile birlikte inanılmaz bir görüntü – genellikle yüksek çözünürlüklü fotoğrafçılık – görüntüler.
Sürmek! 142.416 müşterimize katılın!
Gelen kutunuza gönderilen en son haberlerimizi, öğreticilerimizi, rehberlerimizi, ipuçlarımızı ve tekliflerimizi alın.
Spam e -postası yok. Özgür. Sadece e -mail kürlenir.
WordPress sitenizde neden bir homePress kaydırıcısı kullanıyorsunuz? Birçok fayda şunları içerir:
Odak. Kullanıcıyı en iyi Paro’daki ana mesajınıza odaklama yeteneği.
görsel. Kullanıcılar muhteşem görüntüleri sever. Kaydırıcı, birden fazla görüntü görüntülemenizi sağlar.
Harekete geçme çağrısı. Slider, önemli içeriğiniz için birkaç CTA görüntüleme fırsatı sunar.
Ev kayar çubuğunu nasıl kullanabileceğinize dair bazı örneklere bakalım.
1. Tam geniş gradyan kaydırıcısı
Smart Slider 3 Şablon Kütüphanesinde ücretsiz kaydırıcı şablonunu bulabilirsiniz. Bu, başlık, kısa metin, düğmeler ve basit görüntülerle en önemli bilgileri görüntülemenin basit bir yoludur. Diğer slaytlara gitmek için daha fazla fırsat var, noktaları ve okları kullanabilir veya sadece farenin diyetiyle gezinebilirsiniz. Gradyanın arka planı onu renkli hale getirir ve sayfanızın% 100 genişliğini karşılar. Neden başarılıdır: Vardiya basittir ve sayfanızın üstünde kullanırsanız iyi bir ilk izlenim bırakır. Bu hücresel dostudur ve her cihazda iyi görünür. Çok fazla değil ve sadece önemli bilgiler içeriyor, aynı zamanda ayarlanması da kolay.
2. Kurs Değişimi
Smart Slider 3 Pro – Course’da mevcut Kurs kaydırıcısı, tam geniş bir veranda kaydırıcısının iyi bir örneğidir. Slayt ekranı, veranda yapısını parçalayan ve canlandıran bir şekil sınırına sahip koyu mavi bir arka plana sahiptir. Bununla, görüntüye ve ortadaki içeriğe odaklanabilirsiniz. Yapı iyidir ve mobil cihazlarda da iyi görünür.
👍 Bu neden başarılı: CTA kayar çubuktan öne çıkıyor ve bununla belirli bir sayfaya gidebilirsiniz. Gerçek kurs hakkında bilmeniz gereken tüm içerik vardır: Dersler, Zaman ve LightBox’ta tanıtım videosunu kontrol edebilirsiniz.
3. Tam Sayfa Portföyü
Smart Slider 3 Pro – Tam Sayfa Portföyü Smart Slider, ana sayfanızda gerçekten çalışabilen tam sayfalık bir portföy kaydırıcısı sunar. Bu, web sitenizde bir kahraman başlığı olarak kullanılabilir. Tarayıcının genişliğini ve yüksekliğini karşılar ve bir sonraki slaytı yuvarlayarak değiştirebilirsiniz. Katmanların animasyonu bu ana sayfa kaydırıcısını daha ilginç hale getirir, ana resim önce yüklenir, sonra içerik görüntülenir. Neden işe yaradı: Modern renkleri ve bu animasyon formunu seviyorum! Kaydırıcılarda vurgulanmış başlık gibi, önemli metinleri, bir sonraki kaydırıcıya gidebileceğiniz düğmeleri veya kaydırıcıyı daha çekici hale getiren sayımları vurgulayan birçok harika şey var.
4. Ajans Yön sayfası
Smart Slider 3 Pro – Ajans Yöne Sayfasında mevcut
Kayan bir çubukla tüm sayfayı yapabileceğinize inanıyor musunuz? Sadece bir kaydırıcı birbirine koyduğunuzu ve ajans şablonunda olduğu gibi bir yön sayfası olarak kullandığınızı hayal edin. Etkinliği başka bir slaytta gezinmek için kullanın ve ayrıca yanıt verme konusunda sorunlarınız olmayacak. Bu slayt grubu, bina fikrinden ve çevrimiçi varlığın teknoloji tarafından açıkça ilham alıyor. 👍 Neden Başarılı: Slaytlar birbirini geçti ve uyum içinde. En üstte, başka bir sürücüye kaydırabileceğiniz bağlantı ile basit bir navigasyon var. İhtiyacınız olan tek şey minimum bir şablon, ardından kayar çubuğu ayarlayın ve basit bir şekilde kullanın.
5. Şarap Rafineri Sergisi
Smart Slider 3 Pro – Şarap Fabrikası’nda mevcut
Şarap rafineri kaydırıcısı, bir ürünü göstermek için kaç seçeneğin mevcut olduğuna iyi bir örnektir. Bu vitrin kaydırıcısı, birbirine ek olarak daha fazla ürün sunabilir ve şarabı satmanıza yardımcı olabilir. Aktif slayt ortada ve bir sonraki slaytı tıklayarak veya diğerlerini görmek için ilerlemeden veya geriye doğru ilerlemeden önce. Neden başarılı: bu değişim hakkında hiçbir şey kafa karıştırıcı değil. Amaç, ziyaretçilerin düğmeyi tıklaması ve ürünü satın almasıdır. Her slaytta benzersiz katman animasyonu ve bu hareket nedeniyle ziyaretçiler şişelere odaklanacaktır. 6. Ana sayfanıza tam sayfa videosu
Smart Slider 3 Pro – Tam Sayfa Video Bloğu
Web’e göz atarken, site ana sayfasında birçok video bulabilirsiniz. Video ziyaretçilerin dikkatini çekebilir ve harika bir tasarım öğesidir. Bu video kaydırma bloğunda, sayfanın üstünde bir navigasyon bloğu olarak kullanılabilmesi için başka bir sayfaya gidebilirsiniz.
👍 Neden işlev görüyor: Vardiya basittir, ancak ziyaretçiler yeterli bilgi görebilir. Bu değişimden gerçekten sevdiğim şey, gerçekten tam bir ekran olması ve bu nedenle bu bir sayfa için iyi bir başlangıç noktası olabilir. 7. Podcast Ev Bloğu
Smart Slider 3 Pro – Block Podcast’te mevcut
İlk izlenim için, bu kaydırıcı kalabalık görünebilir, ancak daha iyi görülürse, her öğenin önemli ve iyi organize olduğunu varsayacaksınız. Bu podcast kaydırıcı kalabalıktan öne çıkıyor ve etkileşimli unsurlar içeriyor: CTA, sosyal medyaya yol açan simgeler ve oynayabileceğiniz ses dosyaları.
👍 Neden başarılı: Bu podcast bloğunun arka planında parçacık etkisini görebilirsiniz. Farenizi içeriğe taşıyın ve parçacıklar hareket edecektir. Bu, ziyaretçiler blokta yüzdüğünde harika bir etki olabilir ve bundan hoşlanacaklar. Statik kaydırıcıyı otomatik olarak döndürün Smart Slider 3 Pro – Otomatik Oynatma Statik Kaydırıcı
Statik metin ve çeşitli arka planlara sahip tam ekran slayt ekranı, insanları çekebilecek bilgilerinizi görüntülemenin ilginç bir yoludur. Statik slaytlar her zaman arkasından hareket eden başka bir slaytın üzerindedir. Bu durumda katman daha fazla dikkat çekecektir, çünkü her zaman görünürdür. Ve otomatik dönme göstergesi size sürücünün aktif olduğunu ve bir şeyin olacağını gösterir.
👍 Neden Başarılı: Statik slaytlar her zaman görünürdür ve bunu bir kez yapmanız gerekir. Bu, logonuzu veya su işaretinizi göstermenin iyi bir yoludur, ancak bu metni dikkate alınması gereken iyi bir yoldur. Ve arka planda animasyon ile otomatik oynatma onu daha görünür kılar.
9. Tim Smart Slider 3 Pro – Team Slider’da mevcut
Bu kaydırıcı ekip üyelerine odaklanıyor. Bu, şirketin web sitesine iyi bir kişisel dokunuş sağlar ve müşterilere güven oluşturmaya yardımcı olur. Alttaki bir okla veya sağ tarafta mini bir görüntü ile gezinebilirsiniz. En iyi numara, ziyaretçilerin kaç slayt bulunduğunu ve hangilerinin görüldüğünü öğrenmelerine yardımcı olur.
👍 Neden çalışır: Bu kaydırıcı güzelce düzenlenmiştir. Açıkçası bu kaydırıcıya her bir öğe uyum içinde çok zaman ve tasarım girildi. Bu, slayt şovları kavramını tamamen yeni bir seviyeye taşıyan bir vardiyaya iyi bir örnektir. Değişen katman örnekleri
Smart Slider 3 Pro’da mevcuttur – kaydırıcı katman örneği
👍 Neden Başarılı: Animasyon başlığı dikkat çekiyor ve ziyaretçiler düğmeyi ve simgeyi tıklayacak. Son slayt benim favorim, iletişim formlarını içeren bir HTML katmanına sahip bir arka plan videosu var ve ziyaretçilerin bir şeyler yapmasını sağlıyor.
11. Bir otel evinin kaydırıcı örneği
Smart Slider 3 Pro – Full Page Hotel’de mevcut Bu kaydırıcı, kullanımının nasıl satırlar ve sütunlar kullandığına ve kaydırıcıda yapılar yapmanın iyi bir örneğidir. Birçok farklı katman türü vardır: iyi başlıklar, metin, düğmeler ve animasyonlu toplanıcılar. Arka plan biraz hareket ediyor, Ken Burns kaydırıcıya hareketler veriyor. Bir kutu ile, bir sonraki slayda ve daha önce gidebilirsiniz ve imleci çok güzel bir etki olana yönlendirdiğinizde görüntüler görüntüler. Neden başarılı olur: Mander verandanızda ilk kaydırıcı olarak kullanılabilir. Aşağıdaki satır, faydalı bilgileri ilginç bir şekilde içerir. Form bölücü, bu çizginin tasarımı canlandıran bir vardiya ile örtüştüğü yanılsamasını yapar.
12. Müşterinin hikayesini görüntüler
Smart Slider 3 Pro – Müşteri Hikayesi’nde mevcut
Bu kaydırıcı favorilerimden biri. Tarayıcının tam genişliğini karşılar ve üzerinde 2 parça vardır: CTA ve navigasyonlu bilgi bölümü ve beyaz kutudaki referanslı görüntüler. Duyarlılık da çok havalı: Tabletlerde ve mobil cihazlarda iki sütun birbirinin altında. 👍 Bu neden başarılı: CTA’yı görünce, siyah arka planının pastelin arka planıyla bu kadar zıt olduğunu görebiliriz, kullanıcının dikkatini hızla çekiyor.
13. Hasarlı kutu sürücüsü
Smart Slider 3 Pro – Kırık ızgara kaydırıcısı
Bu şaşırtıcı kaydırıcı, Smart Slider 3 şablon kütüphanesine yeni bir ektir ve ilk başta basit görünse de, meydana gelen birkaç farklı tasarım efekti vardır. Yeni başlayanlar için, son aylarda popüler bir web sitesi trendi haline gelen ve yakın gelecekte kaybolması mümkün olmayan hasarlı bir kutu düzeni var. İmleci kaymaya yönlendirdiğinizde, statik görüntülerinizi açacak hoş bir paralaks efekti kullanarak kayar. Sonra arka planda görüntülerin öne çıkmasına yardımcı olan beyaz bir bölücü var. Buna ek olarak, görüntüleri kaydırmak için birçok kontrol vardır: navigasyon okları, alttaki mermi kontrolleri ve ayrıca tıklayabilir ve kaydırabilirsiniz. Neden başarılıdır: Paralax katmanı, her ikinci web sitesinde bulamayacağınız özel efektler verir. Kayar çubuğu benzersiz hale getirir ve hasarlı bir kafes düzeni ile siteniz modern bir görünüme sahip olacaktır. Bu değişim sayfanızın üstünde iyi bir kahraman kayması olabilir. 14. Slayt Gösterisi Tam Sayfa Modu
Smart Slider 3 Pro – Tam Sayfa Slider Modu
Bu değişimden sevdiğim şey, bunun harika fotoğrafçılık, iyi seçilmiş bir vardiya elemanı ve akıllıca bir tasarımla elde edebileceğinizin mükemmel bir örneği olmasıdır. Her slaydın ana odağı soldaki şeffaf bir görüntüdür, ancak her modelin arkasında pürüzsüz bir paralaks efekti olan sabit bir şekildir. Başlık, metin ve CTA, ziyaretçilere satın almak için nereye tıklayacağınız konusunda net bir yön verir. Slayt boyunca hareket etmek için, soldaki navigasyon okları, sağdaki sayılar (aynı zamanda kaç slayt olduğunu gösteren) ve slayttaki bir sonraki mini görüntü de dahil olmak üzere birçok kontrol de vardır. 👍 Neden Çalışma: Her katmanın kendi rolü vardır, başlık ziyaretçilerin, okların ve sayıların dikkatini çeker, gezinmeye yardımcı olur ve mini görüntüler bir sonraki slaytta ne olduğunu gösterir. Düğme, ziyaretçileri tıklanacak bir şeye ve başka bir sayfaya dinvigasyona verebileceğiniz dava daveti bir öğesi olarak kullanılabilir.
15. Ev ürün kaydırıcılarına örnekler Smart Slider 3 Pro – Bir Ev Ürün Kaydırıcısı Örneği
Bunun bir değişim olduğunu düşünmeyeceksiniz, ama durum böyle! Sayfayı aşağı kaydırdığınızda, her sayfa, farklı bir tam ekran arka plan rengi, çeşitli görüntüler, metin ve Apple App Store’dan uygulamaları indirme isteği görüntüledi. Bu, (kelimenin tam anlamıyla) çok fazla hareket ve animasyon ile basit bir kavramdır.
👍 Neden Başarılı: Animasyon uyumlu, tamamlayıcı çalışıyor. Bu kaydırıcıyı temiz ve modern yapar. Bu geleneksel bir değişim değil, verandada kendiniz kullanabilirsiniz. Animasyonlu Yukarı ve Aşağı, ziyaretçilerin ürününüz hakkında daha fazla bilgi ve ayrıntıyı kontrol etmesine yardımcı olur. Renk dolu geniş kaydırıcı
Smart Slider 3 Pro – Geniş kaydırıcı renkli dolu Bu renkli kaydırıcı, tam genişlikli kaydırıcılar için en iyi örneklerden biridir. Vurgulanan başlıklarla paralaks katmanlarının etkileri güçlü bir slayt oluşturur ve farkındalığı artırır. Bu spot ışığı ile vardiyanın en önemli kısmına odaklanabilirsiniz. Renk uyumludur ve başlığın okunması daha kolaydır, çünkü başlığın rengi ile arka plan arasında güçlü bir kontrast vardır.
👍 Bu neden başarılı: animasyon spot ışığı ile ziyaretçiler vurgulamak istediğiniz en önemli mesaja odaklanabilir, ancak CTA düğmesi de vardiyanın ana kısmıdır. Buna tıklamak, birkaç katmanın iyi animasyonla görünmesini sağlar ve projeniz hakkında daha fazla bilgi görüntüleyin.
Akıllı kaydırıcı 3 ile kendi güzel ana sayfa kaydırıcısınızı yapın 3 Akıllı kaydırıcı 3 kolayca güzel bir ana sayfa kaydırıcısı oluşturabilirsiniz. Yukarıdaki akıllı kaydırıcının bir örneğini isterseniz, kullanabilirsiniz – Smart Slider 3 Pro’ya kaydolduğunuzda WordPress kurulumuna içe aktarın.
