Buradasın

WordPress ve Elementor ile E-Ticaret Sitesi Oluşturma Eğitimi

youtube.com/watch?v=tbZ6esJ0z9A

Yapay zekadan makale özeti

Kısa
Ayrıntılı

Bu video, bir eğitmen tarafından sunulan kapsamlı bir e-ticaret sitesi oluşturma eğitimidir. Eğitmen, izleyicilere WordPress, WooCommerce ve Elementor kullanarak profesyonel bir e-ticaret sitesi nasıl oluşturulacağını adım adım göstermektedir.
Video, e-ticaret sitesi tasarımının tüm aşamalarını kapsamaktadır: istek listesi eklentisinin Türkçeleştirilmesi, ürün sayfalarının özelleştirilmesi, ödeme seçeneklerinin düzenlenmesi, ana sayfa tasarımı, footer oluşturma, iletişim sayfası, sipariş takip, hesabım gibi temel sayfaların oluşturulması ve ürün oluşturma süreci. Eğitmen, tüm bu aşamaları detaylı şekilde göstererek izleyicilere e-ticaret sitesi oluşturmak için gerekli tüm bilgileri sunmaktadır.
Eğitim içeriğinde ayrıca konteyner kullanımı, renk ayarları, hareket efektleri, sticky header ayarları, mobil görünüm düzenlemeleri ve sanal pos müracaatı için gerekli sayfaların hazırlanması gibi teknik detaylar da yer almaktadır. Video, e-ticaret sitesi oluşturmak isteyenler için kapsamlı bir rehber niteliğindedir.

E-ticaret Sitesi Projesi Tanıtımı: Bu videoda WordPress ile ücretsiz eklenti ve tema kullanarak online hediye satışları yapabilecek bir e-ticaret sitesi oluşturulacak.
Sitede satın alınan ürünlerin tasarımlarıyla kişiye özel yazı, resim ve logo gibi alanlar eklenebilecek ürün seçenekleri yapılandırılacak.
E-ticaret sitelerinde olmazsa olmaz olan site koşulları sayfaları tek tek yapılandırılacak.
00:55WordPress Tema Kurulumu: WordPress kurulumu yapıldıktan sonra bildirimler kapatılarak ekran tercihlerine erişildi.
Görünüm ve temalar menüsünden yeni tema eklenerek ve etkinleştirildikten sonra gereksiz temalar silindi.
Tema kurulumu tamamlandıktan sonra siteyi ziyaret et butonuna tıklayarak yeni sekmede açıldı.
01:56Eklenti Kurulumu: Eklenti ve yüklü eklentilere gidildi, mevcut eklentiler silindi.
Elementor, Classical Widgets, Contact Form 7, Logo Translate, Otomatik Translate for Loca Translate, Login Sign Up Pop-up, Menu Image Icons Made Easy ve WP Chat App eklentileri kuruldu.
WooCommerce, WooCommerce Custom Products, WooCommerce Wishlist, File Upload Add-on for WooCommerce, Custom Products for WooCommerce ve WP Code Light eklentileri de kuruldu.
06:54Eklentilerin Etkinleştirilmesi ve İstek Listesi Oluşturma: Tüm eklentiler kurulduktan sonra yüklü eklentilere gidilerek hepsi tek seferde etkinleştirildi.
WooCommerce kurulumu için setup wizard başlatıldı ve istek listesi sayfası oluşturuldu.
İstek listesi ayarları yapılandırıldı ve sade bir tasarım tercih edildi.
08:51WooCommerce Kurulumu: Elementor kurulumu tamamlandıktan sonra başlangıç sayfasına dönüldü.
Mağaza kurulumu için "Mağaza Kur" butonuna tıklandı ve adımlar atlanarak ilerlendi.
Mağaza "Hediye Online" olarak isimlendirildi ve Türkçe ayarları yapılandırıldı.
10:29Eklenti Kurulumu ve Başlangıç Ayarları: Sitenin ön yüzünde istek sayfası, mağaza sayfası, ödeme, sepet ve hesabım sayfaları görülmektedir.
Başlangıç kısmında "Complete Menu Image Activation" seçeneği aktifleştirilmelidir.
Tüm eklentiler tek tek yüklenip aktifleştirilir, bazıları otomatik olarak kurulur.
11:31Eklenti Sorunlarını Çözme: Yüklenen eklentilerin sorunları için Commerce ve Ayarlar > Gelişmiş Ayarlar > Özellikler kısmından çözüme gidilebilir.
E-ticaret sitesi yaparken ürünleri kategorilere ayırıp filtre ayarlarını yapmak önemlidir.
12:47Kategori Oluşturma: WooCommerce > Ürünler > Kategoriler kısmından kategoriler oluşturulur.
Ana kategoriler ve alt kategoriler oluşturulabilir, örneğin "Sevgiliye Özel" ana kategorisi altında "Erkek Sevgiliye Hediye" ve "Kadın Sevgiliye Hediye" alt kategorileri oluşturulabilir.
Kategorilerin yerleri sürükle-bırak yöntemiyle değiştirilebilir.
15:53Nitelikler Oluşturma: Nitelikler (özellikler) eklenerek ürün filtreleme seçenekleri oluşturulabilir.
Örnek olarak "Fiyat Aralığı" niteliği oluşturulabilir ve 150-300 TL, 300-450 TL gibi aralıklar eklenebilir.
"Cinsiyet" niteliği oluşturulabilir ve "Erkek" ve "Kadın" terimleri eklenebilir.
18:24Menü Oluşturma: Görünüm ve Menü > Menü Oluştur > Primary seçeneği ile menü oluşturulur.
Menü ekleme ekranında "Ürün Kategorileri" seçeneği ile kategoriler menüye eklenir.
Kategoriler menüde ana kategori ve alt kategori şeklinde düzenlenerek site ön yüzünde görüntülenir.
20:45Menü Kategorilerinin Oluşturulması: Özel gün, sevgiliye özel ve yıldönümü gibi kategoriler menüye ekleniyor.
Menü düzenlemesi yapıldıktan sonra ön yüzte kategoriler görünüyor, ancak henüz ürünler olmadığı için sayfalar boş.
22:02Ana Sayfa Menüsünün Düzenlenmesi: Özelleştir kısmından menü düzenlemesi yapılıyor.
Logoyu ortaya, sepeti sağ tarafa yerleştiriyoruz.
İkinci navigasyon için giriş yap, güvenli çıkış, hesabım gibi menü öğeleri ekleniyor.
Sol tarafta HTML kodu ile telefon numarası ve adres, sağ tarafta ise arama çubuğu ekleniyor.
24:24Üst Menü Oluşturma: Yeni bir menü oluşturulup "Giriş Menü Üst Bar" olarak adlandırılıyor.
Giriş yap, üye ol, hesabım ve güvenli çıkış gibi menü öğeleri ekleniyor.
Menü öğelerine Türkçe etiketler veriliyor.
26:32Renk ve Yazı Tipi Ayarları: Color and Font bölümünden renk paleti ayarlanıyor.
Linkler ve butonlar için aynı renk kullanılıyor.
Typografi bölümünden Poppins fontu tüm sitenin yazı tipi olarak seçiliyor.
29:18Header ve Sosyal Medya Ayarları: Header kısmının arka plan rengi ayarlanıyor.
Sosyal medya ikonlarının arka plan rengi ve hover rengi belirleniyor.
Sosyal medya linkleri ekleniyor ve ikonların yazı tipi boyutu 13 piksel olarak ayarlanıyor.
31:50Menü ve Dropdown Düzenleme: Orta kısmın rengi beyaz olarak ayarlanıyor ve üst kısmın dizaynı düz olarak seçiliyor.
Dropdown menüsünde alt kısımlara ince çizgiler eklenerek görsel ayrıma sağlanıyor.
Dropdown menüsündeki öğelerin alt alta düşmemesi için "dropdown options" ayarlarından "fade up" seçeneği ve genişlik değeri 284 olarak belirleniyor.
33:25Dropdown Görünümü ve Buton Özelleştirme: Dropdown arka planı beyaz yapılıyor ve üzerine gelindiğinde farklı bir renk ayarlanıyor.
Ücretsiz eklentiler kullanıldığında pro sürümüne geçilmesi isteniyor, bu nedenle alternatif çözümler bulunuyor.
Butonlar kişiselleştirilerek font size 43 piksel olarak ayarlanıyor ve outline özelliği ekleniyor.
36:02Sepet Butonu ve Pop-up Ayarları: Sepet butonunun büyüklüğü 1.76 olarak ayarlanıyor.
Giriş yap ve kayıt pop-up ekranı oluşturuluyor, ancak ön yüzte "hesabım" ve "güvenli çıkış" olarak görünüyor.
Logoyu eklemek için "logo seç" seçeneği kullanılıyor ve logo boyutu 87 olarak belirleniyor.
38:06Tablet ve Mobil Görünüm Ayarları: Tablet görünümünde logo aynen olduğu yerde kalırken, buton ve arama çubuğu ekleniyor.
Arama çubuğu için "ürün ara" yazısı ve tasarım ayarları yapılıyor.
Mobil görünümde farklı bir logo kullanmak için "defend logo for mobile" seçeneği kullanılıyor ve logo küçültülüyor.
42:15Mobil Menü Ayarları: Mobil menü ayarları yapılandırılıyor ve menü açıldığında düzgün görüntülenmesi sağlanıyor.
Menü konteyner seçenekleri ayarlanarak menü görünümü optimize ediliyor.
43:03Çekmece Ayarları: Çekmece tasarım kısmında renk seçimi yapılarak çekmeceye renk verildi.
Çekmece transparan olarak ayarlanarak arka tarafın görülebilmesi sağlandı.
Triggerın boyutu 24 olarak bırakıldı ve "Move body with toggle" seçeneği açılarak site efekti verildi.
44:10Menü Ayarları: Menüye "Mağaza" eklenerek aşağı inildiğinde menüde birlikte gelmesi sağlandı.
Sticky header özelliği etkinleştirilerek menü aşağı inildiğinde yukarıda kalması sağlandı.
Sticky header için beyaz arka plan ve transparanlık ayarı yapıldı.
46:22Menü Düzenleme: Menüde mağaza sayfası eklendi ve kategorilerin sıralaması düzenlendi.
Menüde aralık ayarı yapılarak kategoriler birbirine yanaştırıldı.
İkon ince seçeneği ile menü ikonları ince hale getirildi.
49:26Footer Kısımları: Footer dört bölüme ayrılarak widget'lar eklendi.
Footer'a kategoriler (sevgiliye özel, yıldönümü, kime hediye, doğum günü, özel gün) eklendi.
Site koşulları, sipariş takip, hakkımızda gibi sayfalar footer'a eklendi.
53:32Footer Görselleri: Footer'a resim eklendi ve "tam boy" seçeneği ile çözünürlük arttırdı.
GIF formatında bir görsel eklendi ve "tam boy" seçeneği ile hareketli hale getirildi.
Kredi kartı görseli footer'a eklendi ve "tam boy" seçeneği ile görüntülenmesi sağlandı.
54:57Web Sitesi Tasarım Ayarları: Arka plan rengi ayarlanıyor ve footer kısmının rengi koyulaştırılıyor.
Footer'daki açıklamalar değiştirilebiliyor, link renkleri ve font renkleri ayarlanıyor.
Sticky header kısmı kapatılarak menü aşağı indiğinde birlikte inme özelliği devre dışı bırakılıyor.
56:28Menü Özelleştirme: Logonun yanlışlıkla küçüldüğü tespit ediliyor ve "Logo and Title" üzerinden düzeltme yapılıyor.
Tablet ve mobil görünümde logo boyutu ayarlanıyor.
Sticky header menüsünün transparan olması için ayarlar değiştiriliyor.
58:05Footer Linklendirme: Footer kısmındaki linklere yönlendirme yapılıyor.
Örneğin "Erkek sevgiliye hediye" ve "Kadın sevgiliye hediye" gibi linkler kopyalanıp footer'a yapıştırılıyor.
Tüm footer linkleri benzer şekilde linklendiriliyor.
1:00:50Site Koşulları Sayfaları Oluşturma: Çerez politikası sayfası oluşturmak için "YOS Duplicate Post" eklentisi kurulup etkinleştiriliyor.
Yeni sayfa ekleniyor ve başlık olarak "Çerez Politikası" yazısı giriliyor.
Çerez politikası sayfası linklendiriliyor ve aynı işlem gizlilik koşulları ve diğer site koşulları için tekrarlanıyor.
1:03:48İletişim Sayfası Oluşturma: İletişim sayfası oluşturuluyor ve Elementor ile düzenleniyor.
Container ekleniyor ve arka plan rengi belirleniyor.
Başlık ekleniyor, ortalama hale getiriliyor ve yazı tipi, kalınlık ve boyut ayarlanıyor.
1:05:45İletişim Sayfası Oluşturma: İletişim sayfasında ortalama yapılması gereken kısımlar bulunuyor ve bunu yapmak için resmin üzerine tıklanması gerekiyor.
Kısa kod eklemek için "kısa kod" yazarak ilgili kodu panelin arka kısmından kopyalayıp yapıştırabilirsiniz.
Harita eklemek için "artı" işaretine tıklayıp "map" yazarak Google Maps'i ekleyebilirsiniz.
1:07:45İletişim Sayfasını Düzenleme: Haritanın rengini CSS filtrelerinden koyulaştırarak temaya uyum sağlayabilirsiniz.
Sayfaya logo ekleyebilir ve ikon listesinden istenen ikonları seçebilirsiniz.
İkonların rengini ve boyutunu ayarlayabilirsiniz.
1:08:31İletişim Bilgilerini Ekleme: Elementor'da pop-up kutusu oluşturmak için "pops" seçeneğini kullanabilirsiniz.
Telefon numarası, e-posta adresi ve konum gibi iletişim bilgilerini ekleyebilirsiniz.
İkonların rengini ve aralarındaki boşluğu ayarlayarak düzenleyebilirsiniz.
1:10:23Sayfayı Kaydetme ve Kullanım: İletişim sayfasını özelleştirme kısmına yapıştırıp kaydedebilirsiniz.
Sipariş takip sayfası oluşturmak için "woocommerce oder tracking formu" kısa kodunu kullanabilirsiniz.
Hesabım sayfasını hem giriş yapma hem üye olma için kullanabilirsiniz.
1:13:19Diğer Sayfaları Oluşturma: Hakkımızda sayfasını oluşturmak için çerez politikası sayfasını çoğaltabilirsiniz.
Vizyonumuz sayfasını da benzer şekilde oluşturabilirsiniz.
E-ticaret sitelerinde sayfaları sade tutmak önemlidir çünkü müşteriler ürün bakıp satın almak için gelir.
1:15:27Ana Sayfaya Telefon Numarası Ekleme: Tüm kategoriler birleştirildi ve linkleri verildi.
Ana sayfaya telefon numarası eklemek için HTML kısmına telefon bilgilerini yapıştırabilirsiniz.
Telefon numarasının boyutunu ayarlayarak düzenleyebilirsiniz.
1:16:13E-Ticaret Sitesi Hazırlığı: E-ticaret sitesi hazırlandı ve site koşulları, çerez politikası, gizlilik, güvenlik, mesafe satış sözleşmesi ve iletişim sayfası gibi önemli bölümler hazırlandı.
Sanal POS müracaatı yapılırken, sitenin incelemeye alınacağı için bu sayfaların açık bir şekilde görünmesi gerekiyor.
İletişim, sipariş takibi ve hesabım sayfaları hazırlandı.
1:17:03İstek Listesi Sayfası Oluşturma: İstek listesi sayfası oluşturuldu ve site ön yüzüne eklendi.
İstek listesi sayfası mobil versiyonu için de ayarlandı.
İstek listesi sayfası logo ile birlikte Türkçeleştirildi.
1:18:25İstek Listesi Ayarları: İstek listesi ayarları yapıldı; sepete eklendiğinde bildirim gösterme, eklenen tarih gösterme ve sepete ekle butonu gibi özellikler kapatıldı.
"Add to cart" butonu "İstek listesi" olarak değiştirildi.
İstek listesi sayfası için test ürün eklendi.
1:21:04Test Ürün Oluşturma: Test ürün bir adı verildi ve açıklama kısmına metin eklendi.
Ürünün fiyatı 500 TL olarak belirlendi ve stok miktarı 35 olarak ayarlandı.
Ürünün ağırlığı, boyutları ve görseli eklendi.
1:23:13Ürün Kategorileri ve İstek Listesi: Test ürünü için tüm kategoriler seçildi ve ürün yayınlandı.
İlk test ürünü kopyalanarak test ürün iki oluşturuldu ve fiyatı 350 TL olarak ayarlandı.
Ürünler beğenilerek istek listesine eklendi ve istek listesi sayfası Türkçe çevirisi yapıldı.
1:26:02İstek Listesi Özelliklerinin Türkçe Yapılması: Ürün adı, unit price (ürün fiyatı) ve stock state (stok durumu) gibi özelliklerin Türkçe karşılıkları belirleniyor.
İstek listesinden ürün çıkarıldığında görüntülenen mesaj "İstek listesinden çıkarıldı" şeklinde Türkçe yapılıyor.
İstek listesi boş olduğunda "İstek listeniz boş" ve "Mağazaya geri dön" mesajları Türkçe olarak ayarlanıyor.
1:29:22Sepet Ayarları: Sepetin kenardan çıkmasını sağlamak için "pop-out kart" seçeneği tercih ediliyor.
Ürün sepete eklendiğinde "Sepeti görüntüle" butonu ile sepetin görünümü ayarlanıyor.
1:30:27Ürün Kataloğu ve Filtreleme Ayarları: Ürün kataloğu için sol veya sağ tarafa bir sidebar seçiliyor.
Ürünlerin üçlü şekilde görüntülenmesi tercih ediliyor, böylece dörtli yapıda sıkışma yaşanmıyor.
Mobil görünümde yan yana tek veya iki ürünün görüntülenmesi seçeneği sunuluyor.
1:31:50Sidebar İçeriği: Sidebar içeriği temizlenip yeni bileşenler ekleniyor: öncelikle ürün görseli ekleniyor.
Fiyata göre filtreleme, niteliğe göre filtreleme (cinsiyet) ve kategori bileşenleri ekleniyor.
Fiyata göre filtreleme ve niteliğe göre filtreleme bileşenleri sidebarın farklı yerlerine yerleştiriliyor.
1:35:08Tek Ürün Görünümü: Tek ürün görünümü için ürünün kutu içerisinde görüntülenmesi tercih ediliyor.
Ödeme kısmındaki kredi kartı seçenekleri gizleniyor ve özel bir banka bilgisi sekmesi ekleniyor.
Ürün detay sayfasında ek bilgi, ilgili ürünler ve değerlendirmeler bölümleri görüntüleniyor.
1:36:52Menü İkonları Ekleme: Paneli güncelleyip görünüm ve menülere giderek giriş menüsünü seçiyoruz.
Giriş yap, üye ol, hesabım ve güvenli çıkış menüleri için 24x24 piksel boyutunda ikonlar ekleniyor.
İkonların rengi değiştirilebilir ve hover rengi ayarlanabilir.
1:39:51Ana Sayfa Tasarımı Başlangıcı: Yeni bir sayfa oluşturulup adı "anasayfa" olarak kaydediliyor.
Elementor ile düzenleme yapılıyor ve slayt gösterisi eklenerek üç resim galeriye ekleniyor.
Slayt ayarlarında yükseklik 500, geçiş süresi 5000 olarak ayarlanıyor.
1:41:06Ana Sayfa İçeriği: Slayt bölümüne konteyner ekleniyor ve konteyner çoğaltılarak iki adet oluyor.
Birinci konteynerin üzerine başlık metni ve metin düzenleyici ekleniyor, yazı tipi Poppins olarak ayarlanıyor.
Metin düzenleyicinin büyüklüğü 22 olarak ayarlanıyor ve üst boşluk eksi değer verilerek yukarıya yanaştırılıyor.
1:42:54Düğme Ekleme ve Mobil Ayarlar: Metin düzenleyicinin altına düğme ekleniyor, yazı tipi Poppins olarak ayarlanıyor.
Düğmenin büyüklüğü orta, metin rengi beyaz, arka plan rengi ve hover efekti ayarlanıyor.
Mobil görünüm için ayarlar yapılıyor, tablet görünümünde içerikler sola itiliyor ve boşluklar ayarlanıyor.
1:46:03Arka Plan ve Düzenleme: Sitenin arka plan rengiyle uyumlu olarak şekil bölücünün alt rengi değiştiriliyor.
Konteynerin arkasına da aynı renk uygulanıyor.
Ana sayfanın alt kısmındaki menü yukarıya çekiliyor ve üst boşluk ayarlanarak ortalama konuma getiriliyor.
1:47:53Web Sayfası Tasarımı: Bir konteyner oluşturulup beş kere çoğaltılıyor ve her birine farklı görseller ekleniyor.
Ana konteynerin içine bir görsel ve başlık ekleniyor, başlığa "Sevgiliye Özel" yazısı yerleştiriliyor.
Görsellerin üzerine gelindiğinde büyüme efekti (grow) ve kenarlık özellikleri ekleniyor.
1:51:40İçerik Düzenleme: Oluşturulan konteynerlerin arka plan renkleri değiştiriliyor ve her birine farklı başlıklar (hediye, pasta, özel gün, yıldönümü) ekleniyor.
Konteynerlerin aralarındaki boşluk ayarlanıyor ve hareket efekti (roll down left) veriliyor.
Her bir konteynerin üzerine basıldığında ilgili sayfaya yönlendirme bağlantıları ekleniyor.
1:57:34Alt Kısım Tasarımı: Alt kısma boşluk bırakılarak ürünlerin sergileneceği alan oluşturuluyor.
Ürünlerin üstüne bir başlık ve bölücü ekleniyor, başlığın rengi ve tipografi ayarlanıyor.
Ürünlerin altına yeni bir bölüm ekleniyor ve içine görsel atan konteyner yerleştiriliyor.
1:59:34Görsel Düzenleme ve Elementor Kullanımı: Görselin üzerine gelince, belirli bir görsel seçimi yapılıyor.
Görseli büyüterek düzenleme yapılıyor ve Elementor'un yeni sisteminde çalışılıyor.
Bazı sorunlar yaşanabiliyor, bazen işlevsel oluyor bazen olmuyor, nedeni bilinmiyor.

WordPress ve Elementor ile E-Ticaret Sitesi Oluşturma Eğitimi

Yapay zekadan makale özeti

Yanıtı değerlendir