Yapışkan Çubuklar, web tasarımının popüler bir öğesi olmaya devam ediyor. Pop-up'lar kadar müdahaleci olmadan harekete geçirme çağrılarını son teknoloji tutarak dönüşümleri artırmak için harikadırlar.
Bu kullanım durumunda, ürünler için yapışkan bir çubuk tasarlayacağız. WooCommerce Woo modüllerini kullanarak Divi. Yapışkan çubuk herhangi bir modülü içerebilir Divi. Bu eğitim için, kullanıcı sayfayı aşağı kaydırdığında görünür kalması için "Sepete Ekle" düğmesini içeren bir yapışkan çubuk oluşturacağız. Ek olarak, bir alışveriş sepeti bildirim çubuğu da oluşturacağız, böylece kullanıcılar "sepete ekle" düğmesine tıklandığında her zaman "sepeti görüntüle" düğmesini görecekler.
Bu yapışkan çubuk elemanları, bu önemli CTA'ları görünümde tutarak, dönüşümleri artırmanıza yardımcı olacaktır.
anket
İşte bu eğitimde neler tasarlayacağımızın bir önizlemesi.
Bölüm 1: Bir ürün sayfasındaki yapışkan çubuğun tasarımı
Bu örnek için basit bir simülasyon ürünü kullanacağız, bu nedenle yeni bir ürün oluşturmanız veya mevcut bir ürünü düzenlemeniz gerekiyor. Bu eğitim için ürün bilgileri önemli değildir. Ürün başlığı, fiyatı, açıklaması, resmi vb. Gibi temel bilgilere sahip olduğunuzdan emin olun.
Basit bir ürün hazır olduğunda, ürünü arka uçta düzenlemek ve dağıtmak için tıklayın Divi Ürün sayfasında oluşturucu. Divi Sayfa Ayarları altında, düzen için "Tam Genişlik"i seçin ve ardından "Ön Cephede Oluştur"u tıklayın.
Ürün sayfası böyle görünmelidir.
İçerik haritalarını ve alışveriş sepeti bildirimini içeren ilk satırın altına, tek sütunlu düzene sahip yeni bir satır ekleyin.
Satır Parametreleri
Modül eklemeden önce, hat ayarlarını aşağıdaki şekilde güncelleyin:
- Arka plan rengi: # 333333
- Özel bir oluk genişliği kullanın: EVET
- Oluk genişliği: 1
- Genişlik:% 100
- Döşeme: 0px Üst, 0px Alt
Çizgi yapışkan olun
Çizgiyi yapışkan hale getirmek için aşağıdaki özel CSS kodunu ana masaüstü öğesine ekleyin:
position: -webkit-sticky !important; position: sticky !important; top: 50px;
Ardından, aşağıdaki CSS kodunu tablet ekranı için aynı ana öğeye ekleyin:
top: 0px;
"Position: sticky" css özelliğine aşina değilseniz, bu, sabit konum ile öğenin (bu durumda çizgi) kendisiyle birlikte kaydırılacağı göreceli konum arasında bir tür karışımdır. sayfanın üstünde veya altında belirlenen bir konuma (veya belirtilen ofsete) ulaşıncaya kadar konteyner. Bu örnekte, ofseti tarayıcı penceresinin üstünden 50px'e ayarladık (masaüstünde varsayılan sabit bir başlığın yüksekliği için yer bıraktık). Ardından, mobil cihazda tarayıcının üst kısmındaki yapışkan çizgiyi / çubuğu düzeltmek için bir tablette ofset "top: 0px" olarak değiştirilir.
Not: Kutuya CSS eklediğinizde gördüğünüz tüm hataları göz ardı edin. Kod iyi çalışacak.
CSS'yi oluşturduktan sonra, Z dizinini aşağıdaki gibi güncelleyin:
- Z dizini: 10
Artık kullanıcı ürün sayfasında gezinirken satır yapışkan hale gelecektir.
Özel CSS sütunu
Satırı doldurmaya başlamadan önce içindekilertek sütunlu sıramızın içindeki modülün dikey yerine yatay olarak hizalanacağından emin olmamız gerekiyor. Bunu flex özelliğiyle yapmak için basit bir CSS numarası kullanabiliriz. Sütun ayarlarını açın ve aşağıdaki özel CSS'yi ana öğeye ekleyin:
display:flex; align-items:center;
Bu, yapışkan çizgi tasarımımızı halleder. Şimdi satırı doldurmamız gerekiyor içindekiler.
Bir başlık ekle Woo
Yapışkan çizgi sütununa yeni bir Woo başlık modülü ekleyin.
Ardından ayarları aşağıdaki şekilde güncelleyin:
- Renk metni: #ffffff
- Metin Başlığı Boyutu: 28px (masaüstü), 20px (tablet), 16px (telefon)
- Genişlik:% 30
- Döşeme: Üstte 2vw, altta 2vw, solda 2vw, sağda 2vw
Fiyat ekle Woo
Ardından, az önce oluşturduğunuz woo başlık modülünün üzerine geldiğinizde görünen gri artı simgesine tıklayarak bir Woo fiyat modülü ekleyin.
Ardından Woo Price ayarlarını aşağıdaki gibi güncelleyin:
- Fiyat Metin Boyutu: 28px (masaüstü), 20px (tablet), 16px (telefon)
- Genişlik:% 30
- Döşeme: Üstte 2vw, altta 2vw, solda 2vw, sağda 2vw
- Sağ kenarlığın genişliği: 1px
- Sağ kenarlığın rengi: #777777
- Sol kenarlığın genişliği: 1px
- Sol kenarlık rengi: #777777
Modül ekle Sepete ekle
Son eleman için içindekiler, Woo Price modülünün hemen sonrasına bir Woo Sepete Ekle modülü ekleyin.
Ardından ayarları aşağıdaki şekilde güncelleyin:
Mobil cihazda envanter miktarı ve miktarı alanını gizleyerek Sepete Ekle öğesini basitleştirin.
- Miktar alanını görüntüle: KAPALI (tablet)
- Stok Göster: KAPALI
- Metin hizalama: sağ
- Button için özel stiller kullan: YES
- Düğme metni boyutu: 18px (tablet), 14px (telefon)
- Düğme metni rengi: #ffffff
- Düğme arka plan rengi: #0c71c3
- Düğme kenarlığının genişliği: 0px
- Genişlik:% 40
- Döşeme: Solda 2vw, sağda 2vw
Sonuç
Canlı sayfada neye benzediğini görelim.
2 Bölüm: Bir Sepet Bildirim Çubuğu Oluşturma
Yapışkan bir araba bildirim çubuğu oluşturmak aslında birkaç basit adımı içerir, ancak sonuç son derece etkili olabilir. Bildiğiniz gibi, alışveriş sepeti bildirimi yalnızca bir kullanıcı "Sepete ekle" düğmesini tıkladığında görünür. Ancak, satın alma sürecinde kullanıcıları ödeme sayfasına götüren bir sonraki önemli adımdır. Dolayısıyla, alışveriş sepeti bildirimi pencerenin altında yapışkan bir çubuk olarak göründüğünde, kullanıcı tarafından daha görünür hale gelir.
Alışveriş sepeti bildirimi yapışkan çubuğunu oluşturmak için önce ürün sayfasının altında yeni bir tek sütunlu satır oluşturun. Ardından satır ayarlarını aşağıdaki gibi güncelleyin:
- Genişlik:% 100
- Döşeme: Üstte 0px, altta 0px
Ana elemana aşağıdaki özel CSS'leri ekleyerek çizgiyi yapışkan yapın:
position: -webkit-sticky !important; position: sticky !important; bottom: 0px;
Not: Daha önce yaptığımız gibi, position: sticky özelliğini eklerken ortaya çıkan hataları göz ardı edebilirsiniz.
Satır yukarı kaydırırken pencerenin altına yapışacaktır.
Ardından, ön planda tutmak için z dizinini güncelleyin, örneğin:
- Z dizini: 10
Sepet bildirim modülünü ekleyin
Çizgiyi oluşturduktan sonra, Woo Cart Notice modülünü çizgiye ekleyin ve ayarları aşağıdaki şekilde güncelleyin:
- Metin boyutu (telefon): 15px
- Marj: En altta 0em
Bu kadar ! Sayfanın üst kısmındaki varsayılan alışveriş sepeti uyarı öğesini kaldırmak isteyip istemediğiniz size bağlıdır, ancak daha iyi dönüşümler için onu bırakmak iyi bir fikir olabilir.
Nihai sonuç
İşte son sonucun nasıl göründüğü.
Son düşünceler
Umarım bu makale Divi'deki ürün sayfalarımız için yapışkan çubukların nasıl oluşturulacağını anlamamıza yardımcı olur. Ürün başlığı, fiyatı ve Sepete Ekle düğmesini içeren yapışkan bir çubuğun nasıl oluşturulacağını ele aldık. Ayrıca yapışkan bir çubuğun nasıl oluşturulacağını da gösterdik. Bunların her ikisi de satın alma sürecini kolaylaştırmalı ve dönüşümleri artırmalıdır. Ve bir eklentiye bile ihtiyacımız yok!
