WooCommerce, EDD, Üyeler ve Divi Builder ile diğerleri için özel bir hesap sayfası nasıl tasarlanır
Divi ile bir E-Niaga sitesi veya üyelik sitesi oluşturduysanız, Divi tasarımınızı veya sitenizi üyelik işlevlerini veya E-NiagA’yı işlemek için eklentiniz tarafından oluşturulan bir hesap sayfasıyla eşleştirmek için zorluklar yaşayabilirsiniz. Bu hesap sayfası (ön uç sayfası veya ayrılmış sayfa olarak da adlandırılır) …
Üye Hesap Bilgileri
satın alım geçmişi
Kayıt
Katılmak
ve daha fazlası…
WooCommerce gibi üçüncü taraf eklentileri için çoğu hesap sayfası, bu tür eklenti hakkında özel bilgiler üretmek için kısa kodlar kullanır (veya kısa kodlar sağlar). Bu öğreticide, kısa kodu kullanarak ön uç hesap sayfalarını tasarlamak için Divi Builder’ı nasıl kullanabileceğinizle ilgili bazı ipuçlarını paylaşacağım.
Sneak Peek burada Divi ile yapabileceğiniz özel hesap sayfalarının bazı örnekleri.
Hesap sayfalarını görüntülemek için kısa bir kod kullanın, eklenti kullanıcılara, eklenti tarafından üretilen belirtilen hesap sayfasını kullanmak yerine kısa kodu kullanarak hesap bilgilerini dağıtma seçeneği sunar.Bu, kullanıcıların sayfa içeriğini siteleri boyunca yöneterek daha esnek olmalarını sağlar ve bu içeriğin Divi gibi sayfa yapımcılarında çalışmasına izin verir.Örneğin, WooCommerce ile bir site oluşturuyorsanız, hesap bilgilerini işlemek için bir WooCommerce sayfası ayarlayacaksınız.Bu sayfalardan birine hesap sayfam denir.Sayfa içeriği kısa bir kod [wooocommerce_my_account] kullanılarak dağıtıldı. Yani isterseniz, kısa kodu başka bir sayfada veya divi oluşturucu kullanarak modülde kullanabilirsiniz.Tek yapmanız gereken, Divi Builder kullanarak modüle kısa bir kod eklemek ve sayfaya istediğiniz diğer tasarım öğelerini eklemektir. Eklentiye bağlı olarak, ön uç hesap sayfanız WooCommerce gibi Divi Builder’ı kullanamayabilir. Ancak, bu, kendi özel sayfalarınızı oluşturmaya yardımcı olacak kısa bir kod olmadığı anlamına gelmez. Örneğin, MemberPress kullanırken, yeni bir üyelik yaptığınızda, eklenti üyelik için otomatik olarak bir kayıt sayfası oluşturur. Otomatik olarak oluşturulan kayıt sayfası Divi Builder’ı kullanamaz. Ancak, üyelik için bir kayıt formu oluşturmak için kısa bir kod kullanabilirsiniz. Bu nedenle, tek yapmanız gereken yeni bir sayfa oluşturmak, Divi Builder’ı kullanarak metin modülüne kayıt formu için kısa bir kod eklemek ve özel kayıt sayfası oluşturmanızı tamamlamaktır. Bazen, Divi’s için biraz daha derinlemesine bakmanız gerekebilir. Bu sayfayı tasarlamak için dost çözüm. Ancak çoğu durumda, size yardımcı olacak kısa bir kod vardır. Bu, Divi ile bu tür sayfaları tasarlamak için temel bir stratejidir. Diğer tasarım seçenekleri için metin modülünde kısa bir kod kullanın, genellikle Divi’deki kod modülüne kısa bir kod eklemenizi öneririm, ancak bu durumda değil. Başlıklar, içerik metni ve metin modülünün tasarım seçeneklerini kullanarak daha fazla ayarlanabilen bağlantılar içeren hesap bilgileri üreten kısa kodlar. Bu içeriğin metin modülü tarafından tasarlanıp tasarlanamayacağını kontrol etmenin en iyi yolu test etmektir. Bazı durumlarda, her zamanki gibi görsel yapımcıları kullanarak tasarım değişikliklerini gerçek zamanlı olarak göremeyebilirsiniz. Önce ayarları kaydetmeniz ve efekti görmek için doğrudan sayfada görmeniz gerekebilir. HTML’ye alışkınsanız, metninizin tasarımla hedefleyebileceğiniz bir başlık (H1, H2, vb.) Olduğunu görmek için tarayıcı geliştiricinizi kullanarak kısa kod çıkışını hızlı bir şekilde kontrol edebilirsiniz. Elemanı sağ tıklayın ve “Kontrol” seçeneğini seçin. Kısa bir kodla bir başlığın kullanıldığını bildikten sonra, tasarım modülü tasarımını ayarlayarak hedefleyebilirsiniz.
Bağlantılar için de aynısını da yapabilirsiniz.
Kısa Kodunuzu Tutmak İçin Sayfanın Düzenini Özelleştirme Artık Metin Modülünde Kısa Kodu Kullanabilirsiniz, Hesap Sayfası İçeriğinin geri kalanını Divi Builder ile istediğiniz özel düzenlerle tasarlayabilirsiniz. Bu konuda yardıma ihtiyacınız varsa, web siteniz için Divi düzenini kullanmak için bu adımlara bakın. Kullandığınız düzen paketine bağlı olarak, kısa kod içeriği için ihtiyaçlarınıza en uygun sayfa düzenini bulmanız gerekir. Genel olarak, blog sayfaları, iletişim sayfaları veya sayfa düzeni hakkında arayacağım. Bu sayfanın düzeni genellikle kolayca ayarlanabilen standart bir gölgelik ve kısa kodları kolayca barındırabilen tam geniş bir içerik bölümüne sahiptir. Kısa kod içeriğinin mevcut modül tasarımını devralması için mevcut metin modülünü kullanmak istiyoruz. Örneğin, Wooocommerce için bir hesap sayfası oluşturmak için Coffee Shop Düzen Paketini kullanma şeklinizdir. Woocommerce hesap sayfamdaki Selal Kısa Kod. Hesap sayfamı düzenlemek için Divi Builder’dan sonra Visual Builder’ı uygulayın. Ayarlar menüsünü açın ve kütüphaneden yüklemeyi seçin ve kahve dükkanı seçin – önceden hazırlanmış düzen listesinden düzen hakkında. Başlık içeriğini “Hakkımızda” yerine “Hesabım” demek için değiştirin (satır içi düzenleyiciyi bunun için kullanabilirsiniz. Çok kolay şeyler.) Daha sonra birinci ve ikinci parçalar ve altbilgi bölümü hariç her şeyi silin. Şimdi ikinci bölümden ikinci sırayı silin (üç açıklama içerir). Birkaç metin modülü tutan bir sıra sütun ile ortada bir sıra bırakır. Bu kısa kodlar için mükemmel bir ayardır.
“En İyi Kahve Dükkanı” başlığını tutan üst metin modülünde bunu “Hesap Sayfanıza Hoş Geldiniz” olarak değiştirin. Kalan tek kişi kısa kodumuzu aşağıdaki metin modülüne eklemektir. Mevcut kukla metnini silin ve bir kısa kodla değiştirin [wooocommerce_my_account].
Tasarım sekmesi ayarlarını aşağıdaki gibi güncelleyin: Metin Yönlendirme: Metin Sekmesi Altında Sol Yazı Tipi listeleri Sıralı Değil: Oswald yazı tipi ağırlık listeleri sıralanmadı: Hafif yazı tipi kuvveti listeleri sıralanmadı: büyük harf (TT), alt çizgiye (U) çizgi kuvveti Listenin alt kısmı sıralanmadı: Katı metin boyutu Kayıtlı Liste: 32px Mesafe Mektubu Sıralama Sıralama: Arazi Listesinin 2px Yüksekliği Unsam: 1.8EM Stil Türü Kayıtlı Kayıt: Boyut Yok:% 100 (Varsayılan) Bu, kısa kodunuzda içeriği nasıl hedefleyebileceğinizin iyi bir örneğidir. WooCommerce, hesap bilgileri için dikey navigasyon görüntülemek için ayrık bir liste kullandığından, metin modülü ayarlarından olmayanlar listesini hedefleyebilirim. Çok havalı! Maalesef sınırlamalar var, belirli sayfaların Divi ile hiç tasarlanamadığı zamanlar var. Genellikle, bunun nedeni eklentinin özel bir arşiv türü kullanmasıdır. İyi örnek WooCommerce ürün sayfasıdır. Bu özel bir yazı türü olduğundan, sayfa şablonu bir divi üreticisi kullanamaz, ayrıca ürün sayfasını görüntülemek için kısa bir kod kullanamayız. Bu nedenle, temanın ayarlanması ve özel CSS ile kontrol edebileceğimiz şeyle sınırlıyız. DIVI Giriş Üyeleri ile Üyeler Hesap Sayfası Tasarlama Sayfası Üyeler Seçeneğinden Oturum Açma sayfanız olarak istediğiniz sayfayı belirleyebilirsiniz. Üyeler giriş sayfanız olarak sayfayı seçtikten sonra, kısa kod sayfayı her düzenlediğinizde görülecektir. Kısa kodu kopyalayın, Divi Builder’ı kullanın ve yapmaya hazırsınız. MemberPress Hesap Sayfası, oturum açma sayfasıyla aynıdır, herhangi bir sayfayı üye basınç sayfanız olarak ayarlayabilirsiniz.Ancak, hesap sayfası bilgisi için gereken kısa kodu, üyeler basıncında bulmak kolay değildir.Mevcut kısa kod listesinde bulmam gerekiyor. Bazen ihtiyacınız olan kısa kodu bulmak kolay değil, bu yüzden biraz daha zor bulmanız gerekebilir.Üyeler Teşekkürler Sayfası, Teşekkürler, belirttiğiniz baskı herhangi bir içerik içeren herhangi bir sayfa olabilir.Yani burada bir tasarım sınırı yok.Divi Builder’ı her zamanki gibi kullanabilirsiniz.Sayfayı bir sayfa olarak ayarlayın Teşekkürler, size bunun kayıttan sonra kullanıcıyı yönlendirmek istediğiniz sayfa olduğunu söylemenizi söylersiniz.Divi WooCommerce ile bir WooCommerce sayfası tasarlamak, eklentiyi yüklediğinizde WooCommerce sayfalarının kendisi otomatik olarak bir koleksiyonu üretir.Bunlar aşağıdakileri içerir:
Mağaza – ürününüz için sevkiyat arşivi türü için bir yer. Bilgi görüntülemek için ödeme sepetinin içeriğini üretmek için kısa bir kod [wooocommerce_cart] kullanan sepet [wooocommerce_cart]. Hesabım – hesaplarıyla ilgili belirli müşteri bilgilerini görüntülemek için kısa bir kod [wooocommerce_my_account] kullanıyor. Önceki özel hesap sayfamı nasıl oluşturacağımı tartıştığım için, sizi bu WooCommerce sayfalarının her biri için bazı yararlı tasarım ipuçları ile bırakacağım. Önce sepet sayfasına bakalım. Bunun için bir şey yapmadan önce bu görünüm. Global aksan renginizi güncellerseniz, sepet sayfasındaki bağlantılar ve düğmeler düzeninizin renk şemasına uyacaktır. Ayrıca, tema ayarındaki tipografik ayarları güncellerseniz, başlık ve metin metninin de uygun olması gerekir. Ama sadece birkaç tıklamayla bundan biraz daha iyisini yapabiliriz. Şimdi sepet sayfanızı düzenlemeye gidin. Kısa kodu kopyalayın [wooocommerce_cart]. Divi kitaplığından düzeni içe aktarın ve düzendeki metin modüllerinden birine kısa kodlar ekleyin. Sepet içeriğinin görüntülenmesi için bir sütun satırı olduğundan emin olun. Ardından ihtiyacınız olmayan tüm parçaları, satırları ve modülleri silin. Aşağıda, bir mod düzeni paketi kullanan bu tramvay sayfasının görüntülenmesine bir örnek verilmiştir. Mağaza sayfanız ve arşiv sayfanız, Divi mağaza modülünü kullanarak Woocommerce ekranınız için özel bir mağaza sayfası oluşturabilir. Ancak, bu sayfa varsayılan mağaza sayfasından özel yayın arşivlerini paylaşmayacağından, örneğin kategorilere dayalı ürünler bulmak istiyorsanız, Posta Arşivi sayfasının şablonunu kullanmak zorunda kalacaksınız. Ürün Sayfaları Ürün Sayfası Divi ile tasarlanamaz, ancak en azından tema ayar ayarlarını devralmalıdır. Bu sayfadaki hedef öğeleri hedeflemek için ayarlama temalarını da bazı özel CSS ekleyebilirsiniz. Divi kullanımı kolay bir dijital indirme hesap sayfası nasıl tasarlanırken, mağazanızı yönetmek için EDD tarafından kullanılan varsayılan ön uç sayfasını ayarladığınız yerdir. Aşağıdaki sayfa sizin için otomatik olarak oluşturulacak ve WordPress sayfanızda erişilebilir. Ödeme Sayfası – “Check” Başarı Başlığı Başarılı Sayfa – “Satın Al” İşlem Sayfaları Başlığı ile “Başarısız İşlem” Satın Alma Geçmişi – “Satınalma Geçmişi” başlığı ile Not: Bu sayfaların tümü sayfa için bilgi yaymak için kısa kodlar kullanır. Böylece bu sayfaların her birini ayarlamak ve Divi modülünde istediğiniz yerde kısa bir kod girebilmek için Divi Builder’ı kullanabilirsiniz. Bu, tasarımınızı sitenizde tutarlı tutmanıza olanak tanır. Out sayfanız, DIVI Builder’ı kullanarak özel ödeme sayfanızı tasarlamak için kısa kod checkut sayfası [indirme_checkout] kullanabilir. İşte dijital fiyat düzeni paketinden blog sayfası düzenini kullanan bir ödeme sayfası örneği. Koyu arka plan nedeniyle, kısa bir kod içeren bir metin modülü içeren bir satıra beyaz bir arka plan vermeliyim. İşlem sayfası başarısız olur Her sayfa işlem sayfası başarısız olduğundan atanabilir. EDD, kullanıcıyı yalnızca bir işlem başarısız olursa bu sayfaya yönlendirir. Divi Builder’ı kullanarak istediğiniz içerikle herhangi bir sayfa yapmak için yeterli. Dijital fiyat düzeni paketinden aynı blog sayfası düzenini kullanmanın bir örneği: Satın Alma Geçmişi Sayfası Divi Builder ile bir satın alma geçmişi sayfası oluşturmak için kısa bir kod [Patient_history] kullanabilirsiniz. Dijital Fiyat Düzeni Paketinden Blog Sayfası Düzenini Kullanarak Bu Sayfanın Görüntülenmesine Bir Örnek: Satınalma geçmişi sayfasında Divi Builder ile kullanılabilecek kısa bir kodu olmasına rağmen, varsayılan işlev, satın alınan öğeler listesinden görmek için bağlantıyı tıklar. Giriş sayfası giriş sayfası sizin için otomatik olarak oluşturulmaz, çünkü varsayılan WordPress oturumunu kullanır. Ancak Kısa Kod [EDD_LOGIN] kullanarak kendi oturum açma sayfanızı oluşturabilirsiniz. İşte dijital ödeme düzeni paketinden blog sayfasının düzeni kullanılarak oluşturulan bir giriş sayfası örneği: Bir satın alma onay sayfası oluşturmak için tekrarlayabilirsiniz. Aynı işlem, blogun konumunu sayfaya ekleyerek aynı işlem ve blog modülünün yerine gereken kısa kodu içeren metin modülünü ekleyin. Aşağıda bir satın alma onay sayfası (veya başarılı sayfa) örneğidir: Easy Easy Edd Digital İndirme Sayfası hakkında daha fazla bilgi, her ürün indirme için satın alma kısa kodları da sağlar. Bu, sayfadaki metin modülüne bu kısa satın alma kodunu ekleyerek ürününüzü göstermek için Divi ile özel bir sayfa oluşturmanızı sağlar. Bu işlevsellik WooCommerce ürünlerinden biraz daha esnektir. Kısa bir kod satın alma kullanan bir ürün sayfası örneği:
