WordPress ve Elementor 2020 Kullanarak Bir e-Ticaret Web Sitesi Nasıl Yapılır?

Bu derste size, tamamen özelleştirebileceğiniz WordPress ve Elementor 2020 Kullanarak Bir e-Ticaret Web Sitesi Nasıl Yapılacağını öğretiyorum.

WordPress, e-Ticaret web siteleri de dahil olmak üzere her tür web sitesini oluşturmak için en çok kullanılan CMS platformudur. Ayrıca, şu anda WordPress için 1 numaralı ve en popüler sayfa oluşturucu olan harika web sayfaları oluşturmak için Elementor sayfa oluşturucuyu kullanmayı öğreneceksiniz. WordPress, internetin 1/3'ünden fazlasını kontrol eder. Sony, Bata, eBay ve daha pek çoğu gibi büyük e-ticaret şirketlerinin çoğu, web sitelerinin geliştirilmesi ve bakımı için if kullanıyor Ve bir WordPress kullanmanın en iyi yanı, herhangi bir kodlama dili veya başka bir tür öğrenmenize gerek olmamasıdır. web sitenizi yapmak için teknik jargon. Çekici, kullanıcı dostu bir web sitesi oluşturmaya yardımcı olan birçok yerleşik şablon ve düzen sağlayan basit bir sürükle ve bırak platformudur. Ayrıca, kolayca içe aktarabileceğiniz ve E-ticaret web sitenizi birkaç dakika içinde çalışır hale getirebileceğiniz hazır şablonlar sağlayacağım.

Sadece bu öğreticinin tamamını gözden geçirmek, kendi web sitenizi herhangi bir dış yardım olmadan çalışır duruma getirmeye hazır hale getirecektir. Bu eğitim, birçok kişinin web sitesini oluşturmasına yardımcı oldu ve işletmelerinin bu acımasız e-ticaret endüstrisindeki rekabette üstünlük kazanmasını sağladı. Bu yüzden bu kolay ve kendi kendini açıklayan öğreticiyi gözden geçirin ve tüm yaşamınız boyunca yardımcı olacak bir beceri edinin. Tüm süreç adım adım bir yaklaşımla öğretildi ve mümkün olduğunca kolay anlaşılmasını sağlamak için tüm bilgi grafikleri ve resimli temsiller verildi.

Öyleyse WordPress ve Elementor 2020 Kullanarak bir e-Ticaret Web Sitesi yapmaya başlayalım

Bir E-Ticaret Web Sitesine Giriş

Yukarıdaki resim, tipik bir e-ticaret web sitesinin Ana Sayfa veya Açılış sayfasının bir örneğidir. Açılış sayfaları, e-ticaret web sitesinde dönüşümler ve satış yapmak için çok önemlidir. Bu nedenle, açılış sayfası, özellikle e-ticaret web siteleri için satış ve indirimli fiyatlar veya yeni gelenler hakkında afişler ve bildirimler içeren çekici olmalıdır. Dönüşüm elde etmek için, açılış sayfasında en satılabilir ürünlerinize vurgu yapmanız ve bu ürünlere kolay bağlantı sağlamanız gerekir. Ürün kategorilerinizi açılış sayfasında görüntüleyebilir ve bunlara bağlantı sağlayabilirsiniz.

En üstte konumumuzu, telefon numaramızı, sol ve sağda iletişim numaralarımızı içeren bir başlığımız var, Facebook, Twitter, YouTube vb. sosyal medya sayfalarımızın simgeleri var. Bunun altında bir mağazamız var. Web sitemizin ürün alışveriş sayfasına bağlantı veren buton. Ayrıca, kullanıcıların bilgilerine ve satın alımlarına erişmek ve bunları yönetmek için kendi kişisel kontrol panellerine gidebilecekleri bir Hesap düğmemiz var. Ayrıca başlığın kendisinde işletmemizin logosu var. Ortada, sayfalarımıza olan bağlantımız var. Ana Sayfa, Hakkımızda, Mağaza, Hesabım ve Bize Ulaşın.

Bundan sonra, bu eğitimde nasıl oluşturulacağını öğreneceğiniz tüm ürünleriniz ve afişleriniz çok çekici bir şekilde gösteriliyor . Bundan sonra, kullanıcıların ürünler, teklifler, kuponlar vb. hakkında bildirimler ve e-postalar değil, web sitenize abone olabileceği bir Bülten bölümümüz de var. Bunun altında bizim hakkımızda bilgi veren altbilgimiz ve bir E-posta aboneliği düğmesi var.

Görselde de görebileceğiniz gibi, alışveriş sayfası, kullanıcıların herhangi bir ürünü tıklayarak kontrol edebilecekleri web sitemizde bulunan tüm ürünleri listeler. Yan çubukta bir Fiyat filtresi, kategori listesi, ürünlerimizin incelemeleri ve video reklamları var. Her ürünün altında ayrıca inceleme formu ve ilgili ürünler bulunur. Ardından, iş açıklamanızı ve ekibinizle ilgili bilgileri gösteren Hakkımızda sayfamız var. Ardından, kullanıcıların bir iletişim formu kullanarak bizimle iletişime geçebilecekleri bir İletişim sayfamız var. Ardından, her müşteri için kişisel, satın alma ve ödeme bilgilerini içeren kişisel bir panoya sahip olacak bir Hesabım panosuna sahibiz.

Görselde gördüğünüz gibi alışveriş yaptıktan sonra sepet sayfasını görebilir, alışveriş bilgilerinizi değiştirebilir, toplam tutarı kontrol edebilir ve ödemeye devam edebilirsiniz. Ardından ziyaretçiler, gönderim ayrıntılarını doldurarak ve satın alma için ödeme yaparak kontrol edebilir. Web sitenizin tamamen işe başlamaya hazır olması için bu öğreticide tüm bu sayfaları adım adım oluşturmayı öğreneceğiz.

Barındırma Alın ve WordPress ve Elementor Kurun

• NameHero Alan Adı Satın Alma

Web sitesi yapmak için yapmamız gereken ilk şey, web siteniz için bir alan adı ve barındırma almaktır. Web sitenizin tamamı barındırma sitenize dayanacağı ve destekleneceği için iyi bir barındırma seçmelisiniz, bu nedenle çeşitli barındırmaları güvenilirlik, teknik destek, alan, menkul kıymetler, tasarım, SEO fırsatları vb. kriterlere göre kontrol etmeniz ve karşılaştırmanız gerekir.

Piyasada birkaç barındırma sağlayıcısı var ve bunların çoğunun farklı teklifleri var. Birçoğunu denedim ve sonunda tüm web sitelerim için NameHero'ya karar verdim. Şahsen kullanıyorum ve diğer 22 barındırma ile karşılaştırdım ve en iyisini buldum. Resimde gördüğünüz gibi 4 farklı seçeneği var ve bir e-ticaret sitesi için Plus Cloud seçeneğini öneriyorum. İndirim almak için linkimi kullanabilirsiniz. www.namehero.com/darrelwilson

Planınızı sipariş ettikten sonra, alan adınızı, yani web sitenizin adını seçeceksiniz. İstediğiniz ismi seçebilirsiniz. Alan adınızı .net, .biz vb. beğeninize göre seçebilirsiniz. Bir sonraki ve son adım Hesap ve Ödeme detayları ile ilgili bilgilerinizi doldurmaktır. Sizi spam göndericilerden koruduğu için, eklenti onay kutusunda Kimlik Koruması'nı almanız önemle tavsiye edilir. Sonraki sayfalara tıklayarak ve ödeme sürecine geçerek satın alma işlemini tamamlayın.

• WordPress'i yükleyin

Hostinginize WordPress yüklemek için hosting sayfanızdaki 'Müşteri Alanınıza' gidin, 'Bulut Web Hosting'e tıklayın. Daha sonra Ürünlerim ve Hizmetlerim var, burada alan adınız ile Plus Bulut paketini göreceksiniz, resimde gördüğünüz gibi yanındaki Aktif butonuna tıklayın. Sol tarafta, 'cpanel'e git' düğmesini göreceksiniz ve üzerine tıklayın. Bir sonraki sayfada resimde gördüğünüz gibi yazılım kategorisine ilerleyin ve 'WordPress Manager by Softaculous' seçeneğine tıklayın.

Bu bir WordPress yükleyici açacaktır, Şimdi Yükle düğmesine tıklayın. Resimde gördüğünüz gibi sürüm, alan adınızı ve dizininizi içeren bir Kurulum sayfası açılacaktır. LÜTFEN YÖNERGE ALTINDA YAZILI OLAN HERHANGİ BİR ŞEYİ KALDIRINIZ. AYRICA PROTOKOL SEÇİMİNDE 'https:/'. Site ayarlarında site adınızı ve açıklamanızı değiştirebilirsiniz. Bunu daha sonra da yapabiliriz. WordPress giriş bilgileriniz olacak Kullanıcı Adı, Şifre ve E-posta gibi yönetici bilgilerinizi girin. Bir sonraki sayfada, bunları kullanmadığımız için şablonları aşağı kaydırın ve 'Yükle'yi tıklayın. Bir sonraki sayfada verilen yönetici URL bağlantısını tıklayın ve yeni WordPress'iniz internette yapılır ve yayınlanır. Artık web sitenizi düzenleyebileceğiniz görseldeki gibi WordPress panonuzdasınız.

• WordPress Genel Ayarları

Web sitenizi tasarlamadan önce, WordPress kontrol panelinde ayarlarınızı değiştirmeyi öğrenelim. WordPress kontrol panelinizde, resimde görebileceğiniz gibi sayfanın solunda birkaç sekme göreceksiniz. En önemlilerinden biri, genel WordPress ayarlarını bulacağınız 'Ayarlar' sekmesidir. Web sitenizin adresinin daha kolay anlaşılmasını sağlamak için kalıcı bağlantınızı 'Gün ve Ad'dan 'Mesaj adı' olarak değiştirmelisiniz. Bu aynı zamanda SEO'nuz için de çok önemlidir. WordPress panonuzdaki başka bir sekme, profilinizi ve WordPress panonuzun görünümünü özelleştirdiğiniz "Kullanıcılar" sekmesidir. Güncellemek için 'Değişiklikleri Kaydet'e tıklayın.

Çıkış yaptıktan sonra WordPress'e tekrar giriş yapmak için, adres çubuğuna URL'nizi ve ardından '/wp-admin' yazmanız gerekir; bu, sizi giriş yapmak için Kullanıcı Adınızı ve Parolanızı girebileceğiniz WordPress giriş sayfasına götürecektir.

Sayfa ve Menü oluşturma

Artık işlevsel bir web sitesi oluşturdunuz, henüz tam bir web sitesi değil. Şimdi web sitenize sayfa eklemeniz gerekiyor. WordPress kontrol panelinizde 'Sayfalar' sekmesine tıklayın ve 'Yeni Ekle' seçeneğini seçin. Bunu, sayfanın üst kısmındaki 'Yeni Ekle' düğmesine tıklayarak da yapabilirsiniz. Bunu yaptığınızda, gösterge tablosu aşağıdaki resimde gösterildiği gibi yeni sayfanızı oluşturabileceğiniz bir sayfa düzenleyici açacaktır. Burada sayfanın adını yazabilir ve sayfa düzenini tasarlayabilirsiniz. 'Yayınla' düğmesine tıklayın ve web sayfanız oluşturulur. Bu eğitimde, her bir web sitesi için gerekli olan Ana Sayfa, Hakkımızda ve İletişim gibi temel sayfaları oluşturacağız. Şimdilik, daha sonra yapacağımız sayfaların içeriklerine girmiyoruz. Bu sayfaları, WordPress panosunda sayfa adının altındaki görünüme tıklayarak görüntüleyebilirsiniz.

Ayrı sayfalar oluşturduktan sonra, bu sayfalarda gezinebilmek için bir menü oluşturmanız gerekir. WordPress kullanarak bir menü oluşturmak çok kolaydır. Kontrol panelinize gidin, 'Görünüm' sekmesini bulun ve 'Menüler'i tıklayın. Bu, aşağıdaki resimde gördüğünüz gibi menülerinizi oluşturabileceğiniz ve adlandırabileceğiniz bir menü düzenleyici açacaktır. Bir menü oluşturduktan sonra, web sitenizin farklı sayfalarını menüye atayabilirsiniz. Menü öğelerinin kronolojisini her zaman yeniden atayabilir ve bir öğeyi diğerinin altına sürükleyip bırakarak bir açılır menü oluşturabilirsiniz.

Şimdi yapmanız gereken, resimde gösterildiği gibi sol üstteki 'Özelleştir'e tıklayıp 'Ana sayfa ayarları'na gitmek ve ana sayfanızı 'A Statik sayfa' olarak değiştirmek ve Ana Sayfanızı statik sayfa olarak seçmek, yapmanız gereken açılır listeden seçin. Bunu, birisi web sitenizi her ziyaret ettiğinde, her zaman Ana Sayfanıza yönlendirilecek şekilde yaparsınız. Doğrudan Hakkımızda, İletişim sayfanız veya en son gönderileriniz gibi başka bir sayfaya girmek izleyiciler için bir anlam ifade etmeyecektir.

Elementor'ı indirin

Şimdi, e-ticaret web sitemizin web sayfalarını oluşturmak için kullanacağımız sayfa oluşturucu Elementor pro'yu satın almamız gerekiyor. Bağlantımı kullanarak satın alabilirsiniz.www.darrelwilson.com/elementor.Sayfalarından mevcut çeşitli paketleri kontrol edebilirsiniz. Tema oluşturucu ve WooCommerce oluşturucu hizmetlerine ihtiyacımız olduğu için ücretsiz sürümü kullanamıyoruz. Paketinizi satın aldıktan sonra, 'Eklentiyi İndir'i tıklamanız gereken yerden resimde gösterildiği gibi hesabınıza açılır ve bir zip indirilir.

Ardından, WordPress web sitenize yüklemeniz gerekir. WordPress'inizdeki panonuza gidin, soldaki araç çubuğunda 'Eklentiler'e tıklayın, 'Yeni Ekle'ye tıklayın ve resimde gösterildiği gibi eklenti eklentiniz açılacaktır. 'Eklentiyi Yükle'ye tıklayın ve Elementor zip dosyanızı seçin ve kurun. 'Eklentiyi etkinleştir'e tıklayın ve WordPress araç çubuğunuzda yeni bir 'Elementor' düğmesi oluşturulacaktır. Oraya gidin ve 'Bağlan ve Etkinleştir'e tıklayın.

WordPress temalarını yükleyin

Şimdi web sitemize bir WordPress teması yükleyelim. WordPress, web sitenizin görünümü için aralarından seçim yapabileceğiniz tonlarca önceden tasarlanmış tema sağlar. WordPress panosunun "Görünüm" sekmesinde, tema yükleyebileceğiniz "Tema" düğmesini bulacaksınız. Mevcut seçeneklerden herhangi bir temayı seçebilirsiniz. Bu eğitimin amacı için popüler menüde bulabileceğiniz Astra temasını kullanacağız. Tema adının altındaki 'Etkinleştir'e tıklayın. 'Bu temayı kullanmanın en iyi yanı, bir web sitesinin çalışması için gereken tüm temel kurulum ve işlevleri içermesi ve Elementor sayfa oluşturucu ile çok uyumlu olmasıdır.

Elementor ile sayfaları düzenleyin

Şimdi Elementor ile sayfalarımızı nasıl düzenleyeceğimizi öğrenelim. WordPress web sitenizin ana sayfasına gidin ve sayfa düzenleyiciyi açacak olan üst siyah satırdaki 'Sayfayı Düzenle'ye tıklayın. İlk olarak sağ taraftaki sayfa ayarlarını resimdeki gibi değiştirelim. İçerik düzenini 'Tam Genişlik Uzatma' olarak değiştirin ve ana sayfamız için bu ayarı istediğimiz gibi 'Başlığı Devre Dışı Bırak'ı seçin.

Şimdi, resimde gösterildiği gibi Elementor Düzenleyicisini açmak için 'Elementor ile Düzenle'yi tıklayın. Burada Elementor düzenleyicisinin hızlı bir eğitimini verelim. Sayfaya yeni bir bölüm eklemek için Artı düğmesine tıklayın ve istediğiniz sütun desenini seçin. Elemanları eklemek için, sol taraftaki araç çubuğundaki 9 noktaya tıklayın, bu size resimdeki gibi bir eleman listesi verecektir. Bu öğelerden istediğinizi sayfaya sürükleyip bırakabilir ve düzenleyebilirsiniz.

Sayfadaki herhangi bir modüle tıkladığınızda, düzenleme araç çubuğu solda görünecektir. İşte resimde, Başlığı düzenliyoruz, bu nedenle 3 sekme içeren 'Başlığı Düzenle' ortaya çıktı. ^1. öğenin içeriği için çeşitli seçenekler sunan İçerik'tir. ^2. Öğenin renk, boyut, yazı tipi vb. stilini tasarlayabileceğiniz Stil. ^{Üçüncüsü} , animasyonları ve diğer şeyleri koyabileceğiniz Gelişmiş'tir. Benzer şekilde, başlığınızın altına aynı şekilde bir metin kutusu ekleyebilir, düzenleyebilir ve stil verebilirsiniz.

Bir düğme ekleyebilir ve tıkladığınızda açılacak başka bir web sitesine bağlantı verebilirsiniz. Kullanıcıların sitemizden ayrılmaması için ayarı 'Yeni Pencere Aç' olarak değiştirebilirsiniz. Simge Galerisi'nden düğmeniz için bir Simge de seçebilirsiniz. Tüm bunlar, resimde gösterildiği gibi soldaki 'Düzenle düğmesi' araç çubuğunda olacaktır.

Artık her bir elemanı ayrı ayrı tasarlamak yerine önceden hazırlanmış şablonları kullanabilir ve Elementor'daki klasör simgesine tıklayarak bloklayabiliriz. Kitaplıktan tüm sayfayı veya belirli bölümleri veya blokları seçebilirsiniz. İhtiyacınıza göre tüm Blok kategorileri mevcuttur. Açılış sayfası için Kahraman kategorisinden herhangi bir blok seçin. Örnekte Geleceğin Sesi'ni seçtim.

Ana Sayfayı Oluşturmak

Şimdi bu bloğu kullanarak giriş bölümünde gördüğümüz Ana Sayfaya benzer bir sayfa oluşturalım. İlk önce tüm bölümün arka planını değiştirelim. Tüm bölümü düzenlemek için, resimde gösterildiği gibi bölümün üstündeki altı noktayı tıklayın. Şimdi, arka planı değiştirmek için Stil sekmesini kullanabileceğiniz 'Bölümü Düzenle' araç çubuğunu göreceksiniz. İşte E-ticaret web sitenizde kullanabileceğiniz ÜCRETSİZ DEMO GÖRÜNTÜLERİNİN BAĞLANTISI. Bu görüntüleri daha sonra Elementor'a yükleyin ve arka plan için görüntüyü seçin. Karanlık görünüyorsa arka plan kaplamasını değiştirebilirsiniz.

Artık bloğun öğelerini daha önce yaptığımız gibi düzenleyebilirsiniz. Metni, rengi, yazı tipini, topografyayı vb. değiştirin. Bir öğenin sağ üst köşesindeki mavi düğmeye tıklayarak çoğaltmayı kullanabilirsiniz. Metin kutuları arasına ayırıcı ekleyebilir ve 'Bölücü Düzenle'yi kullanarak istediğiniz şekilde biçimlendirebilirsiniz. Şimdi düğmeyi, etrafındaki boşluğu değiştirmek için Dolgu eklemek veya azaltmak gibi tasarımımıza göre düzenleyin. Bu düğmeyi daha sonra Mağaza sayfamıza bağlayacağız, ona bir simge de ekleyebilirsiniz. Resimde gösterildiği gibi 'Düzenleme Düğmesi' araç çubuğunun altında fareyle hepsinin üzerine geldiğinizde stili ve animasyonu değiştirebilirsiniz.

Ardından, öğe araç çubuğunu aşağı kaydırarak Pro Elements Bölümlerinden animasyonlu başlığı yerleştirin. Resimde gösterildiği gibi 'Animasyonlu Başlığı Düzenle' araç çubuğunu kullanarak Başlık stilini, şeklini, rengini, topografyasını vb. değiştirebilirsiniz. Tüm öğeleri ve stilleri kontrol edebilir ve istediğiniz şekilde tasarlayabilirsiniz. Mükemmel tasarımınızı bulmak için çok fazla deneme yanılma var. Bu değişiklikleri web sitenize uygulamak için 'Güncelle' düğmesini tıklayın.

Açılış sayfasının yanında, Kadınlar bölümü, Erkekler bölümü ve Yeni Gelenler gibi çeşitli kategorilere bağlanan bölümler oluşturmamız gerekiyor. Yeni bir 3 sütun bölümü ekleyin, bunlara başlık, metin ve düğme ekleyin. Zamandan ve emekten tasarruf etmek için bir tane oluşturabilir ve iki kez çoğaltabilirsiniz. Yine yukarıdaki bölümde yaptığımız gibi bu bölümün metnini, stillerini, arka planını vb. düzenlemeniz gerekecek. Tüm 3 kategori için arka plan için tarafımdan verilen görselleri kullanabilirsiniz. Metin düzenleyiciyi kullanırken satırı sonlandırmak ve bir sonraki satıra geçmek için Kadın Bölümünde yaptığımız gibi resimde görüldüğü gibi <br> kullanın.

Burada bu bölümde herhangi bir şablon veya ^blokumuz yok, bu yüzden her bölümü sıfırdan oluşturmanız ve biçimlendirmeniz gerekecek, bu ilk kez uzun bir iş gibi görünebilir ancak çoğaltma gibi tüm sürükle ve bırak ve püf noktalarını kullanabilirsiniz. yukarıdaki bölümde yapılan 'Şimdi Alışveriş Yap' butonunu kopyalayın ve sıfırdan yapmak yerine sadece buton stilini değiştirin veya üzerine gelin. Hangisinin zevkinize en uygun olduğunu bulmak için her öğe için Düzenle araç çubuğundaki tüm seçenekleri görmeniz gerekir. Bu, sanatsal anlayışınız için harika bir alıştırma olacaktır. Bir sütun içindeki içeriğin aralığını değiştirmek için, sütunun sol üst kısmındaki Sütunu Düzenle simgesine tıklayarak, sütundaki dolguyu değiştirebileceğiniz 'Sütunu Düzenle' araç çubuğunu açın. Aşağıdaki resimde görebileceğiniz gibi gelişmiş bölüm.

Satır sütunlarını çoğaltabilir ve ardından Erkekler bölümü ve Yeni Gelenler'in diğer iki kategorisi için metni ve arka planı düzenleyebilirsiniz, böylece onları yeniden biçimlendirmek zorunda kalmazsınız. Her kategorinin belirgin bir şekilde görülebilmesi için her bölümün arka plan görüntüsünü ve metin rengini farklı şekilde biçimlendirmelisiniz. İlki, açık metin rengine sahip koyu bir arka plan görüntüsüne sahipse, bir sonraki tam tersi olmalıdır. Tüm bu teknikleri tasarlamaya başladığınızda öğrenecek ve bu etkileri kendiniz göreceksiniz. Resmin üzerindeki metne vurgu yapmak için arka plan forlay'ı kullanın, ayrıca arka plan görüntüsündeki yüzleri örtmeyecek şekilde sürükle ve bırak veya Hizalama seçeneğini kullanarak metnin konumunu ayarlayın. Daha önce olduğu gibi 'Sütunu Düzenle'yi kullanarak arka plan görüntüsünün konumunu da değiştirebilirsiniz. 'Bölümü Düzenle'yi açmak için bölümün üstündeki mavi düğmeye tıklayın ve bölüm genişliğini %100'e kadar uzatabilirsiniz.

Bundan sonra, simgeler ekleyeceğiz. Bunun için önce yeni bir bölüm ekleyin ve Elementor araç çubuğundan bir Görüntü Kutusu ekleyin. Sağladığım görseller için görseldeki gibi ikon görselini seçiniz. Bu simge kutuları, 'Ücretsiz Gönderim' gibi çekici başlıklar vermek ve açıklamayı ve durumu aşağıdaki metinde yazmak için satın almayı teşvik etmek içindir. 'Resmi Düzenle' araç çubuğundan görüntü konumunu, boyutunu, başlığın rengini ve açıklamasını ve metnini vb. değiştirerek görüntü kutusunu istediğiniz gibi şekillendirin. Tüm simgeleri yeniden tasarlamak zorunda kalmamak için tasarladıktan sonra çoğaltın. Bundan sonra her kutunun metnini istediğiniz amaç için düzenleyebilirsiniz. Gelişmiş bölümden, sayfanın çok sıkışık görünmemesi için Doldurma'yı kullanarak kenar boşlukları ekleyebilirsiniz.

Akılda kalıcı hale getirmek için sütunlara kenarlıklar ekleyebilirsiniz. 'Sütunu Düzenle' düğmesine tıklayın ve 'Stil' kategorisi altında kenarlık ekleyebilir ve kenarlıkları tasarlayabilirsiniz. Kenarlık tipini, genişliğini, yerleşimini, yarıçapını vb. seçebilirsiniz. Burada sağ kenarlık yaptığımız gibi sadece bir veya daha fazla belirli kenarda kenarlığı seçebilirsiniz. Araç çubuğunda bulunan tüm tasarım araçlarını kontrol edin ve kendinizi seçin. Kendiniz ne kadar çok yaparsanız, tüm araçlara ve işlevlere o kadar alışırsınız ve sizin için daha hızlı ve kolay hale gelir.

Ardından, 'Yeni Gelenler' bölümünü ekleyeceğiz. Ama önce bu satırların arasına bir bölücü ekleyeceğiz, böylece net ve ayırt edilebilir görünecekler. Yine yeni bir bölüm ekleyin, Elementor araç çubuğundan 'Bölücü' ekleyin ve resimde gösterildiği gibi 'Bölücü Düzenle' araç çubuğunu kullanarak tasarlayın. Ayırıcıya bir sonraki bölüm için başlık olarak kullanılacak bir 'Yeni Varış' metni ekleyin, bu nedenle çekici görünmesi için resimde gösterildiği gibi boyutu, yazı tipini vb. değiştirin.

Ürün Oluşturma

Artık e-ticaret sitemizde satacak ürünler yaratmamız gerekiyor. Ürünler Basit veya Değişken olabilir, Basit Ürünlerde beden, renk veya stil gibi seçenekler bulunmazken Değişken ürünlerde giysilerde beden veya renk gibi çeşitli seçenekler mevcuttur. Her ikisini de yaratmayı öğreneceğiz.

WooCommerce

Ürünler oluşturmak için yeni bir eklenti eklememiz gerekecek. Öyleyse WordPress kontrol panelinize gidelim, araç çubuğundaki 'Eklentiler'e tıklayın ve ardından daha önce yaptığımız gibi 'Yeni Ekle'ye tıklayın. Eklenti kitaplığında 'Woocommerce' araması yapın. WooCommerce, kişisel deneyimimdeki en iyi e-ticaret eklentisidir. 'Yükle'yi tıklayın ve Etkinleştir'i tıklayın. Şimdi WooCommerce eklentisi resimde gösterildiği gibi açılacaktır. Formu doldurun ve 'Devam'a tıklayın. Ardından sektörünüzü seçin, bu eğitimde bir Moda ve Giyim web sitesi yapıyoruz. Daha sonra 2 seçeneğin olduğu ürün tipimiz var - Fiziksel ve indirmeler, ikisini de seçin ve 'devam et'i tıklayın. Sonra bazı sorular alacaksınız, cevaplayın ve tekrar 'Devam'ı tıklayın.

Ardından eklentiniz için bir tema seçmeniz gerekecek, 'Astra' temasını seçin. Daha sonra size Jetpack Hizmetlerini etkinleştirme seçeneği sunacak ve bu bizim için yardımcı olacaktır, bu nedenle sizi Jetpack hesap sayfasına götürecek olan 'Evet Lütfen' seçeneğini seçin, bilgilerinizi doldurun ve bir hesap oluşturun. WordPress kontrol panelinize yönlendirileceksiniz, ancak resimde gösterildiği gibi araç çubuğunuzda yeni bir 'Woocommerce' mevcut olacak. Tüm bu vergi kurulumlarını daha sonra yapacağız.

Şimdi ürünleri oluşturmaya başlayalım. İlk olarak görseldeki gibi basit bir Woman Green Shirt ürünü oluşturacağız.

Aşağıdaki resimde gösterildiği gibi 'Yeni Ürün Ekle' sayfasını açacak olan araç çubuğunuzdaki 'Ürünler'e tıklayın. Ürünün adını ve açıklamasını doldurun. Ürün verilerinin altında 'Basit Ürün'ü seçin, ilk önce basit bir ürün oluşturacağız. Aşağıdaki resimde gösterildiği gibi, aşağıda planlayabileceğiniz Normal Fiyatı ve Satış Fiyatını koyun. Bu tarihlerde satış fiyatı otomatik olarak uygulanacaktır.

Ardından, Stok Durumu'nu koyabileceğiniz Genel'in altındaki 'Envanter' ayarlarına tıklayın. Ayrıca burada Geri Siparişlere izin verebilir veya vermeyebilirsiniz, 'İzin Verme' seçeneğini belirtirseniz ürün stokta yoksa sipariş alınmayacaktır. Stok azaldığında bildirim almak için 'Düşük stok eşiği'ni koyun.

'Sevkiyat' kategorisinin ardından, nakliye amacıyla ürünün ağırlık ve boyut ayrıntılarını girin. 'Bağlı' ürünlerde, ilgili ürünleri gösterecek olan 'Üst Satışlar' ve kullanıcı orijinal ürünü satın aldıktan sonra sepette ilgili ürünleri gösterecek Çapraz Satışlar yapabilirsiniz. Bu ürün için alışveriş yaparken alıcılara göstermek istediğiniz ilgili ürünleri ekleyin. 'Gelişmiş' kategorisinde alıcılara not verebilir ve yorumları etkinleştirebilirsiniz.

Bu ayarların altında aşağı kaydırırsanız, resimdeki gibi 'Ürün kısa açıklaması' var. Örnek ürünümüze göre tam açıklamayı buraya yazın. Açıklamanın yazı tipini ve stilini burada da tasarlayabilirsiniz. Resmi görüyorsanız sağ tarafta 'Ürün Resmi' seçeneği var. Ürününüzün resmini seçip yükleyebileceğiniz "Ürün resmi" sayfasını açan "Ürün Resmini Ayarla"yı tıklayın. 'Ürün Görseli'nin altında, ürününüzün diğer görüntülerini farklı açılardan yerleştirebileceğiniz ve görüntüde gösterildiği gibi izleyicilerin daha iyi anlaması için 'Ürün Galerisi' bulunmaktadır.

Yukarıda, resimde gösterildiği gibi sağ taraftaki araç çubuğunda 'Ürün Kategorileri' var. Burada ürünlerinizi kategorilere ayırabilirsiniz. O halde 'Yeni Kategori Ekle'ye tıklayarak yeni bir kategori oluşturalım. 'Kadınlar' adını yazın ve Yayınla'ya tıklayın. Artık 'Ürünü Görüntüle' düğmesine tıklayarak ürününüzü görüntüleyebilirsiniz. Ürünün üzerine tıkladıklarında izleyicilere nasıl gösterileceğini gösterecektir. Ürünü görüntüleyebileceğiniz ve hatta daha iyi görüntü elde etmek için görüntüleri büyütebileceğiniz yeni bir ürün açılır penceresi açılacaktır. İstediğiniz her şeyi tekrar düzenleyebilirsiniz.

Görüntüleme sayfasının stilini ve temasını beğenmediyseniz, sağ taraftaki araç çubuğundaki 'Astra Ayarları' ile resimde gösterildiği gibi değiştirebilirsiniz. Örneğin, kenar çubuğunu kaldırmak istiyorsanız, "Kenar çubuğu"nu tıklayın ve "Yan çubuğu yok"u seçin. Değişiklikleri kaydetmek için 'Güncelle'ye tıklayın ve değişiklikleri görmek için tekrar Ürünü Görüntüle'ye tıklayabilirsiniz. Yani bu, basit bir ürünün nasıl oluşturulacağına bir örnekti. Aynı prosedürü kullanarak istediğiniz kadar ürün ve kategori ekleyebilirsiniz. Ürün sayfasındaki Kategori butonuna tıklarsanız, bu kategoriye ait tüm ürünlerin gösterileceği kategorinin Yeni Sayfası açılacaktır. Bu noktada, bu çok yavan olacak ama daha sonra bu sayfayı da tasarlayacağız.

Şimdi değişken bir ürünün nasıl oluşturulacağını öğrenelim. Yine eskisi gibi 'Yeni Ürün Ekle' sayfasına gitmemiz gerekiyor. Bu sefer bir Erkek değişken ürünü yaratalım. Daha önce yaptığımız gibi ürünün başlığını ve açıklamasını verin. Bunun ana açıklama olmadığını, aşağıda gösterilen ek küçük açıklama olduğunu unutmayın, ana açıklama 'Ürün kısa açıklaması' bölümüne yazılmalıdır. Burada 'Ürün verilerini' 'Değişken Ürün' olarak değiştireceğiz. Envanter, Sevkiyat, Bağlantılı Ürünler vb. diğer tüm ayarlar daha önce oluşturduğumuz Basit Ürüne benzer, bu nedenle bu ayrıntıları kendi başınıza tamamlayabilirsiniz.

Şimdi, ürünümüze yeni nitelikler veya özellikler ekleyeceğimiz 'Özellikler'e tıklayın. Bunu yapmak için 'Ekle'yi tıklayın. Daha sonra görseldeki gibi ürünün beden, renk vb. gibi yeni özelliklerini oluşturacağız. İlk olarak 'Ad' kutusuna Beden yazalım. 'Değerler' kutusuna, önce Küçük'ü, ardından '|'sembolünü (parantezler olmadan) yazın. Bu sembolü resimdeki gibi yazmak için 'Shift' tuşu + Enter butonunun üstündeki tuşa basın, ardından Orta ve tekrar aynı sembolü ve ardından Büyük yazın. Bu sembolü kullanarak S, M, L, XL gibi istediğiniz kadar değişken ekleyebilirsiniz. 'Tüm varyasyonlar için kullanılır' onay kutusunu seçin ve 'Özelliği Kaydet'i tıklayın.

Sonra başka bir Nitelik ekleyeceğiz. Tekrar 'Ekle' butonuna tıklayın, İsim kutusuna 'Renk' yazın ve Değer kutusuna Boyut özelliğinde kullandığımız sembol ile ayırarak istediğiniz renklerin isimlerini ekleyin. Burada mevcut iki seçenek olarak 'Beyaz|Mavi' yazıyoruz. Varyasyonlar için kullanılır kutusunu tekrar işaretleyin ve 'Özellikleri Kaydet'i tıklayın.

Şimdi bu özellikleri ürünlerimize uygulayacağız. 'Nitelikler'in altındaki 'Varyasyonlar'ı tıklayın ve 'Tüm niteliklerden Varyasyonlar Oluştur'u seçin ve 'Git'i tıklayın. Bu seçeneği doğrulamak için açılır pencerede 'Evet'i tıklayın. Hangi resimde gösterildiği gibi seçenekleri açacaktır. Küçük Beyaz, Küçük Mavi, Orta Beyaz, Orta Mavi, Büyük Beyaz ve Büyük Mavi olmak üzere 3 bedeni 2 renkle birleştirerek 6 varyasyon eklendiğini görebilirsiniz.

Resimde gösterildiği gibi düzenleme ayarlarını açmak için ilkine tıklayın. İlk olarak, bu varyasyonun görüntüsünü yüklemeliyiz. 'Resim Yükle'ye tıklayın ve galeriden resmi seçin. Ardından, bu varyasyonun normal fiyatını koymalısınız. Bu zorunlu bir alandır yani fiyatlar aynı olsa bile buraya yazmanız gerekiyor. Yine Satış Fiyatını ekleyebilir ve Basit Ürün'de yaptığımız gibi planlayabilirsiniz. Basit Ürün'de yaptığımız gibi stok detaylarını ve kargo detaylarını doldurabilirsiniz.

Yine aynı işlemi diğer varyasyonlar için de yapmanız gerekecek. Bu yüzden Varyasyon adına tıklayın, resmi yükleyin ve Small Blue fiyatını koyun vb. Burada gerekli olan tüm varyasyonların sadece resmini ve fiyatını koyuyoruz, ancak diğer tüm detayları kendi şartlarınıza göre web sitenize koyabilirsiniz. Varyasyon adının üstünde, kullanıcılar ürünü görüntülediğinde Ürün Kutusunda hangi varyasyonun varsayılan olarak gösterileceğini seçebileceğiniz 'Varsayılan Form Değeri' koyma seçeneğini görebilirsiniz.

Ürün kısa açıklaması gibi diğer ayarlar, daha önce yaptığımız Basit Ürüne benzer olacaktır, bu nedenle ayrıntıları ürününüze göre doldurun. Ürün görseli için aynı, varsayılan varyasyon için görseli koymalısınız çünkü bu, ürünü ilk gördüğünde izleyicilere gösterilecektir. En satılabilir varyasyonunuzu varsayılan ürün olarak koymalısınız. Görünümler varyasyonun farklı resimlerini görebileceğinden, Değişken ürünler için bir Ürün galerisi koymanıza gerek yoktur. Yeni bir 'Erkek' kategorisi oluşturun ve Basit Ürün için yaptığımız gibi onay kutusunu seçin. Bu değişiklikleri web sitesinde uygulamak için Yayınla'ya tıklayın.

Artık izleyicilerin nasıl göreceğini görmek için Ürünü Görüntüle'ye tıklayabilirsiniz. Görselde gördüğünüz gibi ürün açılacaktır. Burada bu değişken bir ürün olduğundan, açılır kutularında niteliklerin listesi ve değerleri olacaktır. Bu ürünün çeşitli varyasyonlarını görüntülemek için bu kutulara tıklayabilirsiniz. Üzerine tıkladığınızda varyasyon için belirlediğiniz görseli ve fiyatları göreceksiniz. Yine Astra Ayarları'nı kullanarak beğenmediyseniz Ürün sayfasının temasını da değiştirebilirsiniz. Ayarları değiştirelim ve Kenar Çubuğunu kaldıralım ve Tutarlılık için Tek Ürün'de yaptığımız gibi İçerik Düzenini Tam genişlik olarak değiştirelim. İstediğiniz kadar varyasyon ile istediğiniz kadar değişken ürün yapabilirsiniz ancak burada yaptığımız gibi her varyasyonun detaylarını doldurmanız gerekecektir. Böylece, daha fazla nitelik ve daha fazla değerle, çok daha fazla varyasyona sahip olacaksınız. Dikkat edilmesi gereken bir nokta, ürünün Fiyatının bir aralık olarak gösterilmesidir, çünkü bir aralık olarak en düşük fiyatlı varyasyonun ve en maliyetli varyasyonun fiyatlarını gösterir. Şimdi hem Basit hem de Değişken Ürünleri nasıl oluşturacağımızı öğrendik.

Şimdi bu ürünleri Ana Sayfamıza ekleyelim. Ana sayfanıza gidin ve 'Elementor ile Düzenle'yi tıklayın. Yeni Gelenler ayırıcısını oluşturduğumuz yere kadar aşağı kaydırın. Sağdaki Elementor araç çubuğunda, 'Arama Widget'ları' çubuğuna tıklayın ve ürün yazın. Ürün öğesini seçin ve sayfanızdaki Yeni Gelenler bölmesinin altındaki kutuya sürükleyip bırakın; ürünleri orada göreceksiniz.

'Ürünleri Düzenle' araç çubuğunda görselde gördüğünüz gibi burada göstermek istediğiniz ürüne ait sütun ve satır sayısı vardır, böylece tüm ürünleriniz bu sayfada gösterilmez. Görüntünün sütun boşluğunu ve satır boşluğunu, hizalamalarını, kenarlığını değiştirmek için stil kategorisini de kullanabilirsiniz. Burada ürün adının başlığını rengi, yazı tipi, aralığı, topografyası vb. gibi biçimlendirebilirsiniz. Hem dolu hem de boş derecelendirme yıldızları için aynı şey. Aynı şekilde fiyat için de hem normal hem de satış fiyatı için yazı tipini, rengi, topografyayı vb. değiştirebilirsiniz. Sıradaki düğme, düğmeyi arka plan rengi, metin rengi, kenarlık rengi vb. Gibi istediğiniz şekilde tasarlayabilirsiniz. Elementor'u kullanmak, tüm bu düzenlemeleri çok kolaylaştırır. Sadece mevcut tüm düzenleme araçlarını kullanmanız ve onunla oynamanız gerekiyor ve tüm sonuçlar gözünüzün önünde olacak.

Ayrıca, indirim yaptığınızda görünecek şekilde tasarlayabileceğiniz, ürün üzerinde indirim olduğunda ürününüzün üzerinde bir flash banner gösterecek olan 'Satış flaşı' seçeneğiniz de bulunmaktadır. Ana sayfanızı ziyaret ettiklerinde ürünlerinize müşteri çekmek için bunu kullanın. Tüm tasarım seçenekleri şimdiye kadar öğrendiklerimize benzer, böylece hepsini geliştirebilir ve size en uygun tasarımı seçebilirsiniz.

Sorgula seçeneğinde bu bölümde görüntülenmesini istediğiniz ürünleri seçebilirsiniz. Örneğin, bu bölümde yalnızca Kadın Ürününün görüntülenmesini istiyorsanız, Kaynak kutusunda, açılır kutudan yeni gelenler bölümü olduğu için 'Son ürünler'i seçin ve 'Dahil Et'i tıklayın. Daha sonra 'include by' kutusuna terimi yazın ve terim kutusunu oluşturacak olan Terim seçeneğini seçin. Terim kutusuna 'Kadın' yazın ve resimde gösterildiği gibi 'Ürün Kategorisi: Kadın' seçeneğini seçin. Web sitenizde etkili olmak için Güncelle'ye tıklayın. Bu sayede web sitenizin herhangi bir yerinde ürün teşhir bölümleri oluşturabilirsiniz.

Elementor e-ticaret Şablonu

Az önce hazırladığımız e-ticaret web sitesinin şablonunu tarafımızca ücretsiz olarak hazırladığımız şablonu bu linkte web sitemde verdimhttps://darrelwilson.com/product/elementor-ecommerce-template-package. Download the template zip file from there and now let us learn how to import and export templates in Elementor. First, extract all the .json flies from the zip file. These are the templates for specific pages. Go back to your Elementor editor page and click on the folder icon next to the Add section icon on the page. This will open up the Template library and go to 'My templates' as shown in the image and click on Add templates. Here you can drag and drop those template files. Select the Homepage template and click on insert and your template will be loaded. You can edit the template according your taste but using the template, you won't have to create everything from scratch. Just remove the unwanted elements or sections and add new ones you like such as countdown, form etc. and style them the way you want.

Now let us create the other pages using our template. First, create a Menu for the rest of the pages. Woocommerce automatically adds the Shop, My Account, Cart and Checkout pages. Go the Appearance in WordPress and add these to the menu. Go to the About Us page, click on 'Edit Page, first disable the title and select Full Width in content layout. Now similar to Homepage template, insert the About Us template and edit the page as you want. You can add other pages too. Complete the website design using this process.

Theme Customizer

Theme customizer is where we design the structure and theme of the website and not the actual webpages. For opening the theme customizer, click on the 'Customize' button next you website button and it will open the Theme Customizer dashboard. We have used the Astra theme in this tutorial. Let us create a logo for your website, go to Header, then Site Identity and select Logo and upload your Logo. You can get a logo from www.fiverr.com. In the same way you can edit your site icon. You can design your Primary Header here too as shown in the image. You can select the layout, width, colour, etc. of the Header. Also you can design and style your menu from here.

Same way, you can design the footer. You can add upto 4 footer widgets here and customize as you want as shown in the image. Select 'Widgets' on your WordPress toolbar and you will get 4 Widgets to add to your footer. When you click on it and then click on 'Add a widget', you will get a list of widgets. You will get a widget toolbar where you can edit the contents of widget such as title, description, image and also your social media links. Once you click publish, it will appear on the footer of your webpage.

From the Woocommerce option on the toolbar, we can customize the Checkout page as in the image. You can assign 'Terms and conditions' page and 'Privacy Policy' page from the toolbar for the customers but first you'll have to first create these pages and write the details as the legal requirements. Next select the page from the drop down below their respective box. You can add new fields in the Checkout form and make them 'Required' or Optional.

Next in the Woocommerce toolbar, you can customize your Product catalog as shown in the image.You can customize, how products are shown in the catalog, their design an also you can hide some of the components that you don't want show like for example Ratings by clicking on the eye icon next to its name. This will control how your products are shown on your Shop page and also on the products section anywhere on the website.

Here we are using the free version of Astra Theme customizer, but you can buy the pro version where you will get tons of different option and templates for your website. You can import entire customized websites from this service.

Eklentiler

Plugins are small apps for your website which helps creating and upgrading your website. You have to add plugins to your WordPress to help you create your website in way more efficient manner.To add a new plugin to your WordPress, go to your WordPress homepage and then click on plug-in from the Option list on the left side. It will open an 'Add plugin' page as shown in the image where different type of plugins are available to choose from. You can search for the type of plug-in that you need in the search box and you will find so many plugins to use for that specific purpose. It is like an app store on your mobile and just like your app store, you can check the usage, reviews and success of these plugins before installing. And all these plug-ins are available for free. And if you need any plugin later, you can always come back and install it here. You can add plugins for social media sites, translator and so many things. Just search for the plugin use you want, select the one you want, click on 'Install' and 'Activate'. For every plugin, a new option will be created on the toolbar from where you can add and edit elements.

Elementor Theme Builder

The Elementor theme builder allows you to create a custom Shop Page and Product Page using the page builder instead of the themes, so that these pages match the design of other pages of your website. Using Elementor page builder, you can edit any part of any page of your website unlike the themes which are preset and normally can't be edited. So now we are going to edit the Shop Page and Product Page that we created using the Woocommerce theme using Elementor theme builder and design it to match our demo website's design we saw in the beginning.

Go to your WordPress dashboard, click on 'Templates' and then select 'Theme Builder' from the list which will open the Theme Builder as shown in the image. Elementor allows us to build the theme of different parts of the site. So if want to have a different header, click on '+' icon on header. And you can select any header theme from the library and click 'Insert'. Your Header will be created and now you can edit anything in using the Edit Toolbar as we did earlier. You can the change the style of the Logo or the Menu or anything, just click on the part you want to edit and the edit toolbar will appear.

• Custom Header

Now you can add other elements on this header one by one as we did earlier, or you can insert another one or more blocks which contains similar elements and delete the common ones. For example, here as you can see in the image, we inserted a Header Block which has a bar for contact no, info and social icons. We can delete the rest of the elements of the block as we don't need them. Again you may not find the exact design of each element in the block templates, so you can now edit and style as you want to instead of creating and editing each element from scratch. This way you can create different part of your website very quickly.

Remember we have just created a part of website but it's not applied on our website yet. So when you click 'Publish', it will ask you where you want to display this template on your website. Here we created a header, so we will display it on entire website by click 'Entire Site' on 'Include' box as shown in the image. You can put different conditions by adding Include or Exclude conditions as to where you show this template.

• Custom Footer

Now you can do the same thing for footer as we did for the header and create a footer for your website using templates. You can edit the footer content to your pages by pasting the URL link of the page to its button using the editor as shown in the image. Here we have selected a footer block template with for columns and added link to various parts of our Shop, About, Contact Us and social media pages. You may design it anyway you want.

• Custom Shop Page

Now let us design a custom Shop Page using the Theme Builder. Elementor has very less themes for shop page so we will design from scratch. So we will have to create each element like for the banner we will have 2 text boxes and animated heading over a background image. Edit the elements and style the section as we learned earlier. Use all the styling features such as font, colours, size, shadows, margins, paddings, etc. to make the banner section look eye catchy like here in the example as shown in the image below.

Now we need to design our product section with a filter column in the side. So add a new section, and use the 2 column structure. On the right, add 'Products' from the toolbar and design it as we did on the Homepage or you can save the Homepage Template and insert it here. On the left, insert 'Sidebar' from the Elementor elements bar and select 'Woocommerce sidebar'. Right now, we haven't created a sidebar so we will have to exit to WordPress dashboard. But first click 'Publish' and in the condition include 'Shop page' to apply it to the website.

Go to 'Appearance' on the dashboard where we have all our widgets are shown as shown in the image. On the right, we have our Woocommerce Sidebar where we can place the 'Filter Products by Price' by drag and drop. You can add other filters too. Below it we will add 'Product Category', then 'Products' and the 'Video' on our sidebar. You can edit the title, contents and other stuff like link the URL of the video here. You can add as many widgets that you want from here.

If you want to edit the style of this sidebar, you can't use the Elementor editor as these are prepared by WordPress theme customizer. So in order to customize it, you will need click on 'Customize' button WordPress. Click on 'Global', then 'colours' where you can change the colours as in the image. Here we are customizing the WordPress theme which is the Astra theme that we are using, and not just the sidebar.

• Custom Category Page

Now we will design the category pages for our product. We are going to copy the template of page we created earlier and save to use it for all our Product Category pages. First, click on 'Edit with Elementor' on the top and select 'Product Archive' as shown in Image. Then, on the bottom left click on the button next to Update and select 'Save as a Template' as shown in the next Image. Give a name to the template like 'Main Shop Page Template' and click Save. Next select the given name and click on 'Export' and then 'Save File' to save this file to use this template on other pages or even other websites.

Now, go back to the Elementor theme builder and click on Add New. Here you have the Elementor templates but we will use the template we created, so click on 'My Templates' and click on 'Insert' next to the name of new template you created. Now we have to edit it using the tools which we have learned already. So change the Title text to 'Men's Product'. Next as this is Men's Category, you have to edit it to show only Men's Product. So click on the Product box and on the 'Query' button on the toolbar, write 'term' in the 'Include By' button and put 'Men' in the term box as we did earlier. Click on Publish and put the condition to put it only in 'Men's' in 'Products category' as you can see in the image below. You can go the website and on the Shop page, click on the Men's category on the sidebar and view the effect on the page. You will have to do the exact same process for Women's category page and any other category you want to put on your website too.

• Özelleştirilmiş Ürün sayfası

Şimdi aynı tekniği kullanarak Ürün sayfamızı özelleştireceğiz. Şimdi herhangi bir ürüne tıklarsanız, ürünleri oluşturduğumuzda gördüğümüz gibi varsayılan temada ürün sayfasını gösterecektir. Yine Elementortheme oluşturucuya gidin ve yanındaki + simgesine tıklayarak yeni bir Tek Ürün teması ekleyin. Burada sağlanan şablonları kullanabilirsiniz, ancak bu eğitim için sıfırdan bir şablon oluşturacağız. Bu yüzden önce 2 parçalı bir bölüm ekleyin ve elementler sekmesine tıklayın. Burada, bir sayfa oluştururken görmediğimiz resimde gösterildiği gibi Ürünler için özel olarak yapılmış tüm öğeleri görebilirsiniz.

Önce ürünün kategorizasyonuna benzer bir kırıntı ekleyin. Artık görüntüde gördüğünüz gibi araç çubuğunu kullanarak ekmek kırıntısının renk, boyut, dolgu vb. stilini düzenleyebilirsiniz. Sağ tarafta, kenar çubuğundan 'Ürün Başlığı' öğesini ekleyin ve daha önce olduğu gibi araç çubuğunu kullanarak bunun da stilini tasarlayın. Daha sonra aynı şekilde ürün görselini ekleyelim. Ürün görseli öğesine tıklayın ve araç çubuğunu kullanarak stilini düzenleyin. Ardından Kısa Açıklamayı benzer şekilde ekleyin. Başlık ve açıklama arasına bir ayırıcı ekleyebilirsiniz. Sonra ürün kategorisini koymalıyız. Bunun için 'Ürün Meta' öğesini seçin ve açıklamanın altına bırakın ve onu da stillendirin. Ardından, altına 'Fiyat' öğesini ekleyin ve stilini tekrar değiştirebilirsiniz. Ardından, fiyatın altına bir 'Sepete ekle' düğmesi koyun. Değişken bir ürün olduğu için varyasyon seçeneklerini otomatik olarak verecektir. Ardından, istediğiniz sosyal simgeleri ve inceleme formlarını, ek bilgileri vb. öğeleri ekleyebilirsiniz. Ürün sayfanızda istediğiniz öğeleri eklemeyi ve tasarlamayı bitirdikten sonra 'Yayınla'yı tıklayın. Görüntüleme sayfasındaki koşulda, oluşturduğunuz tüm ürünlere bu şablonun etkisini vermek için 'Tüm Ürünler'i ekleyin. Dilerseniz farklı ürün kategorileri için farklı temalar oluşturabilirsiniz, sadece o kategoriye dahil etmek için koşulu değiştirmeniz yeterli olacaktır. Tüm ürünlere uyguladığımız için tüm ürün sayfalarımız bu şablona güncellenecektir.

• Özel Ödeme ve Sepet Sayfası

Şimdi özelleştirilmiş Ödeme ve Sepet sayfalarını tasarlayacağız. Ödeme ve Sepet sayfaları tema oluşturucuda değil, bu yüzden onları Elementor ile düzenleyeceğiz. Sepet sayfasına gidin ve Elementor ile Düzenle'ye tıklayın. Diğer herhangi bir sayfa gibi, onu da Elementor öğeleriyle istediğiniz gibi düzenleyebilir ve biçimlendirebilirsiniz. Artık metni, simgeleri, kupon düğmelerini vb. düzenleyebilir ve yazı tipi, renk, topografi vb. Ancak buradaki Sepet başlığı gibi asıl temanın bir kısmını düzenlemek Elementor ile mümkün değildir. Bunu düzenlemek için WordPress'in kendisinde düzenlemeniz gerekecek, bu nedenle 'Sayfayı Düzenle'yi tıklayın ve sağ alt köşede, daha önce tasarlarken yaptığımız gibi resimde gösterildiği gibi devre dışı bırakma bölümünün altındaki 'Başlığı Devre Dışı Bırak' onay kutusunu seçin. wordpress'in teması.

Ödeme sayfasını düzenleyebilir ve tasarlayabilir ve aynı şekilde kullanabilirsiniz. Aynı şekilde, müşterilerinizin 'Hesabım' sayfasını, o sayfanın varsayılan teması çok güzel görünmediği için tasarlayabilirsiniz. Elementor ile düzenleyebilirsiniz. Ayrıca daha önce hızlıca tasarlamanız için tüm bu sayfaların şablonlarının zip dosyasını koyduğum bir link de verdim.

WooCommerce Ayarları

Artık Elementor ve Theme Builder kullanarak nasıl sayfa oluşturacağınızı öğrendiniz ve web sitesi oluşturma işleminiz tamamlandı. Şimdi bu web sitesini çalıştırmak için WooCommerce ayarlarını öğrenmeliyiz. WordPress panosuna gidin, WooCommerce'e tıklayın ve resimde gösterildiği gibi WooCommerce'in genel ayar sekmesini açacak olan 'Ayarlar'ı seçin.

• Genel Ayarlar

Buraya adresinizi yazabilir ve satış yapmak istediğiniz ülkeleri seçebilir, vergileri etkinleştirebilir, kupon kodlarını etkinleştirebilirsiniz. Bunları etkinleştirmek için tüm bu kutuları işaretleyin. Bunun altında para biriminizi ülkenize göre değiştirebilirsiniz.

• Ürün sekmesi

Bir sonraki sekme, Ayarlar'ın en üst satırındaki Ürün sekmesidir; burada, ürünlere ilişkin yorumları ve yıldız derecelendirmelerini etkinleştirebileceğiniz inceleme bölümü dışında, çoğu burada çok özel olan birçok ayarı bulacaksınız. ayrıca doğrulanmış kullanıcı etiketini resimde gösterildiği gibi incelemelerde gerçek alıcılara gösterebilirsiniz. Ayrıca ürünlerin ağırlık, boyut vb. kargo detaylarını da koyabilirsiniz.

• Vergi sekmesi

Sonraki, otomatik vergi hesaplamasını etkinleştirebileceğiniz veya devre dışı bırakabileceğiniz vergi sekmesinde. Vergi hesaplaması ülkenize ve işinize bağlı olarak çok karmaşık olabilir, bu nedenle otomatik hesaplama sizin için çalışmayabilir. Ancak, farklı gönderim adresleri için ve alışveriş sepetindeki öğeye göre vergi belirleme seçeneklerine sahipsiniz. Vergi hesaplama konusunda size yardımcı olması için ücretsiz ve ücretli hizmetler alabileceğiniz www.taxjar.com linkini verdim. Ayrıca mağaza, sepette ve kasada vergisiz fiyatı göstermelisiniz, genel olarak vergi dahil olmalıdır gibi çeşitli noktalarda vergili veya vergisiz fiyatları görüntülemeyi seçebilirsiniz.

• Gönderim sekmesi

Bir sonraki sekme 'Nakliye'. Önce 'Bir nakliye bölgesi ekle'ye tıklayın, Bölgenin adını, bölgenin belirli bölgelerini ekleyin ve resimde gösterildiği gibi çeşitli nakliye yöntemleri altında nakliye ücretlerinizi ayarlayın. Burada, 5 $ sabit ücret koyduğumuz Sabit Ücret yöntemini kullandık ve diğeri ücretsiz gönderim yöntemidir. Minimum sipariş tutarı veya kupon gereksinimi koşulu eklemek için aşağıdaki Düzenle düğmesine tıklayın. Burada minimum 50$ sipariş şartı seçtik. Her biri için birden fazla bölge ve birden fazla nakliye yöntemi ve ücreti ekleyebilirsiniz. Ayrıca, herhangi bir belirli oran vermediğimiz bölgelerinizin kapsamadığı konumlar için de bir varsayılana sahipsiniz. Yani burada varsayılan olarak bu bölgeler için 10 dolarlık bir varsayılan oran koyduk.

• Hesaplar ve Gizlilik sekmesi

Müşterilerin satın almadan önce bir hesap oluşturma seçeneğini seçebileceğiniz veya önce hesap olmadan satın almalarına izin verebileceğiniz ve daha sonra Ödeme sırasında hesap oluşturabileceğiniz ve ayrıca oluşturma sırasında çeşitli diğer seçenekleri seçebileceğiniz 'Hesaplar ve Gizlilik' sekmesi çok açıklayıcı oldukları için kendiniz kontrol edebileceğiniz kullanıcı adı, şifreler vb. gibi hesaplar. Ayrıca yasaların gerektirdiği bir gizlilik politikasını da buraya ekleyebilirsiniz. Ayrıca Kişisel Veri Saklama kapsamında kullanıcılara ait kişisel verilerin ne zaman silineceği ile ilgili seçenekleriniz bulunmaktadır.

• E-posta Sekmesi

Ayrıca, örneğin yeni bir siparişte veya iptal edilen bir siparişte, web sitesinden müşterilere alacağınız ve göndereceğiniz tüm otomatik e-postalar ile ilgili ayarların bulunduğu 'E-posta' sekmesine sahibiz. Tüm bu durumlarda müşteriye alacağınız veya göndereceğiniz e-postanın formatını buradan düzenleyebilirsiniz. Daha kaliteli e-postalar almak için bu amaçla bir eklenti ekleyebilirsiniz. Eklentilere gidin ve 'Kadence WooCommerce E-posta tasarımcılarını' yükleyin ve. Bu eklentiyi kullanarak, resimde gösterildiği gibi WooCommerce kenar çubuğundaki eklentiye giderek burada düzenlenebilen özel stillerini kullanarak e-posta içeriğini, üstbilgiyi, altbilgiyi, metni vb. tasarlayabilirsiniz.

• ödemeler

Şimdi, müşterilerimize izin verilen ödeme yöntemlerini seçebileceğimiz 'Ödemeler' sekmesine gideceğiz. Seçilebilecek birçok seçenek var ancak aşağıdaki resimde gösterildiği gibi etkinleştir düğmesine tıklayarak burada 'Stripes' ve 'PayPal'ı etkinleştireceğiz.

1. PayPal

Şimdi önce PayPal için ödeme ayarlarını yapalım, bu nedenle başlığı, ödeme kutusu için açıklamayı ve PayPal e-posta hesabınızı girebileceğiniz PayPal ayarları sayfasını açmak için 'Ayarla'yı tıklayın ve 'Değişiklikleri kaydet'i tıklayın. ' web sitenizi PayPal ile entegre etmek için. PayPal'ınız yoksa, web sitelerine gidip ücretsiz kaydolarak bir tane oluşturabilirsiniz. Resimde gösterildiği gibi PayPal e-posta kutusuna koyacağınız bir e-posta adresi ile kaydolmanız yeterli olacaktır. Mevcut en popüler ödeme yöntemlerinden biridir.

2. Şerit

Ardından, ödemeleri şeritlerle ayarlayacağız. Bu yüzden yanındaki 'Yönet' düğmesine tıklayın. PayPal ayarlarıyla aynı şekilde, önce ödeme kutusunun başlığını ve açıklamasını girin. Ardından, test yayınlanabilir anahtarına ve test gizli anahtarına sahipsiniz. www.stripe.com adresine gidebilir ve orada ücretsiz bir hesap oluşturabilirsiniz, hesap oluşturmak için bir banka hesabınızın olması yeterlidir. Ücretsiz bir hizmet olan şerit hesabınızı oluşturduktan sonra web sitenize entegre edebilirsiniz. Bunun için şerit hesabınıza giriş yaptıktan sonra 'Geliştiriciler'e tıklayın ve resimde gösterildiği gibi 'API anahtarları'nı seçin. Web sitenizde buraya gelen yayınlanabilir anahtarı yayınlanabilir anahtar kutusuna ve gizli anahtarı gizli anahtar kutusuna kopyalayın. 'Değişiklikleri kaydet'i tıklayın ve artık web siteniz çok düşük bir işlem ücretiyle dünyanın her yerinden kredi kartı ödemelerini kabul etmeye hazır. Burada bunu yapıyoruz, şerit hesabımızdaki Test verilerini görüntüleme düğmesini hala etkinleştirdik ve WooCommerce ayarları sayfasında 'Test modunu etkinleştir' kutusunu işaretledik, ancak ödeme sisteminizle canlı yayına geçmeye hazır olduğunuzda devre dışı bırakın. .

Artık sipariş vererek ve bir şeyler satın alarak web sitenizi test edebilir ve her şeyin yolunda olup olmadığını kontrol etmek için ödeme yapabilirsiniz. Hesabım Sayfasında, müşterilerin kontrol edebilecekleri, düzenleyebilecekleri veya iptal edebilecekleri kendi kişisel panoları olacaktır. siparişleri, teslimat ve fatura adreslerini düzenleyin, ödeme yöntemlerini ve hesap ayrıntılarını ayarlayın. Tüm geçmiş siparişleri görünümleri de durumlarıyla birlikte sipariş listelerinde gösterilir.

Mobil için optimizasyon

Mobil optimizasyon, web sitesinin mobil cihazlar için kullanıcı dostu görünmesini sağlamak anlamına gelir. Günümüz senaryosunda mobil optimizasyon çok önemlidir, çünkü a) birçok kişi internette gezinmek için mobil cihazlar kullanır ve b) Yeni Google algoritmasına göre, web siteniz mobil olarak optimize edilmemişse, sıralamanızı düşürür ve bu da sizin için felaket olabilir. Web sitesi trafiği ve SEO.

Elementor düzenleyicisini kullanarak mobil optimizasyon oldukça basittir. Tekrar Elementor panosuna dönelim. Araç çubuğunun altında, 3 seçeneği gösteren bir açılır liste açacak olan 'Duyarlı Mod' düğmesini bulacaksınız. Masaüstü, Tablet ve Mobil. Şimdiye kadar, web sitemizi masaüstü izleyicileri için nasıl görüneceğini temel alarak tasarlıyorduk. Şimdi bir tablet tarayıcısında nasıl görüneceğine dair bir önizleme almak için 'Tablet' üzerine tıklayın. Benzer şekilde, 'Mobil' modu için de kontrol edebilirsiniz. Herhangi bir şey bozuk görünüyorsa veya görsel olarak çekici gelmiyorsa web sayfasını düzenleyebilirsiniz.

Burada resimde görebileceğiniz gibi, ilk başlık tablet modu için çok büyük ve '%50 İNDİRİM' çok küçük, bu yüzden ayarlamanız gerekecek. Herhangi bir şeyin yeniden tasarlanması gerekip gerekmediğini görmek için sayfaların tüm öğelerine göz atın. Tüm bu değişiklikler, Güncelle'yi tıkladığınızda Tablet modunda geçerli olacaktır. Aynısı, mobil mod için geçerli olacaktır. Başlık metinlerinin boyutunu, düğmelerin, afişlerin ve başlıkların hizalamasını ayarlayın.

Onlar için önemli olmadığını düşünüyorsanız, mobil veya tablet sürümünde ihtiyacınız olan bazı bölümleri devre dışı bırakabilirsiniz. Bunun için gizlemek istediğiniz bölümü seçin, 'Bölümü Düzenle' araç çubuğundaki gelişmiş kategoriye gidin, 'Duyarlı' seçeneğini tıklayın ve Görünürlük altında, bölümü aşağıda gösterildiği gibi masaüstü, tablet veya mobil sürümde gizlemeyi seçebilirsiniz. image.Aynı şeyi diğer bölümler veya öğelerle de yapabilirsiniz. Arka plan resimleri, yazı tipi boyutu veya herhangi bir şey gibi tablet veya mobil mod için farklı her şeyi tasarlayabilirsiniz.

İletişim Formu

Şimdi ilerleyelim ve ziyaretçilerin iletişim bilgilerini doldurabilecekleri ve doğrudan e-postanıza gidecekleri bir 'İletişim' sayfasını nasıl oluşturacağımızı öğrenelim. Sayfanın temel tasarımını Elementor düzenleyici veya Tema Özelleştirici kullanarak kendi başınıza yapabilirsiniz. Tek önemli şey resimde görüldüğü gibi iletişim formudur. Böylece Elementor araç çubuğunda form ararsınız ve bölüme sürükleyip bırakırsınız ve şimdiye kadar kendi başınıza yapabileceğinizi düşündüğüm 'Formu Düzenle' araç çubuğunu kullanarak formun metnini ve tasarımını düzenleyebilirsiniz. Form Düzenle araç çubuğunda, burada geçmeyen ancak oluşturabileceğiniz temel form olan birçok gelişmiş ayar vardır.

Kuponlar

Sitenize kupon eklemek için, özelleştirme düğmesinin yanındaki üst çubukta '+ Yeni'yi tıklayın ve Kuponlar'ı seçin. WordPress yan araç çubuğundaki kuponlar, resimde gösterildiği gibi 'Pazarlama' bölümünün altında yer almaktadır. Burada yeni kupon kodu ekleyebilir, indirim türünü yüzde indirim, sabit sepet indirimi veya sabit ürün indirimi olarak seçebilir, indirim tutarını veya yüzdesini ve kuponun son kullanma tarihini girebilirsiniz. 'Kullanım Kısıtlamaları' altında, minimum harcama, bireysel kullanım veya diğer kuponlarla birlikte kullanım gibi koşullar koyabilir, ürünleri veya ürün kategorilerini kupondan dahil edebilir veya hariç tutabilirsiniz. Kullanım limiti altında, bu kuponun kaç kez kullanılabileceğini seçebilir veya belirli bir ürün için sınırlandırabilir ve kullanımı tek bir müşteri ile sınırlayabilirsiniz. Bu kuponu web sitesinde uygulamak için Yayınla'ya tıklayın ve alışveriş yaparken kupon kodunu uygulayarak Sepet sayfasında test edin.

Umarım bu eğitim okuyucular için faydalı olmuştur ve artık kendi başınıza sıfırdan bir web sitesi oluşturabilirsiniz. Herhangi bir yardıma ihtiyacınız olursa, web sitemi ve Facebook sayfamı ziyaret edebilir ve yorum bırakabilirsiniz. Web sitesi oluşturma ve Elementor'u kullanma hakkında kontrol edebileceğiniz tonlarca başka kaynağım var. Bu öğreticiyi okuduğunuz için teşekkür ederiz ve geri bildirimleriniz ve sorularınız her zaman açığız.