WooCommerce ile bir çevrimiçi mağaza oluşturmak için Divi Modu Düzen Paketini Kullanma
Yeni moda düzeni paketi Divi, her çevrimiçi mağaza için iyi bir ortama sahiptir. Mağaza modülünün entegrasyonu ve sayfanın düzen ayarları size önemli bir başlangıç sağlar. Ancak bu düzeni elde etmek ve işlevsel bir çevrimiçi mağaza olarak çalıştırmak için bir WooCommerce eklentisine ihtiyacımız var. Ve Divi ve WooCommerce’in birlikte ne kadar iyi çalıştığını görünce şaşırabilirsiniz. Bu öğreticide, WooCommerce kullanarak bir Divi moda düzeni paketi kullanarak nasıl bir çevrimiçi mağaza oluşturacağınızı göstereceğim. Düzeninizi ayarlanacak şekilde nasıl ayarlayacağınız, WooCommerce entegrasyonu olan bir mağaza sayfasını nasıl açacağınız ve düzen öğelerinizi nasıl kullanacağınız ve WooCommerce sayfasını düzenlemek için temaları nasıl ayarlayacağınız konusunda size rehberlik edeceğim.
Düzenleme Zamana göre, bu öğreticiye tamamlanan belirli adımlarla başlayacağım. 1. Divi temasını yükleyin ve etkinleştirin 2. WooCommerce’ı yükleyin ve etkinleştirin 3. Moda moda düzeni paketini indirin ve Fashion_all.json dosyalarını Divi Tema Kütüphanenize aktarın. 4. Her düzen için yeni bir sayfa oluşturun. 5. Ana menünüzü oluşturun. Yukarıda listelenen ayarlarla karıştırılıyorsanız, yeni projeniz için düzen paketini kullanmak için bu 10 adımı kontrol ederek düzeninizi nasıl doğru ayarlayacağınız konusunda daha ayrıntılı talimatlar bulabilirsiniz. Yukarıdaki 5 adımı bitirdikten sonra, başlamaya hazırsınız.
Aşağıdaki gizlice göz atma, yaratacağınız birkaç sayfa WooCommerce’de bir göz atıyor.
Ardından, değiştirdikten sonra, aksanın renginin ayarlamadaki diğer ayarları güncellemesine izin vermek için ayarlarınızı kaydedin ve yayınlayın ve sayfanızı yenileyin. Tema ayarındaki tipografik ayarları güncelleyin WooCommerce, her sayfa için metin düzenlemek için varsayılan tema ayar ayarlarınızı kullandığından, düzeninizde kullanılan tipografiyi tema ayarındaki tipografik ayarlarla eşleştirdiğinizden emin olmak istersiniz. Tipografinizi Güncellemek için, Divi> Tema Ayarı> Genel Ayarlar> Tipografi ve Güncelleme Aşağıdakileri Güncelleyin: Vücut Metin Boyutu: 1.9 Towder Metin Boyutu: 42 Cowrips Yazı Tipi Stili: B Yazı Tipi Başlığı: Playfair Ekran Yazı Tipi Gövdesi: Poppins Renk gövdesi bağlantısı: [Global aksan renginizi güncellerseniz, bu renk burada görünecektir]
WooCommerce WooCommerce Shop sayfasını ayarlayın, hangi sayfaları temel mağaza sayfanız olmak istediğinizi ayarlamanıza olanak tanır. Bu sayfa, kullanıcıların mağazanızın sunduğu her şeyi öğrenecek şekilde tüm ürün kategorilerini içermelidir. Düzenimizin bir mağaza sayfası olduğundan, devam edelim ve temel mağaza sayfamız yapalım. WordPress Gösterge Tablonuzdan WooCommerce> Ayarlarını Açın ve sayfanın üst kısmındaki Ürün sekmesini tıklayın. Sekmenin hemen altındaki menüde ekranı seçin. Ardından, moda düzeni paketinden yeni mağaza sayfasının düzeni ile oluşturduğunuz “Mağaza” sayfasına mağaza sayfasını seçin. Sonra değişikliği kaydedin. Ürünü mağazanıza ekleyin Mağaza sayfanızın, iki mağaza modülü olmasına rağmen, herhangi bir ürün görüntülemediğini fark etmiş olabilirsiniz. Açıkçası ürünü önce eklemeniz gerekiyor. Mağazanıza yeni ürünler eklemek için WordPress kontrol panelinizi açın ve şu adımları izleyin:
1. Ürüne gidin> Yeni Ekle 2. Ürün Adını Girin 3. Ürün için Açıklamayı Girin 4. Ürün Fiyatını Girin 5. Ürün için kısa açıklamayı girin 6. Üç yeni kategori ekleyin (yaz, üstün ve Satış) 7. Ürününüz için kategoriyi seçin (bu durumda yazdır) 8. Ürün Görüntü Ekle 9. Ürünü yayınlayın/güncelleyin Daha fazla yeni ürün oluşturmak için yukarıdaki adımları tekrarladığınızda kategoriyi ürününüze ayarlayın, her ürün için kategoriyi ayarladığınızdan emin olun (yukarıda listelenen adımlarda#7). Bu öğretici için, “yaz” kategorisi altında 6 ürün, “Üstün” kategorisi altında 6 ürün ve “satışta” kategorisi altında 1 ürün ekledim. Ürününüz oluşturulduktan sonra mağaza sayfasında mağaza modülü, siz Bu ürünü mağaza sayfanıza ekleyebilir. Daha önce de belirttiğim gibi, mağaza bahçesinin düzeni zaten düzende bir mağaza modülü var. Yaz aylarında bir ve önde gelen bölüm altında bir tane var. Mağaza sayfasını açın ve bir görsel üreticiyi uygulayın. Ardından, imleci yaz modasının başlığını içeren bir çizginin altında (şu anda herhangi bir ürünü görüntüleyen) mağaza modülüne (şu anda herhangi bir ürünü görüntülemiyor) yönlendirin ve modül ayarlarını tıklayın.
Ayarları yalnızca “Yaz” kategorisini içerecek şekilde güncelleyin. Şimdi yaz kategorisine eklenen tüm ürünleri göreceksiniz. Ardından, üstün ürün başlığı altında bir mağaza modülü bulun ve ayarları yalnızca üstün kategoriyi içerecek şekilde güncelleyin.
Mağaza sayfasında “Satışta” öğelerini görüntülemek için bir mağaza modülü ekleyin, mağaza sayfasında iki kategorimiz (üstün ürünler ve yaz modası) olduğundan, ek kategoriler ve ürünler oluşturmak kolay olacaktır. Yerleşim. “Satışta” ürünümüzü görüntülemek için başka bir parça oluşturalım. Bunu yapmak için, bir görsel üreticiyi kullanın ve yaz moda ürününü görüntüleyen tüm parçaları kopyalamak ve doğrudan Üstün Ürün bölümünün altına eklemek için doğru -tıklama seçeneğini kullanın. Şimdi yapmanız gereken bazı güncellemeler yapmak. Başlığı görüntüleyen satırda, metin modülündeki metni tıklayarak ve başlığı “yaz modası” yerine “satışta” olarak değiştirerek devam edin. Ardından, sol sütundaki görüntüyü satış ürününüz için daha uygun bir şeye dönüştürün. Son olarak, mağaza modülünü yalnızca “Satışta” kategorisini içerecek şekilde güncelleyin. WooCommerce modu düzenine sahip Woocommerce sayfa stiliniz, eklentiyi yüklediğinizde WooCommerce sayfalarının kendisi otomatik olarak bir koleksiyonu üretir. Bu, 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.
Mağaza sayfamızı seçtiğimiz için başka tasarıma gerek yoktur. Ancak diğer 3 WooCommerce sayfası için, diğer sayfa düzenimizin tasarımına uyacak şekilde düzenlememiz gerekiyor. Sepet sayfasına başlıklar ekleyin ve ödeme önce sepet sayfasına bakalım. Bu, bunun için bir şey yapmadan önce görünümdür. Global aksan rengimizi güncellediğimiz için bağlantılarımızın ve düğmelerimizin renk şemasıyla uyumlu olduğunu unutmayın. Ayrıca, tipografik ayarlarımızı temanın, başlığın ve içeriğin metninin ayarlanmasında güncellediğimiz için temamıza da uyuyor. Ama sadece birkaç tıklamayla bundan biraz daha iyisini yapabiliriz. İlk olarak, mağaza sayfasını açın, görsel yapımcı kullanın ve başlıkları içeren üstü kütüphaneye kaydedin. “Sayfa Başlığı Bölümü” adını verebilirsiniz.
Ardından sayfanın altına doğru kaydırın ve Optin e -posta ve iletişim bilgilerini içeren son bölümü bulun ve “Sayfa Altbilgisi Bölümü” adıyla kütüphanenize kaydedin. Şimdi sepet sayfanızı düzenlemeye gidin. Varsayılan sayfa düzenleyicisinden Divi Builder’ı kullanmayı seçin, ardından “Visual Builder’ı kullanın”. İnşaatçı, kısa kodu [wooocommerce_cart] metin modülüne normal bölümden bir satır sütunundaki otomatik olarak yerleştirmelidir. Değilse, bunu kendiniz yapmalısınız. Ardından, aşağıya yeni bir parça eklemek için Mavi Plus simgesini tıklayın, “Kütüphane Ekle” sekmesini seçin. Ardından, SO -CALLED “Sayfa Başlığı Bölümü” ni oluşturduğunuz yeni bölümü seçin. Ardından parçayı sayfanızın üstüne sürükleyin ve başlığın başlığını “Sepetinize” değiştirin. İşte bu! Bu işlemi ödeme sayfası için de tekrarlayabilirsiniz.Hesap sayfamı Divi Builder’ı kullanarak tasarlamak, bu WooCommerce sayfasına nasıl başlık ekleyeceğinizi bildikten sonra devam edin ve hesap sayfam için de aynısını yapın. Bu kez kütüphaneye kaydettiğiniz altbilgi bölümünü bu sayfanın altına ekleyebilirsiniz. Bunun hesabınızı yöneten bir sayfa olduğunu daha açık hale getirmek için bu sayfaya farklı bir tasarım vermek isteyebilirsiniz. Bu nedenle, üstbilgi ve altbilgi için pembe gradyanın arka planı yerine, her biri için ayarları açın ve arka plan gradyanının rengini #9599e2 ve #8bc6ec olarak değiştirin. WooCommerce kısa kod içeriğini düzenlemek için metin modülü ayarlarını kullanın WooCommerce kısa kodu artık metin modülünde olduğundan, modül ayarlarında bu öğelerin bazılarını düzenlemek için avantajlarınız için bunu kullanabilirsiniz. Bunu hesap sayfam için yapalım. Visual Maker’dan, kısa kod içeriğini aşağıdaki gibi depolayan metin modülü ayarlarını güncelleyin: Tasarım sekmesinin altında … Metin Boyutu: 20PX Yüksek Satır Metin: 1.6EM Şimdi bağlantıyı aşağıdaki gibi düzenlemek için metin bölümünün altındaki bağlantı sekmesine tıklayın: Bağlantı Yazı Tipi: Poppins Link Harflerinin Ağırlığı: Yarı Kalınlık Metin Boyutu Bağlantı: 27px Hat Çizgisi Yüksekliği: 1.5EM Ayarları kaydedin Şimdi hesap sayfanızı kontrol edin. WooCommerce Arşivi sayfasını organize etmek için CSS Custom kullanıyor musunuz? WooCommerce tarafından kullanılan bazı arşiv sayfaları diğer sayfalar gibi kısa kodlarla yapılmamıştır, bu nedenle sayfa Divi Builder kullanılarak değiştirilemez. Bu sayfa için bazı özel CSS yapmanız gerekir. Örneğin Üstün Kategori sayfasına bakalım. Şimdi özelleştirici temasını açalım ve ek CSS’yi tıklayalım ve aşağıdakileri ekleyelim: .orderby { Arka plan: #FD7792; Renk: #fff! Önemli; yazı tipi boyutu: 18px; Yükseklik: 40 piksel; Yazı tipi boyutu: 18px! Önemli; } .WOOCOMMERCE-PRICE-AMOUNT, .WOOOCOMMERCE .WooCommerce-Breadcrumb, P.WOOOCOMMERCE-RECOUNT {
Yazı tipi boyutu: 16px! Önemli;
Renk: #FD7792! Önemli;
Harf alanları: 2px;
}
Bu, sıralama açılır kutusu, ekmek kırıntıları ve fiyat yazı tiplerini ayarlayacaktır. Diğer metinler, tema ayarından tipografik ayarlar kullanılarak değiştirilebilir. Bu olağanüstü düzen paketi, WooCommerce ve Divi Builder’ın yardımıyla web siteniz için bir çevrimiçi mağaza oluşturmanın son zihni çok daha kolay. Açıkçası, bu makalenin kapsamı dışında hala yapılması gereken bazı ihtiyaçlar var. Örneğin, hala hangi ödeme ağ geçidinin kullanılacağına, nakliye ile nasıl işlemek istediğinize ve diğer şirkete özgü eylem öğelerine karar vermeniz gerekir. Ancak WooCommerce, ihtiyacınız olanların çoğunu ele alabilmelidir. Eğer varsa, umarım bu yazı size olağanüstü bir şey yapmanız için ilham verir. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
