Divi Eklentisi Vurgusu – Divi Commerce

WooCommerce ve Divi birlikte iyi çalışır. Divi'nin Mağaza modülü, WooCommerce ürünlerini Divi düzenlerinizde görüntüler ve sitenize güzel bir şekilde uymaları için bunları stillendirebilirsiniz. Ancak Divi, tek tek ürün sayfalarına, formlara veya giriş ekranına stil vermez. Bu, ürün sayfalarını web sitenizin geri kalanına uyacak şekilde biçimlendirmeyi zorlaştırabilir. Divi Builder'ı WooCommerce ürün sayfalarınıza ekleyen ve hatta tema özelleştiriciye yeni özellikler ekleyen Bolt Temalarından bir eklenti olan Divi Commerce'e girin.

Bu yazıda Divi Commerce'e bir göz atacağız ve birkaç ürün öncesi ve sonrası sayfasını karşılaştıracağız. İlk olarak, standart WooCommerce ürün sayfasına bir göz atalım.

Standart WooCommerce Ürün Sayfası

Tipik WooCommerce ürün sayfası, Ürün Açıklamasını (ürünün altında görünen bilgiler) oluşturmak için standart WordPress düzenleyicisini kullanır. Bu standart WYSIWYG düzenleyicisidir ve herhangi bir blog gönderisi veya sayfasında olduğu gibi metin, medya ve kod gönderebilirsiniz.

Ürün Kısa Açıklaması ayrıca standart bir WordPress düzenleyicisi kullanır. Bu, ürün sayfasının üst kısmında, ürün görselinin yanında yer alan içeriktir. Bu alanların her ikisi de Divi Commerce kullanılarak şekillendirilebilir. Göreceğimiz gibi, Ürün Açıklamasını Divi Builder'ı kullanarak oluşturabiliriz ve Ürün Kısa Açıklamasını tema özelleştiriciyi kullanarak şekillendirebiliriz.

Divi Commerce olmadan tipik sonuç, resim, galeri, fiyat, miktar ve sepete ekle düğmesi ile kısa açıklama ve ürün resimlerinin altında daha uzun bir açıklama içeren bir ürün sayfasıdır.

Öncelikle ürün görsellerinin altındaki bu açıklama alanına odaklanmak istiyorum. Bu alandaki içerik standart WYSIWYG editörü kullanılarak oluşturulur ve metin, medya, kısa kodlar vb. Kullanabilir. Daha ilginç bir açıklama oluşturmak için buraya içerik ekleyebilirim.

Bunu yapmak için örnek olarak iki ürün sayfası oluşturmak istiyorum. Önce onları WYSIWYG editöründe ve sonra tekrar Divi Commerce ile oluşturacağım. Bu örnekler için Divi ürün sayfasındaki bazı düzenleri yeniden oluşturmak istiyorum.

İlk Örnek

Bu, Elegant Themes web sitesindeki Divi ürün sayfasının bir parçasıdır. Ürün Açıklaması içinde sayfanın bu bölümünü yeniden oluşturmak istiyorum. Yalnızca bir başlığı, üç resmi ve üç metni vardır. Görüntüler metnin yanına yerleştirilir ve birbirini izleyen iki sütun oluşturulur. Bu düzen oluşturmak için yeterince kolay olmalıdır.

İşte standart WordPress düzenleyicisindeki içerik. Metni yerleştirdim, başlıkları başlık 3'e ayarladım ve görüntüleri sağa veya sola hizalayacak şekilde ayarladım.

Bu, tam genişlikte bir düzen kullanan sonuçtur. Sonuç istediğimi yapmıyor. Bunun nedenini elbette biliyoruz. Sadece WYSIWYG düzenleyicisine boşluk yerleştirmek istediğim düzeni oluşturmayacak. Boşluğu doğru ayarlamak için düzeni oluşturmak için HTML veya bir eklenti kullanmam gerekiyor.

HTML olmadan boşluk bir kabus olur. Fazladan boşluk yerleştirmek bile yardımcı olmuyor. HTML ile bu düzeni yeterince kolayca oluşturabilir ve hatta istediğim sıklıkta yeniden kullanmak için kodu kopyalayıp yapıştırabilirim, ancak bu sıkıcı olabilir ve daha karmaşık düzenler çok zaman alabilir.

İkinci Örnek

İkinci örnek için Divi tema ürün sayfasından buna benzer bir düzen kullanmak istiyorum. Bunu kod olmadan oluşturmak çok daha zordur. Merkezde GIF'ler bulunan üç sütunlu bir düzen kullanır. Kodun her bölümünün kendi başlığı vardır ve metin resimlerle tam olarak aynı hizada değildir.

Bununla ilgili sorunları zaten görebilirsiniz. Hiçbir şey doğru şekilde hizalanmak istemez. Resmi metinle sola hizalayacak şekilde ayarladım, ancak metni sağa yerleştiremiyorum. Hizalama yok olarak ayarladım ve görüntüyü metinle aynı satıra yerleştiremiyorum. Bu daha da fazla kod gerektirecektir.

Metnin ve resimlerin geri kalanını eklemeyi bitirme zahmetine bile girmedim. Bilgileri ve görüntüleri istiflemek istiyorsanız bu işe yarayacaktır, ancak şeyleri hareket ettirmek ve doğru şekilde hizalamak için gerçekten üç sütuna ihtiyacım var. Birkaç seçeneğim var: HTML'deki sütunları elle kodlayabilirim veya bir eklenti kullanabilirim.

Yine, bu düzeni HTML'de oluşturmak çok zor olmaz, ancak daha kolay, daha hızlı ve bence çok daha iyi bir yol Divi Builder'ı kullanmaktır. Divi Builder'ın daha da fazla avantajı var çünkü düzeni kolayca oluşturmamıza ve masaüstü bilgisayarlar, tabletler ve telefonlar için bağımsız olarak değiştirmemize izin veriyor.

Sorun şu ki Divi Builder WooCommerce ürün sayfalarında mevcut değil, ancak eklenebilir. Eklemenin en kolay yolu Divi Commerce adlı bir eklentidir. Şimdi Divi Commerce'i kuralım ve Divi Builder'ı kullanarak ürün sayfalarını yeniden oluşturalım.

Divi Ticaret

Herhangi bir eklenti gibi sıkıştırılmış dosyayı yükleyerek Divi Commerce'i kurun. Kurulduktan sonra kurulum gerekmez.

Divi Commerce, Divi Builder'ı herhangi bir sayfa veya gönderi gibi WooCommerce ürün sayfalarına ekler. Bu, Ürün Açıklamasını oluşturan alandır. Tıpkı sayfalarda ve gönderilerde olduğu gibi standart WordPress editörünün yerine kullanılabilir. Artık WooCommerce ürün açıklaması içinde her modülle birlikte Divi Builder'ı kullanabiliriz.

Oluşturmak istediğim ürün sayfalarından bazıları tam ekran olacak. Tam ekran ürün sayfası oluşturmak için Divi Builder'ı Kullan öğesini seçmeden önce Divi Ürün Ayarlarında Tam Genişlik sayfa düzenini seçin.

Daha önceki örneklerimi tekrar gözden geçirelim ve Divi Commerce'i kullanarak ne kadar kolay olduklarını görelim.

İlk Örnek

Divi Builder'ı kullanarak metin ve görüntü modüllerini kullanarak iki sütunda yatay olarak değişen metin ve görüntülerin hızlı bir düzenini oluşturdum ve görüntüleri ve metni modüllerin her birine ekledim. Metin hizalamasını resimlerin merkezine ortalamak için metne 100 piksel üst kenar boşluğu ekledim. Yaptığım tek değişiklik bu.

İşte ilk denemenin sonucunun tam ekran görüntüsü. Sonuçtan memnunum. Değişiklik gerektirmeyecek kadar orijinal düzene yeterince yakındı.

İkinci Örnek

İkinci örnek için Divi Builder'da hızlı bir 3 sütunlu düzen oluşturdum. Başlık metni için 3 sütun düzeni seçtim (1/4 1/2 1/4 kullanarak) ve dolguyu 50 piksel olarak ayarladım. Daha sonra ikinci bir satır ekledim ve 1/3 1/3 1/3 kullanarak dış sütunlara metin modülleri ve orta sütun için bir görüntü modülü ekledim. Yanlardaki tüm metinler için sağ ve sol 30 piksel dolgu ve üst kısım için 20 kenar boşluğu ayarladım. Satırı istediğim gibi kurduktan sonra üç kez klonladım ve her modüle içerik ekledim.

Sonuç, ilk denemede memnun kaldığım bir düzen oldu. Bunu tam genişliğe ayarladım. CSS veya bir eklenti kullanarak bir görüntü gölgesi ekleyebilir ve metin boyutunda ayarlamalar yapabilirim, ancak orijinal düzen kavramı orada. Çok fazla ayar bile gerekmedi. Sadece iki dakika içinde Divi Builder ile HTML'de oluşturmam çok daha uzun sürecek bir düzen oluşturdum ve bu düzeni yeniden kullanmak veya paylaşmak için kitaplığıma ekleyebilirim.

Özel Ürün Sayfası Oluşturma

Sonra birkaç özel sayfa oluşturmak istiyorum. Bu ilk özel ürün sayfası için Divi Builder'ın düzen özelliklerini kullanmak istedim, öne çıkan veya yeni ürünleri gösterebilmek için mağaza modülünü eklemek istedim (daha sonra tema özelleştiricinin mağaza modülünü kullanarak ilgili ürünleri göstermenize nasıl izin verdiğini göreceğiz) ve paralaks arka planlarından yararlanmak için bazı özel görseller oluşturun.

İşte resimler, metin ve mağaza modülünün bulunduğu düzen. Paralaks arka planı için %90 opaklığa sahip beyaz bir kaplama oluşturdum. Bu, sağ kenar çubuğunu kullanır. Divi Commerce'in tema özelleştiricideki özelliklerini kullanarak bu konuda birkaç ilginç ayarlama yapacağız.

Örnek 2

İşte bir resim, üç metin sütunu, yan yana iki resim, başka bir resim ve mağaza modülünü çoklu sütun düzeninde kullanan başka bir örnek.

Sonuç, ürünle ilgili hikayeyi anlatan temiz bir düzendir. Bu sefer bir özelliği vurgulamak için resmin üzerine metin ekledim.

Tema özelleştiriciye eklenen Divi Commerce özelliklerini kullanarak mizanpajları daha da özelleştirebiliriz.

Divi Özelleştirici

WooCommerce ürün sayfaları, Divi Özelleştirici kullanılarak daha da özelleştirilebilir. Özelleştirici ayrıca WooCommerce formlarını ve giriş ekranını da değiştirecektir. Eklenti, tema özelleştiriciye aşağıdaki kategorilerle yeni bir sekme ekler:

• Bölümler
• Ürün Temelleri
• Gelişmiş seçenekler
• WooCommerce Formları Stili
• Giriş ve Kayıt Seçenekleri
• Sekmeler Özelleştirici

Bu, Divi Commerce'e birçok özelleştirme özelliği ekler. Özelleştirmeler tüm ürün sayfalarında geneldir, bu nedenle bir ürün sayfasının özelleştiricisinde değiştirdiğiniz şey her ürün sayfasını etkiler.

İşte özelleştirmelerin her birine bir bakış ve bunları kullanmanın bazı örnekleri.

Bölümler

Bölümler sekmesi 14 ayar içerir. Oluşturduğunuz düzenleri seçebilir (bunlar sayfalardır, böylece tek bir modülden tam sayfa düzenine kadar her şeyi kullanabilirsiniz) ve bunları özel bir üst ve alt olarak görüntüleyebilir, ilgili ürünleri görüntüleyebilirsiniz (mağaza modülünü kullanırken), varsayılan resim, varsayılan başlık, kırıntılar, varsayılan fiyat, varsayılan düğme, varsayılan miktar, sekmeler, ürün meta verileri ve sağdaki bilgileri görüntüler.

Bu örnekte (bu resimde alt tarafı göremeseniz de) özel bir üst ve alt yerleştirdim. Bunlar, içerik içindeki ekstra özel üstbilgi ve altbilgi alanları için iyi çalışır.

Ürün Temelleri

Ürün Temelleri sekmesinde, yazı tipi ve kenarlık boyutlarını, renkleri, ağırlıkları, dolguyu, vurgulu renkleri ve daha fazlasını ayarlamak için 39 ayar vardır. Burası, kısa ürün açıklamasını özelleştirebileceğiniz yerdir (yukarıdaki resimde görüldüğü gibi). Özelleştirmeler arasında arka plan rengi, kenarlık genişliği ve rengi, dolgu, başlık yazı tipi boyutu, ağırlık, büyük/küçük harf ve renk ve hatta ana görüntü kenarlık genişliği ve rengi bulunur.

Gelişmiş seçenekler

Gelişmiş Seçenekler , Mağaza, Mağaza Modülü ve Kategori sayfalarında Sepete Ekle düğmesini göstermenize veya gizlemenize izin veren 13 ayar içerir. Ödeme sayfasından ad, soyadı, şehir, notlar vb. alanları da kaldırabilirsiniz.

WooCommerce Formları Stili

WooCommerce Forms Style , WooCommerce formlarını şekillendirmek için araçlara sahiptir. Renk seçicilerden, açılır kutulardan renkleri seçerek, yazı tipi boyutlarını, kenarlık genişliğini, stili ve rengi, dolguyu, düğme renklerini, vurgulu renkleri vb. tanımlayarak veya alanlara bilgi girerek bunları stillendirin. 22 ayarı vardır.

Bu örnekte, forma ten rengi bir arka plan, 1 piksel genişliğinde siyah kenarlık ve kırmızı yer tutucu metin ile stil verdim. Ayrıca biraz dolgu ekledim ve Groove kenarlık stilini seçtim.

Giriş ve Kayıt Seçenekleri

Giriş ve Kayıt Seçeneklerinde form arka plan renkleri, bordür renkleri ve genişlikleri, yazı tipi renkleri ve boyutları vb. 23 ayar bulunmaktadır. Yukarıdaki resimde de göreceğiniz gibi bu ayarı diğerlerinden farklı yapmanız gerekecektir. Ayrıca, bunu okuduğunuzda mevcut olacak olan Hesap Kontrol Paneli için stil mevcuttur.

Giriş formunun gösterildiği giriş ekranını özelleştiremedim. Bunun için çıkış yapmam gerekecek ve çıkış yaparsam özelleştiriciyi kullanamam. Bu Divi Commerce veya Divi'nin hatası değil. Bu sadece WordPress'in çalışma şeklidir. Google Chrome'da gizli bir sayfayı açık tutarak hile yapabildim (böylece aynı anda hem giriş yapabilirim hem de giriş yapamıyorum), formu göstererek. Bir düzenleme yaptım, kaydettim ve değişiklikleri görmek için gizli sayfayı yeniden yükledim.

Formlarda yapılan ayarlamaların nasıl göründüğünü yukarıdaki iki görselde görebilirsiniz. Bu bir WooCommerce sayfası olduğundan, Divi Builder'ı kullanarak biçimlendirebilir ve formları eşleşecek şekilde biçimlendirmek için bu özelleştirme aracını kullanabilirsiniz.

Sekmeler Özelleştirici

Sekmeler Özelleştirici 16 kontrole sahiptir ve bence en ilginç özelliklerden bazıları. Burada sekmelerin renklerini ve yazı tiplerini ayarlayabilirsiniz. En sevdiğim özellik, açıklama alanını tam genişlikte yapabilirsiniz, böylece içerik alanını doldurur ve kenar çubuğu kullanan bir düzende bile size tam genişlikte bir açıklama verir. Ayrıca kenar boşluklarını ve dolguyu ayarlayabilir, başlığı gizleyebilir veya başlıktan dolguyu kaldırabilirsiniz.

Yukarıdaki örnekte, açıklamayı tam genişlikte yaptım ve sekmelerin ve yazı tiplerinin renklerini özelleştirdim.

Örnekler

Özelleştiricide bazı ayarlamalar yaptıktan sonra orijinal örneklerimin her birine bir göz atın.

Bu, özel üst ve alt düzenleri kullanır. Üst kısım, metin modülüne sahip bir bölümdeki bir görüntüyü kullanır. Alt kısım, stil sahibi bir arka plana sahip bir mağaza modülüdür. Mağaza modülünde ilgili ürünleri göstermek için özelleştiriciyi kullandım. Sekmeleri de Elegant Themes markasına uyacak şekilde şekillendirdim. Bu, tam ekran düzeni kullanır. Bu sayfa bir WooCommerce ürün sayfasına neredeyse hiç benzemiyor.

İşte özel üst ve alt bölümlerin eklendiği orijinal örneklerden biri. Ayrıca, özelleştirilmiş sekmeleri gösterir ve WooCommerce Shop modülünde ilgili ürünlere sahiptir.

Özelleştiricide açıklama alanını tam genişliğe ayarladım. Daha önce yaptığım paralaks sayfası daha fazla yerleşim olanağı sağladı, bu yüzden ilk resmi ve metni yan yana yerleştirdim ve istediğim aralığı elde etmek için biraz dolgu ekledim. Bunu görsel olarak orijinalinden daha ilginç buluyorum.

Güncellemeler, Belgeler, Lisans ve Destek

Divi Commerce, ömür boyu ücretsiz güncellemeler içerir. Güncellemeler, eklenti kontrol paneli ekranından otomatik olarak yapılır.

Belgeler web sitelerinde sağlanır ve kurulum, eklentinin nasıl kullanılacağı (bir video eğitimi içerir), kısa bir SSS, değişiklik günlüğü, çözümlerle ilgili bilinen sorunların listesi ve satış öncesi veya genel sorular için bir iletişim formunu kapsar. Yakında, ürün sayfalarınızda kullanabileceğiniz indirilebilir düzenlere sahip olacaklar.

Lisans sözleşmesi, eklentinin siz ve müşterileriniz için sınırsız web sitesinde kullanılmasına izin verir.

Ömür boyu destek e-posta yoluyla sağlanır. Destek istemeden önce belgeleri okumanızı istiyorlar.

Son düşünceler

Divi, WooCommerce ile kullanmak için harika bir temadır ancak standart ürün sayfaları, hesap formları ve giriş formları Divi ile kutudan çıkar çıkmaz özelleştirilemez. Divi Commerce, Divi Builder'ı ürün sayfalarına yerleştirerek ve Tema Özelleştirici'ye birkaç yeni sekme ekleyerek bu sorunu çözer.

Divi Commerce'in kullanımı kolaydır. Özelleştirici seçenekleri iyi bir şekilde etiketlenmiştir ve standart Divi özelleştiriciyi kullanmanın dışında herhangi bir özel bilgi gerektirmez. Dilerseniz belgeleri mevcuttur. Divi Commerce, WooCommerce ürün sayfalarınızı ve formlarınızı markanıza uyacak şekilde biçimlendirmek için mükemmel bir araçtır.

Divi Commerce'i kullandınız mı? Aşağıdaki yorumlarda deneyiminizi bize bildirin!

Studio_G / Shutterstock.com'dan görüntü.