Categories
WordPress

Bu yazımda WordPress Ürün Sayfası Tasarımı ve WordPress mağaza sayfasının tasarımını Elementor ile düzenlemeyi anlatacağım.

Bazen ana sayfası güzel olan bir temanın mağaza tasarımı kötü oluyor.

Anlattığım bilgilerle mağaza sayfasını ve tekli ürün sayfasını Elementor eklentisi ile istediğiniz gibi düzenleyebileceksiniz.

WordPress Ürün Sayfası Tasarımı için Kullanacağımız eklentiler

Bu üç eklentide ücretsizdir. Aslında Elementor’un Pro sürümünde direkt olarak düzenlemenize izin veriyor.

Ancak biz bu yazıda ücretsiz olarak nasıl düzenleyebileceğimizi öğreneceğiz.

Elementor

Sürükle bırak mantığı ile sayfa tasarımı yapmanızı sağlıyor.

Essential Addons for Elementor

Elementor Pro’nun sağladığı özelliklerin bazılarını ücretsiz olarak kullanmanızı sağlıyor.

WooLentor – WooCommerce Elementor Addons + Builder

Elementor Pro’nunWoocommerce ürün sayfası tasarımı ve WooCommerce mağaza sayfası düzenleme özelliğini ücretsiz olarak sağlıyor.

 

WooLentor Eklentisinden Tasarımı İmport Ediyoruz.

Bu üç eklentiyi kurduktan sonra WordPress Admin panelinizde WooLentor diye bir menü eklenmiş olacak.

WooLentor sayfasının altında iki tane seçenek var Settings ve Template Library

İlk önce Template Library’i tıklayın.

Karışınıza yukarıdaki sayfa çıkacak şimdi bu sayfadaki üç seçenek şu şekilde

Home – Mağaza ana sayfasını düzenlemek istiyorsanız.

Shop – Ürün arşivinin tasarımını düzenlemek istiyorsanız.

Product Details – Müşteri ürüne tıkladığında açılan sayfa yani tekli ürün bilgileri sayfasını düzenlemek istiyorsanız.

 

Ben burada Product Details seçeneğini tıklıyorum, ama siz hangi sayfayı düzenlemek istiyorsanız seçebilirsiniz.

Product Details sayfasını tıkladığımda karşınıza aşağıdaki gibi bir sayfa çıkacak.

Burada tekli ürün sayfa tasarımınızın şablonunu seçebiliyorsunuz. Seçtikten sonra Elementor’la istediğiniz gibi düzenlemeye devam edebilirsiniz.

Import butonuna tıkladıktan sonra karşınıza aşağıdaki gibi bir sayfa çıkacak.

Bu sayfada Import to Library seçeneğine tıklıyoruz.

Import  ettikten sonra WordPress Admin panelinizdeki menüdeki WooLentor >> Settings seçeneğine tıklayın.

Eklentinin Enable olduğuna emin olun.

Burada önemli olan detay

Single Product Template  ( Eğer tekli ürün sayfası tasarımını entegre ettiyseniz buradan görseldeki gibi Product Details -> Single Product Page One seçeneğine tıklayın.)

Product Archive Page Template ( Ürün arşivi sayfası tasarımını import ettiyseniz buradaki Select Template bölümünden import edilen sayfayı seçiniz. )

WordPress Ürün Sayfası Tasarımı

 

Not

Eğer öncesinde Elementor kullanmadıysanız yukarıdaki anlattıklarımla tasarımları değiştirebilirsiniz ama Elementor eklentisini kullanmayı bilmediğiniz için  sürekle bırak mantığı ile istediğiniz gibi tasarım yapamazsınız.

Ama elementor eklentisini kullanmak çok kolaydır burada youtube’da bulduğum videonun linkini ekledim.

Nasıl kullanıldığını kısa sürede öğrenebilirsiniz. Elementor WordPress kullanan kişiler için mükemmel tasarımlar üretmenizi sağlayacak bir eklentidir.

Eğer wordpress ödeme sayfası düzenleme hakkında bilgi almak istiyorsanız buradaki yazımı okuyabilirsiniz.

 

Yazı hakkında sormak istediklerinizi yorum yazarak sorabilirsiniz.

Veya bu yazı sorununuzu çözdüyse yorum olarak belirtirseniz beni çok mutlu edersiniz. Sağlıcakla kalın, kolay gelsin.

 

7 replies on “WordPress Ürün Sayfası Tasarımı Düzenleme [Elementor]”

Mert Demirsays:

Selamlar, çok güzel eklentiler, Elementor zaten kullanıyordum, tekil ürün sayfası tasarımı için güzel bir geliştirme sunuyor bu eklentiler, fakat “Single Product Page One” Import’a tıklıyorum, “Import to Library” dialog penceresi açılmıyor, yardımcı olabilir misiniz ?

Ali Onur Özdemirsays:

Merhabalar, yardımcı olabilirim. Bana merhaba@alionurozdemir.com‘a ekran görüntüsü atabilirsen sorunun nereden kaynaklandığını anlamaya çalışayım.

Yine basit çözüm olarak eklentiyi silip tekrar yüklemeyi ve cache eklentisi kullanıyorsan önbellek temizleme yaptıktan sonra cache eklentisini kısa bir süre devre dışı bırakıp tekrar import etmeyi dener misin?

Kenansays:

Merhaba, bu şekilde sayfayı import edip sayfayı düzenliyorum ancak, sayfayı test ettiğimde sayfa boyut ayarları sorun çıkarıyor mesela ürün sayfası full width olarak geliyor nereden düzelteceğimi bulamadım

Ali Onur Özdemirsays:

Merhabalar,

Aşağıdaki görseldeki gibi bıraktığım linkte Content Width kısmında Boxed seçeneğinin seçili olması gerekiyor.
Bu kullandığınız tema ile alakalı olabiliyor. Mesela temanın kendi ayarlarında tüm sayfalar full width seçili olabilir ama ekteki gibi bir ayar yaptığınızda sorununuz çözülecektir.
https://www.alionurozdemir.com/wp-content/uploads/2021/03/boxed.png

Eğer sorununuz çözülmezse ekran görseli atabilirseniz yardımcı olmaya çalışabilirim…
İyi çalışmalar kolay gelsin.🙂

Web Dayısays:

Elementor divi page builder gibi eklentilerden daha güzel. Kullanımı daha sade ve göze uygun. Anlatım için teşekkürler bu arada.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir