Kişiselleştirilmiş bir mağaza sayfasının nasıl oluşturulacağını öğrenmek ister misiniz? WooCommerce Elementor'la mı?

Bildiğiniz gibi Elementor Pro, oluşturucu özelliği ile birlikte gelir WooCommerce ayırmanıza olanak sağlayan web sitesi oluştur kişiselleştirilmiş e-ticaretin WooCommerce kodlama olmadan. Bu özellik, Elementor'un sezgisel bir arayüz sunan görsel düzenleyicisini kullanarak özel WooCommerce sayfaları oluşturmanıza olanak tanır.

Ayrıca bakınız: WordPress'te Elementor nasıl kurulur

Bu makaleyi yazarken mağaza sayfası, ürün sayfası ve ürün arşiv sayfaları (etiketler ve kategoriler) için özel sayfalar oluşturabilirsiniz. Yakında, ödeme sayfası ve alışveriş sepeti sayfası için özel sayfalar da oluşturabileceksiniz.

Bu makalede, Elementor Pro'nun WooCommerce oluşturucu özelliğini kullanarak özel bir WooCommerce mağaza sayfasının nasıl oluşturulacağını göstereceğiz.

Mağaza sayfasının kendisi WooCommerce'deki varsayılan sayfalardan biridir. Bu sayfa, ürünlerinizi sergilemek için bir vitrin görevi görür. adresine giderek bu sayfaya ulaşabilirsiniz. siteniz.com/store. Varsayılan olarak, WooCommerce mağaza sayfası yalnızca WooCommerce ürünlerini görüntüler.

Elementor Pro'yu kullanarak özel bir mağaza sayfası oluşturarak vitrininizi daha çekici hale getirmek için öğeler ekleyebilirsiniz.

Elementor ile bir WooCommerce mağazasının özel sayfası nasıl oluşturulur

Bir WooCommerce mağazasının özel sayfasını oluşturmak için kullanabileceğiniz en az iki Elementor widget'ı vardır: Arşiv Ürünleri ve Ürünler.

Bu örnekte, ikincisini kullanıyoruz.

Widget'ın işlevi Ürünler widget'ınkine oldukça benzer Mesajlar. Aradaki fark, Ürünler pencere öğesinin WooCommerce ürünlerini görüntülemek için kullanılması, Yazılar pencere öğesinin ise blog gönderilerini görüntülemek için kullanılmasıdır.

Ayrıca okuyun: Elementor'da modeller nasıl içe veya dışa aktarılır

Ürünler widget'ını yalnızca WooCommerce eklentisi yüklendiğinde ve etkinleştirildiğinde bulabileceğinizi lütfen unutmayın.

Elementor Pro'yu kullanarak özel bir WooCommerce mağaza sayfası oluşturmaya başlamak için şu adrese gidin: ilk à Şablonlar -> Tema Oluşturucu WordPress kontrol panelinizde. sekmesine tıklayın Ürünler Arşiv Tema Oluşturucu sayfasının ardından düğmesine tıklayın eklemek ÜRÜN ARŞİVİ.

Modelinize bir isim verin ve butona tıklayın BİR MODEL OLUŞTURUN.

Elementor ile bir WooCommerce mağazası için özel sayfa nasıl oluşturulur

Bir şablondan özel mağaza sayfası oluşturmak istemeniz durumunda seçebileceğiniz üç özel mağaza sayfası şablonu vardır. Özel mağaza sayfasını sıfırdan oluşturmak istiyorsanız, şablon kitaplığını kapatmanız yeterlidir.

Ayrıca bakınız: Elementor'da Renk Örnekleyici nasıl kullanılır?

Bu örnekte, özel mağaza sayfasını sıfırdan oluşturacağız. Yukarıda belirtildiği gibi, ürünleri görüntülemek için Ürünler widget'ını kullanacağız.

Ürünler widget'ını düzenleme kutusuna eklemeden önce, yerleşimi bölümler ve sütunlar ekleyerek tanımlayabilirsiniz. Düzen hazır olduğunda, Ürünler pencere öğesini düzenleme kutusuna sürükleyebilirsiniz.

Gördüğünüz gibi, Ürünler widget'ı en son WooCommerce ürünlerini otomatik olarak yükler ve görüntüler. Bloğu açarak sorguyu değiştirebilirsiniz. Sorgu sekmenin altında içindekiler ayarlar panelinden. Aralarından seçim yapabileceğiniz beş seçenek vardır:

  • Geçerli Sorgu - Geçerli Sorgu
  • En Son Ürünler - En Son Ürünler
  • Satış - Satış
  • Öne Çıkan - Öne Çıkan
  • Manuel Seçim - Manuel Seçim

Ayrıca ürünlerin görüntülenme sırasını ayarlayabilir veya belirli

Elementor ile bir WooCommerce mağazası için özel sayfa nasıl oluşturulur

Sütun ve satır sayısını ayarlamak için bloğu açabilirsiniz. içerik sekmenin altında İçerik. Bu bloktan ayrıca etkinleştirebilirsiniz sayfalara numara koyma.

Ürünler widget'ı için en iyi ayarları elde edene kadar ayarlar paneliyle oynayabilirsiniz. Ürünler widget'ını tamamladığınızda, sayfanıza daha fazla widget ekleyebilirsiniz.

Ayrıca okuyun: Elementor'da renk seçici nasıl kullanılır?

Sayfayı düzenlemeyi bitirdikten sonra, düğmesine tıklayabilirsiniz. YAYINLA Ayarlar panelinin alt kısmında.

Düğmeye tıklayarak bir görüntüleme koşulu ekleyin bir koşul ekleyin. Özel bir mağaza sayfası oluşturmak istediğiniz için seçeneği belirleyin. Mağaza Sayfa. düğmesine tıklayın KAYDET KAPAT Değişikliği kaydetmek için.

Elementor ile bir WooCommerce mağazası için özel sayfa nasıl oluşturulur

Şimdiye kadar, Elementor Pro'yu kullanarak özel WooCommerce mağaza sayfasını başarıyla oluşturdunuz. Gidebilirsin sitenizde.com/store sonucu kontrol etmek için.

Ürünler widget'ını özelleştirin

Sayfanızı yayınlamadan önce Ürünler widget'ını daha çekici hale getirmek için özelleştirebilirsiniz. Bunu yapmak için düzenleme kutusundaki widget'a tıklayın ve sekmeye gidin stil ayarlar panelinden. Aşağıdaki gibi açabileceğiniz dört blok vardır:

  • Ürünler

Sütunlar ve satırlar arasındaki boşluğu tanımlamak için bu bloğu açabilirsiniz. Bu bloktan, ürün başlığı, ürün fiyatı, ürün puanı, ürün vb. gibi ürün öğelerinin metin renginin yanı sıra tipografiyi (yazı tipi ailesi, yazı tipi boyutu vb.) de ayarlayabilirsiniz. Ürün resminin kenarlığını da ayarlayabilirsiniz,

  • kutu

Bu bağlamda Box, her bir ürünün konteynerini ifade eder. bloğu açabilirsiniz kutu konteynerin sınır genişliğini, sınır yarıçapını tanımlamak için, kutunun gölgesi, arka plan rengi, kenarlık rengi vb.

  • Sayfalara numara koyma

seçeneği etkinleştirirseniz Sayfalara numara koyma bloktan İçerik, bloğu açabilirsiniz Sayfalara numara koyma sekmenin altında stil Sayfalandırmayı özelleştirmek için. Boşluk, kenarlık rengi, arka plan rengi vb. gibi şeyleri ayarlayabilirsiniz.

Ayrıca her durum için farklı parametreler (normal, işaret ve aktif) tanımlayabilirsiniz.

  • Satılık Flaş

WooCommerce'de yeni bir ürün eklediğinizde, ziyaretçilerinize ilişkili ürünün indirimli olduğunu göstermek için bir indirimli fiyat özelliği belirleyebilirsiniz. Bunu vurgulamak için indirimli ürünlerin indirimli rozeti olması için indirim özelliğini mağaza sayfasında görüntüleyebilirsiniz.

bloğu açabilirsiniz Satılık Flaş satış rozetini kişiselleştirmek için. Metin rengi, arka plan rengi, tipografi, kenarlık yarıçapı, boyut (genişlik ve yükseklik), mesafe vb. öğeleri tanımlayabilirsiniz.

Sonunda

WooCommerce Builder, Elementor Pro tarafından sunulan özelliklerden biridir. Size izin verir web sitesi oluştur WooCommerce ile ve kodlama olmadan kişiselleştirilmiş ve benzersiz e-ticaret platformu. yüklemeye gerek yok WordPress tema hangi WooCommerce için tasarlandığını iddia ediyor. Bunun yerine, Elementor'un görsel düzenleyicisini kullanarak kendi kendinize özel WooCommerce sayfaları oluşturabilirsiniz.

Ayrıca Oku: Elementor'da bölüm oluşturmak için bölücü nasıl eklenir

3.2.2 sürümüne kadar, Elementor Pro yalnızca Özel Mağaza Sayfası, Özel Tek Ürün Sayfası ve Özel Ürün Arşivi Sayfaları oluşturmanıza izin verir. Ancak Elementor, Elementor Pro'nun bir sonraki sürümünde ayrıca özel bir sepet sayfası, özel bir ödeme sayfası ve özel bir müşteri hesabı sayfası oluşturabileceğinizi duyurdu.

Elementor Pro'yu Hemen Alın!

Sonuç

Buraya ! Elementor ile bir WooCommerce mağazası için özel bir sayfanın nasıl oluşturulacağını gösteren bu makale bu kadar.. Oraya nasıl gideceğinizle ilgili herhangi bir endişeniz varsa fbize bildirin Yorumlar.

Ancak, ayrıca kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.

...