WooCommerce ile Çevrimiçi Mağaza Oluşturmak için Divi'nin Moda Düzen Paketini Kullanma

Divi'nin yeni Moda Düzen Paketi, herhangi bir çevrimiçi mağaza için harika bir kuruluma sahiptir. Mağaza modülünün entegrasyonu ve sayfa düzenlerinin organizasyonu size önemli bir başlangıç ​​sağlar. Ancak bu düzeni işlevsel bir çevrimiçi mağaza olarak çalıştırmak ve çalıştırmak için WooCommerce eklentisine ihtiyacımız var. Ayrıca Divi ve WooCommerce'in birlikte ne kadar iyi çalıştığına şaşırabilirsiniz.

Bu derste, WooCommerce kullanarak Divi's Fashion layout paketini kullanarak nasıl çevrimiçi mağaza oluşturacağınızı göstereceğim. Özelleştirilmek üzere mizanpajlarınızı nasıl düzgün bir şekilde kuracağınız, WooCommerce entegrasyonu ile mağaza sayfasını nasıl hayata geçireceğiniz ve WooCommerce sayfalarına stil vermek için mizanpajınızın ve tema özelleştiricinizin öğelerinin nasıl kullanılacağına dair bazı ipuçları konusunda size yol göstereceğim.

Kurulum

Zaman uğruna, bu eğitime zaten tamamlanmış belirli adımlarla başlayacağım.

1. Divi Temasını kurun ve etkinleştirin
2. WooCommerce'i kurun ve etkinleştirin
3. Fashion Layout Pack'i indirin ve Fashion_All.json dosyasını Divi Tema Kitaplığınıza aktarın.
4. Her düzen için yeni sayfalar oluşturun.
5. Birincil menünüzü oluşturun.

Yukarıda listelenen kurulum konusunda kafanız karıştıysa, yeni projeniz için bir yerleşim paketi kullanmak için bu 10 adımı kontrol ederek yerleşiminizi nasıl düzgün bir şekilde kuracağınız konusunda daha ayrıntılı talimatlar bulabilirsiniz.

Yukarıdaki 5 adımı tamamladıktan sonra başlamaya hazırsınız.

Gizli Bakış

İşte oluşturacağınız bazı WooCommerce sayfalarına bir göz atın.

WooCommerce ile Çevrimiçi Mağaza Oluşturmak için Divi'nin Moda Düzen Paketini Kullanma

Youtube Kanalımıza Abone Olun

Global Vurgu Renginizi değiştirin

Başlangıç ​​olarak Divi Teması'nın genel vurgu rengini değiştireceğiz. Genel vurgu rengini mizanpajınıza uyacak şekilde değiştirmek her zaman iyi bir fikirdir, ancak aynı zamanda özel CSS kullanmak zorunda kalmadan WooCommerce sayfalarınızı renk düzeninizle eşleştirmenin en kolay yoludur. Bu vurgu renginin, tek ürün sayfası, alışveriş sepeti sayfası vb. gibi WooCommerce sayfalarınızın her birinde öğeleri biçimlendirmek için kullanıldığını fark edeceksiniz…

Genel Vurgu Rengini değiştirmek için Tema Özelleştirici'ye gidin ve Genel Ayarlar > Düzen Ayarları'na gidin ve alttaki Tema Vurgu Rengi seçeneğini bulun.

Düzendeki bu pembe rengi kullanıyorum: #fc7086

Ardından, değiştirdikten sonra, ayarlarınızı kaydedin ve yayınlayın ve vurgu renginin özelleştirici içindeki diğer ayarları güncellemesine izin vermek için sayfanızı yenileyin.

Tema Özelleştirici'de Tipografi Ayarlarını Güncelleyin

WooCommerce, sayfalarının her biri için metni biçimlendirmek için varsayılan tema özelleştirici ayarlarınızı kullandığından, mizanpajlarınızda kullanılan tipografiyi, tema özelleştiricideki tipografi ayarlarıyla eşleştirdiğinizden emin olmak isteyeceksiniz.

Tipografinizi güncellemek için Divi > Tema Özelleştirici > Genel Ayarlar > Tipografi'ye gidin ve aşağıdakileri güncelleyin:

Gövde Metin Boyutu: 16px
Gövde Çizgisi Yüksekliği: 1.9
Başlık Metni Boyutu: 42
Başlık Yazı Tipi Stili: B
Başlık Yazı Tipi: Playfair Ekranı
Gövde Yazı Tipi: Poppins
Gövde Bağlantı Rengi: [genel vurgu renginizi güncellediyseniz, bu renk burada görünmelidir]

WooCommerce Mağaza Sayfasını Ayarla

WooCommerce, hangi sayfanın temel mağaza sayfanız olmasını istediğinizi belirlemenize olanak tanır. Bu sayfa, tüm ürün kategorilerini içermelidir, böylece kullanıcılar mağazanızın sunduğu her şeyi bilir. Düzenimizin bir alışveriş sayfası olduğundan, devam edelim ve bunu temel mağaza sayfamız yapalım.

WordPress Panonuzdan WooCommerce > Ayarlar'a gidin ve sayfanın üst kısmındaki Ürünler sekmesine tıklayın. Sekmenin hemen altındaki menüde Görüntüle öğesini seçin. Ardından, moda düzeni paketinden yeni mağaza sayfası düzeniyle oluşturduğunuz “Mağaza” sayfasına Mağaza Sayfası'nı seçin.

Ardından değişiklikleri kaydedin.

Mağazanıza Ürünler Ekleyin

Mağaza Sayfanızın iki mağaza modülü olmasına rağmen herhangi bir ürün göstermediğini fark etmiş olabilirsiniz. Açıkçası önce ürünleri eklemeniz gerekiyor. Mağazanıza yeni bir ürün eklemek için WordPress kontrol panelinize gidin ve şu adımları izleyin:

1. Ürünler > Yeni Ekle'ye gidin
2. Ürün Adını Girin
3. Ürün Açıklamasını Girin
4. Ürün Fiyatını Girin
5. Ürün için Kısa Açıklama Girin
6. Üç Yeni Kategori Ekleyin (Yaz, Öne Çıkanlar ve Satışta)
7. Ürününüz için kategoriyi seçin (bu durumda Yaz olacaktır)
8. Ürün Resmi Ekle
9. Ürünü Yayınla/Güncelle

Ürünlerinize Kategoriler Atayın

Daha fazla yeni ürün oluşturmak için yukarıdaki adımları tekrarlarken, her birine bir kategori atadığınızdan emin olun (yukarıda listelenen adımlarda #7). Bu eğitim için “Yaz” kategorisine 6 ürün, “Öne Çıkanlar” kategorisine 6 ürün ve “Satışta” kategorisine 1 ürün ekledim.

Mağaza Sayfasındaki Mağaza Modüllerini Güncelleyin

Artık ürünlerinizi oluşturduğunuza göre, bu ürünleri mağaza sayfanıza ekleyebilirsiniz. Daha önce bahsettiğim gibi, mağaza sayfası düzeninde zaten düzende yerleşik mağaza modülleri var. Yaz bölümünün altında bir tane ve Öne Çıkanlar bölümünün altında bir tane var.

Mağaza sayfasına gidin ve görsel oluşturucuyu dağıtın. Ardından, Yaz Modası başlığını içeren satırın altındaki mağaza modülünün (şu anda herhangi bir ürün göstermiyor) üzerine gelin ve modül ayarlarına tıklayın.

Ayarları yalnızca “Yaz” kategorisini içerecek şekilde güncelleyin.

Artık yaz kategorisine eklenen tüm ürünleri görmelisiniz.

Ardından, öne çıkan Ürünler Başlığı altındaki mağaza modülünü bulun ve yalnızca Öne Çıkanlar kategorisini içerecek şekilde ayarları güncelleyin.

Mağaza Sayfasında "Satışta" Öğeleri Görüntülemek için Mağaza Modülü Ekleyin

Mağaza sayfasında iki kategorimiz (Öne Çıkan Ürünler ve Yaz Modası) olduğundan, düzende zaten sağlanan modülleri kullanarak ek kategoriler ve ürünler oluşturmak kolay olacaktır.

Satışta olan ürünlerimizi sergilemek için bir bölüm daha oluşturalım.

Bunu yapmak için görsel oluşturucuyu dağıtın ve yaz modası ürünlerini gösteren bölümün tamamını kopyalamak için sağ tıklama seçeneklerini kullanın ve onu doğrudan Öne Çıkan Ürünler bölümünün altına yapıştırın.

Şimdi tek yapmanız gereken birkaç güncelleme yapmak.

Başlığın görüntülendiği satırda, metin modülündeki metne tıklayın ve başlığı "Yaz Modası" yerine "İndirimde" olarak değiştirin.

Ardından, sol sütundaki resmi indirimli ürünlerinizle daha tutarlı bir şekilde değiştirin.

Son olarak, mağaza modülünü yalnızca "Satışta" kategorisini içerecek şekilde güncelleyin.

Moda Düzeni ile WooCommerce Sayfalarınızı Stillendirin

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.

Mağaza sayfamızı zaten seçtiğimiz için başka bir tasarıma gerek yok. Ancak diğer 3 WooCommerce sayfası için, onları diğer sayfa düzenlerimizin tasarımına uyacak şekilde biçimlendirmemiz gerekiyor.

Sepete ve Ödeme Sayfalarına Bölüm Başlığı Ekleme

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

Global vurgu rengimizi güncellediğimiz için bağlantılarımızın ve düğmelerimizin zaten renk şemasıyla eşleştiğine dikkat edin. Ayrıca, Tema Özelleştirici'deki tipografi ayarlarımızı güncellediğimizden, başlıklar ve gövde metni de temamızla eşleşiyor.

Ancak birkaç tıklamayla bundan biraz daha iyisini yapabiliriz. Önce mağaza sayfasına gidin, görsel oluşturucuyu dağıtın ve sayfa başlığını içeren üst bölümü kitaplığa kaydedin. “Sayfa başlığı bölümü” adını verebilirsiniz.

Ardından sayfanın en altına inin ve e-posta tercihini ve iletişim bilgilerini içeren son bölümü bulun ve “sayfa altbilgi bölümü” adıyla kitaplığınıza kaydedin.

Şimdi gidip sepet sayfanızı düzenleyin. Varsayılan sayfa düzenleyiciden Divi Builder'ı kullanmayı seçin, ardından "Visual Builder'ı Kullan"ı seçin. Oluşturucu, [woocommerce_cart] kısa kodunu normal bir bölümün bir sütun satırındaki bir metin modülüne otomatik olarak koymuş olmalıdır. Değilse, bunu kendiniz oluşturmanız gerekecektir. Ardından, mevcut bölümün altına yeni bir bölüm eklemek için mavi artı simgesine tıklayın, “Kütüphaneden Ekle” sekmesini seçin. Ardından, az önce oluşturduğunuz “Sayfa Başlığı Bölümü” adlı yeni bölümü seçin.

Ardından bu bölümü sayfanızın en üstüne sürükleyin ve başlık metnini "Sepetiniz" olarak değiştirin. Bu kadar!

Bu işlemi Ödeme Sayfası için de tekrarlayabilirsiniz.

Divi Builder'ı Kullanarak Hesabım Sayfasını Tasarlama

Artık bu WooCommerce sayfalarına nasıl başlık ekleyeceğinizi bildiğinize göre, devam edin ve aynısını Hesabım sayfası için yapın. Bu sefer kütüphaneye kaydettiğiniz altbilgi bölümünü bu sayfanın en altına ekleyebilirsiniz.

Bu sayfanın hesabınızı yöneten bir sayfa olduğunu daha belirgin hale getirmek için bu sayfaya farklı bir tasarım vermek isteyebilirsiniz. Bu nedenle, üstbilgi ve altbilgi bölümleri için pembe gradyan arka planı yerine, her biri için bölüm ayarlarına gidin ve arka plan gradyan renklerini #9599e2 ve #8bc6ec olarak değiştirin.

WooCommerce Kısa Kod İçeriğini Stillendirmek için Metin Modülü Ayarlarını kullanın

WooCommerce kısa kodu artık bir metin modülünün içinde bulunduğundan, modül ayarlarındaki bu öğelerin bazılarına stil vermek için bunu kendi avantajınıza kullanabilirsiniz.

Bunu Hesabım sayfamız için yapalım. Görsel oluşturucudan, kısa kod içeriğini tutan metin modülünün ayarlarını aşağıdaki gibi güncelleyin:

Tasarım sekmesi altında…

Metin Metin Boyutu: 20px
Metin Satırı Yüksekliği: 1,6em

Şimdi, bağlantıları aşağıdaki gibi biçimlendirmek için Metin bölümünün altındaki bağlantı sekmesine tıklayın:

Bağlantı Yazı Tipi: Poppins
Bağlantı Yazı Tipi Ağırlığı: Yarı Kalın
Bağlantı Metni Boyutu: 27px
Bağlantı hattı Yüksekliği: 1.5em

Ayarları kaydet

Şimdi Hesabım Sayfanıza bakın.

WooCommerce Arşiv sayfalarını Stillendirmek için Özel CSS mi Kullanıyorsunuz?

WooCommerce tarafından kullanılan arşiv sayfalarından bazıları, diğer sayfalar gibi bir kısa kodla oluşturulmaz, bu nedenle Divi Builder kullanılarak ince ayar yapılamaz. Dolayısıyla bu sayfalar için bazı özel CSS'leri ayırmanız gerekir.

Örnek olarak Öne Çıkan Kategori sayfasına bakalım.

Şimdi Tema Özelleştiriciyi açalım ve Ek CSS'ye tıklayıp aşağıdakileri ekleyelim:

.orderby {
background: #fd7792;
color: #fff!important;
font-size: 18px;
height: 40px;
font-size: 18px !important;

}

.woocommerce-Price-amount, .woocommerce .woocommerce-breadcrumb, p.woocommerce-result-count {
    font-size: 16px !important;
    color: #fd7792 !important;
    letter-spacing: 2px;
}

Bu, sıralama açılır kutusunu, içerik haritalarını ve fiyat yazı tipini şekillendirecektir. Metnin geri kalanı, tema özelleştiriciden Tipografi ayarları kullanılarak değiştirilebilir.

Son düşünceler

Bu harika düzen paketi, WooCommerce ve Divi Builder'ın yardımıyla web siteniz için bir çevrimiçi mağaza oluşturmak çok daha kolay. Açıkçası, bu makalenin kapsamı dışında hala yapılması gereken bazı gereklilikler var. Örneğin, yine de hangi ödeme ağ geçidini kullanacağınıza, nakliyeyi nasıl ele almak istediğinize ve diğer şirkete özel eylem öğelerine karar vermeniz gerekecektir. Ancak WooCommerce, ihtiyacınız olan şeylerin çoğunu karşılayabilmelidir.

Bir şey olursa, umarım bu yazı size kendi başınıza harika bir şey yaratmanız için ilham vermiştir.

Yorumlarda sizden haber bekliyorum.

Şerefe!