Divi Eklenti Vurguları – Divi Commerce
WooCommerce ve Divi birlikte iyi oynadı. Divi mağaza modülü, divi düzeninizde WooCommerce ürünlerini görüntüler ve sitenize iyi uyacak şekilde düzenleyebilirsiniz. Bununla birlikte, Divi bireysel ürünlerin, formların veya gelen ekranların sayfalarını düzenlemez. Bu, ürün sayfalarının stilini web sitenizin geri kalanına uyacak şekilde karmaşıklaştırabilir. WooCommerce ürün sayfanıza Divi Builder ekleyen ve hatta tema ayarına yeni özellikler ekleyen Divi Commerce – Eklentisi Bolt temalarından eklenti. Bu makalede Divi Ticareti göreceğiz ve birkaç sayfa üründen önce ve sonra karşılaştıracağız. İlk olarak, standart WooCommerce ürün sayfasına bakalım.
Standart WooCommerce Ürün Sayfası
Bu, zarif temalar web sitesindeki Divi ürün sayfasının bir parçasıdır. Bu sayfayı ürün açıklamasında yeniden oluşturmak istiyorum. Yalnızca başlıklar, üç resim ve üç metin seti vardır. Görüntü metnin yanına yerleştirilir ve dönüşümlü olarak iki sütun yapar. Bu düzen yapmak yeterince kolay olmalıdır. Bu, standart WordPress düzenleyicisindeki içeriktir. Metni koydum, başlığı başlık 3’e ayarladım ve görüntüyü sağa veya sola ayarladım. Bu, tam geniş düzen kullanmanın sonucudur. Sonuçlar istediğim şeye uygun değil. Tabii ki nedenini biliyoruz. Sadece WYSIWYG editörüne boşluk yerleştirmek istediğim düzeni yapmayacak. Mesafeyi doğru ayarlamak için bir düzen yapmak için HTML veya eklenti kullanmam gerekiyor. HTML boşlukları olmadan kabus olur. Ekstra alan yerleştirmek bile yardımcı olmaz. HTML ile bu düzeni kolayca yapabilirim ve hatta kodu istediğim sıklıkta yeniden kullanılmak üzere kopyalayıp ekleyebilirim, ancak bu sıkıcı olabilir ve daha karmaşık bir düzen bile zaman alabilir. İkinci örnek için ikinci örnek Divi tema ürün sayfasından böyle bir düzen kullanmak istiyorum. Bu kod olmadan yapmak çok daha zordur. Ortada GIF olan üç sütunun düzenini kullanır. Kodun her bir bölümünün kendi başlığı vardır ve metin resme paralel değildir.
Bununla zaten problemler görebilirsiniz. Kimse düzgün hizalamak istemez. Görüntüyü metne paralel olarak sola ayarladım, ancak sonra metni sağa yerleştiremedim. Hizalamaya ayarladım ve görüntüleri metinle aynı satıra koyamadım. Bu daha fazla kod gerektirecektir. Kalan metin ve görüntüleri eklemeyi tamamlamaya bile zahmet etmiyorum. Bu, bilgi ve görüntüleri biriktirmek istiyorsanız, çeşitli şeyleri hareket ettirmek ve bunları doğru bir şekilde uyumlu hale getirmek istiyorsanız düzgün çalışacaktır, gerçekten üç sütuna ihtiyacım var. Birkaç seçeneğim var: HTML’deki sütunu elle kodlayabilirim veya bir eklenti kullanabilirim. Bir kez daha, bu düzen HTML’de yapmak çok zor olmayacak, ancak daha kolay, daha hızlı bir yol ve bence çok daha iyi, Divi Builder kullanmak. Divi Builder’ın daha fazla avantajı vardır, çünkü kolayca bir düzen oluşturmamızı ve masaüstü bilgisayarlar, tabletler ve cep telefonları için bağımsız olarak değiştirmemizi sağlar. Sorun, Divi Builder’ın WooCommerce ürün sayfasında bulunmaması, ancak eklenebileceğidir. Eklemenin en kolay yolu Divi Commerce adlı bir eklentidir. Şimdi divi ticaretini yükleyelim ve divi builder.divi commerce kullanarak ürün sayfasını yeniden inşa edelim Herhangi bir eklenti gibi zip dosyalarını yükleyerek divi ticaretini yükleyin. Kurulduktan sonra hiçbir ayar gerekmez. Divi Commerce, diğer sayfalar veya yayınlar gibi WooCommerce ürün sayfasına Divi Builder ekler. Bu bir ürün açıklaması yapan bir alandır. Bu, standart WordPress editörünün yanı sıra sayfalar ve yayınların yerine kullanılabilir. Şimdi WooCommerce ürünlerinin açıklamasında her modülle birlikte Divi Builder’ı kullanabiliriz.
Yapmak istediğim ürünün birkaç sayfası tam bir ekran olacak. Tam ekran ürün sayfası oluşturmak için, bir divi üreticisi kullanmayı seçmeden önce Divi ürün ayarlarında tam geniş bir sayfa düzeni seçin.
Önceki örneğime tekrar bakalım ve divi ticaretini ne kadar kolay kullandıklarını görelim. İlk örnek Divi Builder’ı kullanarak, metin ve görüntü modüllerini kullanarak iki sütunda dönüşümlü olarak yatay olarak hızlı bir metin ve görüntü düzeni yaptım ve her modüle görüntü ve metin ekledim. Görüntünün ortasına metin seviyesini odaklamak için metne 100 piksel kenar boşluğunu ekledim. Yaptığım tek değişiklik bu. İlk deneyin sonuçlarından tam ekran görüntülerini takip ediyor. Sonuçlardan memnunum. Orijinal düzene oldukça yakın, bu yüzden modifikasyona gerek yok. İkinci örnek
İkinci örnek için Divi Builder’da hızlı bir 3 sütunlu düzen yaptım. Başlığın başlığı için 3 sütun düzeni seçtim (1/4 1/2 1/4 kullanarak) ve 50 piksel dolgu ayarladım. Daha sonra ikinci satırı ekledim ve 1/3 1/3 1/3 kullandım ve orta sütun için metin modülünü dış sütuna ve görüntü modülüne ekledim. Benim tarafımdaki tüm metin için 30 piksel dolguyu sağa ve sola ve üst kısım için marj 20 ayarlayın. Hattı istediğim gibi ayarladıktan sonra, üç kez klonladım ve her modüle içerik ekledim. Sonuç, ilk deneyde keyif aldığım düzendir. Bunu tam genişliğe ayarladım. CSS veya eklentiler kullanarak görüntü gölgeleri ekleyebilirim ve metnin boyutunda ayarlamalar yapabilirim, ancak orijinal düzen kavramı oradadır. Çok fazla ayarlamaya bile gerek yok. Sadece iki dakika içinde HTML’de yapmam için daha uzun sürecek olan Divi Builder ile bir düzen yaptım ve bu düzeni yeniden kullanılmak veya dağıtmak için kütüphaneme ekleyebilirim. Özel bir ürün sayfası oluşturun
Sonra birkaç özel sayfa yapmak istiyorum. Bu ilk özel ürün sayfası için, Divi Oluşturucu Düzeni özelliğini kullanmak istiyorum, üstün veya yeni ürünler görüntüleyebilmem için bir mağaza modülü ekleyin (daha sonra tema tanıklıklarının, mağaza modülünü kullanarak ilgili ürünleri nasıl göstermenize izin verdiğini göreceğiz) ve paralakın arka planını kullanmak için bazı özel görseller oluşturun. Resimler, metin ve mağaza modülleri ile düzeni takip edin. Paralaksın arka planı için%90 opaklık ile beyaz bir bindirme yaptım. Bu doğru kenar çubuğunu kullanır. Tema ayarındaki Divi Ticaret özelliğini kullanarak bunun için bazı ilginç ayarlamalar yapacağız. Örnek 2 Görüntüler, üç metin sütunu, iki yan yana, diğer görüntüleri ve birkaç sütun düzeninde modülleri kullanan diğer örnekler. Sonuç, ürünün hikayesini anlatan temiz bir düzendir. Bu kez bir özelliği vurgulamak için resmin üzerindeki metni ekledim. Tema ayarına eklenen Divi Ticaret özelliğini kullanarak düzeni daha fazla ayarlayabiliriz. WooCommerce ürün sayfası ayarlamaları Divi özelleştirici kullanılarak daha da özelleştirilebilir. Ayarlama ayrıca WooCommerce formunu ve giriş ekranını değiştirecektir. Eklenti, kategori ile tema ayarına yeni bir sekme ekledi:
Bölüm Ürün Temelleri Gelişmiş seçenek Woocommerce form stili Giriş ve Liste Seçenekleri
Sekme Ayarı
Bu, Divi Ticaretine birçok ayar özelliği ekler. Ayarlamalar tüm ürün sayfaları için küreseldir, bu nedenle ürün sayfaları için ayarlamada değiştiğiniz şey her ürün sayfasını etkiler. Aşağıdakiler her ayarın görüntülenmesi ve kullanımlarının bazı örnekleridir. Bölümün kısmı 14 ayar içerir. Oluşturduğunuz düzeni seçebilirsiniz (bu bir sayfadır, böylece bir modülden tam sayfa düzenine kadar her şeyi kullanabilirsiniz) ve özel bir üst ve alt olarak görüntüleyebilir, ilgili ürünleri (bir mağaza modülü kullanırken) görüntüleyebilirsiniz, Varsayılan görüntüler, varsayılan başlıklar, ekmek kırıntıları, varsayılan fiyatlar, varsayılan düğmeler, varsayılan miktarlar, sekmeler, ürün verileri meta ve sağdaki görüntüler. Bu örnekte üst ve alt özel (bu resimde altını göremeseniz bile) özel yerleştirdim. Bu, içerikteki ek özel başlık ve altbilgi alanları için iyi çalışır. Ürün Temelleri
Ürün Temelleri sekmesinde yazı tipi ve sınır, renk, ağırlık, dolgu, havada uçma rengi ve diğerlerinin boyutunu ayarlamak için 39 ayar vardır. Bu, kısa bir ürünün açıklamasını ayarlayabileceğiniz yerdir (yukarıdaki resimde gösterildiği gibi). Ayarlamalar arka plan rengi, sınırın genişliği ve rengi, dolgu, yazı tipi boyutu, ağırlık, büyük ve renk ve hatta ana görüntü sınırının genişliği ve rengini içerir. Gelişmiş seçenek
Gelişmiş seçenek, Mağaza sayfasındaki sepete, mağaza modülünü ve kategorisine ekle düğmesini görüntülemenize veya gizlemenize olanak tanıyan 13 ayar içerir. Ayrıca Checkut sayfasından ad, soyadı, şehir, notlar vb. Gibi alanları da silebilirsiniz. Woocommerce form stili
WooCommerce Forms Style, WooCommerce formunu düzenlemek için bir araca sahiptir. Renklerin boyutunu belirleyerek, sınır genişliği, stil ve renk, dolgu, düğme rengi, gelişim rengi vb., Renk seçmenlerinden, açılır kutulardan veya alanlara bilgi girerek stilleri. Bunun 22 ayarlaması var. Bu örnekte kahverengi bir arka plana sahip bir form, 1 piksel genişliğe sahip siyah bir sınır ve kırmızı bir yer tutucu metni düzenledim. Ayrıca biraz dolgu ekledim ve oluk sınır stilini seçtim. Giriş ve Liste Seçenekleri Giriş ve Liste, form, renk ve genişlik, renk ve yazı tipi boyutunun arka plan rengi için 23 ayara sahiptir. Yukarıdaki resimde görebileceğiniz gibi, bu ayarlamayı diğerlerinden farklı hale getirmelisiniz. Hesap panosu için bunu okuduğunuzda kullanılabilecek bir stil de mevcuttur.
Giriş ekranını görüntülenen formla ayarlayamıyorum. Bunun için dışarı çıkmalıyım ve eğer dışarı çıkarsam ayarlamaları kullanamıyorum. Bu divi ticareti veya divi hatası değildir. WordPress böyle çalışır. Bir form göstererek Google Chrome’da kılık değiştirmiş sayfanın açılmasına izin vererek bile aldatabilirim (böylece aynı anda girip giremiyorum). Değişiklikleri görmek için ayarlamalar yapıyorum, kaydediyorum ve kılık değiştirme sayfalarını yeniden içeriyorum. Yukarıdaki iki görüntüde, formda ayarlamaların nasıl görülebileceğini görebilirsiniz. Bu WooCommerce sayfası olduğundan, Divi Builder’ı kullanarak düzenleyebilir ve formu uygun olacak şekilde düzenlemek için bu ayar aracını kullanabilirsiniz. Sekme Ayarı
Sekmeler özelleştirici 16 denetime sahiptir ve bence en ilginç özelliklerden bazılarıdır. Burada renk ve sekme yazı tipini ayarlayabilirsiniz. En sevdiğim özellik, içerik alanını dolduracak şekilde tam genişliğe sahip bir açıklama alanı oluşturabilmeniz ve yan çubuğu kullanan düzende bile tam genişlik açıklaması verebilmenizdir. Ayrıca marjı ve dolguyu ayarlayabilir, başlığı gizleyebilir veya üstbilgiden dolguyu silebilirsiniz. Yukarıdaki örnekte tam genişlik açıklaması yaptım ve sekmeler ve yazı tipleri için rengi ayarladım. Aşağıdaki örnek, ayarlamada bazı ayarlamalar yaptıktan sonra orijinal örneklerimin her birinin görüntülenmesidir. Üst kısım, bir metin modülüne sahip bir görüntü kullanır. Alt, şık bir arka plana sahip bir mağaza modülüdür. Mağaza modülünde ilgili ürünleri görüntülemek için ayarlamalar kullandım. Ayrıca sekmeyi zarif temaların markasına uyacak şekilde ayarladım. Bu tam ekran düzeni kullanır. Bu sayfa neredeyse bir WooCommerce ürün sayfasına benzemiyor. İşte özel eklenmenin üst ve alt kısmı olan bir orijinal örnek. Ayrıca, WooCommerce Shop modülünde ayarlanmış ve ilgili ürünlere sahip bir sekme gösterir. Açıklamada açıklama alanını tam genişliğe ayarladım. Daha önce yaptığım paralaks sayfası daha fazla düzen fırsatı verdi, bu yüzden ilk resmi ve metni yan yana yerleştirdim ve istediğim mesafeyi elde etmek için biraz dolgu ekledim. Bunu orijinalinden daha görsel olarak daha ilginç buldum. Divi ticaretinin yenilenmesi, belgeleri, lisansı ve desteği yaşam için ücretsiz güncellemeler içerir. Reform, eklenti gösterge paneli ekranından otomatik olarak gerçekleştirilir. Dokümantasyon web sitelerinde verilmiştir ve kurulumlar, eklentilerin nasıl kullanılacağı (video öğreticileri dahil), kısa SSS, değişimoglar, çözümlerle ilgili bilinen sorunların bir listesi ve satış öncesi veya genel sorular için iletişim formlarını içerir. Hemen ürün sayfanızda kullanabileceğiniz bir indirme düzenine sahip olacaklar. Lisans Sözleşmesi, eklentilerin sizin ve müşterileriniz için sınırsız web sitelerinde kullanılmasına izin verir. Yaşam desteği e -posta yoluyla verilir. Destek istemeden önce belgeleri okumanızı istiyorlar. Divi’nin son zihni WooCommerce ile kullanmak için iyi bir temadır, ancak standart ürün sayfaları, hesap formları ve giriş formları kutunun dışında Divi’ye ayarlanamaz. Divi Commerce, Divi Builder’ı ürün sayfasına yerleştirerek ve tema ayarına birkaç yeni sekme ekleyerek bu sorunu çözer. Divi ticaretinin kullanımı kolaydır. Ayarlama seçeneği iyi etiketlenmiştir ve standart Divi ayarlarının kullanımı dışında herhangi bir özel bilgi gerektirmez. İsterseniz dokümantasyon mevcuttur.
