Elementor Kullanarak WooCommerce Mağaza Sayfaları Nasıl Oluşturulur

Yayınlanan: 2020-09-22

İlk ürün 1995 yılında Amazon'da çevrimiçi olarak sipariş edildi - “Akışkan Kavramları ve Yaratıcı Analojiler” kitabı.

Yaklaşık 25 yıl sonra, e-Ticaret endüstrisi yaklaşık 3,5 trilyon ABD doları satış yaptı ve 2021 yılına kadar dünya çapında 4,9 trilyon ABD dolarına ulaşması bekleniyor.

Bu nedenle, henüz e-ticaret web sitenizi başlatmadıysanız, başlamak için en iyi zaman. Uygun araçlar ve doğru kurulumla, ilk çevrimiçi mağazanızı sıfırdan kolayca oluşturabilir ve ilgili içerikle güncel tutabilirsiniz. Önceden teknik uzmanlık gerekmez!

Bugün, WooCommerce ve Elementor kullanarak e-Ticaret web sitenizi tasarlamanın tüm adım adım sürecinde size yol göstereceğiz. Ve tüm konfigürasyonu yapmanın 30 dakikadan fazla sürmeyeceğine söz veriyoruz!

Ama ondan önce şu soruyu cevaplayalım-

E-Ticaret Mağazanızı Neden Elementor ile Tasarlamalısınız?

Tasarım, başarılı bir e-ticaret web sitesinin temel taşıdır. WordPress sayesinde, geniş bir kişiselleştirme yeteneği yelpazesi de dahil olmak üzere insanların web geliştirme deneyimini geliştirdi ve site güvenliğini de sağladı. WordPress'e özel bir diğer eklenti, Elementor gibi web sitesi sayfası oluşturucularıdır.

Elementor, herhangi bir teknik bilgiden bağımsız olarak çarpıcı web sayfaları oluşturmanıza yardımcı olur. Bu görsel düzenleyiciyi kullanarak herkes dakikalar içinde dinamik web siteleri oluşturabilir. Web sitenizi tasarlamak için yalnızca sürükleyip bırakmakla kalmaz, aynı zamanda Elementor, tarayıcı sekmesini değiştirmeden değişiklikleri canlı olarak gözden geçirmenizi sağlar. Ayrıca, WordPress sitenizi Elementor içinde tasarlarken bölümleri ve blokları kolayca kopyalayıp yapıştırabilirsiniz.

Bu nedenle 5 milyondan fazla insan WordPress sitelerinde aktif olarak Elementor Sayfa Oluşturucu kullanıyor.

elementor-active-installation
Elementor son birkaç yılda büyük ölçüde büyüdü

Hepsinden ayrı olarak, Elementor zengin bir faydalı eklenti koleksiyonuna sahiptir. Böylece web sitenizi markanıza tam olarak uyacak şekilde yapılandırmak için sonsuz seçenekler elde edersiniz.

E-Ticaret mağazanızı Elementor ile kurmayı planlıyorsanız, sizin için bir güzel haber daha var! Bu WordPress sayfa oluşturucu, WordPress için en iyi e-ticaret eklentisi olan WooCommerce ile tamamen desteklenir.

Profesyonel ipucu: Bununla birlikte, WordPress sitenizi yalnızca birkaç tıklamayla WooCommerce kullanarak tamamen işlevsel bir çevrimiçi mağazaya dönüştürebilirsiniz. Elementor, mağaza tasarımınızı herhangi bir kod uygulamadan ziyaretçileriniz için daha çekici hale getirmenize olanak tanır.

WordPress'te bir e-Ticaret Web Sitesi Nasıl Oluşturulur

Elementor-and-WooCommerce-for-Online-Store

Söz verdiğimiz gibi, size WooCommerce Elementor pro kullanarak bir e-Ticaret web sitesi oluşturmanın en kolay ama uygun fiyatlı sürecini göstereceğiz. İşte nasıl yapılacağı -

Bunlar, çevrimiçi mağazanızı oluşturmak için ön koşullardır:

  • Bir WordPress Sitesi
  • WooCommerce (Ücretsiz)
  • Elementor (Ücretsiz)
  • Elementor (Pro)
  • HappyAddons – Bir Elementor Eklentisi (Ücretsiz)

Her şeyden önce, kendi alan adınızı ve hostinginizi satın almanız gerekir. Ardından WordPress sitenizi yapılandırın ve WooCommerce, Elementor, HappyAddons vb. gibi gerekli tüm eklentileri yükleyin.

Bu arada, Elementor & WooCommerce'i kullanmaya başlamanız için hızlı bir kılavuz istiyorsanız, bu başlangıç ​​kılavuzunu gözden geçirin.

Videonun altında temel WooCommerce ayarlarının ve sayfasının nasıl yapılandırılacağı gösterilmektedir. Üzerine hızlıca bir göz atın!

Önemli Not: WooCommerce kurulumu sizi ödeme, nakliye, diğer eklentilerle işbirliği vb. gibi gerekli tüm ayar seçeneklerinde kısa bir tura götürür.

Temel yapılandırmayı tamamladığınızda, WooCommerce siteniz uçmaya hazırdır. Artık online mağazanıza ürün ekleyebilirsiniz. Bir WooCommece Mağaza Sayfasının temel düzeni aşağıdaki gibidir:

default-product page-WooCommerce Elementor Pro

WooCommerce, bir e-ticaret mağazasından beklediğiniz tüm işlevselliğe sahip olsa da, yine de burada tasarım seçenekleri sınırlıdır. Bazen de karmaşık! Mağaza tasarımınızı istediğiniz gibi değiştirmenize izin veren Elementor geliyor.

Şunları da okumak isteyebilirsiniz: Elementor Nasıl Kullanılır: Başlamanın Kolay Yolu.

Powerup your Elementor Website Builder with HappyAddons

Elementor ile Ürün Sayfalarınızı Tasarlayın

Bu WordPress sayfa oluşturucu, WooCommerce Web Sitesine uygun bir dizi muhteşem hazır şablona sahiptir. Ayrıca Elementor, çevrimiçi mağazanız üzerinde son derece kolay bir şekilde genel kontrol sahibi olmanıza yardımcı olan 10'dan fazla WooCommerce widget'ını destekler. Bu nedenle, WooCommerce öğelerinin sayısıyla asla sınırlı hissetmeyeceksiniz ve dahası, görüntüleyebilirsiniz.

Tasarım sürecine başlamadan önce, Elementor'un en son sürümünü, Elementor pro'yu başarıyla yüklediğinizden ve Web Sitenizde WooCommerce 3.4 veya daha yüksek bir sürümün etkinleştirildiğinden emin olun. Bunun dışında Elementor'un Ürün şablonlarına erişemeyeceksiniz.

Birinci Adım: Tek Bir Ürün Şablonu Oluşturun

İlk önce – WordPress Yönetici Panosu → Şablonlar → Yeni Ekle seçeneğine gidin

single-product-template-WooCommerce Elementor Pro

Elementor Şablonu oluşturma kalıcı formunu göreceksiniz. Burada, oluşturmak istediğiniz şablon türünü seçin. Mağaza tasarımı için Single Store tipini seçmelisiniz.

choose-template-type

Şablonunuz için bir ad girin. Şablon Oluştur düğmesine basın.

add-template-name

Ardından, Elementor şablon kitaplığına girersiniz. WooCommerce Mağaza Sayfanız için şablonu seçelim-

İkinci Adım: Bir Elementor Şablonu Ekleyin

Bu adımda, çevrimiçi mağazanızı Elementor ile özelleştirmek istediğiniz düzeni seçmelisiniz. Alternatif olarak, sıfırdan başlayabilir ve belirtilen farklı widget'ları ve özellikleri ekleyerek sayfanızı tasarlayabilirsiniz.

insert-elementor-template-WooCommerce Elementor Pro

Üçüncü Adım: Mağazanızı Ürün Widget'larıyla Güzelleştirin

Mağaza sayfanızı iki şekilde özelleştirebilirsiniz - şablonu kendi içeriğinizle doldurun veya herhangi bir içerik eklemeden önce düzeni daha fazla değiştirin. İkinci seçeneği seçerseniz, tasarımınızı içeriden Elementor'a uyarlamanın çok kolay olduğunu unutmayın.

Neyse ki Elementor, yalnızca WooCommerce Sayfaları oluşturmak amacıyla oluşturulmuş bir avuç widget sağlar. Bu WooCommerce widget'ları ile çevrimiçi mağazanızın her bir bölümünü özelleştirebilirsiniz.

Ürün sayfanızın ihtiyaç duyduğu mevcut widget'lar:

  1. Ürün Başlığı ve Açıklaması
  2. Sepete Ekle Düğmesi
  3. Ürün fiyatı
  4. Ürün resmi
  5. ek satışlar
  6. Ürün Değerlendirmesi
  7. Ürün Verileri Sekmeleri
  8. Meta ve Ek Bilgiler
  9. Ürün İçeriği
  10. Galeta unu
  11. Ürün ile ilgili
  12. Ürün Stoku
woocommerce-elementor-pro

Artık bu WooCommerce widget'larını kullanarak herhangi bir kod bilmeden görsel olarak hayalinizdeki çevrimiçi mağazayı tasarlayabilirsiniz.

Dördüncü Adım: Sepete Ekle Düğmesini Yapılandırın

CTA Düğmesi, bir ürün sayfasındaki en önemli unsurlardan biridir. Onu çekici bir şekilde tasarlamalı ve düğmeyi orta noktaya yerleştirmelisiniz, böylece herkes bunu kolayca fark edebilir. Elementor, Sepete Ekle düğmeleri için iki seçenek sunar: normal ve özel.

Elementor düzenleyici ile düğme stilini marka kimliğinize göre özelleştirebilirsiniz. Renkleri, tipografiyi, kenarlıkları, şekli, vurgulu efektleri vb. değiştirme gibi çeşitli stil seçenekleri elde edeceksiniz.

woocommerce-elementor-pro

Ancak, Sepete Ekle düğmeniz üzerinde tam kontrol istiyorsanız, özel Sepete Ekle seçeneğiyle gitmelisiniz.

woocommerce-elementor-pro

Bu düğmeyi ürün sayfanızda istediğiniz yere yerleştirme esnekliğine sahipsiniz. Ayrıca düğme türünü (Varsayılan, Bilgi, Başarı, Uyarı, Tehlike), etiket, renk, hizalama, boyut, simge, konum ve boşluk seçebilirsiniz. Ayrıca, Analytics'inizdeki olayları izlemek için bir düğme kimliği atayabilirsiniz.

Ardından, WooCommerce Elementor Pro ile ürün arşiv sayfanızı nasıl tasarlayacağınızı görelim.

Beşinci Adım: Ürün Arşivi Sayfanızı WooCommerce Elementor Pro ile Özelleştirin

Yukarıda, Elementor içinde tek ürün sayfanızı nasıl özelleştireceğinizi gösterdik. Şimdi, Elementor Pro ile ürün arşivleri tasarlama adımlarını göstereceğiz.

Tek Ürün Sayfası ile aynı, WordPress Yönetici Panosu → Şablonlar → Yeni Ekle'ye gidin.

Bu sefer açılır menüden Product Achieve'i seçin ve şablonunuza bir isim verin.

product-archive-page-woocommerce-elementor-pro

Ardından, ŞABLON OLUŞTUR düğmesine basın ve düzenleyici yüklenene kadar bekleyin.

Yine önceden oluşturulmuş bir blok seçebilir veya boş bir sayfa üzerinde çalışmaya başlayabilirsiniz. Burada tüm normal Elementor widget'larının yanı sıra, belirli bazı WooCommerce arşiv widget'larını alacaksınız. Gibi-

  1. Arşiv Başlığı
  2. Arşiv Ürünleri
  3. Ürün:% s
  4. Arşiv Açıklaması
  5. WooCommerce Ekmek Kırıntıları
  6. Sepete Özel Ekle
  7. WooCommerce Sayfaları
  8. ürün kategorileri
  9. Menü Sepeti

Bu widget'ları ve diğer tasarım araçlarını kullanarak çevrimiçi mağazanızı istediğiniz şekilde kolayca düzenleyebilirsiniz.

woocommerce-elementor-pro
Görsel kaynağı: elementor.com

Altıncı Adım: HappyAddons Kullanarak Tasarım Araçlarınızı Yükseltin

Elementor'un kendisi, herhangi bir kodlama becerisine sahip olmadan hayalinizdeki web sitesini tasarlamak için en zengin özelliklere sahip eklentilerden biridir. Hala HappyAddons kullanarak, daha fazla tasarım potansiyeli keşfedebilir ve çekirdek eklentiyi daha da genişletebilirsiniz.

Happy Addons, bir dizi kullanışlı widget ve özellik sunarak ellerinizi daha güçlü hale getirdiğinden. Kayan efektler, Animasyonlu metin, Etki alanları arası kopyala-yapıştır, Mutlu Bloklar vb. Bu özel tasarım öğeleri, ürününüzü daha çekici hale getirmenize yardımcı olur. Böylece E-ticaret mağazanıza maksimum müşteri çekebilirsiniz.

Burada, ürün sayfasına benzersiz bir görünüm kazandırmak için HappyAddons'tan “Card Widget” kullanıyoruz.

How to Build Shop Pages-woocommerce-elementor-pro

Şunları da okumak isteyebilirsiniz: Elementor ve HappyAddons ile Mağaza Sayfaları Nasıl Oluşturulur.

Elementor Sitelerini Ücretsiz Olarak Özelleştirmek için Mutlu Eklentiler Alın!

Yedinci Adım: Koşulları Belirleyin ve Mağaza Sayfanızı Yayınlayın

Tüm özelleştirmeleri tamamladıktan sonra Yayınla düğmesine basın. Ancak bundan önce, ürün sayfanızın görünmesi gereken koşulları belirleyin.

set-conndition-woocommerce-elementor-pro

Bunu tüm ürünler, belirli bir kategori ve/veya alt kategori, bir etiket veya yalnızca belirli bir yazarın ürünleri için yapılandırabilirsiniz. Daha karmaşık koşullar da geçerlidir.

Her şeyi sonlandırın ve kaydedin. Son olarak, yeni tasarımı yaşamak için yayınlayın. WooCommerce Elementor Pro kullanarak ilk e-ticaret sitenizi bu şekilde yapılandırabilirsiniz.

Elementor & WooCommerce ile bir e-Ticaret Web Sitesi Nasıl Kurulur (Hızlı Başlangıç ​​Kılavuzu)

Dakikalar İçinde Kendi Online Mağazanızı Özelleştirin ve Satışlarınızı Büyük Ölçüde Arttırın

E-ticaret yavaş yavaş perakendeyi yeniden organize etti. Artık geriye bakmak yok! Üstelik Covid-19 pandemisi e-ticaret girişimcileri için bir nimet olarak ortaya çıktı. Uzmanlar, koronavirüsün etkisinin yalnızca e-ticaret endüstrisinde kısa vadeli bir artış olmayacağını, aynı zamanda kalıcı olacağını tahmin ediyor.

Bu durumda, bir e-ticaret sitesi başlatmak sizin için hayatınızı değiştirecek bir karar olabilir. Ve bir profesyonel kiralamak yerine web sitenizi kendi başınıza oluşturabiliyorsanız daha şaşırtıcı ne olabilir? WooCommerce kullanarak bir anda hayalinizdeki çevrimiçi mağazayı oluşturabilirsiniz. Ayrıca Elementor, mağaza tasarımınızı daha büyüleyici hale getirmek için kullanışlı bir araçtır.

Bu kombinasyonu, alıcıları çekmek ve e-Ticaret mağazanızda satışları artırmak için kullanışlı hale getirin.

Kendi çevrimiçi mağazanızı oluştururken herhangi bir sorunuz varsa veya herhangi bir sorunla karşılaşırsanız aşağıdaki yorum bölümünü kullanın.

happy elementor addons