Oturum Açmış Kullanıcılar için Öne Çıkan Ürün Bölümlü Bir WooCommerce Hesabı Sayfası Nasıl Oluşturulur

Divi'nin Woo Modülleri, Hesap Sayfası gibi diğer WooCommerce sayfaları da dahil olmak üzere web sitenizin herhangi bir yerinde öne çıkan bir ürün bölümünü sergilemek için yardımcı olabilir. Bu, kullanıcılara hesap bilgilerine göz atarken bile özel teklifler sunmayı kolaylaştırır.

Bu eğitimde, Woo Modüllerini kullanarak kullanışlı bir özellikli ürün bölümü ile eksiksiz bir WooCommerce Hesap Sayfasının tamamını sıfırdan tasarlayacağız. Öne çıkan ürün bölümünü yalnızca kullanıcı oturum açtığında gösterecek birkaç CSS parçacığı bile ekleyeceğiz.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız hesap sayfasına hızlı bir bakış.

İşte bir kullanıcı oturum açmadan önceki hesap sayfası.

İşte bir kullanıcı oturum açtıktan sonraki hesap sayfası. Gördüğünüz gibi, öne çıkan ürün bölümü, hesap sayfası içeriğinin altında görünüyor.

Öne Çıkan Ürün Hesabı Sayfa Düzenini ÜCRETSİZ olarak indirin

Bu öğreticiden hesap sayfası düzenine el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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.

Youtube Kanalımıza Abone Olun

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 öne çıkan bir ürün bölümü tasarlamaya hazır olacaksınız.

Bölüm 1: Hesap Sayfasını Tasarlama

WooCommerce Hesap Sayfasında Divi Builder'ı etkinleştirin

WooCommerce yüklenip etkinleştirildiğinde, WooCommerce Hesabı sayfası sizin için otomatik olarak oluşturulacaktır. Hesap sayfasını düzenlemek için, Sayfalar > Tüm Sayfalar'a giderek WordPress Kontrol Panelinden bulabilirsiniz. Ardından, Hesap sayfasının üzerine gelin ve "düzenle"yi tıklayın.

Ardından, Hesap Sayfası içeriğini oluşturmak için kullanılan WooCommerce Kısa Kodunu fark edeceksiniz. Devam edin ve Divi Builder'ı kullanmak için tıklayın.

Kısa kod taşınacak ve bir metin modülüne yerleştirilecektir. Şimdi Ön Uçta Divi Builder'ı kullanmak için tıklayın.

Bölüm Ayarları

Yapacağımız ilk şey, bölüme bir arka plan eklemek. Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

• Arka Plan Gradyanı Sol Renk: #ad52b7
• Arka Plan Gradyanı Sağ Renk: rgba(255,255,255,0.66)
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %33
• Bitiş Konumu: %0
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Ardından, en az 1920 piksel genişliğinde bir arka plan resmi ekleyin.

Yeni Bir Metin Modülü Kullanarak Başlık Ekleme

Ana sayfa başlığını (h1) eklemek için, WooCommerce Kısa Kodunu içeren mevcut metin modülünün altındaki gri artı simgesine tıklayarak yeni bir metin modülü ekleyin.

Ardından, WooCommerce kısa kod metin modülünün üzerine sürükleyin ve ayarları aşağıdaki gibi güncelleyin:

Gövde İçeriği:

<h1>My Account</h1>

H1 sekmesi altında aşağıdaki başlık metin stillerini güncelleyin:

• Başlık Yazı Tipi: İstemi
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metni Rengi: #3f214f
• Başlık Metni Boyutu: 90px (masaüstü), 56px (tablet), 36px (telefon)
• Başlık Harf Aralığı: 5px

Kısa Kod İçeriğini Özelleştirin

WooCommerce hesap sayfası bilgileri bir kısa kod tarafından oluşturulsa bile, metin modülü ayarlarını kullanarak bu öğelerin bazılarını hala hedefleyebiliriz.

Kısa kodu tutan metin modülünün ayarlarını açın ve aşağıdakileri güncelleyin:

• Arka Plan Rengi: rgba(255,255,255,0.9)

Paragraf metni sekmesi altında aşağıdakileri güncelleyin:

• Metin Yazı Tipi: Roboto
• Metin Metin Boyutu: 16px

Bağlantı sekmesi altında aşağıdakileri güncelleyin:

• Bağlantı Metni Rengi: #ad52b7

Sırasız liste sekmesi altında aşağıdakileri güncelleyin:

• Sırasız Liste Metin Boyutu: 26px (masaüstü), 18px (tablet)
• Sırasız Liste Harf Aralığı: 2px
• Sırasız Liste Satır Yüksekliği: 2em
• Sırasız Liste Öğesi Girintisi: 0.01px

Şu anda göremesek de, bir kullanıcı oturum açmadan hesap sayfasını her ziyaret ettiğinde, Giriş Formunda bir h2 başlığı olacaktır. Bu h2 başlığını hedeflemek için aşağıdakileri güncelleyin:

• Başlık 2 Yazı Tipi: Roboto
• Başlık 2 Metin Boyutu: 56px (masaüstü), 32px (tablet)

Ardından metin modülünün etrafına biraz dolgu ekleyin:

• Dolgu: %3 üst, %3 alt, %3 sol, %3 sağ

Son olarak, metin modülüne özel bir CSS Sınıfı verin.

• CSS Sınıfı: özel hesap stili

Bu sınıfla, metin modülleri ayarlarıyla hedefleyemediğimiz hesap bilgileri öğelerine bazı son rötuşlar yapmak için bazı harici CSS ile modülü hedefleyebiliriz.

Diğer Hesap Bilgileri Öğelerine Stil Vermek için Harici CSS Ekleme

CSS Sınıfımıza sahip olduğumuz için, kısa kod tarafından oluşturulan diğer hesap bilgileri öğelerine stil vermek için harici CSS'yi kullanabiliriz. Bu öğeleri Tema Özelleştirici Ayarları'ndan kontrol etmek istiyorsanız bu gerekli değildir. Örneğin, bağlantıların ve düğmelerin ve bildirim arka planlarının rengi, Tema Özelleştirici Ayarlarında seçtiğiniz ikincil renkten devralınır.

Belirli öğelerin renklerini doğrudan bu sayfa için biçimlendirmek için sayfa ayarlarını açın ve sayfaya aşağıdaki Özel CSS'yi ekleyin:

.custom-account-style .woocommerce-Button.button, .custom-account-style .woocommerce .woocommerce-form-login .woocommerce-form-login__submit {
    color: #ffffff!important;
    background-color: #9452b7;
    border-color: #9452b7;
}
.custom-account-style .woocommerce-Button.button:hover {
    background-color: #3f214f;
}

.custom-account-style .woocommerce .woocommerce-error, .custom-account-style .woocommerce .woocommerce-info, .custom-account-style .woocommerce .woocommerce-message {
   background-color: #3f214f;
}

Satır Genişliği

Metin modülü woocommerce kısa kod bilgileri şekillendirildikten sonra, ayarları kaydedin ve satır ayarlarını açın. Maksimum genişliği aşağıdaki gibi güncelleyin:

• Maksimum Genişlik: 1250 piksel

Bölüm 2: Öne Çıkan Ürün Bölümünü Tasarlama

Ana Hesap Sayfası bilgileri bittiğine göre artık öne çıkan ürün bölümünü tasarlayabiliriz. Ürün bilgilerini dinamik olarak çekmek için Divi'nin WooCommerce Modüllerini burada kullanacağız. Ardından, kullanıcı her oturum açtığında ürünü/ürünleri göstermek için birkaç CSS parçacığı ekleyeceğiz.

Yeni Bölüm ve Satır Oluşturma

Başlamak için yeni bir normal bölüm oluşturun.

Ardından bölüme bir sütun satırı ekleyin.

Modül eklemeden önce yukarıdaki hesap sayfası tasarımımız için kullanılan bölüm ayarlarını ve satır ayarlarını kopyalayıp yeni eklediğimiz bölüm ve satıra yapıştırın.

Metin Modülü ile Başlık Ekle

Sayfanın ana başlığı için yaptığımıza benzer şekilde, öne çıkan ürün bölümü için yeni bir başlık oluşturacağız. Bunu yapmak için tek sütunlu satıra yeni bir metin modülü ekleyin ve aşağıdakileri güncelleyin:

Gövde İçeriği:

<h2>Special Product Offer</h2>

• Başlık 2 Yazı Tipi: İstem
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Metin Rengi: #3f214f
• Başlık 2 Metin Boyutu: 56px (masaüstü), 36px (tablet)
• Başlık 2 Harf Aralığı: 5px

İkinci Satır Ekle

Ardından 1/3 2/3 sütun yapısına sahip yeni bir satır ekleyin.

Woo Görüntüleri Modülü Ekle

Sol sütuna bir Woo Images modülü ekleyin.

Ardından ürün açılır menüsünden öne çıkarmak istediğiniz ürünü seçin.

Ardından indirim rozeti stilini aşağıdaki gibi güncelleyin:

• Satış Rozeti Rengi: #f1be51
• Satış Rozeti Yazı Tipi: Roboto
• Satış Rozeti Yazı Tipi Stili: TT
• Satış Rozeti Harf Aralığı: 5px
• Satış Rozeti Satır Yüksekliği: 1.3em

Bölücü Ekle

Sağ sütunda bir ayırıcı modül ekleyin ve ayarları aşağıdaki gibi güncelleyin:

• Çizgi Rengi: #dddddd
• Bölücü Ağırlığı: 3px
• Kenar boşluğu: 10 piksel alt

Woo Başlık Modülü Ekle

Ayırıcı modülün altına bir Woo başlık modülü ekleyin.

Ardından, woo images modülüne eklenen ürünle aynı ürünü ekleyin.

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

• Başlık Başlık Düzeyi: H3
• Başlık Yazı Tipi: Roboto
• Başlık Metin Boyutu: 38px

Woo Fiyat Modülü Ekle

Ardından, aynı ürünle bir Woo Fiyat Modülü ekleyin.

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

• Fiyat Yazı Tipi: Roboto
• Fiyat Metin Rengi: #ad52b7

Woo Açıklama Modülü Ekle

Woo Fiyat Modülünün altına bir Woo Açıklama Modülü ekleyin.

Ardından aynı ürünü woo açıklama modülüne ekleyin.

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

• Arka Plan Rengi: #eeeeee
• Dolgu: 20 piksel üst, 20 piksel alt, 20 piksel sol, 20 piksel sağ

Sepete Ekle Modülünü Ekleyin

Woo Açıklama Modülü altında, Woo Sepete Ekle Modülünü ekleyin ve aynı ürünü seçin.

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

• Düğme için Özel Stilleri Kullan: EVET
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #ad52b7

Satır Ayarlarını Güncelle

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

• Arka Plan Rengi (tablet): #ffffff
• Maksimum Genişlik: 1250 piksel
• Dolgu (masaüstü): 0 piksel üst, 0 piksel alt
• Dolgu (tablet): 25 piksel üst, 25 piksel alt, 25 piksel sol, 25 piksel sağ

Ardından, sol sütun ayarlarını açın ve aşağıdakileri güncelleyin:

• Arka Plan Rengi: #3f214f
• Dolgu: 25 piksel üst, 25 piksel alt, 25 piksel sol, 25 piksel sağ

Daha Fazla Ürün Ekleme

Bu öne çıkan bölüme daha fazla ürün eklemenin püf noktası, öne çıkan ürünü oluşturan WooCommerce Öğelerini içeren satırı çoğaltmaktır. Ardından, yeni kopyalanan satırın içinde Woo Images modülünü açın ve Ürün seçeneğinde Bul ve Değiştir'i kullanmak için tıklayın.

Ardından, ürün seçimini seçtiğiniz yeni bir ürünle değiştirmek için bul ve değiştir seçeneklerini kullanın. Bu satırdaki tüm ürün seçenekleri için ürünü değiştirdiğinizden emin olun. Ardından Değiştir düğmesini tıklayın.

Bundan sonra, 5 woo modülünün tümü otomatik olarak aynı yeni ürünü paylaşacaktır.

CSS kimliği ekle

Oturum açmamış öne çıkan ürün bölümü kullanıcılarını gizlemek için öne çıkan ürün bölümüne aşağıdaki gibi bir CSS Sınıfı eklememiz gerekiyor:

• CSS Sınıfı: yalnızca giriş yapanlar

Harici CSS Ekle

CSS sınıfı yerleştirildikten sonra, sayfa ayarlarını açın ve önceki CSS snippet'imizin hemen altına aşağıdaki özel CSS'yi ekleyin.

.logged-in-only {
  display: none;
}
.logged-in .logged-in-only{
  display: block;
}

Bu kod, bölümü varsayılan olarak gizler ve ardından bir kullanıcı WordPress sitenize giriş yaptığında bölümü gösterir.

Son sonuç

İşte bir kullanıcı oturum açmadan önceki hesap sayfası.

İşte bir kullanıcı oturum açtıktan sonra hesap sayfası.

Son düşünceler

WooCommerce Hesap Sayfası için öne çıkan bir ürün bölümüne sahip olmak, web sitenizde hedeflenen bir yerde yeni ürün tekliflerini tanıtmanın harika bir yoludur. Divi, tamamen benzersiz bir tasarıma sahip bir WooCommerce Hesabı sayfasını dakikalar içinde özelleştirmeyi kolaylaştırır. Ve Divi'nin Woo Modülleri, öne çıkan ürün bölümleri oluşturmayı çok kolaylaştırır. Ayrıca, öne çıkan ürünlerin yalnızca giriş yapmış kullanıcılara gösterilmesi, değer katar ve teklifi daha da teşvik eder.

Umarım bu, Divi'de bir sonraki hesap sayfanızı tasarlarken size biraz ilham verir.

Daha fazla bilgi için Divi'de hesap sayfalarını şekillendirme hakkında daha fazla ipucu öğrenin. Ve daha fazla olasılık keşfetmek için Woo Modülleri ile ilgili tüm belgelere göz atmayı unutmayın.

Yorumlarda sizden haber bekliyorum.

Şerefe!