Divi Plugin Highlight: Divi Shop Builder

Yayınlanan: 2022-11-20

Divi Shop Builder, Divi ile varsayılan WooCommerce sayfalarının tasarımını özelleştirmenize izin veren Divi Builder'a 14 yeni modül ekler. Eklenti ayrıca, sitenizi özelleştirmeye hızlı bir başlangıç ​​yapmanızı sağlamak için bazı hazır mağaza düzenleriyle birlikte gelir. WooCommerce kullanarak bir çevrimiçi mağaza işletiyorsanız ve WooCommerce'i tıpkı diğer Divi Modüllerinde yaptığınız gibi özelleştirebilmek istiyorsanız, bu sizin için harika bir eklenti olabilir! Bu eklenti vurgusunda, bu eklentiyle neler başarabileceğiniz konusunda size bir fikir vermek için Divi Shop Builder ile gelen özelliklere yakından bakacağız.

Başlayalım!

Divi Shop Builder'ı Yükleme

Divi Shop Builder, diğer herhangi bir WordPress eklentisi gibi kurulabilir. Eklentiler sayfasını WordPress kontrol panelinde açın ve Yeni Ekle'ye tıklayın. En üstteki Eklenti Yükle'ye tıklayın, ardından bilgisayarınızdan .zip eklenti dosyasını seçin.

Divi Plugin Highlight Divi Shop Builder Yüklemesi

Eklenti yüklendikten sonra eklentiyi etkinleştirin.

Divi Plugin Highlight Divi Shop Builder Etkinleştir

Divi Mağaza Oluşturucu

Divi Shop Builder modüllerini web sitenize eklemek için Divi Builder ile bir sayfa açın. Yeni bir bölüm ve satır ekleyin, ardından yeni bir modül eklemek için gri artı düğmesini tıklayın. Mağazayı oluşturmak için kullanacağınız modül ekle bölümüne eklenen 14 yeni modül göreceksiniz. Aşağıdaki her modüle bir göz atalım.

Woo Shop + Modül

Mağaza sayfanıza Woo Shop + modülünü ekleyerek başlayın.

Divi Plugin Highlight Divi Shop Builder Woo Shop Modülü

Mağaza modülü ilk yüklendiğinde böyle görünür.

Divi Plugin Highlight Divi Shop Builder Shop First Load

İçerik Sekmesi

Woo Shop + modül ayarlarına bir göz atalım.

Ürün:% s

İçerik sekmesinin altındaki ilk bölüm, mağaza modülünde görüntülenen bileşenleri seçip yeniden sıralayabileceğiniz yerdir. Aşağıdaki Yeni Öğe Ekle düğmesini tıklayarak bir bileşen ekleyebilirsiniz.

Divi Plugin Highlight Divi Shop Builder Yeni Ekle

Aralarından seçim yapabileceğiniz 11 bileşen vardır: Satış Rozeti, Yeni Rozet, Öne Çıkan Görsel, Başlık, Derecelendirmeler, Fiyat, Sepete Ekleme Miktarı, Sepete Ekleme, Kategoriler, Stok ve Açıklama. Bu seçenekler, size mağaza modülünde hangi öğelerin gösterileceği, hangi sırayla yerleştirildikleri ve daha fazlası üzerinde tam kontrol sağlar. Tasarım ayarlarına girdiğimizde, bu bileşenlerin her birinin tasarımını da tamamen özelleştirmenin ne kadar kolay olduğunu göreceksiniz.

Divi Eklentisini Vurgulayın Divi Shop Builder Bileşeni Seçin

Burada ürün bileşenlerini, yeni rozet öne çıkan resmin altında görünecek şekilde yeniden sıraladım.

Divi Plugin Highlight Divi Shop Builder Bileşen Ayarları

Bir sonraki bölümde, ürün görüntüleme tipi ayarını bulabilirsiniz. Bu, modülde görüntülenen ürünlerin türünü ve sırasını değiştirmenizi sağlar. Varsayılan (Menü sıralaması + ad), En Yeni Ürünler, Öne Çıkan Ürünler, İndirimli Ürünler, En Çok Satan Ürünler, En Çok Puan Alan Ürünler ve Ürün Kategorisi arasından seçim yapabilirsiniz.

Divi Plugin Highlight Divi Shop Builder Ürün Görüntüleme Türü

Bunun altında, modülde görüntülenen ürün sayısını değiştirebilir ve ürünlerin sırasını değiştirebilirsiniz.

Divi Plugin Highlight Divi Shop Builder Siparişi

Burada ürün açıklama uzunluğunu 10 olarak değiştirdim. Ayrıca Ajax'ı etkinleştirebilir veya devre dışı bırakabilir, Woo Ürün Filtreleri modülü ile filtrelemeyi etkinleştirebilir, düzeni değiştirebilir ve ürün sütunlarının sayısını değiştirebilirsiniz. Bu, ızgara ve liste görünümü arasında geçiş yapabileceğiniz en üste bir düğme ekleyen Izgara/Liste Görünümü Anahtarı düzenini kullanan liste görünümüdür.

Divi Plugin Highlight Divi Shop Builder Açıklama Uzunluk

Açıklama içeriği ayarı, kısa bir açıklama veya özel bir açıklama görüntülemenizi sağlar. Bunu takiben, ürün sayım sonuçlarını, ürün sıralamasını ve sayfalandırmayı yukarıda, aşağıda, yukarıda ve aşağıda görüntülemeyi veya tamamen gizlemeyi seçebilirsiniz. Ayrıca satış flaşlarını etkinleştirebilir veya devre dışı bırakabilirsiniz.

Rozet konumu ayarları ile yeni rozetin konumunu değiştirebilirsiniz. Varsayılan seçenek, öne çıkan görselin genişliğini kaplayan bir başlık ekleyen ürün görselinin üzerine bindirme seçeneğidir. Alternatif olarak, görüntünün üzerine küçük bir rozet ekleyen bir bindirme konumu (sol üst, sağ üst, sol alt, sağ alt) seçebilirsiniz. Yeni rozetin metnini de değiştirebilirsiniz. Bunu takiben satış rozeti için tamamen aynı ayarlar vardır.

Divi Eklentisi Öne Çıkanlar Divi Shop Builder Rozet Konumu

Bu bölümde son olarak bazı görüntüleme seçenekleri bulunmaktadır. Sepete ekle düğmesini, sepete ekle miktarı alanını görüntülemeyi, varsayılan sepete ekleme miktarını, ürün resmini, fiyatları, puanları, kategorileri, stoku ve yeni rozeti değiştirmeyi seçebilirsiniz.

Divi Plugin Highlight Divi Shop Builder Ekran Ayarları

Ürün Bulunamadı

Ürün Bulunamadı sayfası için başlık ve mesaj metnini buradan değiştirebilirsiniz.

Varsayılan İçerik Sekmesi Ayarları

Woo Shop + modülü ayrıca Bağlantı, Arka Plan ve Yönetici Etiketi gibi varsayılan içerik sekmesi ayarlarına sahiptir.

Divi Eklentisini Vurgulayın Divi Shop Builder Arka Planı

Tasarım Sekmesi

Tasarım sekmesi, Woo Shop + modülünün her yönünü tamamen özelleştirebileceğiniz yerdir.

Kaplama

İlk olarak, bindirme ayarları. Fareyle üzerine gelindiğinde öne çıkan görüntünün üzerinde görünen kaplamayı özelleştirebileceğiniz yer burasıdır. Bu örnekte koyu bir kaplama ve beyaz bir simge ekledim.

Divi Plugin Highlight Divi Shop Builder Yer Paylaşımı

resim

Görüntü ayarlarıyla dolguyu ve kenar boşluğunu değiştirebilir, yuvarlatılmış köşeler ekleyebilir, kenarlığı özelleştirebilir ve görüntüyü ton, doygunluk, parlaklık ve daha fazlası gibi filtre ayarlarından herhangi biriyle değiştirebilirsiniz.

Divi Plugin Highlight Divi Shop Builder Görüntüsü

Yıldız Değerlendirmesi

Burada yıldız derecelendirmesinin tasarımını özelleştirebilirsiniz. Etkin olmayan ve etkin yıldız derecelendirmesi renginin yanı sıra hizalamayı, boyutu ve aralığı değiştirebilirsiniz.

Divi Plugin Highlight Divi Shop Builder Yıldız Derecelendirmesi

Yeni Rozet

Sırada yeni rozet ayarları var. Dolguyu ve kenar boşluğunu özelleştirebilir, yeni sekmenin kaç gün kalacağını ayarlayabilir ve tüm arka plan, yazı tipi ve kenarlık seçenekleriyle tasarımı tamamen özelleştirebilirsiniz.

Divi Plugin Vurgu Divi Shop Builder Yeni Rozeti

Buton

Düğme ayarları grubu, arka plan, yazı tipi, kenarlık, simge ve kutu gölgesi ayarları gibi tüm varsayılan düğme özelleştirme seçeneklerine sahiptir. Burada metin rengini, arka planı, yazı tipini ve kenarlık yarıçapını özelleştirdim.

Divi Plugin Highlight Divi Shop Builder Düğmesi

Miktar Alanı

Miktar alanı seçenekleri ile arka plan rengini, metin rengini, odak arka plan rengini, odak metin rengini, aralığı, yazı tipini, kenarlığı ve gölgeyi değiştirebilirsiniz. Miktar alanı ile düğme arasına boşluk eklemek için boşluk seçeneklerini değiştirdim. Yazı tipini ve kenarlık yarıçapını da değiştirdim.

Divi Plugin Highlight Divi Shop Builder Adet

Ürün Kabı

Burada, listelenen her bir ürünü çevreleyen ürün kabının tasarımını değiştirebilirsiniz. Dolguyu, kenar boşluğunu, arka planı, yuvarlatılmış köşeleri, kenarlığı ve gölgeyi değiştirebilirsiniz. Bölüme gri bir arka plan ekledim ve ızgara sütunlarını 3 olarak değiştirdim, ardından ürün kabına beyaz bir arka plan ekledim. Bu tasarımı elde etmek için yuvarlatılmış köşeler ve bir gölge de ekledim.

Divi Plugin Highlight Divi Shop Builder Ürün Konteyneri

Ürün Açıklaması

Ürün açıklama metnini özelleştirebileceğiniz yer burasıdır. Tüm varsayılan yazı tipi seçeneklerinin yanı sıra açıklama dolgusu ve kenar boşluğu için ayarları içerir.

Divi Plugin Highlight Divi Shop Builder Ürün Açıklaması

Açılır Listeyi Sıralama

Ardından, bu bölümde mağaza modülü için sıralama açılır menüsünün tasarımını özelleştirebilirsiniz. Arka plan rengini, metin rengini, odak arka planını ve metin rengini değiştirebilir, açılır kenar boşluğunu ve dolguyu ayarlayabilir, yazı tipi seçeneklerini değiştirebilir ve kenarlığı özelleştirebilirsiniz. Bu örnek için yazı tipini değiştirerek ve gri bir kenarlık ekleyerek basit tuttum.

Divi Plugin Highlight Divi Shop Builder Sıralama Açılır Menüsü

Sonuç Sayısı

Sonuç sayma seçenekleri, bu metin için yazı tipi ayarlarını özelleştirmenize olanak tanır. Burada yazı tipini değiştirdim.

Divi Plugin Highlight Divi Shop Builder Sonuç Sayısı

sayfalandırma

Sayfalandırmanın tasarımını buradan özelleştirebilirsiniz. Geçerli sayfa metni rengi, geçerli sayfa metni arka planı, sayfalandırma rengi arka planı, sayfalandırma metni rengi, sayfalandırma yazı tipi ve sayfalandırma sınırı için seçenekler vardır. Bu örnekte, geçerli sayfa metin rengini, sayfalandırma metin rengini, sayfalandırma yazı tipini, sayfalandırma metin boyutunu ve sayfalandırma sarmalayıcı yuvarlatılmış köşelerini değiştirdim.

Divi Plugin Highlight Divi Shop Builder Sayfalandırma

Sepeti Görüntüle Düğmesi

Sepeti görüntüle düğmesi, bir kullanıcı sepetine bir ürün eklediğinde görünür. Düğme için özel stilleri etkinleştirdim ve metin boyutunu, rengini, düğme arka planını, kenarlık yarıçapını, yazı tipini, simgeyi, kenar boşluğunu ve dolguyu değiştirdim.

Divi Plugin Highlight Divi Shop Builder Sepeti Görüntüle

Izgara/Liste Görünümü Düğmesi

Izgara/liste görünümü düğmesi seçenekleri, simgeleri değiştirmenize, simge ve arka plan renklerini değiştirmenize, dolguyu ve kenar boşluğunu ayarlamanıza ve kenarlığı ve kutu gölgesini özelleştirmenize olanak tanır. Bu örnek için seçenekleri varsayılan olarak bıraktım.

Divi Plugin Highlight Divi Shop Builder Izgara Listesi Düğmesi

Ürün Bulunamadı

Bu ayarlar grubunda, ürün bulunamadı mesajı için metin ve başlık yazı tipini, aralığı, kenarlığı ve renkleri değiştirebilirsiniz. Metni ve başlık yazı tipini değiştirdim ve bölüme biraz alt dolgu ekledim.

Divi Plugin Highlight Divi Shop Builder Ürün Yok Tasarımı

Metin

Burada metin hizalamasını değiştirebilir ve bir metin gölgesi ekleyebilirsiniz.

Divi Plugin Highlight Divi Shop Builder Metni

Başlık Metni

Ardından, ürün başlığı yazı tipini özelleştirebileceğiniz başlık metni ayarları gelir. Bu örnek için yazı tipini ve metin boyutunu değiştirdim.

Divi Plugin Highlight Divi Shop Builder Başlık Metni

Fiyat Metni

Fiyat metni için de tüm font seçenekleri mevcuttur. Yine yazı tipini ve yazı boyutunu fiyata göre değiştirdim.

Divi Plugin Highlight Divi Shop Builder Fiyat

Eski Fiyat Metni

Eski fiyat metni, bir ürün indirime girdiğinde üstü çizili bir efektle görünür. Yazı tipi seçeneklerini buradan özelleştirebilirsiniz. Yazı tipini değiştirdim ve normal fiyat yazı tipine uyması için metin boyutunu artırdım.

Divi Plugin Highlight Divi Shop Builder Eski Fiyat

Kategori Metni

Kategori metni için, yazı tipini ve metin rengini değiştirmek için yazı tipi seçeneklerini kullandım.

Divi Eklentisi Öne Çıkanlar Divi Shop Builder Kategorisi

Stokta Metin

Stoktaki metni tüm yazı tipi seçenekleriyle de özelleştirebilirsiniz. Yazı tipini ve metin rengini değiştirdim.

Divi Plugin Highlight Divi Shop Builder In Stock

Stok Metni Tükendi

Sonraki, stokta yok metnidir. Basit tuttum ve bu örnek için yazı tipini değiştirdim.

Divi Plugin Highlight Divi Shop Builder Stokta Tükendi

Ön Sipariş Metninde Mevcuttur

Burada backorder yazı tipini değiştirdim ve metin rengini turuncu olarak değiştirdim.

Divi Plugin Highlight Divi Shop Builder Backorder

Satış Rozeti Metni

Burada satış rozetinin tasarımını özelleştirebilirsiniz. Yazı tipini ve arka plan rengini değiştirdim.

Divi Plugin Vurgu Divi Shop Builder Satış Rozeti

Satış Fiyatı Metni

Son olarak, mevcut yazı tipi seçenekleriyle indirimli fiyat metni için yazı tipini ayarladım.

Divi Plugin Highlight Divi Shop Builder Satış Fiyatı

Varsayılan Tasarım Sekmesi Ayarları

Tasarım sekmesine eklenen yeni ayarlar bu kadar. Modül ayrıca boyutlandırma, boşluk bırakma, kenarlık, kutu gölgesi, filtreler, dönüştürme ve animasyon gibi birkaç varsayılan tasarım sekmesi seçeneğiyle birlikte gelir. Woo Shop + modülünüzü daha da geliştirmek için bu tasarım seçeneklerini kullanabilirsiniz.

Gelişmiş sekme

Gelişmiş sekmesi oldukça standarttır ve modülünüzü CSS ve daha fazlasıyla özelleştirmek için bulmayı umduğunuz tüm bölümlerle birlikte gelir. Özel CSS bölümü altında, mağaza modülünün ürün, indirimli, yeni rozet, resim ve daha fazlası gibi özelliklerini bireysel olarak özelleştirmek için CSS ekleyebilirsiniz.

Divi Plugin Highlight Divi Shop Builder Özel CSS

Woo Ürünleri Filtre Modülü

Mağaza modülüne yakından baktığımıza göre, şimdi Woo Ürün Filtresi modülüne bir göz atalım. Bu modül, mağaza sonuçlarınızı değiştirmek için kullanabileceğiniz bir filtreyi sayfanıza ekler. Bir modül eklemek için gri artı düğmesine tıklayın ve Woo Ürünleri Filtreleri modülünü seçin.

Divi Plugin Highlight Divi Shop Builder Filters

Modülü ekledikten sonra, filtrelemeyi etkinleştirmeyle ilgili bu hata mesajını görebilirsiniz.

Divi Plugin Highlight Divi Shop Builder Filter Error

Woo Shop + modülünüzü açın ve Woo Ürünleri Filtreleri modülüyle filtrelemeyi etkinleştirme seçeneğini seçin. Bu, filtre modülünün ve mağaza modülünün bağlanmasına yardımcı olur, böylece mağaza öğeleri seçtiğiniz filtrelere göre değişir.

Divi Plugin Highlight Divi Shop Builder Filtrelemeyi Etkinleştir

İçerik Sekmesi

İçerik sekmesi altında, filtre modülünüze yeni bir öğe ekleyebilirsiniz.

Divi Plugin Highlight Divi Shop Builder Yeni Öğe

Yeni bir öğe eklediğinizde, filtre türünü seçebileceğiniz ve filtrenin birçok özelliğini özelleştirebileceğiniz ayrı bir ayarlar penceresinde açılacaktır. Filtrenin görünümünü ayrı ayrı şekillendirmek için kullanabileceğiniz her filtre için ayrı tasarım seçenekleri vardır. Bu seçeneklerin her biri, her bir filtre türünün genel tasarımını özelleştirebileceğiniz filtre modülü tasarımı sekmesinde de mevcuttur.

Ekleyebileceğiniz 8 tür filtre vardır: Kategori, Etiket, Özellik, Arama, Derecelendirme, Fiyat, Stok Durumu ve Satış. Burada satıra bir sütun ekledim, böylece filtre dükkan modülünün yan tarafına yerleştirilebilir.

Divi Plugin Highlight Divi Shop Builder Filters

Bireysel filtre için filtre ayarları altında, filtre türünü seçebilir, filtre başlığını görüntülemeyi veya gizlemeyi seçebilir ve özel filtre başlığı metni ekleyebilirsiniz.

Divi Plugin Highlight Divi Shop Builder Filtre Ayarları

Kategori Filtresi

Bireysel filtre için gelişmiş filtre ayarları, seçtiğiniz filtre türüne göre değişir. Kategori filtresi için yalnızca üst kategorileri, üst kategorileri ve alt kategorileri hiyerarşik olmayan veya üst kategorileri ve alt kategorileri hiyerarşik olarak göstermeyi seçebilirsiniz. Filtrenin nasıl görüntüleneceğini de değiştirebilirsiniz: onay kutuları listesi, radyo düğmeleri listesi, açılır tekli seçim, açılır çoklu seçim veya etiket bulutu. Bu örnek için, açılır çoklu seçimi seçtim. Ayrıca bu bölümde toggle olarak görüntülemeyi açıp kapatabilir, ürün sayısını göstermeyi veya gizlemeyi seçebilir, lütfen seçiniz yazısını değiştirebilirsiniz.

Divi Plugin Highlight Divi Shop Builder Gelişmiş Filtre Ayarları

Etiket Filtresi

Etiket filtresi için, etiket bulutu görüntüsünü etkinleştiriyorum ve geçiş görüntüsünü devre dışı bırakıyorum.

Divi Plugin Highlight Divi Shop Builder Etiket Filtresi

Arama Filtresi

İşte arama filtresi ayarları. Geçiş görünümünü bir kez daha devre dışı bıraktım.

Divi Plugin Highlight Divi Shop Builder Araması

Derecelendirme Filtresi

Derecelendirme filtresinin birkaç görüntüleme seçeneği vardır: tek satırlı yıldızlar (seçilen derecelendirme ve üzeri), tek satırlı yıldızlar (yalnızca seçilen derecelendirme), radyo düğmeleri yıldızları, radyo düğmeleri metni, onay kutuları yıldızları, onay kutuları metni, açılır yıldızlar, açılır metin. Tek satır yıldız (seçili derecelendirme ve üstü) seçeneğini seçtim.

Divi Plugin Highlight Divi Shop Builder Değerlendirmesi

Fiyat Filtresi

Sırada fiyat filtresi var. Başlangıç-bitiş sürgüsü, başlangıç-bitiş sayısı girişi veya başlangıç-bitiş sürgüsü ve sayı girişi arasında seçim yapabilirsiniz. Bu örnek için, başlangıç-bitiş sürgüsünü seçtim ve maksimum miktarı ayarladım.

Divi Plugin Highlight Divi Shop Builder Fiyat Filtresi

Stok Filtresi

Stok filtresini onay kutusu listesi, radyo düğmesi listesi, açılır tekli seçim, açılır çoklu seçim veya etiket bulutu olarak görüntüleyebilirsiniz. Bu filtre için radyo düğmeleri listesini seçtim ve ürün sayısını görüntülemek için seçtim.

Divi Plugin Highlight Divi Shop Builder Stock

Satış Filtresi

Satış filtresi seçenekleri oldukça basittir - geçiş ekranını etkinleştirebilir veya devre dışı bırakabilir ve indirimdeki metni değiştirebilirsiniz.

Divi Plugin Highlight Divi Shop Builder Satışı

Nitelik Filtresi

Son olarak, öznitelik filtremiz var. Nitelik örneği için renkleri kullanmayı seçtim ve onay kutuları listesi görüntüleme seçeneğini seçtim.

Divi Eklentisi Öne Çıkanlar Divi Shop Builder Özelliği

İçerik Sekmesi Filtre Ayarları

Filtre modülü ayarlarının içerik sekmesine geri döndüğünüzde, filtre ayarları grubu altında listelenen bazı ek seçenekler vardır.

İlk olarak, seçilen filtreleri üstte veya altta görüntülemeyi seçebilir veya tamamen gizleyebilirsiniz. Onları en üstte göstermeyi seçtim. Ayrıca seçilen filtre başlığını görüntülemeyi veya gizlemeyi seçebilir ve başlık metnini değiştirebilirsiniz.

Divi Plugin Highlight Divi Shop Builder Seçilen Filtreler

Ayrıca bu bölümde filtreleri uygula ve filtreleri temizle düğmeleri için seçenekler bulunmaktadır. Bunları filtrelerden önce veya sonra görüntülemeyi veya hiç göstermemeyi seçebilirsiniz. Düğme metnini de değiştirebilirsiniz. Filtrelerden sonra her iki düğmeyi de görüntülemeyi seçtim.

Divi Plugin Highlight Divi Shop Builder Filtre Düğmeleri

İçerik sekmesinde ayrıca arka plan ayarları ve yönetici etiketi ayarları için bir bölüm bulunur.

Tasarım Sekmesi

Filtre modülünün tasarım sekmesi, filtre tasarımlarını tamamen özelleştirmeniz için çok sayıda tasarım seçeneğine sahiptir. Filtre türlerinin her biri için yazı tipini, aralığı, kenarlığı ve arka planı özelleştirebilirsiniz. Ayrıca düğmeleri, seçilen filtreleri, boyutlandırmayı, aralığı, kenarlığı, kutu gölgesini, filtreleri, dönüştürmeyi ve animasyon seçeneklerini özelleştirebilirsiniz. Burada fazla ayrıntıya girmeyeceğiz, ancak filtre modülünün hemen hemen her yönünü istediğiniz gibi değiştirebileceğinizi bilin.

Bu örnekte, yazı tipini değiştirdim, seçilen filtrelere yuvarlak köşeler ekledim, filtreler arasındaki alt kenar boşluğunu azalttım, açılır filtreye kenarlık ekledim, etkin etiketin rengini, fiyat filtresini, stok durumunu ve eşleştirmek için onay işaretlerini değiştirdim. renk düzeni, düğme tasarımı özelleştirildi ve filtre modülüne yuvarlatılmış bir köşe ve kutu gölgesi eklendi. İşte filtre modülü ve mağaza modülü ile son tasarım.

Divi Plugin Highlight Divi Shop Builder Mağaza Sayfası Tasarımı

Sepet Listesi Modülü

Şimdi sepet sayfasına geçelim. İlk olarak, sepet listesi modülü. Bu modül sepetinizin içeriğini gösterecektir.

İçerik Sekmesi

Modül ayarlarında görüntülenen içeriği değiştirebilirsiniz. Ürünü kaldır sütunu, ürün sütunu, küçük resim, ürün adı, fiyat, miktar, ara toplam ve kupon kodu gibi belirli sütunları göstermeyi veya gizlemeyi seçebilirsiniz.

Divi Eklentisi Öne Çıkanlar Divi Shop Builder Sepet İçeriği

Ayrıca sütunlardan herhangi birini özel metinle yeniden adlandırabilirsiniz.

Divi Plugin Highlight Divi Shop Builder Sepet Etiketleri

Ek olarak, boş sepet metnini, düğme metnini ve düğme URL'sini özelleştirebilirsiniz.

Divi Plugin Highlight Divi Shop Builder Boş Sepet

İçerik sekmesinde ayrıca varsayılan arka plan ve yönetici etiketi ayarları bulunur.

Tasarım Sekmesi

Burada, sepet modülünün tasarımını tamamen özelleştirebilirsiniz. Düğmeler, metin, tablo ve daha fazlası dahil olmak üzere sepet modülünün her yönü değiştirilebilir.

Divi Plugin Highlight Divi Shop Builder Sepet Tasarımı

Beyaz bir arka plan ve yuvarlatılmış köşeler ekleyerek, yazı tipini değiştirerek, küçük resim boyutunu artırarak ve düğmeleri özelleştirerek tasarımı özelleştirdim.

Divi Plugin Highlight Divi Shop Builder Cart Nihai Tasarım

Sepet Toplamları Modülü

Sepet sayfasına sepet toplamları modülü de eklenmelidir. Sepet öğeleri için ara toplamı ve toplamı görüntüler ve ödeme işlemine devam etmek için bir düğmesi vardır.

İçerik Sekmesi

Modül ayarlarında başlık, ara toplam metni, toplam metin gibi metinleri değiştirebilir ve ödeme butonu metnine ilerleyebilirsiniz. Ayrıca bir arka plan ekleyebilir ve yönetici etiketini değiştirebilirsiniz.

Divi Plugin Highlight Divi Shop Builder Cart Toplam İçerik

Tasarım Sekmesi

Tasarım ayarlarıyla, sepet toplamları modülünün her yönünü özelleştirebilirsiniz. Bu örnek için, modüle bir arka plan, bir kutu gölgesi ve yuvarlatılmış köşeler ekledim. Yazı tipini tasarımın geri kalanıyla eşleşecek şekilde değiştirdim ve ayrıca ödemeye devam et düğmesini özelleştirdim.

Divi Plugin Highlight Divi Shop Builder Cart Toplam Tasarım

WooCommerce Bildirim Modülü

WooCommerce Bildirimleri modülü, sepet sayfasına da yerleştirilebilir. Bu modül, gelebilecek herhangi bir hata mesajını veya bildirimi gösterecektir. Sepet sayfasının en üstüne, sepet listesi modülünün üstüne ekliyorum.

İçerik Sekmesi

İçerik sekmesi altında, siz tasarımı test ederken tüm bildirimleri ön uçta görüntüleyecek olan test modunu etkinleştirebilirsiniz. Üç farklı bildirimin varsayılan olarak nasıl göründüğü aşağıda açıklanmıştır.

Divi Plugin Highlight Divi Shop Builder Woo Ticaret Bildirimleri

Tasarım Sekmesi

Burada bildirimlerin tasarımını değiştirebilirsiniz. Arka plan renklerini duyuru türüne göre değiştirdim ve stili tasarımın geri kalanına uyacak şekilde değiştirdim.

Divi Eklentisi Öne Çıkanlar Divi Shop Builder Bildirimleri Tasarlandı

Checkout Faturalama Modülü

Ödeme sayfasına geçerken, ilk önce faturalandırma modülü gelir. İşlemi tamamlamak için fatura bilgilerini toplayabileceğiniz yer burasıdır.

İçerik Sekmesi

İçerik sekmesi altında, fatura başlığı metnini ve alan etiketlerinden herhangi birini değiştirebilirsiniz. Ayrıca bir bağlantı veya arka plan ekleyebilir ve yönetici etiketini değiştirebilirsiniz. Burada düzene bir arka plan rengi ekledim.

Divi Plugin Highlight Divi Shop Builder Faturalandırma İçeriği

Tasarım Sekmesi

Tasarım sekmesi, başlık ve etiketlerden alanlara ve kenarlıklara kadar her şeyi özelleştirmek için seçeneklere sahiptir. Bu örnek için tasarımı diğer modüllerle aynı hizada tuttum ve yuvarlak bir kenarlık ve bir kutu gölgesi ekledim, aralığı değiştirdim ve yazı tipini değiştirdim.

Divi Plugin Highlight Divi Shop Builder Fatura Tasarımı

Checkout Kupon Modülü

Daha sonra ödeme sayfasına ödeme kuponu modülünü ekleyebiliriz.

İçerik Sekmesi

İçerik sekmesinde, kupon bölümünün toggle ile gösterilmesini veya her zaman gösterilmesini seçebilirsiniz. gösterilmesini seçtim. Burada ayrıca kupon modülü öğelerinin herhangi birinin metnini değiştirebilirsiniz.

Divi Plugin Highlight Divi Shop Builder Kupon İçeriği

Tasarım Sekmesi

İşte tasarlanan kupon modülü. Bir arka plan, kutu gölgesi ve yuvarlatılmış köşeler ekledim. Yazı tipini de değiştirdim ve düğmeyi özelleştirdim.

Divi Plugin Highlight Divi Shop Builder Kupon Tasarımı

Checkout Sipariş Modülü

Şimdi checkout order modülüne geçelim. Bu, ödeme sayfası için başka bir modüldür ve seçilen ürünler, ara toplam, nakliye, toplam maliyet, ödeme seçenekleri ve bir gizlilik politikası onay kutusu gibi müşterinin sipariş bilgilerini görüntüler.

İçerik Sekmesi

İçerik sekmesinde, başlık metnini ve sipariş ver düğmesi metnini değiştirebilirsiniz. Gizlilik politikasını ve hüküm ve koşulları göstermeyi veya gizlemeyi de seçebilirsiniz. Elbette burada bir arka plan ekleyebilir ve yönetici etiketini de değiştirebilirsiniz.

Divi Plugin Highlight Divi Shop Builder Checkout Sipariş İçeriği

Tasarım Sekmesi

Tıpkı diğer modüller gibi ödeme emri modülü de tamamen özelleştirilebilir. Burada yazı tipini değiştirdim, bir arka plan ve yuvarlatılmış köşeler ekledim ve düğmeyi özelleştirdim.

Divi Plugin Highlight Divi Shop Builder Checkout Sipariş Tasarımı

Kargo Modülünü Kontrol Et

Ödeme sayfası için son modül, kargoyu teslim alma modülüdür.

İçerik Sekmesi

İçerik sekmesinde, başlık metnini değiştirebilir, başlığın değiştirilmesini seçebilir ve sipariş notlarını gösterebilir veya gizleyebilirsiniz. Ayrıca alan etiketlerinden herhangi birini değiştirebilirsiniz.

Divi Plugin Highlight Divi Shop Builder Sevkiyat İçeriği

Tasarım Sekmesi

İşte size özel tasarım. Yine bir arka plan, yuvarlatılmış kenarlıklar, bir kutu gölgesi ekledim ve yazı tipini değiştirdim.

Divi Plugin Highlight Divi Shop Builder Sevkiyat Tasarımı

Ve işte ödeme sayfası için tam tasarım.

Divi Plugin Highlight Divi Shop Builder Ödeme Sayfası Tasarımı

Hesap İçeriği Modülü

Divi mağaza oluşturucu, hesap sayfasını özelleştirmek için bazı modüllerle birlikte gelir. Önce hesap içeriği modülüne bir göz atalım. Sayfaya ekleyebileceğiniz farklı öğeler vardır ve bunları istediğiniz gibi yeniden düzenleyebilirsiniz. Bu öğeler gösterge panosu, siparişler, abonelikler, indirmeler, adresler, hesap ayrıntıları, oturum açma, kayıt ve kayıp parola bölümlerini içerir. Her öğenin, her bir öğenin tasarımını özelleştirebileceğiniz kendi ayarlar sayfası vardır. Hesap içerik modülünde, genel tasarımı özelleştirebileceğiniz tasarım seçenekleri de bulunur.

Divi Plugin Highlight Divi Shop Builder Hesap İçeriği

En üstteki bildirim mesajlarıyla birlikte stilize edilmiş varsayılan kontrol paneli görünümü buradadır.

Divi Plugin Highlight Divi Shop Builder Dashboard

Bu, müşterilerin tamamlanan ve bekleyen tüm siparişlerini görebileceği stillendirilmiş siparişler sayfasıdır.

Divi Plugin Highlight Divi Shop Builder Siparişleri

Bu, bir indirme sayfası örneğidir.

Divi Plugin Highlight Divi Shop Builder İndirmeleri

Gördüğünüz gibi, bu eklenti size hesap sayfasının tasarımı üzerinde de tam kontrol sağlıyor. Hesap sayfasıyla çalışan birkaç modüle daha göz atalım.

Hesap Gezinme Modülü

Bu modül, kullanıcıların hesaplarındaki farklı sayfaları görüntüleyebilmeleri için sayfaya bir gezinme menüsü ekler. Tıpkı hesap içeriği modülünde olduğu gibi, menüden herhangi bir sayfa ekleyip çıkarabilir ve sırasını değiştirebilirsiniz. İşte tarz navigasyon modülü.

Divi Plugin Highlight Divi Shop Builder Hesabında Gezinme

Hesap Kullanıcı Görüntü Modülü

Hesap kullanıcı resim modülü, kullanıcının profil resmini sayfaya ekler. İşte eylemde.

Divi Plugin Highlight Divi Shop Builder Hesabı Kullanıcı Resmi

Hesap Kullanıcı Adı Modülü

Benzer şekilde, hesap kullanıcı adı modülü, kullanıcının kullanıcı adını sayfaya ekler. Alternatif olarak, adı, soyadını, tam adı veya görünen adı görüntülemeyi seçebilirsiniz.

Divi Plugin Highlight Divi Shop Builder Hesap Kullanıcı Adı

İşte ön uçtaki tam hesap arayüzü. Bu, hesap ayrıntıları sayfasıdır.

Divi Plugin Highlight Divi Shop Builder Hesap Detayları

Teşekkür Modülü

Ele alacağımız son modül teşekkür modülüdür. Bu, bir sipariş tamamlandıktan sonra görünecektir. İçerik sekmesi ayarlarını kullanarak herhangi bir etiketi değiştirebilirsiniz ve elbette tüm modül tasarım ayarlarıyla özelleştirilebilir. İşte stil sahibi teşekkür sayfası.

Divi Plugin Highlight Divi Shop Builder Teşekkürler

Divi Mağaza Oluşturucu Düzenleri

Divi Shop Builder, tasarım sürecini hızlı bir şekilde başlatmak için kullanabileceğiniz birkaç hazır mağaza düzeniyle birlikte gelir. Birkaç tasarıma göz atalım.

Woo Shop + Modül Demosu 1

Bu, mağaza demo düzenlerinden biridir. Kart tarzı bir tasarıma sahiptir ve üzerine gelindiğinde görünen yeşil bir kenarlığa sahiptir.

Divi Plugin Highlight Divi Shop Builder Demo 1

Kahve Sepeti ve Ödeme Düzenleri

Kahve düzeni, bir sepet düzeni ve bir ödeme düzeni ile birlikte gelir. İşte sepet düzeni.

Divi Plugin Highlight Divi Shop Builder Coffee Cart

Ve işte ödeme düzeni.

Divi Plugin Highlight Divi Shop Builder Coffee Checkout

Woo Shop + Yemek Düzeni

Bu, yaratıcı bir "tatlı veya tuzlu" bölünmüş düzene sahip başka bir mağaza modülü düzenidir. Bu düzen, renkli kenarlıklı yuvarlak bir ürün resmine sahiptir.

Divi Plugin Highlight Divi Shop Builder Food

Divi Shop Builder'ı Satın Alın

Divi Shop Builder, Divi Marketplace'te mevcuttur. Sınırsız web sitesi kullanımı ve 1 yıllık destek ve güncellemeler için 109 ABD Doları tutarındadır. Fiyat ayrıca 30 günlük para iade garantisi içerir.

Divi Shop Builder Eğitimi

Son düşünceler

Divi Shop Builder'a bakışımız buydu. Gördüğünüz gibi bu eklenti, mağazanızın, alışveriş sepetinizin, kasanızın, hesabınızın ve teşekkür sayfalarınızın tasarımı üzerinde tam kontrol sahibi olmanızı sağlayan modüller ve tasarım seçenekleriyle doludur. Bu eklenti kapsamlı olduğu kadar kullanımı ve özelleştirmesi de çok kolaydır. Eklenti yazarı ayrıca ürün için çok yararlı olan kapsamlı belgelere sahiptir. WooCommerce mağazanızı Divi ile özelleştirmenin bir yolunu arıyorsanız, bu harika bir seçenektir. Sizden haber almak isteriz! Divi Shop Builder'ı denediniz mi? Yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin!