Divi Builder ile WooCommerce, EDD, Memberpress ve daha fazlası için Özel Hesap Sayfaları Nasıl Tasarlanır

Divi ile daha önce bir e-ticaret sitesi veya üyelik sitesi kurduysanız, üyelik veya e-ticaret işlevselliğini işlemek için tasarımı veya Divi sitenizi eklentiniz tarafından oluşturulan hesap sayfalarıyla eşleştirme zorluğuyla karşılaşmışsınızdır. Bu Hesap sayfaları (ayrıca ön uç sayfalar veya ayrılmış sayfalar olarak da adlandırılır) aşağıdaki gibi işlemleri gerçekleştirir:

• bir üyenin hesap bilgileri
• satın alım geçmişi
• kayıt
• Giriş yapmak
• ve dahası…

WooCommerce gibi üçüncü taraf eklentiler için hesap sayfalarının çoğu, bu tür eklentiye özgü bilgileri oluşturmak için kısa kodlar kullanır (veya kısa kodlara sahiptir). Bu eğitimde, Divi Builder'ı bu kısa kodlardan yararlanarak bu ön uç hesap sayfalarını tasarlamak için nasıl kullanabileceğinize dair bazı ipuçlarını paylaşacağım.

Gizlice Bakış

Divi ile oluşturabileceğiniz birkaç özel hesap sayfası örneği.

Hesap Sayfaları Tasarlamak İçin Genel İpuçları

Tema Özelleştirici Ayarları

Bu hesap sayfalarını özelleştirmenin ilk adımı, Tema Özelleştirici'de Divi Teması için varsayılan stilleri ayarlamaktır, çünkü bu sayfalar normalde bu stil ayarlarını devralır. Bu hesap sayfalarının içeriği normalde metin, form alanları, bağlantılar ve düğmeler içerir. Tema özelleştirici, bu sayfalardaki metin ve bağlantılara stil vermek için doğru tipografi ayarlarına sahip olduğunuzdan emin olabilir, ancak form alanları ve düğmeler bazı özel CSS gerektirebilir.

Mümkün Olduğunda Hesap Sayfalarını Görüntülemek için Kısa Kodları Kullanın

Normalde, eklentiler, kullanıcıya, eklenti tarafından oluşturulan belirlenmiş hesap sayfasını kullanmak yerine bir kısa kod kullanarak hesap bilgilerini dağıtma seçeneği sunar. Bu, kullanıcılara sitelerinde sayfa içeriğini düzenleme konusunda daha fazla esneklik sağlar ve ayrıca bu içeriğin Divi gibi sayfa oluşturucularda çalışmasına olanak tanır.

Örneğin, WooCommerce ile bir site oluşturuyorsanız, hesap bilgilerini işlemek için WooCommerce Sayfalarını belirlemiş olacaksınız. Bu sayfalardan birine Hesabım sayfası denir. Sayfa içerikleri [woocommerce_my_account] kısa kodu kullanılarak dağıtılır.

Yani isterseniz, Divi Builder'ı kullanarak bu kısa kodu başka bir sayfada veya bir modül içinde kullanabilirsiniz. Tek yapmanız gereken Divi Builder'ı kullanarak bir modüle kısa kodu eklemek ve sayfaya istediğiniz diğer tasarım öğelerini eklemek.

Eklentiye bağlı olarak, ön uç hesap sayfalarınız Divi Builder'ı WooCommerce ile olduğu gibi dağıtamayabilir. Ancak bu, kendi başınıza özel bir sayfa oluşturmanıza yardımcı olacak kısa kodların olmadığı anlamına gelmez.

Örneğin, MemberPress kullanırken, her yeni üyelik oluşturduğunuzda, eklenti otomatik olarak o üyelik için bir kayıt sayfası oluşturur. Bu otomatik oluşturulan kayıt sayfaları Divi Builder'ı dağıtamaz. Ancak, bu üyelik için bir kayıt formu oluşturmak için bir kısa kod kullanabilirsiniz. Bu nedenle, tek yapmanız gereken yeni bir sayfa oluşturmak, Divi oluşturucuyu kullanarak kayıt formu kısa kodunu bir metin modülüne eklemek ve özel kayıt sayfanızı oluşturmayı tamamlamak.

Bazen, bu sayfaları tasarlamak için Divi dostu bir çözüm için biraz daha derine bakmanız gerekebilir. Ancak çoğu durumda size yardımcı olacak bir kısa kod vardır.

Divi ile bu tür sayfaları tasarlamak için temel strateji budur.

Daha Fazla Tasarım Seçeneği için Metin Modüllerindeki Kısa Kodları Kullanın

Normalde Divi'deki bir kod modülüne kısa kodlar eklemenizi öneririm, ancak bu durumda değil. Hesap bilgilerini oluşturan kısa kodlar, metin modülünün Tasarım seçeneği kullanılarak daha da özelleştirilebilen başlıklar, gövde metni ve bağlantılar içerir.

Bu içeriğin metin modülü tarafından tasarlanıp tasarlanamayacağını kontrol etmenin en iyi yolu, onu test etmektir. Bazı durumlarda, görsel oluşturucuyu normal şekilde kullanarak tasarım değişikliklerini gerçek zamanlı olarak göremeyebilirsiniz. Etkileri görmek için önce ayarları kaydetmeniz ve canlı sayfada görüntülemeniz gerekebilir.

Html'ye aşinaysanız, metninizin tasarımla hedefleyebileceğiniz herhangi bir başlığı (h1, h2, vb.) olup olmadığını görmek için tarayıcı geliştirici araçlarınızı kullanarak kısa kod çıktısını hızlı bir şekilde inceleyebilirsiniz.

İpucu: Sayfanızdaki bir öğeyi Chrome'da incelemek için öğeye sağ tıklayın ve "İncele"yi seçin.

Bir başlığın kısa kod tarafından dağıtıldığını öğrendikten sonra, bunu Tasarım ayarları metin modülüyle hedefleyebilirsiniz.

Aynı işlemi linkler için de yapabilirsiniz.

Kısa Kodunuzu Tutmak için Sayfa Düzenini Özelleştirin

Artık bir metin modülünde kısa kod kullanma olanağına sahip olduğunuza göre, hesap sayfası içeriğinin geri kalanını Divi Builder ile istediğiniz herhangi bir özel düzende tasarlayabilirsiniz.

Bununla ilgili yardıma ihtiyacınız varsa, web siteniz için bir Divi Düzeni kullanma adımlarına göz atın.

Kullanmakta olduğunuz 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 gerekecektir.

Genel olarak, bir blog sayfası, bir iletişim sayfası veya bir hakkında sayfa düzeni arardım. Bu sayfa düzenleri genellikle kolayca ayarlanabilen standart bir başlığa ve bir kısa kodu kolayca tutabilen tam genişlikte bir içerik bölümüne sahiptir.

Tercihen, kısa kod içeriğinin mevcut modülün tasarımını devralması için mevcut bir metin modülünü kullanmak isteyeceksiniz.

Örneğin, WooCommerce için bir hesap sayfası oluşturmak için Coffee Shop Layout Pack'i nasıl kullanacağınız aşağıda açıklanmıştır.

WooCommerce Hesabım Sayfasındaki mevcut kısa kodu kopyalayın. Hesabım Sayfasını düzenlemek için Divi Builder'ı ve ardından Visual Builder'ı dağıtın. Ayarlar menüsünü açın ve Kitaplıktan Yükle'yi seçin ve
hazır düzenler listesinden Kahve Dükkanı – Düzen hakkında'yı seçin.

Başlık İçeriğini "Hakkımızda" yerine "Hesabım" olacak şekilde değiştirin (Bunun için satır içi düzenleyiciyi kullanabilirsiniz. Çok kolay şeyler.)

Ardından, birinci ve ikinci bölümler ve altbilgi bölümü hariç mizanpajdaki her şeyi silin.

Şimdi ikinci bölümün ikinci satırını silin (üç tanıtım yazısı içeren). Bu, birkaç metin Modülü tutan bir sütun satırı ile orta bölümde bir satır bırakır. Bu, kısa kod için mükemmel bir kurulumdur.

“En İyi Kahve Dükkanı” başlığını taşıyan üst metin modülünde, bunu “Hesap Sayfanıza Hoş Geldiniz” olarak değiştirin.

Geriye kalan tek şey, kısa kodumuzu alttaki metin modülüne eklemek. Sadece orada bulunan sahte metni silin ve [woocommerce_my_account] kısa koduyla değiştirin.

Tasarım sekmesi ayarlarını aşağıdaki gibi güncelleyin:

Metin Yönü: Sol

sırasız liste metni sekmesi altında
Sırasız Liste Yazı Tipi: Oswald
Sırasız Liste Yazı Tipi Ağırlığı: Hafif
Sırasız Liste Yazı Tipi Stili: Büyük Harf (TT), Altı Çizili (U)
Sırasız Liste Altı Çizili Stili: Düz
Sırasız Liste Metin Boyutu: 32px
Sırasız Liste Harf Aralığı: 2px
Sırasız Liste Satır Yüksekliği: 1.8em
Sırasız Liste Stili Türü: Yok

Boyutlandırma: %100 (varsayılan)

Bu, kısa kodunuzdaki içeriği nasıl hedefleyebileceğinizin harika bir örneğidir. WooCommerce, hesap bilgileri için dikey gezinmeyi görüntülemek için sırasız bir liste kullandığından, metin modülü ayarlarından sırasız listeyi hedefleyebilirim. Çok havalı!

Sınırlamalar Vardır

Ne yazık ki, bazı sayfaların Divi ile tasarlanamadığı zamanlar olacaktır. Normalde bunun nedeni, eklentinin özel yazı tipi arşivleri kullanmasıdır. Buna güzel bir örnek WooCommerce ürün sayfasıdır.

Bu özel bir gönderi türü olduğundan, sayfa şablonu Divi oluşturucuyu dağıtamaz ve ürün sayfasını görüntülemek için bir kısa kod kullanamayız. Bu nedenle Tema Özelleştirici ve Özel CSS ile kontrol edebildiklerimizle sınırlıyız.

Divi ile Memberpress Hesap Sayfaları Tasarlama

ÜyeBasın Giriş Sayfası

ÜyePress Seçenekleri içerisinden giriş sayfanız olmasını istediğiniz herhangi bir sayfayı belirleyebilirsiniz. Sayfayı MemberPress Giriş Sayfanız olarak seçtiğinizde, sayfayı her düzenlediğinizde bir kısa kod görünür hale gelecektir.

Sadece bu kısa kodu kopyalayın, Divi Builder'ı dağıtın ve yola koyulun.

ÜyeBasın Hesap Sayfası

Tıpkı giriş sayfası gibi, herhangi bir sayfayı MemberPress Hesap Sayfanız olarak belirleyebilirsiniz. Ancak, hesap sayfası bilgisi için gereken kısa kod, MemberPress Seçeneklerinde kolayca bulunmaz. Kullanılabilir kısa kodlar listesinde bulmam gerekiyordu.

Bazen ihtiyacınız olan kısa kodları bulmak kolay olmayabilir, bu nedenle biraz daha dikkatli bakmanız gerekebilir.

ÜyeBasın Teşekkür Sayfası

Belirlediğiniz MemberPress Teşekkür Sayfası, herhangi bir içeriğe sahip herhangi bir sayfa olabilir. Yani burada tasarım kısıtlaması yok. Divi Builder'ı normal şekilde kullanabilirsiniz.

Sayfayı MemberPress Teşekkür Sayfanız olarak ayarlamak, sadece MemberPress'e, kayıttan sonra kullanıcıları yönlendirmek istediğiniz sayfanın bu olduğunu söyler.

Divi ile WooCommerce Sayfaları Tasarlamak

WooCommerce, eklentiyi yüklediğinizde otomatik olarak kendi WooCommerce sayfalarını oluşturur. Bunlar aşağıdakileri içerir:

Mağaza – ürünleriniz için yazı tipi arşivi için bir yer tutucudur.
Sepet – sepet içeriğini oluşturmak için [woocommerce_cart] kısa kodunu kullanan
Checkout – bilgileri göstermek için [woocommerce_checkout] kısa kodunu kullanır.
Hesabım – hesaplarıyla ilgili belirli müşteri bilgilerini göstermek için [woocommerce_my_account] kısa kodunu kullanan.

Daha önce özel bir Hesabım Sayfasının nasıl oluşturulacağını ele aldığımdan, bu WooCommerce Sayfalarının her biri için size bazı faydalı tasarım ipuçları bırakacağım.

Önce Sepet sayfasına bir göz atalım. İşte ona bir şey yapmadan önce nasıl göründüğü.

Genel vurgu renginizi güncellerseniz, Sepet sayfasındaki bağlantılar ve düğmeler mizanpajınızın renk şemasıyla eşleşir. Ayrıca, Tema Özelleştirici'deki tipografi ayarlarını güncellerseniz, başlıklar ve gövde metni de eşleşmelidir.

Ancak birkaç tıklamayla bundan biraz daha iyisini yapabiliriz. Şimdi gidip sepet sayfanızı düzenleyin. [woocommerce_cart] kısa kodunu kopyalayın. Divi Kitaplığından bir düzeni içe aktarın ve kısa kodu, düzen içindeki metin modüllerinden birine ekleyin. Sepet içeriğinin görüntülenecek alana sahip olması için tek sütunlu bir satır olduğundan emin olun. Ardından, ihtiyacınız olmayan tüm bölümleri, satırları ve modülleri silin.

Moda düzeni paketini kullanarak bu alışveriş sepeti sayfasının nasıl göründüğüne bir örnek.

Mağaza Sayfası ve Arşiv Sayfaları

Divi'nin Mağaza Modülünü kullanarak WooCommerce görüşünüz için özel bir mağaza sayfası oluşturabilirsiniz. Ancak, bu sayfa varsayılan mağaza sayfasının özel gönderi türü arşivini paylaşmayacağından, örneğin ürünleri kategoriye göre aramak istiyorsanız gönderi türü arşiv sayfası şablonunu kullanmak zorunda kalacaksınız.

Ürün Sayfaları

Ürün Sayfaları Divi ile tasarlanamaz ancak en azından Tema Özelleştirici ayarlarını devralmalıdır. Bu sayfadaki öğeleri hedeflemek için Tema Özelleştiriciye biraz Özel CSS de ekleyebilirsiniz.

Divi Kullanarak Kolay Dijital İndirme Hesap Sayfaları Nasıl Tasarlanır

EDD'nin mağazanızı yönetmek için kullandığı varsayılan ön uç sayfalarını burada ayarlayabilirsiniz. Aşağıdaki sayfalar sizin için otomatik olarak oluşturulacak ve wordpress sayfalarınızın altından erişilebilir olacaktır.

Ödeme Sayfası – “Ödeme” başlığına sahiptir
Başarı Sayfası – “Satın Alma Onayı” başlığına sahiptir
Başarısız İşlem Sayfası – “İşlem Başarısız” başlığına sahip
Satın Alma Geçmişi Sayfası – “Satın Alma Geçmişi” başlığına sahiptir

Not: Bu sayfaların tümü, sayfaya ilişkin bilgileri dağıtmak için kısa kodlar kullanır. Böylece, bu sayfaların her birini özelleştirmek için Divi Builder'ı kullanabilecek ve kısa kodu bir Divi Modülü içinde istediğiniz herhangi bir yere yerleştirebileceksiniz. Bu, tasarımınızı siteniz boyunca tutarlı tutmanıza olanak tanır.

Ödeme Sayfası

Divi Builder'ı kullanarak özel ödeme sayfanızı tasarlamak için ödeme sayfası kısa kodunu [download_checkout] kullanabilirsiniz.

Aşağıda, Dijital Fiyatlandırma Düzeni paketindeki blog sayfası düzenini kullanan bir ödeme sayfası örneği verilmiştir. Koyu arka plan nedeniyle, metin modülünü içeren satıra kısa kodlu beyaz bir arka plan vermek zorunda kaldım.

Başarısız İşlem Sayfası

Herhangi bir sayfa Başarısız İşlem sayfası olarak atanabilir. Ödeme sırasında bir işlem başarısız olursa, EDD kullanıcıyı bu sayfaya yönlendirecektir. Divi Builder'ı kullanarak istediğiniz içeriğe sahip herhangi bir sayfa oluşturun.

Dijital Fiyatlandırma Düzen Paketindeki aynı blog sayfası düzenini kullanan bir örnek:

Satın Alma Geçmişi Sayfası

Divi Builder ile Satın Alma Geçmişi sayfasını oluşturmak için [purchase_history] kısa kodunu kullanabilirsiniz. Dijital Fiyatlandırma Düzeni paketindeki Blog sayfası düzenini kullanarak bu sayfanın nasıl görüneceğine dair bir örnek:

Satın alma geçmişi sayfasında Divi Builder ile kullanılabilecek bir kısa kod olsa da, satın alınan öğeler listesinden görüntülemek için bağlantıya tıklamanın yerleşik işlevi düzeni bozacaktır.

Giriş Sayfası

Giriş Sayfası, WordPress varsayılan girişini kullandığından sizin için otomatik olarak oluşturulmaz. Ancak [edd_login] kısa kodunu kullanarak kendi giriş sayfanızı oluşturabilirsiniz..

Dijital Ödeme Düzeni paketinin Blog sayfası düzeni kullanılarak oluşturulan bir giriş sayfası örneği:

Satın Alma Onayı sayfasını oluşturmak için, blog düzenini sayfaya ekleme ve blog modülünün yerine gereken kısa kodlu metin modülünü ekleme ile aynı işlemi tekrarlayabilirsiniz.

Satın Alma Onayı sayfasına (veya Başarı Sayfasına) bir örnek:

Kolay Dijital İndirme Sayfaları hakkında daha fazlası

EDD ayrıca indirilen her ürün için satın alma kısa kodları sağlar. Bu, sayfadaki bir metin modülüne bu satın alma kısa kodunu ekleyerek ürününüzü sergilemek için Divi ile özel bir sayfa oluşturmanıza olanak tanır. Bu işlevsellik, WooCommerce Ürünlerinden biraz daha esnektir.

Satın Alma Kısa Kodunu kullanan bir Ürün Sayfası örneği:

Son düşünceler

Divi ile bile bazen eklentilere ihtiyaç duyarsınız. Bu nedenle Divi'nin (bir tasarım aracı olarak) gücünü üçüncü taraf eklentilerin gücüyle nasıl birleştireceğinizi bilmek önemlidir. Bu nedenle, WooCommerce ile bir e-ticaret sitesi, MemberPress ile bir Üyelik sitesi oluşturuyorsanız veya hesap sayfalarını Divi Builder ile entegre etmekte zorluk çekiyorsanız, bu kısa kodlara dikkat edin.

Bu makaledeki amacım, üçüncü taraf eklentilerle çalışırken Divi Builder'ı tasarım aracı olarak en üst düzeye çıkarmanıza yardımcı olmaktır. Ancak, oradaki CSS sevenler için, bu hesap sayfalarına eksiksiz bir çocuk teması yaklaşımını tercih edebilirsiniz. Çoğu durumda bu, tasarımın tüm yönlerini kontrol etmenin tek yoludur.

Divi'yi diğer eklentilerle kullanma konusunda benzer deneyimleriniz varsa bana bildirin. Onları duymayı çok isterim. Aşağıdaki yorumlarda bana bildirin.

Şerefe!