Elementor için WooCommerce Builder ile Mağaza Nasıl Oluşturulur
Yayınlanan: 2022-09-27Elementor'un güçlü görsel oluşturucusunu kullanarak mağazanızı oluşturabilmeniz ve özelleştirebilmeniz için Elementor için bir WooCommerce oluşturucu arıyorsunuz.
ShopReady ile, yalnızca Elementor'un ücretsiz sürümünü kullanıyor olsanız bile tüm WooCommerce mağazanızı Elementor ile oluşturabilir ve özelleştirebilirsiniz!
ShopReady hakkında daha fazla bilgi edinmek istiyorsanız tam ShopReady incelememize göz atabilirsiniz.
Ancak bu makalede ShopReady'yi Elementor için bir WooCommerce oluşturucu olarak nasıl kullanacağımıza daha fazla odaklandık.
Aşağıda, dilek listeleri, hızlı ürün görünümü, optimize edilmiş ödemeler ve çok daha fazlası gibi gelişmiş özelliklerin eklenmesi de dahil olmak üzere mağazanızı oluşturmak ve özelleştirmek için ShopReady'yi nasıl kullanabileceğinizi adım adım göstereceğiz.
Şuna benzeyen bir mağaza oluşturabileceksiniz:
Ve Elementor'u kullanarak ürününüz, alışveriş sepetiniz ve ödeme sayfalarınız ( artı çok daha fazlası ) dahil olmak üzere her şeyi özelleştirebileceksiniz:
ShopReady'yi Elementor için WooCommerce Builder Olarak Kullanma
Daha fazla uzatmadan, doğrudan adım adım öğreticimize geçelim.
Yine, eğitime geçmeden önce ShopReady'deki pek çok özellik hakkında daha fazla bilgi edinmek isterseniz tam ShopReady incelememizi okuyabilirsiniz.
Ve ne zaman denemeyi seçerseniz, kasada özel WPMayor30 kupon kodunu kullanarak %30 indirim kazanabilirsiniz.
1. Temel WooCommerce Mağazanızı Oluşturun ve Elementor'u Kurun
Henüz yapmadıysanız, ilk adımınız temel WooCommerce mağazanızı kurmaktır.
Kaliteli WooCommerce barındırma seçmek, WooCommerce kurmak, kurulum sihirbazından geçmek, bazı ürünler eklemek vb.
Burada yardıma ihtiyacınız varsa, bir WooCommerce mağazası kurma kılavuzumuza göz atabilirsiniz.
Henüz bir WooCommerce teması seçme veya tasarımı özelleştirme konusunda endişelenmeyin, çünkü Elementor ve ShopReady bunun için var. Basit de olsa çalışan bir mağazanız olması için arka uçta bir şeyler ayarlamaya odaklanın.
Bunu yaptıktan sonra Elementor eklentisini de yüklemek isteyeceksiniz.
ShopReady ile Elementor'un yalnızca ücretsiz sürümünü kullanmakta özgürsünüz.
Veya zaten Elementor Pro'nuz varsa onu da yükleyebilirsiniz – ShopReady her iki sürümde de sorunsuz çalışır.
2. ShopReady'yi Kurun ve Her Şeyi Etkinleştirin
Temel WooCommerce mağazanızı kurup Elementor'u yükledikten sonra Elementor için ShopReady WooCommerce oluşturucuyu yüklemeye hazırsınız demektir.
ShopReady'nin WordPress.org'da ücretsiz bir sürümünün yanı sıra 75 dolardan başlayan fiyatlarla daha fazla özellik ekleyen premium bir sürümü var.
Bu eğitim için Pro sürümünü yükledik. Ancak, aynı temel adımlar ücretsiz sürüm için de geçerli olacaktır, bu nedenle ücretsiz sürümü kullansanız bile takip edebilmeniz gerekir ( daha gelişmiş özelliklerden bazılarına erişiminiz olmayabilir ve olmayacaksınız). birçok şablonu özelleştirebilme ).
Eklentiyi etkinleştirdikten sonra, WordPress kontrol panelinizde yeni bir ShopReady menüsü göreceksiniz.
Ana ShopReady menüsüne giderseniz, çeşitli widget'ları, modülleri ve şablonları etkinleştirebileceğiniz farklı alanlara sahip bir arayüz alırsınız.
Şimdilik, mağazanızı oluştururken tüm özelliklere erişebilmeniz için tüm widget'ları ve modülleri etkinleştirmenizi öneririm.
Mağazanızı oluşturduktan sonra, her zaman geri gelip kullanmadığınız öğeleri devre dışı bırakarak işleri hafif tutabilir ve mağazanızı hızlandırabilirsiniz.
Demo İçe Aktarıcı modülünü etkinleştirmek özellikle önemlidir, çünkü bu, ShopReady'nin önceden hazırlanmış mağaza şablonlarına erişmenizi sağlar ( yine de her şeyi her zaman sıfırdan özelleştirebilirsiniz ).
Demo İçe Aktarıcı modülünü etkinleştirdikten sonra, yapmanız gereken eşlik eden Demo İçe Aktarıcı eklentisini yüklemenizi isteyecektir.
Bunu yaptıktan sonra, WordPress panonuzdaki yeni Unyson alanına gidin ve ShopReady'nin şablonlarını içe aktarabilmeniz için Yedekleme ve Demo İçeriği uzantısını etkinleştirin.
Not – Şablonlarınızı Elementor kullanarak sıfırdan tasarlamak istiyorsanız bu işlemi atlayabilirsiniz.
3. Mağazanızın Temeli Olacak Bir Şablonu İçe Aktarın
Şimdi, önceden hazırlanmış ShopReady demo sitelerinden birini yüklemek için Araçlar → Demo İçeriği Kurulumu'na gidebilirsiniz.
Yine, bunu atlayıp bir sonraki bölümde ele alacağımız mağazanızın şablonlarını sıfırdan tasarlamakta da özgürsünüz.
Demoyu içe aktardıktan sonra, Elementor'u kullanarak her şeyi tamamen özelleştirebileceksiniz.
Farklı demo seçeneklerine bir göz atın ve ardından mağazanızın temeli olarak kullanmak istediğiniz demo için Yükle düğmesine tıklayın.
Bu eğitim için Demo V1'i kullanacağız:
Ve aynen böyle, mağazanız tam olarak demodaki gibi görünmelidir:
4. Mağazanızın Şablonlarını Elementor ile Özelleştirin
Artık, mağazanızın içeriğini özelleştirmek için Elementor için WooCommerce oluşturucuyu kullanmaya hazırsınız.
Mağazanızın tüm farklı şablonlarına erişmek için WordPress panonuzdaki ShopReady alanına gidin ve ardından Şablonlar sekmesini seçin.
Burada, mağazanızla ilişkili tüm farklı şablonların bir listesini göreceksiniz. Dikkate alınması gereken en önemli şablonlardan bazıları şunlardır:
- Ürün – tek bir ürün sayfası için şablon.
- Mağaza – ana mağaza sayfası için şablon.
- Mağaza Arşivi – tüm ürünlerinizi listeleyen sayfanın şablonu.
- Sepet / Boş Sepet – alışveriş sepetinizin çeşitli aşamaları için şablonlar.
- Ödeme – ödeme sayfanız için şablon.
- Hesabım – bir müşterinin ön uç hesap sayfası için şablon.
Bununla birlikte, ShopReady'nin güzel yanı, ürün hızlı görüntüleme, istek listesi ve daha fazlası gibi birçok başka şablon üzerinde de kontrol sahibi olmanızdır.
Herhangi bir şablonu düzenlemek ve Elementor'u başlatmak için ilgili şablonu seçmeniz ve ardından Kalem simgesini tıklamanız yeterlidir.
Ayrıca yeni şablonlar oluşturabilir ve mağazanızın farklı bölümlerinde birden çok şablon kullanabilirsiniz:
ShopReady şimdi Elementor arayüzünü başlatacak.
Tasarımı kontrol etmek için normal Elementor arayüzünü ve tüm tasarım seçeneklerini kullanabilirsiniz.
Temel fark, ShopReady'nin ayrıca tasarımlarınızda kullanabileceğiniz tonlarca genel widget ve özel WooCommerce widget'ı sunmasıdır. Bunları Elementor arayüzünün çeşitli Shop Ready alanlarında bulabilirsiniz:
Ayrıca her widget'ın kendine özgü ayarları olacaktır.
Örneğin, Yakınlaştırmalı Küçük Resim widget'ı, ürün resimlerini farklı düzen ve ayarlarla görüntülemenizi sağlar:
Bitirdiğinizde, değişikliklerinizi kaydettiğinizden emin olun.
Ardından, mağazanızın tüm şablonlarını düzenlemek için aynı işlemi tekrarlayabilirsiniz. Sayfanın sağ tarafındaki mavi Pano bağlantısı, ShopReady şablonları arayüzüne geri dönmeyi kolaylaştırır.
Farklı şablonlar kendi özel widget'larını içerebilir. Örneğin, ödeme sayfası şablonunu oluştururken, bunu yapmanıza yardımcı olacak özel widget'lar alırsınız:
5. Site Ayarlarını Özelleştirin
ShopReady, Elementor ile bireysel şablonları özelleştirmenize izin vermenin yanı sıra Elementor Site Ayarları menüsüne bazı seçenekler de ekler. Elementor arayüzünün sol üst köşesindeki hamburger simgesini tıklayıp Site Ayarları öğesini seçerek Elementor site ayarlarına erişebilirsiniz .
Burası, mağazanızın davranışı için bir dizi önemli ayara erişebileceğiniz yerdir.
İlk başta, ayarlar iki alana ayrılır – ShopReady ve ShopReady General & PopUp.
Bu alanlara tıklarsanız, bir dizi ek seçenek elde edersiniz. Örneğin, ShopReady ile ekleyebileceğiniz site çapında mini sepetin davranışını kontrol edebilirsiniz:
Mağazanız için tonlarca harika özellik bulabileceğiniz için tüm bu seçenekleri keşfetmenizi öneririz.
Üstbilginizi ve altbilginizi, WordPress kontrol panelinizde ShopReady → Üstbilgi Altbilgi'ye giderek de kontrol edebilirsiniz.
Elementor için WooCommerce Builder'ı Bugün Kullanmaya Başlayın
Kullanıcılar, güçlü görsel, sürükle ve bırak oluşturucu arabirimi nedeniyle Elementor'u seviyor.
ShopReady ile, yalnızca Elementor'un ücretsiz sürümünü kullanıyor olsanız bile WooCommerce mağazanızı tamamen tasarlamak ve özelleştirmek için bu oluşturucunun gücünden yararlanabilirsiniz.
Başlamaya hazırsanız, ShopReady'yi indirmek için aşağıdaki düğmeyi kullanın ve ardından WooCommerce mağazanızı oluşturmak için bu öğreticiyi izleyin.
Bonus: Ödeme sırasında özel WPMayor30 kupon kodunu kullanarak ShopReady'de %30 indirim kazanın!