Flatsome temasıyla özel bir WooCommerce ürün sayfası oluşturun

Düzleştirici Tema

Flatsome , e-Ticaret web siteleri için tasarlanmış güçlü bir WordPress temasıdır ve WooCommerce entegrasyonuyla birlikte gelir.

ThemeForest'teki en popüler WooCommerce temalarından biridir. Bu eğitimin yazıldığı an itibarıyla 174.500'ün üzerinde satış vardı ve 6.600'den fazla yorumdan gelen muhteşem bir 4,8 yıldız derecelendirmesi vardı.

Flatsome öncelikle yeni başlayanlar ve teknoloji konusunda bilgili olmayan kullanıcılar düşünülerek tasarlanmıştır.

Bu, çevrimiçi bir işe başlamak isteyen ancak nasıl kod yazacağını bilmeyen veya profesyonel bir kodlayıcı tutacak bütçesi olmayan kişiler için harikadır. Flatsome ile basit ve sezgisel araçları kullanarak profesyonel görünümlü bir web sitesi oluşturabileceksiniz.

Artık Flatsome tonlarca harika özellik ve işlevsellikle dolu olarak geliyor. Nelerin mevcut olduğunu ve nasıl çalıştığını göstermek için, Flatsome'u kullanarak nasıl WooCommerce ürün sayfası oluşturacağınızı gösteren hızlı bir eğitimimiz var.

O halde daha fazla uzatmadan başlayalım:

İçindekiler:

Flatsome, WooCommerce ve WordPress arasındaki fark

Yeni okuyucularımıza hoş geldiniz derken, tüm okuyucularımızın aynı sayfada olmasını sağlamak için bazı gerekli bilgileri girmeliyiz. Burada, bu makale boyunca kullanacağımız üç terminolojideki farkı tartışacağız.

WordPress'le başlayalım. Web sitenizi oluşturmak için farklı temalar ve plugin kurduğunuz bir platformdur. İhtiyaçlarınıza göre diğer görevleri yerine getirmek için binlerce plugin ve tema mevcuttur.

WooCommerce, WordPress'e yüklediğimiz ve web sitemize farklı özellikler eklemenizi sağlayan bir plugin . Bu plugin kurulumuyla web sitemizi ve çevrimiçi mağazamızı alışveriş sepeti, ödeme işleme, ürün yönetimi vb. gibi ek işlevlerle donatabiliriz.

Son olarak ama kesinlikle en kritik unsurlardan biri web sitemizin görünümüdür. Flatsome, web sitemizin bakış açısını isteklerimize göre özelleştirmemize olanak sağlayan bir temadır. Örneğin firma logonuz turuncu ise web sitenizin rengine de yansımasını istersiniz. Flatsome'un size sağlayabileceği şey budur.

Flatsome temasını kullanarak bir WooCommerce ürün sayfası oluşturun

Okuyucumuzun tamamı WordPress, WoCommerce ve Flatsome hakkında bilgi sahibi olduğundan, Flatsome temasıyla birlikte gelen muhteşem UX oluşturucuyla ürün sayfamızı özelleştirmeye geçmemizin zamanı geldi. Tasarımcının hayatını son derece kolaylaştıran sürükle bırak özelliğidir.

Muhtemelen son birkaç aydır yaşadığımız zorlu dönemlerden dolayı neredeyse herkes internetten alışveriş yaptı. Evde kalmak hepimiz için en güvenli çözümdü. Tüm okuyucularımızın, bir çevrimiçi mağazanın standart bir web sitesine kıyasla çok daha karmaşık olduğu konusunda hemfikir olmasının nedeni budur.

Ancak WooCommerce ve Flatsome'un yardımıyla bu görev son derece kolay hale geldi. Oturup web sitenizin nasıl görüneceğini planlamanız gerekiyor, hepsi bu. WooCommerce, oluşturucu seçenekleriyle size yardımcı olmak için orada olacak. Sürükle ve bırak yöntemiyle yalnızca birkaç dakika içinde tam teşekküllü çalışan bir çevrimiçi mağaza oluşturabilirsiniz.

WooCommerce ve Flatsome çevrimiçi bir mağazaya sahip olma fikirlerinize yepyeni bir hayat verebileceksiniz. Web sitenizin müşteri çekebilmesi için modern ve güzel bir görünüme sahip olması gerekir. Bu nedenle Flatsome tüm sorunlarınız için en iyi çözümdür, o yüzden buradan indirin ve başlayalım.

Flatsome'un bazı harika özellikleri var, ancak parçalardan biri 300.000'den fazla kullanıcının en iyi tercihi haline gelmesi. Üstün bir araç, tek bir satırı kodlamak zorunda kalmadan, harika duyarlı web siteleri oluşturmanıza yardımcı olur. Dahası, son derece yaratıcı ve benzersiz çevrimiçi mağazalar yaratma yeteneği onu daha da değerli kılıyor.

O halde daha fazla vakit kaybetmeden eğitime geçelim. Bu eğitim, ürünler sayfasını tasarlama sürecinin tamamını size gösterir. Resimler görevin süreçten nasıl geçeceğine dair daha iyi bir fikir edinmenize yardımcı olacaktır.

Adım 1: Ürün Sayfası için Bir Düzen Seçin

Öncelikle ürünler sayfasının düzenini seçerek başlayacağız. Bu seçim, online mağazamız için daha sonra isteklerimize göre özelleştireceğimiz temel bir sayfa oluşturacaktır. Bu adım adım kılavuz, sayfayı özelleştirme sürecinde size yol gösterecektir.

Bu amp Classic Shop seçeneğiyle devam edeceğiz. Ancak sizin için herhangi bir kısıtlama yoktur. Özelleştirme süreci seçtiğiniz her düzen için benzer olacaktır. Tek fark sayfanın temel yapısının diğerinden farklı olmasıdır.

Ürün özelleştiriciye geçerek ona Tam yükseklikte sol kenar çubuğu adını verdik.

Ürünler sayfasını özelleştirmek için iki seçenek mevcuttur. Bunlardan ilki UX builder ile yapılacak, diğeri ise sayfayı manuel olarak oluşturmak. İkinci seçeneği seçerseniz resmi belgelere gitmeniz ve kısa kodları bulmanız gerekecektir. Yeni başlayan biriyseniz ve bu, bir çevrimiçi mağaza oluşturma konusundaki ilk deneyiminizse, bu ilk seçeneği tercih etmenizi öneririm.

(İsteğe bağlı) 2. Adım: Ürün Sayfasını Manuel Olarak Oluşturun

İşte Flatsome'un resmi dokümantasyon sayfasının ekran görüntüsü. Kelime kısa kodlarını yazıp arayabilirsiniz.

Aramaya bastığınızda ekranda kısa kodların bir listesi görüntülenecektir. Ürün sayfası için önemli olan kısa kodları seçebilirsiniz. Kısa kodları kullanmak daha az çaba gerektirir, ancak WordPress ve kısa kodları kullanma konusunda biraz uygulamalı deneyiminizin olması önemlidir.

Web sitesinde sayfa oluşturmak için kullanabileceğiniz kısa kodların listesi aşağıdadır.

Bu amp , tam yükseklikte sol kenar çubuğu düzenini özelleştireceğiz; bu nedenle tasarımın kodunu kopyalayacağız. Aşağıda uygulananın resmi bulunmaktadır, ancak bunu yapıdan kolayca kopyalayabilirsiniz.

Başlığı olan bir blok oluşturmaya başlayın. Kafa geliştirmek istiyorsanız kontrol panelinizde yer alan UX bloklarının altında bulunan “Yeni Ekle” seçeneğine tıklamanız gerekiyor.

Bloğa isteğinize göre isim verebilirsiniz. Bu amp birleşime 'Tam yükseklikte sol kenar çubuğu düzeni' adını verdik. Daha sonra blok düzenleyicinin içindeki kısa kodları görebilirsiniz. İstediğiniz kısa kodları kopyalamayı tamamladığınızda yayınla tuşuna basabilirsiniz.

Sayfamızı isteklerimize göre özelleştirebileceğimiz bu küçük adımdan sonra eşit olacağız. Şimdi ürün sayfası tema seçeneğine gidin ve özel düzen simgesine basın.

Tamamlandığında artık Özel Ürün Düzeni açılır menüsünden bloklar oluşturabileceksiniz.

Az önce oluşturduğumuz bloğu seçin. Bu bloğu oluştururken asıl amacımız bundan bir ürün sayfası oluşturmaktı. Bu amp göre Tam yükseklikte sol kenar çubuğu düzeni blok, sizin tarafınızda ise isimlendirdiğiniz gibi olacaktır.

Tamamlandığında Yayınla düğmesine basmanız yeterlidir; ayarları kaydedecektir.

3. Adım: Ürün Sayfasını Özelleştirin

Özelleştirmeye başlamamızın zamanı geldi. İlk olarak, adımlarda daha önce belirlediğimiz ön uçtan mevcut ürünler sayfasına gideceğiz.

Kurulumu gereken belirli bir ürünü seçmeniz önemlidir. Özelleştirmemiz gereken işin tüm ayrıntılarına ve görsellerine sahip olmalısınız. Bu sayede oluşturacağınız sayfa bölümünü görselleştirmek için süreç daha rahat hale gelir.

UX oluşturucu seçeneği görünür. Özelleştirmeyi başlatmak için düğmeye basmanız yeterli.

UX oluşturucu açıldıktan sonra, ürün sayfanızın sol panelinde ürün sayfası öğelerinin bulunduğunu görselden görebilirsiniz.

Sol taraftaki panel başlangıçta oluşturduğumuz bloktur. Dokümantasyondan alınan kısa kodların yardımıyla oluşturduk.

Sol taraftaki panelden öğeleri yeniden sıralama ve öğe seçeneğinden ayarları değiştirme seçenekleriniz vardır. Bu amp sol menüde bulunan Fiyatı yeniden sıralayacağız.

Ayrıca, inşaatçının ön izlemesindeki öğeleri yeniden düzenlemenize ve inşaatçının ürün sayfasına ek bileşenler eklemenize de olanak tanır. Bu demoda Ürünler Sekmeleri bölümü ve İlgili Ürün yalnızca basit bir sürükle ve bırak işlemiyle yeniden düzenlendi.

Önemli sürükle ve bırak işleviyle Flatsome, web sitenizde aradığınızı size sunmaya hazır. Son derece özelleştirilebilir modüllerle, kolaylıkla harika sayfalar oluşturabilirsiniz. Sürükle ve bırak özelliği hayatı daha da konforlu hale getiriyor.

Kapanış

Bu modern çağda çevrimiçi bir işletmeye sahip olmak zorunludur çünkü insanlar güvende kalmak için evde kalmayı tercih etmektedir. Öyleyse, Flatsome ile işletmenizin ilk çevrimiçi mağazasını oluşturmaya başlayın ve müşterilerinizi benzersizliği ve yaratıcılığıyla büyüleyin. Üstelik içerik düzenleyicide hiçbir kod karmaşası yok, yalnızca birkaç kısa kod satırı var. Flatsome şüphesiz karşılaştığım en iyi tema. Yani başka bir tema aramanıza gerek yok, sadece indirme düğmesine basın ve kişiselleştirilmiş çevrimiçi mağazanızı hemen oluşturmaya başlayın.

Holderkhu

canlı:.cid.e495888558d5265f

yakın zamanda Gönderilenler

Elementor ile üstbilgiler ve altbilgiler nasıl kullanılır?

Bir web sitesinin üstbilgileri ve altbilgileri temel unsurlardır. Çoğu durumda, Başlık gezinmeyi sağlar…

6 Ocak 2022

WordPress tema karşılaştırması: Astra vs OceanWP

Piyasadaki en popüler WordPress temalarından ikisi Astra ve OceanWP'dir. Profesyonel…

2 Ocak 2022

WordPress haber teması karşılaştırması: Gazete vs. Astra

Mükemmel bir haber sitesi oluşturmak, web tasarımcısı olmanızı gerektirmez. Biz…

25 Ekim 2021

Gazete Teması ile haberlerle ilgili bir web sitesi oluşturun

Gazete teması, tagDiv tarafından tasarlanan en önemli WordPress temalarından biridir.

18 Ekim 2021

Avada WooCommerce oluşturucuyla bir e-Ticaret nasıl oluşturulur?

Çevrimiçi bir mağaza kurmaya gelince, WooCommerce başvurulacak plugin . BT…

4 Ekim 2021

Elementor ile yapışkan başlık ve kaydırma efektleri nasıl kullanılır?

Başlık genellikle bir kişinin web sitenizi ziyaret ettiğinde gördüğü ilk şeydir,…

21 Eylül 2021