Divi’de Navigasyon Menüsü İşleme Nasıl Tasarlanır
Başarılı bir ödeme süreci boyunca önde gelen müşteriler her çevrimiçi mağaza için zorlu bir hedeftir. Bu nedenle, müşterileri kolaylaştırmak için web sitenizin ödeme işlemini optimize etmek iyidir. Navigasyon ödeme işleminde önemli bir rol oynadığından, oradan başlamak isteyebiliriz. Özel bir ödeme işlemi için bir gezinme menüsü oluşturmak, UX ve satış dönüşümünü artırmanın iyi bir yoludur. Bu, kullanıcıların istedikleri yere hızlı bir şekilde gitmelerine yardımcı olur. Ve aynı zamanda süreçte nerede olduklarını (ve nereye gittiklerini) vurgulamak için de kullanılabilir. Bu öğreticide, Divi’de bir ödeme navigasyon menüsünün nasıl tasarlanacağını göstereceğiz. Bu özel menüyü, ödeme işlemi için en önemli sayfada UX’i artırmak için kullanabilirsiniz (mağazalar, sepetler, çıkışlar vb.). Bu tür bir menü, Woocommmerce Cart ve Checkout sayfası şablon setlerinde de ücretsiz olarak kullanılmıştır.
Başlayalım. Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız tasarımın bir bakış.
Dosyayı indir
Parçanın düzenini Divi kütüphanenize aktarmak için Divi kütüphanesine gidin.
İçe Aktar düğmesini tıklayın. Taşınabilirlik açılır penceresinde, İçe Aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin. Ardından İçe Aktar düğmesini tıklayın.
Bittiğinde, Düzen Divi Builder’da mevcut olacak. Bu ödeme işleminin navigasyon menüsü tasarımı, Divi için ücretsiz sepet ve ödeme sayfalarımızdan birinde görüntülenir. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacın var Başlamak için aşağıdakileri yapmanız gerekir: Değilse, divi temasını yükleyin ve etkinleştirin.
WordPress’te yeni bir sayfa oluşturun ve ön taraftaki sayfaları düzenlemek için Divi Builder’ı kullanın (görsel yapımcı).
“Başından Uyan” seçeneğini seçin.
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak.
Divi’deki sepet veya ödeme sayfanız için kasalar için bir gezinme menüsü nasıl tasarlanır. Bölüm ayarlarını açın ve aşağıdakileri ekleyin:
Arka plan rengi: #171F3A
Ardından, bu bölüme bir satır bir sütun ekleyin. Bir kasa işlemi için bir gezinme bağlantısı oluşturun Bir ödeme işlemi navigasyon bağlantısı oluşturmak için, mağaza sayfasına, sepet sayfasına ve ödeme sayfasına bağlı üç bulanık modülü kullanacağız. Mağaza gezinme bağlantıları yapmak için mağaza gezinme bağlantıları ekleyin, sütuna yeni bir açıklama modülü ekleyin. Açıklama ayarlarındaki içerik ayarları, içeriği aşağıdaki gibi güncelleyin: Başlık: Mağaza Simgeler kullanın: evet
Simge: Ekran görüntüsüne bakın
Modül Bağlantı URL’si: Mağaza sayfası için bağlantı
Tasarım Ayarları Tasarım sekmesinin altındaki aşağıdakileri güncelleyin:
Ikon Color: #fff Renk Arka Plan Görüntü/Simge: #08C451
Resim genişliği/simgesi: 16px
Aydınlanma/simge: sol (masaüstü), orta (tablet ve cep telefonu)
Yuvarlak açılı görüntü/simge:% 100
Dolgu görüntü/simge: 25px (üst, alt, sol, sağ)
Simge tasarımı tamamlandıktan sonra, başlık metnini aşağıdaki gibi güncelleyin:
Poppins yazı tipi başlığı Tesviye metin başlığı: sol (masaüstü), orta (tablet ve cep telefonu)
Başlık metin rengi: #fff
Başlık Metin Boyutu: 14px
Başlık mektubu aralığı 0.1px
Hat yüksekliği başlığı: 1.1em
Ardından genişliği güncelleyin ve varsayılan animasyonu devre dışı bırakın.
Genişlik: Otomatik Animasyonlu resim/simge: animasyon olmadan
Tasarım sürecini hızlandırmak için daha fazla navigasyon bağlantısı yapmak için yinelenen bulanıklık, kısa açıklamaları iki kez kopyalayın, böylece toplam üç açıklamanız (veya navigasyon bağlantılarınız).
Navigasyon menüsünde birinci ve üçüncü açıklama için birinci ve üçüncü gezinme bağlantılarının konumlandırılması mutlak bir konuma sahip olacaktır. Bu, yerinde kalmalarına ve cep telefonlarına yığılmamalarına izin verecektir. İlk açıklamayı konumlandırmak için aşağıdaki açıklama ayarlarını açın ve güncelleme: Pozisyon: Mutlak Konum: sol üst
Dizin Z: 10
Not: Z endeksinin eklenmesi, daha sonra ekleyeceğimiz bölme çizgisinin önündeki açıklamayı korumak için önemlidir. Üçüncü açıklamayı konumlandırmak, üçüncü açıklama ayarlarını açmak ve aşağıdakileri güncellemek için:
Pozisyon: Mutlak
Konum: Sağ üst Dizin Z: 10
Sepet Navigasyon Bağlantısı/Orta Açıklama İncelemesinin ayarlanması bir demiryolu navigasyon bağlantısı haline gelecektir. İkinci/orta açıklama için ayarları açın ve içeriği aşağıdaki gibi güncelleyin:
Başlık: İnceleme
Simgeler kullanın: evet Simge: Ekran görüntüsüne bakın
Modül Bağlantı URL’si: Sepet sayfasına bağlantı
Bu tasarımda sepet sayfası için bir navigasyon menüsü tasarladığımız için, bu açıklamayı öne çıkaracağız (daha büyük ve daha kalın hale getirir), böylece kullanıcıların ödeme işleminde nerede olduklarını bildikleri için.
Tasarım ayarları altında aşağıdakileri güncelleyin:
Resim Boyutu/Simge: 48px Aydınlanma/ikon: orta
Ağır yazı tipi başlığı: yarı kalın
Hizalama Metin Başlığı: Orta
Başlık Metin Boyutu: 16px Ardından, boyut ve alanı aşağıdaki gibi güncelleyin:
Genişlik:% 33
Modül hizalaması: orta Marj: -18px üst, 0px aşağıda
Ayrıca, Z endeksinin 10 değerinde güncellendiğinden emin olun.
Dizin Z: 10
Ödeme Gezinme Bağlantısını Ayarla Ödeme Gezinme bağlantısını ayarlamak için, üçüncü açıklama ayarlarını açın ve içeriği aşağıdaki gibi güncelleyin: Başlık: Checkout
Simgeler kullanın: evet Simge: Ekran görüntüsüne bakın
URL Bağlantı Modülü: Ödeme sayfasına bağlantı
Ödeme sayfası ödeme işleminde bir sonraki adım olduğundan, soluk bir renk şeması sunacağız. Tasarım sekmesinin altında aşağıdakileri güncelleyin:
Ikon Renk: RGBA (255,255,255.0.24)
Arka plan renkli görüntü/simge: #343854
Aydınlanma/simge: sağ (masaüstü), orta (tablet ve cep telefonu)
Tesisat Metin Başlığı: Sağ (Masaüstü), Merkez (Tablet ve Cep Telefonu) Renkli Metin Başlığı: #343854
Ödeme işlemi navigasyon bağlantısı mevcut olduktan sonra ilerlemeyi göstermek için bir bölme hattı yapın, ödeme işleminde ilerleme göstermek için bir bölme çizgisi eklemeye hazırız. Üçüncü açıklama modülü altında yeni bir bölücü modülü ekleyin.
Ardından, bölücü hattını diğer açıklamanın üzerine sürüklemek için katman/sermaye ekranını kullanın.
Çizgi rengi: #343854 Bölücü ağırlığı: 2px Genişlik:% 100 Gelişmiş sekmesinin altında, bölme çizgisini aşağıdaki gibi konumlandırın:
Pozisyon: Mutlak
Konum: sol üst
Dikey Ofset: 32px İlk bölücü hattı kurulduktan sonra, ikinci bölücü hattı eklemeye hazırız. Bu satır, ilk iki açıklamayı birbirine bağlayan ilk bölme çizgisinin kısmını vurgulayacaktır. Bu, ilerleme bıçakları gibi ödeme işleminin ilerlemesini göstermeye yardımcı olacaktır. İkinci bölücüyü eklemek için mevcut bölücüyü çoğaltın ve aşağıdaki tasarım ayarlarını güncelleyin:
Çizgi rengi: #08C451
Genişlik:% 50
Sepet sayfası gezinme menüsünün nihai sonucu tamamlanmıştır. Şimdi, masaüstü ve hücreseldeki sonuçlara bakın. Satırları Divi kitaplığına kaydedin, bu ödeme işlemi gezinme menüsünü gelecekte ödeme veya şablon sayfamıza ekleyebildiğimiz için, divi kütüphanesine kaydetmek önemlidir. Bu örnek için, sıraları kütüphaneye kaydedeceğiz. Bunu yapmak için, imleci satıra yönlendirirken Kütüphaneye Kaydet simgesini tıklayın. Kütüphaneye sermaye ekleyin, düzenin adını ekleyin ve kütüphaneye kaydet’i tıklayın.
Ödeme sayfası için gezinme tasarımını değiştirme Sepet sayfası gezinme menüsü kütüphaneye kaydedildikten sonra, ödeme sayfası için bir gezinme menüsü oluşturmak için tasarımı değiştirebiliriz. Aynı içeriği ve bağlantıyı korumak istiyoruz. Ancak, ödeme işleminin yeni bir gelişimini yansıtacak şekilde tasarımı değiştirmek istiyoruz. Bölme hattını, bölme çizgisini kasayı inceleme navigasyon bağlantısına tamamlayacak şekilde güncellemek için güncelleme, ikinci bölücü hattı için ayarları açın ve genişliği%100 değerine güncelleyin. Genişlik:%100
Dükkan navigasyon bağlantısını güncelleyin, ekleyeceğimiz ödeme sayfası parlak bir arka plana sahip olacağından, gezinme bağlantılarımızın her biri için daha koyu bir başlık metni istiyoruz. Bunu yapmak için, soldaki “depolama” açıklaması için ayarları açın ve metin başlığının rengini güncelleyin: Metin Renk Başlığı: RGBA (64,71,104.0.36) Ödeme Gezinme bağlantısını güncellemek için ödeme gezinme bağlantısını güncelleyin, modül modülü modülünü (sepet bağlantısı/inceleme) kopyalayın. Ardından modül stilini sağdaki “Check” açıklamasına iletin.
“Checkout” açıklama ayarlarını açın ve aşağıdakileri güncelleyin: Aydınlanma/simge: doğru
Hizalama Metni Başlığı: Doğru Orta bulanıklık kuvvetleri şimdi bu bulanıklık işgal etse de, Blurb hala mutlak bir konuma sahiptir. Devam sekmesi altında konumu varsayılan olarak değiştirin. (Bu, mutlak pozisyonun orta açıklamasını verene kadar modülü mevcut modülün altına düşürecektir.) Tasarım sekmesinin altında, modül seviyesini güncelleyin: Modül hizalaması: doğru
Sepet İncelemelerinin Gezinme Bağlantılarını Yapma Kasası navigasyon bağlantısı tamamlandıktan sonra orta açıklamayı (CART/Navigasyon bağlantısı) güncelleyebiliriz. Tasarım işlemini hızlandırmak için soldaki “Mağaza” modül kuvvetini kopyalayın. Ardından modül stilini orta “inceleme” açıklamasına iletin.
Bittiğinde, “inceleme” açıklaması solda, “mağaza” modülünün hemen üzerinde konumlandırılacaktır. “Gözden Geçirme” açıklamasını seçmek ve pozisyonun konumunu aşağıdaki gibi güncellemek için sermaye katmanını kullanın: Konum: Top Center Orta açıklamanın güncellenmesini tamamlamak için aşağıdaki güncelleme:
Hizalama Metin Başlığı: Orta Arka Plan Parçası, kasada navigasyon menüsünün ne görüntülenmesini parlak bir arka planla doğru bir şekilde yansıtmak için, parçanın arka plan rengini aşağıdaki gibi güncelleyin: Arka plan rengi: #Fafafb Satırları Divi kütüphanesine saklamak, Sepet sayfası gezinme menüsünde yaptığımızla aynıdır, bu ödeme sayfası gezinme menüsünü ileride kullanım için Divi kütüphanesine kaydedebiliriz. Sıra menüsündeki kütüphaneye kaydetme simgesini kullanarak menüyü kütüphaneye içeren satırları devam edin ve kaydet.
Navigasyon menüsü ödeme sayfasının nihai sonuçları, ödeme sayfası gezinme menüsünün nihai sonucudur ve ödeme işlemindeki son gelişimi doğru bir şekilde yansıtır. Sepete ve sayfalara veya ödeme şablonlarına kontrol etmek için bir gezinme menüsü ekleyin Şimdi Gezinme Menüsü Ödeme işleminin iki sürümü kütüphaneye saklanır, istediğiniz herhangi bir sayfaya veya şablona ekleyebiliriz. Örneğin, Woocommerce Sepet Şablonuna göz atmak için bir gezinme menüsü eklemek, tema üreticisini açıp sepet şablonunun gövde düzenini düzenlemek için tıklayın. Navigasyon menümüzü kütüphanede bir satır olarak kaydeddiğimiz için, hatırlamamız gerektiği için Menü navigasyonunu yüklemek için menüyü yüklemek için menüyü yüklemek için şablonumuza yeni bir satır ekleyin. Bu yüzden, satırlar için bir yer bulun ve yeni çizgiler eklemek için tıklayın. Capital Insert hattında, kütüphaneden ekle sekmesini tıklayın ve listeden depolanan satırı seçin.
Ödeme sayfası şablonuna bir gezinme menüsü eklemek için aynı işlemi tekrarlayabilirsiniz. Nihai sonuçlar, bu ödeme işlemi navigasyon bağlantısının tamamen tasarlanmış bir şablonda nasıl görüldüğünü görür. Bu tasarım ayrıca Divi için ücretsiz sepet ve ödeme sayfalarımızdan birinde görüntülenir.
Navigasyon menüsü ödeme işleminin son zihni, web siteniz için iyi bir varlık olabilir. Ve Divi ile, ihtiyacınız olan tüm ayarlamalarla tamamen baştan beri inşa edebilirsiniz. Ayrıca, mizanpajı kütüphanenize kaydedebilirsiniz, böylece istediğiniz herhangi bir sayfaya veya şablona yalnızca birkaç tıklama ile bir menü ekleyebilirsiniz. Umarım bu, bir sonraki projeniz için bir tane oluşturmanıza ve ödeme sürecinden daha fazla müşteri getirmenize yardımcı olacaktır. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!