FinansSağlıkSpor

Divi Ürün Sayfası Şablonunuz için Gerekli Öğelere Genel Bakış

Her e-ticaret ürün sayfasının düzgün çalışması için bazı temel unsurlara ihtiyacı vardır. Mükemmel ürün sayfası tasarımı, hem temel hem de gerekli olmayan unsurları içerir. Bu makalede, neleri eklemeniz gerektiğini anlamanıza yardımcı olmak için Divi ürün sayfası şablonunuz için gerekli öğelere ilişkin bir genel bakış göreceğiz. Ayrıca destekleyici unsurları ve bunların hepsini Divi Builder ile nasıl ekleyeceğinizi göreceğiz.

Başlayalım.

WooCommerce’in e-Ticaret Web Sitelerine Yaklaşımı

İlk olarak, WooCommerce’in e-Ticaret web sitelerine yaklaşımını tartışalım. WooCommerce, ürünler hakkında çeşitli bilgi türleri sunan özel bir gönderi türü oluşturur. Buna ürün resimleri, açıklamalar, fiyatlar, satış bilgileri, sepete ekle düğmeleri ve daha fazlası dahildir. Her ürün ilanı basit bir düzenleyici ile oluşturulur.

WooCommerce'in e-Ticaret Web Sitelerine Yaklaşımı

Bunlar, WooCommerce ürün gönderi türünün ayrı öğeleridir. Başlık, görseller, açıklama ve fiyat gibi dinamik öğeler ürün düzenleyicideki alanlarına eklenir. WooCommerce gönderi türü, bunları ön uçta görüntüler. Divi gibi inşaatçılar, ilginç düzenler oluşturmak için bu öğeleri ayrı ayrı kullanabilir.

Divi ile WooCommerce

Divi ile WooCommerce

WooCommerce’i etkinleştirdiyseniz, Divi Builder’a eklenmiş 25 WooCommerce modülünü göreceksiniz. Bu modüller, WooCommerce öğelerini Divi düzenlerinizin herhangi bir yerinde sunmanıza olanak tanır. Otomatik olarak dinamiktirler, bu nedenle belirli ürüne ilişkin bilgileri gösterirler.

Harika ürün sayfaları oluşturmak için bunları normal Divi modülleriyle kullanabiliriz. Bu modüllerden bazıları ürün sayfasının çalışması için gereklidir, bazıları ise ekstra özellikler sağlar.

Divi Builder’da 25 farklı WooCommerce modülüne erişimimiz olsa da, ürün sayfasını çalışır hale getirmek için bu öğelerden hangilerinin gerekli olduğunu ve hangilerinin destekleyici özellikler oluşturduğunu anlamamız gerekir.

Bunu anlamaya yardımcı olmak için modülleri nasıl kullandığını görmek için bir Divi Ürün sayfası şablonuna bakacağız. Bu örnekler için Divi’nin Giyim Mağazası Düzen Paketi için Ücretsiz Ürün Sayfası Şablonunu kullanıyorum.

WooCommerce Modül Hiyerarşisi ve Ürün Sayfası Tasarımı

İyi tasarlanmış bir ürün sayfası, gerekli unsurları bir arada tutacak ve sayfanın ana odak noktası olacaktır. Bu, sayfa tasarımı için bir hiyerarşi oluşturur. Bu hiyerarşi, kullanıcıya ürün hakkında ihtiyaç duyduğu bilgileri sağlar ve kullanıcıyı satın alma sürecinde yönlendirmeye yardımcı olur. Bunu görmek için bir sayfa düzenine bakalım.

WooCommerce Modül Hiyerarşisi ve Ürün Sayfası Tasarımı

İşte örneğimden tam ürün sayfası tasarımı. Bu, hem temel hem de temel olmayan unsurları içerir. Bu düzen bir üst bölüm, başlık ve destekleyici bölümler içerir.

Genel olarak, temel öğeler sayfanın en üstündedir ve üst bölüm ve başlık bölümünü içerir. Esansiyel olmayan unsurlar, zaruri unsurların altında en altta yer alır. Ana unsurları desteklemeye ve satışları veya diğer CTA’ları teşvik etmeye yardımcı olurlar.

Temel Ürün Sayfası Öğeleri

Şimdi, temel ürün sayfası öğelerine daha yakından bakalım. Bunların ne olduğunu, neden ihtiyaç duyduğumuzu ve bunları Divi ürün sayfası düzenlerimize nasıl ekleyeceğimizi göreceğiz.

Üst Bölüm

Üst Bölüm

Sayfanın en üstünden başlayacağız. Giyim Mağazası Ürün Sayfasının üst kısmı Woo Breadcrumbs ve Woo Notice modüllerini içerir.

Üst Bölüm

İşte ön uçta nasıl göründükleri. Bu örnekte, ekranın üst kısmında kendi bölümlerine yerleştirilmiştir. Ürün sayfası onlarsız çalışacaktır. Ancak bu önemli bir bilgidir ve burası kullanıcıların onları görmeyi bekleyecekleri konumdur.

ekmek kırıntıları – ziyaretçiye navigasyon yapısında nerede olduklarını gösterir. Ekmek kırıntıları gezinme için mükemmeldir. Sayfa onsuz iyi çalışır, ancak içerik kırıntıları mevcut kategoriyi tanımlamak için harikadır.

Woo Bildirimi – sepete bir ürünün eklendiğini gösterir. Bu, kullanıcıya, sayfanın tıklamalarına yanıt verdiğine dair geri bildirim sağlar. Ayrıca sepete bir bağlantı sağlar.

Başlık Bölümü

Başlık Bölümü

Sonraki, ürün sayfası düzenindeki başlık bölümüdür. Bu, ürün sayfasının ana bölümüdür ve sayfanın düzgün ve sorunsuz çalışması için gerekli tüm unsurları içerir.

Başlık Bölümü

İşte ön uçtaki sayfa tasarımına bir bakış. Vurguladığım kısım, temel unsurlardır. Bu öğeler ürün sayfasının çalışmasını sağlar.

Öğeler şunları içerir:

Ürün Adı – bu, ürünün başlığını gösterir.

Woo Ürün Metası – bu modül, ürünle ilgili meta verileri gösterir. Hangi meta veri öğelerinin görüntüleneceğini seçebilirsiniz.

Woo Ürün Resimleri – bu, ürünün tüm galeri resimlerini gösterir. Ürün indirimdeyse bir indirim rozeti ekler.

Woo Ürün Açıklaması – bu ürün açıklamasıdır. Kısa veya uzun açıklamalar arasında seçim yapabilirsiniz.

Woo Ürün Fiyatı – bu, ürünün mevcut fiyatını gösterir. Ayrıca indirimdeyse orijinal fiyatını da gösterir.

Woo Ürün Stoku – bu modül, stokta bulunan stok sayısını gösterir.

Woo Ürün Sepete Ekle – ürünü sepete ekleyen butondur.

Ürün Açıklaması

Ürün Açıklaması

Ürün açıklaması, ürünle ilgili bilgileri genişletir. Sayfanın çalışması için bu gerekli değildir. Bunun yerine, ürün satışını destekler ve kullanıcılar bu bilgiyi görmeyi bekleyecektir. Genel olarak, ekleyebileceğiniz daha fazla bilgi, daha iyi.

Ürün Açıklaması

İşte önden nasıl göründüğü. Açıklama alanını vurguladım.

Şununla oluşturulur:

Ürün Adı – bu, başlık bölümündekiyle aynı ürün başlığıdır, ancak sayfa hiyerarşisindeki konumuna uyması için farklı bir tarza sahiptir.

Woo Ürün Açıklaması – uzun veya kısa açıklamayı göstermeyi seçin. Başlık bölümünde kısa açıklamayı ve açıklama bölümünde uzun açıklamayı seçmek genellikle idealdir. Bu, bilgileri genişletmenizi sağlar.

Woo Ürün Bilgileri – bu, ürünle ilgili ek bilgileri gösterir.

Ayrıca başlıklar oluşturmak için birkaç metin modülü içerir.

İsteğe Bağlı Ürün Sayfası Öğeleri

İsteğe Bağlı Ürün Sayfası Öğeleri

Ardından, isteğe bağlı ürün sayfası öğelerine bakacağız. Satışları artıran ürün sayfasına ekleyebileceğiniz birçok WooCommerce öğesi vardır. Bazıları WooCommerce modülleriyle, diğerleri ise standart Divi modülleriyle yapılır. Bu bölümler isteğe bağlıdır, ancak eklenmesi iyidir. Bunları, yukarıdaki resimde vurguladığım gibi, örnek düzenimizdeki en önemli öğelerin altında görüyoruz.

İçerirler:

Woo Ürün Değerlendirmesi – bu, kullanıcıların ürünü derecelendirdiği yıldız derecelendirmelerini gösterir. Bazen temel öğelerin içine veya referansların yanına eklenir.

Woo ile İlgili Ürünler – bu, ilgili ürünlerin bir listesini gösterir. Görüntülenen ürünlerin türlerini ve sayısını seçebilirsiniz. Kategorileri, sıralamayı, sütun sayısını ve görüntülediği öğeleri seçin.

Mağaza Kategorileri – çeşitli mağaza kategorilerine bağlantılar genellikle resimler ve metin modülleri ile oluşturulur. Kullanıcıyı mağazanın favori alanlarına yönlendiren CTA’lar olarak çalışırlar.

Woo Ürün İncelemeleri – bu, kullanıcının bir inceleme yazabileceği bir alana sahip bir inceleme seçeneği ekler. Ayrıca diğer kullanıcıların yazdığı yorumları da gösterir. Bir yıldız derecelendirmesi göstermesini sağlayabilirsiniz.

referanslar – bunlar, kullanıcıların e-posta veya başka yollarla gönderdikleri referanslardır. Genellikle referans modülleri, kaydırıcılar, metin modülleri vb. ile oluşturulurlar.

CTA – CTA modülleri, tanıtım yazıları, resimler, metin, düğmeler ve daha fazlasıyla harekete geçirici mesajlar oluşturulur. Bir indirimi, yeni bir ürünü, yaklaşan bir etkinliği vb. sergilemek için harikadırlar.

E-posta Seçeneği – bunlar e-posta tercih modülleriyle oluşturulur ve haber bülteni listenizi oluşturmak için idealdir.

Sosyal Takip – Sosyal medya takip modülü ile sosyal ikonlar eklenir. Sosyal takiplerinizi oluşturmanın harika bir yolu.

Modül Örnekleri

İsteğe Bağlı Ürün Sayfası Öğeleri

Bu örnek, ilgili ürünler ve incelemeler içeren bölümleri gösterir. WooCommerce modülleri ve resimler ve metin dahil olmak üzere birkaç destekleyici modül ile oluşturulurlar.

İsteğe Bağlı Ürün Sayfası Öğeleri

Bu bölümler referansları ve harekete geçirici mesajı içerir. Görüşler bir resim ve bir kaydırıcı ile oluşturulur. CTA, metin modülleri ve bir düğme ile oluşturulmuştur. Bu aynı zamanda bir e-posta seçeneği içerir.

Ürün Sayfası Şablonunuza Woo Modülleri Nasıl Eklenir

Ürün Sayfası Şablonunuza Woo Modülleri Nasıl Eklenir

Şuraya giderek bir ürün sayfası şablonu oluşturun veya yükleyin: 2 > Tema Oluşturucu WordPress kontrol panelinde. Yüklemek için seçin taşınabilirlik, Seç İçe aktarmak, gezinmek JSON dosyanıza tıklayın ve Divi Tema Oluşturucu Şablonlarını İçe Aktarın.

Ürün Sayfası Şablonunuza Woo Modülleri Nasıl Eklenir

Bir gövde şablonu oluşturup onu atayarak bir şablon oluşturun. Tüm ürünler. Seçmek Özel Gövde Oluştur ve modüllerinizi ekleyin.

Ürün Sayfası Şablonunuza Woo Modülleri Nasıl Eklenir

Modüllerin kullanılabilir olması için WooCommerce’i etkinleştirdiğinizden emin olun. WooCommerce modüllerinizi eklemek için koyu gri artı simgesine tıklayın ve arama alanında “woo” arayın. Kullanılabilir tüm WooCommerce modüllerini göreceksiniz.

Ücretsiz Ürün Sayfası Şablonlarını Nereden Alabilirsiniz?

Ücretsiz Ürün Sayfası Şablonlarını Nereden Alabilirsiniz?

Elegant Themes, çevrimiçi mağazalar için Divi düzen paketleri tasarımı için ücretsiz ürün sayfası şablonları sağlar. Ücretsiz ürün sayfası şablonlarını Elegant Themes blogunda bulabilirsiniz. Blogda “ücretsiz ürün şablonu” veya benzer anahtar kelimeler arayın. Şablon dosyalarınızı indirin ve açın.

Biten Düşünceler

Divi ürün sayfası şablonunuz için gerekli öğelere genel bakışımız budur. Hangilerinin zorunlu, hangilerinin isteğe bağlı olduğunu görmek kolaydır. Her zaman temel öğeleri bir arada tutun ve sayfanın ana odak noktası olduklarından emin olun. Bu yönergeleri izlemek, Divi ile harika ürün sayfası şablonları tasarlamanıza yardımcı olacaktır.

Senden duymak istiyoruz. Bu gerekli öğelerle WooCommerce ürün sayfaları oluşturdunuz mu? Yorumlarda deneyiminizi bize bildirin.

Letters-Shmetters / Shutterstock.com aracılığıyla Öne Çıkan Görsel

function et_third_party_scripts() {
// Facebook
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version=’2.0′;n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,’script’,’https://connect.facebook.net/en_US/fbevents.js’);
fbq(‘init’, ‘967149496645973’);
fbq(‘track’, “PageView”);

// Google
var et_first_script = document.getElementsByTagName( ‘script’ )[ 0 ];
var et_new_script = document.createElement( ‘script’ );
et_new_script.src=”https://www.googletagmanager.com/gtag/js?id=AW-1006729916″;
et_new_script.setAttribute(‘async’, ‘true’);
et_first_script.parentNode.insertBefore( et_new_script, et_first_script );
window.onload = function(){
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());

gtag(‘config’, ‘AW-1006729916′);
};

// Twitter
!function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments);
},s.version=’1.1′,s.queue=[],u=t.createElement(n),u.async=!0,u.src=”https://static.ads-twitter.com/uwt.js”,
a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,’script’);
twq(‘init’,’o0xq6′);
twq(‘track’,’PageView’);

// Microsoft
(function(w,d,t,r,u){var f,n,i;
w[u]=w[u]||[],f=function(){var o={ti:”137019739″};
o.q=w[u],w[u]=new UET(o),w[u].push(“pageLoad”)},n=d.createElement
s&&s!==”loaded”&&s!==”complete”||(f(),n.onload=n.onreadystatechange=null)},i=d.getElementsByTagName

// Reddit
!function(w,d){if(!w.rdt){var p=w.rdt=function(){p.sendEvent?p.sendEvent.apply(p,arguments):p.callQueue.push(arguments)};p.callQueue=[];var t=d.createElement(“script”);t.src=”https://www.redditstatic.com/ads/pixel.js”,t.async=!0;var s=d.getElementsByTagName(“script”)[0];s.parentNode.insertBefore(t,s)}}(window,document);rdt(‘init’,’t2_7v0jxedd’);rdt(‘track’, ‘PageVisit’);

// LinkedIn
_linkedin_partner_id = “3661436”;
window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
window._linkedin_data_partner_ids.push(_linkedin_partner_id);
(function(l) {
if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])};
window.lintrk.q=[]}
var s = document.getElementsByTagName(“script”)[0];
var b = document.createElement(“script”);
b.type = “text/javascript”;b.async = true;
b.src = “https://snap.licdn.com/li.lms-analytics/insight.min.js”;
s.parentNode.insertBefore(b, s);})(window.lintrk);

// Quora
!function(q,e,v,n,t,s){if(q.qp) return; n=q.qp=function(){n.qp?n.qp.apply(n,arguments):n.queue.push(arguments);}; n.queue=[];t=document.createElement(e);t.async=!0;t.src=v; s=document.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s);}(window, ‘script’, ‘https://a.quora.com/qevents.js’);
qp(‘init’, ‘269de845c3d245e6b9286d6522cd81c0’);
qp(‘track’, ‘ViewContent’);

// Pinterest
!function(e){if(!window.pintrk){window.pintrk = function () {
window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var
n=window.pintrk;n.queue=[],n.version=”3.0″;var
t=document.createElement(“script”);t.async=!0,t.src=e;var
r=document.getElementsByTagName(“script”)[0];
r.parentNode.insertBefore(t,r)}}(“https://s.pinimg.com/ct/core.js”);
pintrk(‘load’, ‘2613603455357’, {em: ”});
pintrk(‘page’);

// Yahoo
(function(w,d,t,r,u){w[u]=w[u]||[];w[u].push({‘projectId’:’10000′,’properties’:{‘pixelId’:’10175636′,’userEmail’: ”}});var s=d.createElement

// Outbrain
!function(_window, _document) {
var OB_ADV_ID = ‘0033bb546ef38e2da393ff024b77ae96f3’;
if (_window.obApi) {
var toArray = function(object) {
return Object.prototype.toString.call(object) === ‘[object Array]’ ? object : [object];
};
_window.obApi.marketerId = toArray(_window.obApi.marketerId).concat(toArray(OB_ADV_ID));
return;
}
var api = _window.obApi = function() {
api.dispatch ? api.dispatch.apply(api, arguments) : api.queue.push(arguments);
};
api.version = ‘1.1’;
api.loaded = true;
api.marketerId = OB_ADV_ID;
api.queue = [];
var tag = _document.createElement(‘script’);
tag.async = true;
tag.src=”https://amplify.outbrain.com/cp/obtp.js”;
tag.type=”text/javascript”;
var script = _document.getElementsByTagName(‘script’)[0];
script.parentNode.insertBefore(tag, script);
}(window, document);
obApi(‘track’, ‘PAGE_VIEW’);

// ClickCease
var script = document.createElement(‘script’);
script.async = true; script.type=”text/javascript”;
var target=”https://www.clickcease.com/monitor/stat.js”;
script.src = target;var elem = document.head;elem.appendChild(script);

}

Mehmet Küllü

https://www.indirgit.com

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu