Divi ile uyumlu olacak şekilde tasarlanmıştır WooCommerce. Entegre etmek WooCommerce, en son sürümünü yüklemelisiniz WooCommerce.

WooCommerce eklentidir e-ticaret en güzel özelliklere, arayüze sahip olduğu ve en iyi kodlama uygulamalarını takip ettiği için önerdiğimiz. Eklentiyi etkinleştirdikten sonra, WordPress panonuza eklenen “WooCommerce” ve “Ürünler” adlı iki yeni bölüm göreceksiniz. E-ticaret ayarlarınızı düzenlemek ve yeni ürünler yayınlamak için bu alanları kullanabilirsiniz. bulabilirsin belgeleme tam WooCommerce burada .

Oluşturucu çeşitli WooCommerce modülleri içerse de, WooCommerce'i kurucu olmadan da tek başına kullanabileceğinizi lütfen unutmayın. Belgelerinde gösterildiği gibi Ödeme, Alışveriş Sepeti vb. İçin standart sayfalar oluşturabilirsiniz. Ayrıca doğrudan woocommerce kategorilerinize bağlanabilir veya Kısa Kodlar WooCommerce Divi metin modülünde. Size hemen hemen her şeyi yapma özgürlüğü verir.

Sayfanıza mağaza modülü nasıl eklenir

Sayfanıza bir mağaza modülü eklemeden önce Divi Builder'a atlamanız gerekir. Bir kere Divi teması web sitenize yüklediğinizde bir düğme göreceksiniz Divi Builder'ı Kullan yeni bir sayfa oluşturduğunuzda yayın düzenleyicisinin üzerinde. Divi Builder'ı etkinleştirmek ve tüm Divi Builder modüllerine erişmek için bu düğmeye tıklayın. Ardından düğmeye tıklayın Visual Builder'ı kullan Jeneratörü görsel modda başlatmak için. Düğmeye de tıklayabilirsiniz Visual Builder'ı kullan WordPress panonuza bağlıysanız, web sitenizi ön planda tuttuğunuzda.

Visual Builder'a girdikten sonra, sayfanıza yeni bir modül eklemek için gri artı düğmesini tıklayabilirsiniz. Yeni modüller yalnızca satırların içine eklenebilir. Yeni bir sayfaya başlıyorsanız, önce sayfanıza bir satır eklemeyi unutmayın. Divi'nin çizgi ve kesit öğelerini kullanma konusunda harika eğitimlerimiz var.

Mağaza modülünü modüller listesinde bulun ve sayfanıza eklemek için üzerine tıklayın. Modül listesi aranabilir, yani "mağaza" kelimesini yazabilir ve ardından mağaza modülünü otomatik olarak bulup eklemek için enter'a tıklayabilirsiniz! Modül eklendiğinde, modül seçenekleri listesi tarafından karşılanacaksınız. Bu seçenekler üç ana gruba ayrılmıştır: içindekiler , Gebe kalma et gelişmiş .

Kullanım örneği örneği: Mağaza modülünü kullanarak bir ana sayfada en yeni ürünleri sergilemek

Bu örnek için, en son ürünleri bir ana sayfada görüntülemek için mağaza modülünü kullanacağım.

Sunulan dört ürün içeren sayfa.

Başlayalım.

Tam genişlikte satıra (1 sütun) sahip normal bir bölüm eklemek için görsel oluşturucuyu kullanın. Satır parametresini, 2 özel cilt payı genişliğiyle tam genişliğe dönüştürmek için değiştirin.

Ardından hatta bir mağaza modülü ekleyin.

Modül ayarlarını aşağıdaki gibi güncelleyin:

İçerik seçenekleri

Tür: Son ürünler
Ürün sayısı: 4

Tasarım seçenekleri

Simge Vurgulu Rengi: # ea1d63
Başlık Polisi: Açık Olmadan
Başlık Yazı Tipi Boyutu: 24px
Polis Ödülü: Olmadan Aç
Fiyat Yazı Tipi Boyutu: 20px

Gelişmiş seçenekler (özel CSS)

Titre:

metin hizalaması: merkez;
arkaplan: #fff;
kenar boşluğu: -10px! önemli;

Prix:

metin hizalaması: merkez;
arkaplan: #fff;
döşeme aşağı: 15px;

Bu kadar! İşte nihai sonuç.

Mağaza içeriği seçenekleri

İçerik sekmesinde, modülün metin, resimler ve simgeler gibi tüm içerik öğelerini bulacaksınız. Tüm kontroller ce qui modülünüzde beliren her zaman bu sekmede bulunur.

Tip

Ürün feed'inizde görüntülemek istediğiniz ürün türlerini seçin. Tüm ürünlerinizi kronolojik sırayla gösterecek Son Ürünler, Öne Çıkan Ürünler, İndirimli Ürünler, En Çok Satan Ürünler veya En Beğenilen Ürünler arasından seçim yapabilirsiniz.

Ürün sayısı

Görüntülemek istediğiniz ürün sayısını tanımlayın. Bu modülde herhangi bir şeyin görünmesi için üretilmiş ürünlere ihtiyacınız olacak.

Kategorileri Dahil Et

Dahil etmek istediğiniz kategorileri seçin.

Sütun sayısı

Mağaza modülünüzde görüntülenecek sütun sayısını seçin. 4 sütunluk bir satır için 1 sütun kullanılmalıdır. Satır boşluğunun 3 / 3'ünü kaplayan bir sütun için 4 sütun kullanılmalıdır. Sütun 2, ışığın boşluğunun 1 / 2'sini kaplayan bir sütun için kullanılmalıdır. Satır aralığının 1 / 4'ü için bir sütun kullanılmalıdır.

Tarafından yeniden düzenle

Ürünlerinizin nasıl sipariş edilmesini istediğinizi seçin. Sırala, Popülerlik, Derecelendirme, Tarih, Fiyat düşükten yükseğe, Fiyat yüksekten düşüğe, en eskiden en yeniye, en yeniden en eskiye göre sıralamayı seçin.

Yönetici Etiketi

Bu, kolay tanımlama için yapıcıdaki modül etiketini değiştirecektir. WireFrame görünümünü Visual Builder'da kullandığınızda, bu etiketler Divi Builder arayüzünün modül bloğunda görünür.

Atölye tasarım seçenekleri

Tasarım sekmesinde yazı tipleri, renkler, boyutlandırma ve aralık gibi tüm modül stil seçeneklerini bulacaksınız. Bu, modülünüzün görünümünü değiştirmek için kullanacağınız sekmedir. Her Divi modülünde, herhangi bir şeyi değiştirmek için kullanabileceğiniz uzun bir tasarım ayarları listesi vardır.

Bindirme simgesi

Mağaza modülünde bir öğenin üzerine geldiğinizde, bir kaplama simgesi belirir. Bu ayardaki renk seçiciyi kullanarak bu simge için kullanılan rengi ayarlayabilirsiniz.

Yerleşimin rengi

Mağaza modülünde fareyi bir öğenin üzerine getirdiğinizde, görüntünün üst kısmında ve mağaza başlığı metni ve simgesinin altında bir kaplama rengi görünür. Varsayılan olarak yarı saydam bir beyaz renk kullanılır. Farklı bir renk kullanmak istiyorsanız, bu ayardaki renk seçiciyi kullanarak rengi ayarlayabilirsiniz.

Seçici Simge

Burada, bir ziyaretçi modüldeki mağaza öğelerinin üzerine geldiğinde görüntülenecek özel bir simge seçebilirsiniz.

Satış rozeti rengi

Bir ürün indirimde olduğunda, ürün resminde bir indirim rozeti görünür. Bu ayarla, rozet arka planı için kullanılan rengi ayarlayabilirsiniz.

Başlık yazı tipi

Açılır menüden istediğiniz yazı tipini seçerek başlık metninizin yazı tipini değiştirebilirsiniz. Divi, Google Fonts tarafından sunulan düzinelerce harika yazı tipi sunar. Varsayılan olarak Divi, sayfanızdaki tüm metinler için Open Sans yazı tipini kullanır. Ayrıca kalın, italik, büyük harf ve altı çizili seçenekleri kullanarak metninizin stilini özelleştirebilirsiniz.

Başlık Yazı Tipi Boyutu

Burada başlık metninizin boyutunu ayarlayabilirsiniz. Metninizin boyutunu artırmak veya azaltmak için aralık kaydırıcısını sürükleyebilir veya kaydırıcının sağındaki giriş alanına doğrudan istenen metin boyutunun değerini girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Başlık metni rengi

Varsayılan olarak, Divi'deki tüm metin renkleri beyaz veya koyu gri olarak görünür. Başlığınızın metin rengini değiştirmek istiyorsanız, bu seçeneği kullanarak renk seçiciden istediğiniz rengi seçin.

Başlık harflerinin aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. Başlık metninizdeki her harf arasındaki boşluğu artırmak istiyorsanız, aralığı ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istenen boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Başlık satırının yüksekliği

Satır yüksekliği, başlık metninizin her satırı arasındaki boşluğu etkiler.Her satır arasındaki boşluğu artırmak istiyorsanız, aralığı ayarlamak için aralık kaydırıcısını kullanın veya giriş alanına istediğiniz boşluk boyutunu girin imlecin sağında bulunur. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Fiyat Politikası

Açılır menüden istediğiniz yazı tipini seçerek fiyat metninizin yazı tipini değiştirebilirsiniz. Divi, Google Yazı Tipleri tarafından desteklenen düzinelerce harika yazı tipiyle birlikte gelir. Varsayılan olarak Divi, sayfanızdaki tüm metinler için Open Sans yazı tipini kullanır. Ayrıca kalın, italik, büyük harf ve altı çizili seçenekleri kullanarak metninizin stilini özelleştirebilirsiniz.

Fiyat Yazı Tipi Boyutu

Burada fiyat metninizin boyutunu ayarlayabilirsiniz. Metninizin boyutunu artırmak veya azaltmak için aralık kaydırıcısını sürükleyebilir veya kaydırıcının sağındaki giriş alanına doğrudan istenen metin boyutunun değerini girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Fiyat metni rengi

Varsayılan olarak, Divi'deki tüm metin renkleri beyaz veya koyu gri olarak görünür. Fiyat metninizin rengini değiştirmek istiyorsanız, bu seçeneği kullanarak renk seçiciden istediğiniz rengi seçin.

Fiyat harflerinin aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. Fiyat metninizdeki her harf arasındaki boşluğu artırmak istiyorsanız, aralığı ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istenen boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Fiyat çizgisinin yüksekliği

Satır yüksekliği, fiyat metninizin her satırı arasındaki boşluğu etkiler Her satır arasındaki boşluğu artırmak istiyorsanız, aralığı ayarlamak için aralık kaydırıcısını kullanın veya giriş alanına istenen aralık boyutunu girin imlecin sağında bulunur. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Dükkanın gelişmiş seçenekleri

Gelişmiş sekmesinde, özel CSS ve HTML özellikleri gibi daha deneyimli web tasarımcılarının yararlı bulabileceği seçenekler bulacaksınız. Burada, modülün birçok öğesinden herhangi birine özel CSS uygulayabilirsiniz. Ayrıca, alt temanızın style.css dosyasında modülü özelleştirmek için kullanılabilen modüle özel CSS sınıfları ve kimlikleri de uygulayabilirsiniz.

CSS Kimliği

Bu modül için kullanmak üzere isteğe bağlı bir CSS Kimliği girin. Kimlik, özel bir CSS stili oluşturmak veya sayfanızın belirli bölümlerine bağlanmak için kullanılabilir.

CSS sınıfı

Bu modül için kullanmak üzere isteğe bağlı CSS sınıflarını girin. Özel CSS stili oluşturmak için bir CSS sınıfı kullanılabilir. Bir boşlukla ayırarak birden çok sınıf ekleyebilirsiniz. Bu sınıflar, Divi alt temanızda veya Divi tema seçeneklerini veya Divi Builder sayfa ayarlarını kullanarak sayfanıza veya web sitenize eklediğiniz özel CSS stil sayfasında kullanılabilir.

Özel CSS

Özel CSS, modüle ve modülün herhangi bir dahili bileşenine de uygulanabilir. Özel CSS bölümünde, her öğeye doğrudan özel CSS stil sayfaları ekleyebileceğiniz bir metin alanı bulacaksınız. Bu ayarlardaki CSS girişleri zaten stil etiketlerine sarılmıştır. Bu yüzden CSS kurallarını noktalı virgülle ayırarak girin.

görünürlük

Bu seçenek, modülünüzün göründüğü cihazları kontrol etmenizi sağlar. Modülünüzü tabletlerde, akıllı telefonlarda veya masaüstlerinde ayrı ayrı devre dışı bırakmayı seçebilirsiniz. Bu, farklı cihazlarda farklı modlar kullanmak istiyorsanız veya sayfadan belirli öğeleri kaldırarak mobil tasarımı basitleştirmek istiyorsanız kullanışlıdır.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" boş "layout =" genişletilmiş "align =" center "font_family =" Raleway "font_weight =" 700 ″ stil = "düz" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DIVI TEMAINI İNDİRİN [/ vcex_button] [/ width_column] [»vc_column » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "boş" düzen = "genişletilmiş" hizalama = "orta" font_family = "Raleway" font_weight = "700 ″ stil =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-indirme "] ŞABLONLARI İNDİR DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Diğer Divi öğreticiler

• restoran kullanımı Divi tema için 5 siteleri
• Bir Divi WooCommerce ürününe metin ekleme
• Divi sayfaları arasındaki menü rengini değiştirme
• Bir blog'un ızgaralarını Divi ile kişiselleştirme
• Nasıl WordPress üzerinde rol Divi editörü kullanımı
• Tam ekran Divi sürgüsü nasıl oluşturulur
• Divi sayfaları arasındaki menünün rengi nasıl değiştirilir
• Divi hakkında muhtemelen bilmediğiniz özellikler
• WordPress üzerinde Divi Builder nasıl kullanılır
• Divi video kaydırma modülü nasıl kullanılır
• Divi Builder Flip modülü nasıl kullanılır
• Divi Builder'da referans modülü nasıl eklenir?
• Divi metin modülü nasıl kullanılır?
• Divi'de kaydırıcı nasıl oluşturulur
• Divi kullanıcı rolü nasıl düzenlenir
• Divi Sosyal Medya modülü nasıl kullanılır?
• WordPress Divi konulu mağaza modülü nasıl kullanılır?
• Divi kenar çubuğu modülü nasıl kullanılır
• Divi Fiyat Tablosu Modülünün Kullanımı
• Divi yayınlarının başlık modülünü nasıl kullanırım
• Divi video modülü nasıl eklenir
• Makale navigasyon modülü nasıl kullanılır
• Divi arama modülü nasıl kullanılır?
• Divi cüzdan modülü nasıl kullanılır?
• Divi Builder'da kişi modülünün kullanımı
• Divi filtreli cüzdan modülü nasıl kullanılır
• Tam genişlikte sürgü modülü nasıl kullanılır
• Divi Builder Görüntü Modülü nasıl kullanılır?
• Divi Builder'ın tam genişlikli gezinme modülünü nasıl kullanırım?
• Resim galerisi modülü nasıl kullanılır?
• Divi Builder Tam Genişlik Kart Modülü nasıl kullanılır?
• Divi Tam Genişlik Portföy Modülü nasıl kullanılır?
• Divi tam genişlikli başlık modülü nasıl kullanılır?
• Divi Sayaç Modülünün Kullanımı
• Divi Builder'daki makaleler sürgüsünü kullanma
• Divi Email Optin modülü nasıl kullanılır?