Elementor ile WooCommerce sayfaları

Yayınlanan: 2021-11-23

WordPress, web sitenizi, özellikle de WooCommerce web mağazalarını oluşturmak için harika özellikleriyle hayatımızı kolaylaştırır. Kodlarla uğraşmak zorunda kalmayacağınız için WooCommerce sayfalarınızı Elementor ile tasarlamaktan daha kolay bir şey yoktur.

Ama yine de merak edebilirsiniz, neden Elementor? Bunun nedeni, WooCommerce'de teknik bilgisi olmayan bir kişinin bile yapabileceği çevrimiçi alışveriş web siteleri tasarlamak için mükemmel bir araç olmasıdır. Elementor, sizi ezici bir site oluşturma deneyiminden geçirerek bunu mümkün kılar.

Peki, Elementor ile WooCommerce sayfaları tasarlamaya hazır mısınız? Elementor sayfa oluşturucuyu kullanarak dinamik WooCommerce sayfalarını ne kadar kolay elde edebileceğiniz konusunda kesin adımlarla size rehberlik edelim.

Başlayalım!

Elementor, WooCommerce ile Uyumlu mu? Neden Onunla Gidelim?

Başarılı bir WooCommerce web sitesi için web tasarımı çok önemlidir. Müşterilerinizin dikkatini işinize çekmek için oldukça çekici bir site arayüzü ve özenle paketlenmiş özellikler gerektirir.

WordPress, web sitelerini kolayca tasarlayabileceğiniz harika bir platformdur. Ancak Elementor, dakikalar içinde muhteşem web siteleri oluşturmayı daha da kolaylaştırıyor. Eklenti çok güçlüdür ve web sitenize özellikler ve işlevler eklemenize yardımcı olan widget'larla donatılmıştır.

Ancak Elementor, WordPress ile uyumlu mu? Evet öyle. Aslında Elementor, WordPress ve içindeki her şeyle oldukça uyumludur. Elementor ile WooCommerce sayfaları tasarlamak kolay, esnek ve yeni başlayanlar için bile çocuk oyuncağıdır.

Kodlama bilgisinden bağımsız olarak herkes Elementor ile web siteleri tasarlayabildiğinden, kullanmanız için kulübedeki en iyi aracı yapar. Bugün 5 milyondan fazla insanın Elementor'u kendi web sitelerini yapmak için kullanması şaşırtıcı değil.

Ana gösteriye hazır mısınız? Aşağıda Elementor ile WooCommerce sayfalarınızı oluşturmanın ve özelleştirmenin doğru yolunu göstermeme izin verin.

Elementor ile WooCommerce Sayfaları Oluşturun

Dediğimiz gibi, WooCommerce sayfalarınızı Elementor ile yapmak zor bir iş değil. WordPress ile her şey kolaylaştı ve bu görevin tüm prosedürü de öyle. İşte bunu nasıl yaptık-

Öncelikle WordPress için gerekli eklentileri kurmak gibi hazırlıklar yapmanız gerekiyor.

WordPress web siteniz
Elementor Sayfa Oluşturucu (ücretsiz ve Pro)
WooCommerce (ücretsiz)
Element Pack Lite (ücretsiz)

Alan adı ve barındırma satın alma, web sitenizde WordPress'i yapılandırma, Elementor, WooCommerce, Element Pack Lite vb. eklentileri yükleme gibi ilk kurulumu tamamladıktan sonra. Web sitenizi çalıştırmak için gereken her şeyi yapılandırmak biraz zaman alabilir.

Özellikle WooCommerce'i kurmak birkaç dakika sürer ve ödeme bilgileri, nakliye, kişisel iletişim vb. dahil her türlü bilgiyi doldurmanız gerekir.

Kontrol paneline geri döndüğünüzde, yapılandırma yapılır ve Elementor ile WooCommerce sayfaları oluşturmaya hazırsınız.

Elementor ve WooCommerce'in, WooCommerce işlevlerini web sitenize eklemek için çok sayıda widget'a sahip olduğunu unutmayın. Ancak yine de, bunlar WooCommerce veya web tasarımının uygun işlevlerine tam olarak dalmak için yeterli değildir.

Bu nedenle, web sitesini hem tasarım hem de özellikler açısından zenginleştirmek için Element Pack Lite gibi bir yardım eli eklentisine ihtiyacımız var. Şimdi tasarım aşamasına geçelim.

WooCommerce Sayfalarını Elementor ile Kolayca Özelleştirin

Elementor sayfa oluşturucu, hazır şablonları içe aktarmanıza izin verdiğinden, şablonlarla çalışmak çok kolaydır, ardından onu sayfaların içinde çağırıp özelleştirmeye başlayın. Ayrıca Elementor, mağaza sayfanızın bir tabanını oluşturmak için WooCommerce için zaten 10'dan fazla basit widget'a sahiptir.

Ancak Element Pack Pro dahil olmak üzere gerekli tüm eklentileri aldığınızda, WooCommerce web sitenizin tüm alanını kaplamak için fazlasıyla yeterli widget'a sahip olacaksınız. Bu nedenle, web sayfalarınızı tasarlarken bastırılmış hissetmenize yer yoktur.

Ancak bundan önce, olması gerektiği gibi çalışmayacakları sürece eklentilerin güncel olduğundan emin olun.

Adım-1: Bir WooCommerce sayfası Şablonu oluşturalım

Yeni başlayanlar için WordPress web sitenizden şablon oluşturma bölümüne gidin. Kontrol Paneli> Şablonlar> Yeni ekle'ye gidin

“Yeni Ekle” düğmesine dokunmak, şablonu yapmanız gereken bir açılır pencere görüntüleyecektir. Burada birkaç seçenek mevcut ve “Tek Ürün” yazanı seçmelisiniz. Ürünler için bir WooCommerce sayfası oluşturacağımız için gideceğimiz ayar bu.

Ayrıca, Elementor Pro'nun kurulu olduğundan emin olun. Aksi takdirde, bu seçenekler görünmez.

Gelecekte kullanmak üzere şablonu kolayca tanımlamak için yanına bir şablon adı eklemeniz yeterlidir.

Ardından “Şablon Oluştur” düğmesine basın ve Elementor ile bir sonraki WooCommerce sayfalarınızı oluşturmak için sayfaya öğeler yerleştirmeye başlayın.

2. Adım: Sayfa Şablonlarını Ekleme

Artık WooCommerce sayfa şablonunuzu oluşturmaya hazır olduğunuza göre, bunu yapmanın iki yolu vardır, ya sıfırdan yapın ya da hazır bir şablon alıp özelleştirin.

İki seçenek arasında pek bir fark yok, sadece şablonu tamamlamak için gereken süre. Kullanım kolaylığı için önce hazır bir şablon ekleyelim.

Kitaplığı sayfa düzenleyicide açmak için Element Pack Şablon Kitaplığı simgesine tıklamanız yeterlidir.

Tek yapmanız gereken şablon kitaplığında gezinmek ve mağaza temanıza uygun sayfa tasarımını seçmek. Bir tane bulduğunuzda, şablonun üzerine gelin ve “Ekle” düğmesine tıklayın.

Elementor Pro'dan WooCommerce sayfa şablonlarını da kullanabileceğinizi unutmayın. Bir şablonu özelleştirdiğinizde, şablonun kendisine benzemeyecek benzersiz bir tasarım olacaktır.

3. Adım: Özellikleri Ekleyin ve Özelleştirin

Widget'ları şablon sayfasına dökmeye başlamadan önce müşterilerinizin beğeneceği özellikler hakkında bilgi sahibi olmanız çok önemlidir. Her zaman yeni içeriğe gidebilir veya daha fazla iyileştirme için mevcut düzeni özelleştirebilirsiniz.

Elementor tarafından sağlanan ve WooCommerce web sitenize daha fazla renk katacak bir dizi widget vardır. Bu widget'lar ile WooCommerce sayfanızı parça parça kolayca tasarlayabilir ve eksiksiz bir web sitesi oluşturabilirsiniz.

Önce mevcut widget'ları görelim-

ürün başlığı
Tanım
Sepete ekle
Ürün fiyatı
resim
Değerlendirme
Ürün miktarı
Meta
Galeta unu
İlgili ürünler
Stok ve Stokta Olmayan Ürünler

İşte yukarıdaki listedeki öğeleri kullanan özel bir WooCommerce ürün sayfası.

Ziyaretçilerinizin ürünlere daha fazla odaklanmasını sağlamak için ürün sayfası tasarımını minimumda tutmak iyi bir taktiktir. Her neyse, artık özellikleri ayırt edebilir ve sayfanızı nasıl tasarlayacağınızı bilirsiniz.

Adım-4: WooCommerce Sayfaları İçin Sepet Düğmesi

WooCommerce web sitenizde yeterince aktif CTA düğmesine sahip olmak, ziyaretçilerinizle etkileşim kurmanın ve potansiyel müşterileri onurlandırmanın iyi bir yoludur. CTA yalnızca müşterileri çekmekle kalmaz, aynı zamanda sitenizin ziyaretçilere çekici görünmesini sağlar.

Elementor ile WooCommerce sayfalarınıza CTA veya "Sepete ekle" düğmeleri eklemek çok kolaydır. Bununla birlikte, Elementor'da statik ve dinamik olmak üzere iki tür "Sepete Ekle" düğmesi vardır.

Statik olanı kullanmak, sayfalarınıza CTA eklemenin en hızlı yoludur, ancak stiller için kontrollerden yoksundur. Element Pack'in "WC- Sepete Ekle" WooCommerce için widget'ını kullanarak dinamik bir CTA düğmesi kullanmanızı öneririz.

Burada, ürünlerinizin aksine güzel görünmesi için sepet düğmesini özelleştirebilirsiniz. Düğme için her zaman renk, arka plan, kenarlık, dolgu, hizalama, etiket, simge, boyut vb. özelleştirmeye gidebilirsiniz.

Tek yapmanız gereken düğme yüksekliğini kullanıcının göz seviyesine göre ayarlamak. Kullanıcıların ürünü satın alma kararını etkilediği için düğme konumunun çok önemli olduğunu unutmayın.

Adım-5: WooCommerce Ürün Arşivi Sayfalarını Elementor ile Yapılandırın

Şimdiye kadar WooCommerce'de tek ürün sayfalarını tamamladınız. Şimdi, ürünlerinizi toplu olarak sergilemek ve ziyaretçilerinizin kolayca gezinmesine yardımcı olmak için bir ürün arşiv sayfası oluşturmanız gerekiyor.

Hemen kendimiz için bir tane yapalım. Daha önce olduğu gibi, WordPress kontrol panelinize gidin ve Şablonlar menüsüne girin ve “YENİ EKLE”yi tıklayın.

Bu sefer aşağı kaydırın ve daha sonra tanımlamak için bir adla şablon için Ürünler Arşivi seçeneğini seçin.

Şimdi Şablon Oluştur düğmesine basarak bitirin. Elementor düzenleyici sayfasının görünmesini bekleyin.

Boş sayfayı gördüğünüzde, arşiv sayfası için başka bir hazır şablonla çalışmaya başlayabilir veya sıfırdan kendinizinkini yapabilirsiniz. Elementor, arşiv sayfasının parçalarını oluşturmak için oldukça fazla sayıda widget'a sahiptir.

Ancak beyin fırtınası sürecini atlayabilir ve Element Pack Pro eklentisindeki widget'ları kullanabilirsiniz. Tam bir görüntü oluşturmak için arayüzün birden çok parçasını birleştiren bazı WooCommerce özelliklerine sahiptir.

Aşağıdaki listeye bir göz atın-

Portföy Atlıkarınca
Cihaz Kaydırıcısı
Özel Atlıkarınca
WooCommerce Kaydırıcı
WooCommerce Ürünleri
WooCommerce Döngü
WooCommerce Kategorileri

Bu widget'ları kullanarak, ürün arşivi için Elementor ile çarpıcı WooCommerce sayfaları geliştirebilirsiniz.

Bu sadece küçük bir örnek. Yapabileceğiniz daha çok şey var ve sınır sadece gökyüzü.

6. Adım: Element Pack Pro ile Sayfa Tasarımını Özelleştirin

Şimdiye kadar, Elementor ile WooCommerce sayfaları oluşturuyordunuz, ancak tasarımda önemli bir değişiklik yapmadınız. Elementor, arayüzü özelleştirmek için harika bir araçtır, yine de karmaşık tasarım kontrollerinden yoksundur.

Ama bunun için endişelenme, Element Pack Pro'nun bitmemiş işi senin için bitirmesi gerekiyor. Bu araç, sahip olduğu her özellik için özelleştirme kontrolleri ile çok ünlüdür (200'den fazla özellik). Böylece, tek bir yerde animasyonlu başlık, animasyonlu galeri, ürün karusel, ızgara, kaydırıcı, bölüm bulanıklığı, sarmalayıcı bağlantısı ve daha şaşırtıcı özelliklere sahip olabilirsiniz.

Örneğin, WooCommerce Carousel'imizin zevkinize uyacak şekilde nasıl özelleştirilebileceğini gösterelim.

Adım-7: Elementor ile WooCommerce Sayfalarını Yayınlamak

Artık her şey hazır olduğuna göre tek ürün sayfası, arşiv sayfası yaptık ve sayfa tasarımlarını hazırlamayı bitirdik, artık sayfaları canlı web sitesine koyma zamanı.

Şablonları kaydettikten sonra, panoya, ürünleri veya arşivi koymak istediğiniz sayfaya gidebilir ve oradaki şablonları çağırabilirsiniz. Basit ve kolay. Kaydedilmiş şablonları istediğiniz zaman kullanabileceğiniz için sayfayı çoğaltmanız bile gerekmez.

Elementor ile çarpıcı WooCommerce sayfaları oluşturmak için şablonlarla bu şekilde çalışırsınız.

Dakikalar İçinde Karmaşık WooCommerce Sayfaları Tasarlarken Rahatlayın

WooCommerce sayfalarını Elementor ile tasarlamak, tam olarak ne yaptığınızı bildiğinizde daha az zahmetli ve daha eğlencelidir. Yeni başlayanlar için uygun bir yazılım olan Elementor, herhangi bir üçüncü el gerekmeden temel bilgilerde hızlı bir şekilde ustalaşmanızı mümkün kılar.

Bu kadar!

Bu makaleyle ilgili sorularınız için yorum bölümünü kullanın veya doğrudan bizimle konuşmak için LiveChat seçeneğini kullanabilirsiniz. Kaldığınız için teşekkürler.

Güvende kal.