Ana İçeriğe Geç

Divi öğreticisi: Mağaza modülünün kullanımı

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Divi, WooCommerce ile uyumlu olacak şekilde tasarlanmıştır. WooCommerce'i entegre etmek için, WooCommerce'in en son sürümünü yüklemeniz gerekir.

WooCommerce, en güzel özelliklere, arayüze sahip olduğu ve en iyi kodlama uygulamalarını izlediği için önerdiğimiz e-ticaret eklentisidir. Eklentiyi etkinleştirdikten sonra, WordPress panonuza iki yeni bölüm "WooCommerce" ve "Ürünler" eklendiğini göreceksiniz. E-ticaret ayarlarınızı yapmak ve yeni ürünler göndermek 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 geçmelisiniz. Divi teması web sitenize yüklendikten sonra 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.

divi oluşturucu

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ü divi.png

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.

accel sayfası ürünleri divi.jpg

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.

bölge seçeneği divi.png

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

butik modülünü yerleştirin divi.png

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

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

İç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ç.

ürün bölümü divi.jpg

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.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

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.

ayar dükkanı divi.png

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.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

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.

avans seçeneği butik divi.png

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.

Diğer Divi öğreticiler

Bu makalede, 1 yorumunu içeren

  1. Sevgili Bair,

    Katkılarınız için teşekkür ederiz.
    Mağaza modülü hakkında bir sorum var ve benim için cevaplarsanız çok mutlu olurum.
    Ve bireysel olarak seçilen ürünlerin mağaza modülümde görünmesini istiyorum. Bunun "yıldız ürünleri" benimseyerek başarılabileceğini düşündüm. Ancak bu seçeneği seçtikten sonra modül için istediğim ürünleri seçmenin bir yolunu bulamıyorum. Bir şey mi kaçırıyorum? Bir açıklaman var mı?

    Saygılarımla, Frederik

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
12 hisseleri
hisse4
cıvıltı2
Enregistrer6