Divi's Woo Modülleri ile Ürün Sayfaları için Yapışkan Çubuklar Nasıl Tasarlanır

Yapışkan Çubuklar, web tasarımında popüler bir unsur olmaya devam ediyor. Pop-up'lar kadar müdahaleci olmadan CTA'ları ön planda tutarak dönüşümleri artırmak için harikadırlar.

Bu kullanım örneğinde, Divi'nin Woo Modüllerini kullanarak WooCommerce ürünleri için yapışkan bir çubuk tasarlayacağız. Yapışkan çubuk herhangi bir Divi modülünü içerebilir. Bu eğitim için, kullanıcı sayfayı aşağı kaydırırken görünür kalması için "Sepete Ekle" düğmesini içeren bir yapışkan çubuk oluşturacağız. Ayrıca, "Sepete Ekle" düğmesine tıklandığında kullanıcıların her zaman "sepeti görüntüle" düğmesini görmeleri için yapışkan bir sepet bildirim çubuğu oluşturacağız.

Bu yapışkan çubuk öğeleri, bu önemli CTA'ları göz önünde bulundurarak dönüşümleri artırmaya yardımcı olacaktır.

Başlayalım!

Gizlice Bakış

İşte bu kullanım örneği eğitiminde ne tasarlayacağımıza hızlı bir bakış.

ÜCRETSİZ Yapışkan Çubuk Düzenini İ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.

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?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız, kurulu Divi Temasını (veya Divi Temasını kullanmıyorsanız Divi Builder Eklentisini) kurun ve etkinleştirin.
2. WooCommerce eklentisini kurun ve etkinleştirin. WooCommerce'i ilk kez kuruyorsanız, mağazanızı hazırlamak için temel kurulum sihirbazını çalıştırmanız gerekir. Bittiğinde, yeni ürünlerinizi eklemeye hazırsınız.
3. Henüz yoksa birkaç ürün oluşturun. Yeni bir ürünün nasıl ekleneceği hakkında daha fazla bilgi için bu eğiticiye göz atın.

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

Bölüm 1: Bir Ürün Sayfasında Yapışkan Çubuğu Tasarlama

Bu örnek için sahte basit bir ürün kullanacağız, bu nedenle yeni bir ürün oluşturmanız veya mevcut bir ürünü düzenlemeniz gerekiyor. Ürün bilgileri bu eğitim için önemli değildir, sadece Ürün Başlığı, Fiyatı, Açıklaması, Görseli vb. gibi temel bilgilere sahip olduğunuzdan emin olun.

Basit bir ürününüz hazır olduğunda, ürünü arka uçta düzenlemek için tıklayın ve ürün sayfasında Divi Builder'ı dağıtın. Divi Sayfa Ayarları altında, Sayfa Düzeni için "Tam Genişlik"i seçin ve ardından "Ön Uçta Oluştur"a tıklayın.

Ürün sayfası buna benzer görünmelidir.

İçerik haritalarını ve alışveriş sepeti bildirimini içeren ilk satırın altına, tek sütunlu bir düzen ile yeni bir satır ekleyin.

Satır Ayarları

Herhangi bir modül eklemeden önce satır ayarlarını aşağıdaki gibi güncelleyin:

• Arka Plan Rengi: #333333
• Özel Oluk Genişliğini Kullan: EVET
• Oluk Genişliği: 1
• Genişlik: %100
• Dolgu: 0px Üst, 0px Alt

Satırı Yapışkan Yapmak

Satırı yapışkan hale getirmek için, Masaüstü için Ana Öğeye aşağıdaki özel CSS'yi ekleyin:

position: -webkit-sticky !important;
position: sticky !important;
top: 50px;

Ardından, Tablet ekranı için aynı Ana Öğeye aşağıdaki CSS'yi ekleyin:

top: 0px;

"position: sticky" css özelliğine aşina değilseniz, temel olarak, sabit konum ile elemanın (bu durumda satır) kapsayıcısıyla birlikte kaydırılacağı göreceli konum arasında bir tür karışımdır. sayfanın üstünde veya altında belirlenmiş bir konum (veya belirtilen ofset). Bu örnekte, uzaklığı tarayıcı penceresinin üst kısmından 50 piksel olacak şekilde ayarlıyoruz (masaüstünde varsayılan bir sabit üstbilginin yüksekliği için yer bırakıyor). Ardından tablette, mobilde tarayıcının üst kısmındaki satır/yapışkan çubuğu düzeltmek için ofset "top: 0px" olarak değiştirilir.

NOT: Kutuya CSS eklerken gördüğünüz hataları dikkate almayınız. Kod iyi çalışacaktır.

CSS'den sonra Z İndeksini aşağıdaki gibi güncelleyin:

• Z İndeksi: 10

Artık kullanıcı ürün sayfasını aşağı kaydırdıkça satır yapışkan hale gelecektir.

Sütun Özel CSS

Satırı içerikle doldurmaya başlamadan önce, tek sütunlu satırımızın içindeki modülün dikey yerine yatay olarak hizalanacağından emin olmamız gerekir. Bunu flex özelliği ile yapmak için basit bir CSS hilesi kullanabiliriz. Sütun ayarlarını açın ve ana öğeye aşağıdaki özel CSS'yi ekleyin:

display:flex;
align-items:center;

Bu bizim yapışkan sıra tasarımımızla ilgilenir. Şimdi, satırı biraz içerikle doldurmamız gerekiyor.

Woo Başlığı Ekle

Yapışkan satırın sütununa yeni bir Woo Başlık Modülü ekleyin.

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

• Başlık Metin Rengi: #ffffff
• Başlık Metin Boyutu: 28px (masaüstü), 20px (tablet), 16px (telefon)
• Genişlik: %30
• Dolgu: 2vw üst, 2vw alt, 2vw sol, 2vw sağ

Woo Fiyatı Ekle

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
• Dolgu: 2vw üst, 2vw alt, 2vw sol, 2vw sağ
• Sağ Kenar Genişliği: 1px
• Sağ Kenar Rengi: #777777
• Sol Kenar Genişliği: 1px
• Sol Kenar Rengi: #777777

Woo Ekle Sepete Ekle Modülü

Son içerik parçası için, Woo Price modülünden hemen sonra bir Woo Sepete Ekle Modülü ekleyin.

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

Mobilde stok miktarını ve miktar alanını gizleyerek Sepete Ekle öğesini basitleştirin.

• Miktar Alanını Göster: KAPALI (tablet)
• Stok Göster: KAPALI

• Metin Hizalama: Sağ
• Düğme için Özel Stilleri Kullan: EVET
• Düğme Metin Boyutu: 18px (tablet), 14px (telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #7ac5af
• Düğme Kenar Genişliği: 0px

• Genişlik: %40
• Dolgu: 2vw sol, 2vw sağ

Sonuç

Şimdi canlı sayfada nasıl göründüğüne bakalım.

Ve işte mobilde.

Bölüm 2: Sepet Bildirimi Yapışkan Çubuğu Oluşturma

Sepet bildirimi yapışkan çubuğu oluşturmak aslında sadece birkaç basit adımı içerir, ancak sonuç son derece etkili olabilir. Bildiğiniz gibi, sepet bildirimi yalnızca bir kullanıcı "Sepete Ekle" düğmesini tıkladıktan sonra görünür. Ancak, kullanıcıları ödeme sayfasına yönlendiren, satın alma sürecindeki bir sonraki önemli adımdır. Yani sepet bildirimi, pencerenin alt kısmında yapışkan bir çubuk olarak açıldığında, kullanıcı tarafından daha çok fark edilir.

Sepet bildirimi yapışkan çubuğunu oluşturmak için önce ürün sayfasının alt kısmı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
• Dolgu: 0 piksel üst, 0 piksel alt

Ardından, ana öğeye aşağıdaki özel CSS'yi ekleyerek satırı yapışkan hale getirin:

position: -webkit-sticky !important;
position: sticky !important;
bottom: 0px;

NOT: Daha önce yaptığımız gibi, position: sticky özelliğini eklerken açılan hataları yok sayabilirsiniz.

Bu, yukarı doğru kaydırırken satırın pencerenin altına yapışmasını sağlar.

Ardından, z dizinini ön planda tutmak için aşağıdaki gibi güncelleyin:

• Z İndeksi: 10

Sepet Bildirim Modülünü Ekleyin

Satırı oluşturduktan sonra, Woo Cart Notice Module öğesini satıra ekleyin ve ayarları aşağıdaki gibi güncelleyin:

• Metin Metin Boyutu (telefon): 15 piksel
• Marj: 0em alt

Bu kadar! Sayfanın üst kısmındaki varsayılan alışveriş sepeti bildirim öğesini silmek isteyip istemediğiniz size kalmış, ancak daha iyi dönüşümler için bırakmak iyi bir fikir olabilir.

Son sonuç

İşte iki yapışkan çubuğun yerinde olduğu nihai sonuç.

masaüstü

Mobil

Son düşünceler

Umarım bu yazı, Divi'deki ürün sayfalarımız için nasıl yapışkan çubuklar oluşturacağımızı anlamamıza yardımcı olur. Ürün başlığı, fiyatı ve sepete ekle düğmesini içeren bir yapışkan çubuğun nasıl oluşturulacağını ele aldık. Ayrıca sepet bildirimi yapışkan çubuğunun nasıl oluşturulacağını da gösterdik. Bunların her ikisi de satın alma sürecine yardımcı olmalı ve dönüşümleri artırmalıdır. Ve bir eklentiye bile ihtiyacımız yok!

Kendi sitenizde ürün sayfası yapışkan çubuklarını kullanmanın yeni yollarını keşfetmekten çekinmeyin.

Yorumlarda sizden haber bekliyoruz.

Şerefe!