Elementor Destekli WooCommerce Sitesi Nasıl Oluşturulur

Yayınlanan: 2021-10-28

WordPress platformunun dünyadaki en popüler İçerik Yönetim Sistemi (CMS) olması yeterli değildir. Ayrıca Elementor ve WooCommerce'de de en popüler sayfa oluşturucu ve e-ticaret platformlarına sahibiz. Bu nedenle, yıldız görünümlü ve performanslı bir çevrimiçi mağaza oluşturmak için üçünü de kullanmak mantıklıdır.

Özetleyecek olursak, WordPress yazılarınızı, sayfalarınızı ve ürünlerinizi düzenlemek için idealdir. WooCommerce, geliştiricileri (Automattic) nedeniyle platformla sıkı entegrasyon sunar. Dahası, Elementor, güçlü ve sezgisel sürükle ve bırak sayfa oluşturma özelliği sunar. Mağazanızı oluşturmak için eksiksiz bir kodsuz çözümdür.

Bu parçada, Elementor ve WooCommerce kullanarak bir mağazanın nasıl kurulacağına bakacağız. Boyunca, siteniz için size en büyük esnekliği sağlamak için her ikisinin de nasıl birleştiğine bakacağız.

WordPress, Elementor ve WooCommerce Neden Birlikte İyi Çalışır?

WordPress, Elementor ve WooCommerce'in birinci sınıf çevrimiçi mağazalar oluşturmanıza yardımcı olmak için nasıl bir araya gelebileceğine daha yakından bakmaya değer.

WordPress.org ana sayfası.

Yeni başlayanlar için, WordPress piyasada en çok kullanılan CMS'dir. Elbette bu, kullanıcılar arasında böylesine baskın bir konumu garantilemek için yeterli değil. Aslında, buna bir önceki gönderide bir göz atmıştık, bu yüzden bu gönderiyi daha fazla okumanızı öneririz. Kısacası, üzerine inşa edebileceğiniz güvenli, kararlı ve ölçeklenebilir bir platformdur.

Bundan bahsetmişken, WooCommerce'iniz de var. Eklentiyi Automattic geliştirdiği için, temel WordPress ile mükemmel bir entegrasyona sahiptir, ancak hepsi bu kadar değil.

Bir WooCommerce mağazası.

Aynı zamanda en popüler e-ticaret platformudur. WordPress ekosisteminde, tüm web sitelerinin yaklaşık yüzde sekizine karşılık gelen yaklaşık yüzde 20'lik bir paya sahiptir. Buna karşılık, Shopify yaklaşık yüzde beş veya altı pazar payına sahiptir. Yine, kullanım rakamları her şey değildir.

WooCommerce, çevrimiçi bir mağaza oluşturma sürecini üstlenir ve süreci kolaylaştırır. Dakikalar içinde çalışır duruma gelebilir ve kullanıma hazır, sağlam, güçlü ve genişletilebilir bir e-ticaret platformuna sahip olabilirsiniz.

Bunları birbirine örmek için Elementor'a sahipsiniz. Ayrıca kendi alanında büyük bir pazar payına ve geniş bir kullanıcı kitlesine sahiptir.

Elementor ana sayfası.

Tüm web sitenizi sıfırdan oluşturmanıza yardımcı olacak benzersiz bir yaklaşıma sahip bir sürükle ve bırak sayfa oluşturucusudur. Bu, kullanımı cazip bir çözümdür, çünkü diğer araçların sahip olmadığı birçok güçlü özellik ve işlevsellik vardır. Burada en alakalı olanı, özel WooCommerce Builder'dır.

Kısacası, Elementor, WPKube blogunda çok sayıda sütunu olan bir eklentidir ve neler yapabileceğini görmek için arşivlerimizi gözden geçirmelisiniz.

Bir WooCommerce Sitesinin Bir Sayfa Oluşturucudan Neye İhtiyacı Var?

Son bölümdeki örtük çıkarım, Elementor'un WooCommerce'in sitenizi bir sonraki seviyeye taşımak için ihtiyaç duyduğu doğru özellik ve işlevsellik karışımını sağlayabilmesidir. Yine de, bunun neden olduğunu ve ne sunduğunu anlamak önemlidir.

Genel anlamda, bir WooCommerce sitesi, bir sayfa oluşturucudan aşağıdakilere ihtiyaç duyar:

  • Sayfa oluşturucu ve WooCommerce arasında herhangi bir çakışma olmaması için sıkı entegrasyon.
  • Ürünlerinizi ve mağaza sayfalarınızı öne çıkarmaya yardımcı olacak çok sayıda özelleştirme seçeneği.
  • Tipik bir ürün sayfasını oluşturan öğeleri tek tek düzenlemenin bir yolu.
  • Mağazanızın 'düzeyini yükseltmeye' yardımcı olacak ekstra işlevsellik.

Kişisel ihtiyaçlarınızı da (elbette) not etmelisiniz. Örneğin, formların ve açılır pencerelerin mağazanız ve satış stratejiniz için önemli olduğunu görebilirsiniz. İyi haber şu ki, Elementor ihtiyaçlarınızı fazlasıyla karşılayabilecek kapasitede.

Örneğin, satışlar, sınırlı süreli teklifler, kuponlar ve çok daha fazlası için harika bir Popup Oluşturucusu vardır:

Elementor Açılır Pencere Oluşturucu.

Bunları diğer sayfa şablonlarında olduğu gibi oluşturabilir ve anında uygulayabilirsiniz. Dahası, onları neredeyse seçtiğiniz herhangi bir şekilde özelleştirebilirsiniz. Sitenizde tanıtmak için belirli bir kampanyanız varsa bu mükemmeldir.

Uygun Bir WooCommerce Teması Nasıl Seçilir

Bunu öğreticimizde ele aldığımız ve ayrıca özel bir makalede birkaç temayı topladığımız için burada çok fazla ayrıntıya girmeyeceğiz.

Bu durumda ihtiyacınız olan ana düşünce, Elementor ve WooCommerce uyumlu bir temadır. Premium pazaryeri sitelerine hızlı bir bakış bile, birçok temanın bunun reklamını yaptığını gösterecektir, bu nedenle seçenekleriniz çok çeşitlidir.

Yine de, bahsedebileceğimiz birkaç öne çıkan tema var:

  • Vitrin. Blok Düzenleyici yerel bir teknoloji olduğundan, ileride Elementor ile en az uyumluluğa sahip olacaktır. Hala,
  • Merhaba. Bu, Elementor boş başlangıç ​​temasıdır ve sıfırdan bir WooCommerce sitesi geliştirmek için idealdir. Tabii ki, daha az zamanınız varsa, daha tam özellikli başka bir tema seçmek akıllıca olabilir.
  • GenerateBasın. Bu, esnek bir altyapıya sahip en iyi temadır. Bu, Block Editor, Elementor veya başka bir şey kullansanız da mağazanızın harika görüneceği anlamına gelir.

Sitenizi oluşturmaya başlamadan önce doğru temayı bulmanızı öneririz. Unutmayın, en iyi sonuçlar Elementor ve WooCommerce ile uyumlu bir şeyle olacaktır.

3 Adımda Elementor Destekli WooCommerce Sitesi Nasıl Oluşturulur

Bu makalenin geri kalanında, bir e-ticaret sitesi oluşturmak için Elementor ve WooCommerce'i birlikte nasıl kullanacağınızı göstereceğiz. Dikkat edilmesi gereken üç adım vardır:

  • WooCommerce'i kurun ve kurun.
  • WooCommerce ürün serilerinizi oluşturun ve ürün sayfalarını oluşturmak için Elementor'u kullanın.
  • Yine Elementor kullanarak özel bir Mağaza sayfası tasarlayın.

Yine de, bu eğitim için Elementor Pro'nun zaten kurulu ve etkinleştirilmiş olduğunu varsayacağız. Bu, bir WordPress hunisi oluşturma hakkındaki makalemizde size anlattığımız bir şey. Bu gönderi, sorun yaşadığınızda size yardımcı olacaktır.

1. WooCommerce'i kurun ve kurun

Bir WooCommerce kurulumu kurarken göz önünde bulundurmanız gereken iki husus vardır: eklentinin kendisi ve mağazanızın ayarları. Aslında, eklentiyi yüklemek, diğer herhangi bir WordPress eklentisi ile aynı süreci alır.

WooCommerce'in kendisini kurmaya gelince, birkaç dakika içinde hazır olsanız da, Kurulum Sihirbazını gözden geçirmek için biraz daha zaman harcar.

WooCommerce Kurulum Sihirbazı.

Kurulumun bu noktasına gelince, sizi koruduk. Aslında, WooCommerce ile nasıl başlayacağınız ve ilk ürününüzü nasıl oluşturacağınız konusunda adım adım ayrıntılara giren eksiksiz bir WooCommerce eğitim yazımız var. Bunu gözden geçirirken yedek bir sekmede açık olması iyi bir gönderi. Oradaki bilgiler sonraki adımlar için değerli olacaktır.

2. WooCommerce Ürünlerinizi Oluşturun

Bir WooCommerce kurulumunu kurduktan ve salladıktan sonra, arka uçta ürünler oluşturmaya bakmalısınız. Yine, WooCommerce eğitimimiz bunun nasıl yapılacağını ayrıntılı olarak ele alıyor, ancak işte Cliff'in Notları:

  • WordPress'te Ürünler > Yeni Ekle sekmesine gidin.
  • Ürününüzün adını ve kısa açıklamasını girin.
  • Ürününüzün fiyat gibi verilerini doldurmak için WooCommerce meta kutularını kullanın.
  • Bir resim ekleyin.
  • Ürününüzü yayınlayın.

Yine de, Elementor'un ilk güçlü hamlesini gösterdiği yer burasıdır - WooCommerce Builder. Bu, ürün sayfalarınızın tasarımını oluşturmak için sayfa oluşturucuyu kullanmanın bir yoludur.

Başlamak için, WordPress'te Şablonlar > Yeni Ekle'yi tıklayın:

WordPress içindeki Yeni Ekle bağlantısı.

Buradan, Şablon Türü açılır menüsünden Tek Ürün'ü seçin ve isteğe bağlı bir ad girin:

Elementor'da yeni bir şablon oluşturma.

Bu, önceden oluşturulmuş her Bloğu aşağıdakiler içinde göstermek için Şablon Kitaplığını açacaktır:

Elementor Şablon Kitaplığı.

Beğendiğiniz bir tasarım gördüğünüzde Ekle düğmesine tıklayın ve Elementor Bloğu içe aktaracaktır:

Bir Bloğu bir sayfaya içe aktarma.

Bu, özel bir ürün sayfasını döndürmenin hızlı bir yoludur. Bu harika başlangıcı yapabilir ve daha fazlasını ekleyebilirsiniz. Elementor, WooCommerce'e özel sayfalar oluşturmanıza yardımcı olacak bir dizi özel widget içerir:

Elementor WooCommerce widget'ları.

Beğendiğiniz bir sayfa düzenine sahip olduğunuzda, ekranın altındaki yeşil Yayınla düğmesini tıklayın:

Yayınla düğmesi.

Bu, şablonu görüntülemek için belirli bir koşul ayarlamanıza yardımcı olacak bir açılır pencere açar:

Ayar Elementor'da koşulları dahil et.

Hazır olduğunuzda Kaydet ve Kapat 'ı tıklayın. Buradan mağazanıza daha fazla ürün ekleyebilir, daha fazla şablon üzerinde çalışabilir veya özel bir Mağaza sayfasında çalışmaya başlayabilirsiniz.

3. Elementor ve WooCommerce Kullanarak Özel Mağaza Sayfanızı Tasarlayın

WooCommerce'in kullanışlı bir Kullanıcı Deneyimi (UX), mağazanız için ihtiyaç duyduğunuz gerekli sayfaların çoğunu nasıl oluşturduğudur. Kapıyı süsleyen ön tente olduğu için en üst düzey Mağaza sayfası en önemlisidir.

WordPress ve WooCommerce'i Storefront gibi WooCommerce'e özgü bir temayla kullanıyorsanız, Mağaza sayfasını özelleştirmek için ana bağlantı noktanız Özelleştiricidir. Yine de, odak noktamız Elementor. Bunu sayfa oluşturucuyla yapmanın yolu bir Ürünler Arşivi sayfası kullanmaktır.

Bu, ürünlerin sitenizde nasıl görüntüleneceğini özelleştirmenize olanak tanır, ancak sayfanızın geri kalanını işlemez. Bazı durumlarda iki takım özelleştirme ve ayarı yönetmek zor olabilir, ancak deneyimlerimize göre şu ana kadar bir sorun olmadı.

Tek tek ürünlerde olduğu gibi, WordPress'te Şablonlar > Yeni Ekle'ye gitmeniz ve ardından açılır menüden Ürünler Arşivi'ni seçmeniz gerekir:

Bir Ürün Arşivi şablonu seçme.

Yine, bir Blok seçebilir, bir sayfayı sıfırdan düzenleyebilir veya benzersiz bir şey oluşturmak için her ikisini birleştirebilirsiniz. Ayrıca daha önce olduğu gibi, beğeninize göre bir sayfa tasarlamanıza yardımcı olması için WooCommerce'e özgü widget'lardan herhangi birini kullanabilirsiniz.

Yayınla düğmesine tekrar tıkladığınızda ve Yayınlama Ayarları iletişim kutusuna geldiğinizde, sihri başlatabilirsiniz. Temel biçiminde, yeni şablonu Mağaza Sayfasına dahil edebilirsiniz:

Ayarlar, Mağaza sayfası için Koşulları içerir.

Yine de, hepsi bu değil. Şablonu sitenizin çeşitli yerlerinde kullanmak için başka Dahil Etme koşulları ekleyebilirsiniz. Bu, devamlılık için harikadır ve ziyaretçilere mağazanızı ziyaret etmeleri için bir sebep verir.

WooCommerce'in Diğer Oluşturulan Sayfaları Üzerine Kısa Bir Not

Bitirmeden önce, oluşturulan diğer WooCommerce sayfalarından bahsetmek istiyoruz. Kötü haber ise Elementor'un bakışlarının altına düşmemeleri. Başka bir deyişle, ek bir WooCommerce uzantısı olmadan Ödeme veya Teşekkür sayfaları gibi sayfaları düzenleyemezsiniz.

Bu hayal kırıklığı yaratıyor, ancak anlaşılabilir. Buna rağmen, çevreleyen öğeleri geliştirmek için Elementor'u kullanmaya devam edebilir, ardından belirli sayfa işlevlerini kısa kodlarla bırakabilirsiniz. Yine de ideal değil.

Bu sayfaları tam olarak düzenlemek sizin için önemliyse, Ödeme Alanı Düzenleyicisine (yıllık 49 ABD doları) ve Özel Teşekkür Sayfaları uzantısına (ayrıca yıllık 49 ABD doları) bakmak isteyeceksiniz.

Sonuç olarak

Bir e-ticaret mağazası yayınlamak için en popüler araçlardan üçünü kullanırken ne yanlış gidebilir? Bu durumda pek bir şey yok. WordPress, Elementor ve WooCommerce, tümü mükemmel bir deneyim sunar. Bunları birleştirmek, bir çevrimiçi mağaza oluşturma ve çalıştırma konusunda size en üst düzeyi verebilir.

Bu gönderi boyunca, bir mağaza oluşturmak için Elementor ve WooCommerce'in birlikte nasıl kullanılacağına baktık. Her iki eklentiyi de yükledikten ve etkinleştirdikten sonra, ilk göreviniz ilişkili sayfalarla birlikte ürünler oluşturmaktır. Oradan, Elementor'un işleyebileceği özel bir Mağaza sayfasına ihtiyacınız var. Dahası, sayfa oluşturucu eklentisinin ekstra işlevselliği (açılır pencere oluşturucu ve daha fazlası gibi), mağazanızı stratosfere taşımanıza yardımcı olabilir.

Bir sonraki mağazanız için bir Elementor ve WooCommerce kombinasyonu oluşturmak istiyor musunuz ve eğer öyleyse bu makale size yardımcı olacak mı? Aşağıdaki yorumlar bölümünde bize bildirin!