Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, konuşmacı tarafından WordPress, Elementor ve WooCommerce kullanarak ücretsiz bir e-ticaret sitesi oluşturma ve tasarım süreci adım adım gösterilmektedir.
- Video, Cadence teması kullanılarak e-ticaret sitesi kurulumundan başlayarak, menü oluşturma, footer tasarımı, anasayfa düzenleme, banner oluşturma, slider ekleme, içerik sayfaları (Hakkımızda, Gizlilik ve Güvenlik, İletişim) oluşturma ve footer bağlantıları gibi tüm aşamaları kapsamaktadır. Eğitim, izleyicilerin tüm görselleri kullanarak aynı siteyi kendi başlarına oluşturabilmeleri için hazırlanmıştır.
- Eğitimde ayrıca Elementor ile web tasarım özellikleri (kutu gölgesi, animasyon, galeri düzenleme, efekt ekleme), WooCommerce ile ürün ekleme, ödeme seçenekleri, sipariş takip sayfası oluşturma ve YOS Duplicate Post eklentisi kullanarak sayfaları çoğaltma gibi pratik bilgiler de paylaşılmaktadır.
- E-ticaret Sitesi Projesi Tanıtımı
- Bu videoda Cadence teması kullanılarak komple ücretsiz bir e-ticaret sitesi yapılacaktır.
- Sitede mağaza sayfası, grup ve kategoriler, varyasyonlu ürünler, kredi kartı bilgileri, ekstra bilgi ve ilgili ürünler gibi özellikler bulunacaktır.
- Sitede giriş yap/üye ol, sipariş takip, gizlilik ve güvenlik, kişisel verilerin korunma kanunu gibi gerekli sayfalar oluşturulacaktır.
- 02:22WordPress Kurulumu ve Tema Yükleme
- WordPress kurulumu yapıldıktan sonra ekran tercihlerinden gerekli kutucuklar kapatılarak temiz bir back-end elde edilir.
- Görünüm ve temalar menüsünden "Cadence" teması aratılarak yüklenecektir.
- Tema yüklendikten sonra gerekli olmayan diğer temalar silinmelidir.
- 03:31Eklenti Yükleme
- Eklentiler menüsünden "Elementor", "WooCommerce", "Menu Image", "Login Sign Up Pop Up", "Contact Form 7" ve "Klasik Widgets" eklentileri yüklenmelidir.
- Tüm eklentiler yüklendikten sonra toplu işlemler menüsünden hepsi etkinleştirilecektir.
- Menü Image eklentisinin kurulumu için "Allow Continue" seçeneği tercih edilmelidir.
- 06:32Menü Oluşturma
- Görünüm menüsünden menüler bölümüne gidilerek "Main Menu" adında bir menü tanımlanmalıdır.
- Menüye "Abiye", "Aksesuar", "Blues", "Elbise", "Etek", "Pantolon", "Kampanya" ve "Mağaza" gibi özel bağlantılar eklenecektir.
- Menü oluşturulduktan sonra kaydedilip, ön yüzde görüntülenmesi sağlanmalıdır.
- 09:10Menü Görselleri Ekleme
- Menüdeki "Mağaza" kısmına tıklayarak 24x24 boyutunda bir görsel eklenecektir.
- Görsel eklendikten sonra sayfa güncellendiğinde menüde görsel görünecektir.
- Görselin boyutu daha sonra ayarlanacaktır.
- 10:17Menü ve Logoları Ayarlama
- Yanlış konumda olan ikonu düzeltmek için değişiklikleri kaydedip sitenin ön yüzüne gidiliyor.
- Menü oluşturmak için üst kısımdaki "özelleştir" kısmına basılıyor ve logoyu yüklemek için "header" bölümüne gidiliyor.
- Logoyu seçip "logo and title" yerine "sadece logo" seçeneğiyle logoyu ekleyerek site ikonunu da aynı şekilde yükleyip yayınlayabiliyorsunuz.
- 11:59Menü Yapısını Oluşturma
- Menü kalemine basarak menü açılıyor ve logoyu sağ tarafa, primary navigation'ı ortaya yerleştiriyoruz.
- Sağ üst köşeye sepet butonu, arama ikonu ve sosyal medya barı ekleniyor.
- Sol tarafta sipariş takip butonu, sağ tarafta ise giriş-çıkış navigasyonu ekleniyor.
- 13:04Renk ve Tasarım Ayarları
- Ayar kısmından tasarım bölümüne giderek menüye renk veriliyor.
- Kart ikonunu sağa yerleştirip, sepet butonuna pop-out kart veya dropdown kart seçeneği verilebiliyor.
- Pop-out kart seçeneğiyle sepetin kenardan çıkması daha estetik bir görünüm sağlıyor.
- 15:02Giriş Menüsü Oluşturma
- Yeni bir menü oluşturarak "giriş menüsü" adı veriliyor ve secondary bar olarak ayarlanıyor.
- Giriş yap, üye ol, çıkış yap ve hesabım seçenekleri ekleniyor.
- Giriş yap ve hesabım sayfalarına ikonlar ekleniyor.
- 18:17Buton ve Yazı Ayarları
- Sipariş takip butonu için "outline" seçeneği ve sadece giriş yapıldığında görünmesi isteniyor.
- Buton için arka plan rengi, border radius ve font ayarları yapılıyor.
- Diğer menü için renk, font ve yazı boyutu ayarları yapılıyor.
- 20:48Menü Tasarımı
- Sağ taraftaki ikonlar için design kısmında outline seçeneği kullanılarak arka plan silinir.
- Menü ayarlarında general kısmında minimum yükseklik 56 olarak ayarlanır.
- Kaleme basarak aralarına 2,09 boşluk verilir ve design kısmında koyu renk seçilir.
- 22:24Yazı Stili Ayarları
- Navigation kısmında yazı tipi Popins olarak ve kalınlığı regular olarak ayarlanır.
- Regular yazı tipi 500 olarak ayarlandığında biraz daha kalın görünür.
- İtalyan ve regular yazı tipleri görsel olarak daha iyi görünür.
- 23:05Mobil ve Tablet Menü Tasarımı
- Tablet ve mobil menü için sipariş takip butonu eklenir ve button size small olarak ayarlanır.
- Sipariş takip butonuna background rengi ve border radius verilir.
- Social media bölümü eklenir ve design kısmında container full width olarak ayarlanır.
- 25:27Hover Efekti ve Menü Düzeni
- Hover efekti için background color ve saydamlık ayarlanır.
- Logomuz orta kısma çekilir ve menü trigger sağ tarafa yerleştirilir.
- Sol tarafta kart eklenir ve icon size ayarlanır.
- 28:00Giriş ve Çıkış Menüsü
- Giriş yap menüsü için küçük menü seçeneği kullanılır.
- Çıkış yap seçeneği otomatik olarak çalışır.
- Giriş yap, sign up gibi metinler daha sonra logo translate ile değiştirilecektir.
- 28:50Footer Tasarımı
- Footer kısmında 4 sütunlu bir düzen oluşturulur.
- Footer alt kısmında 3 sütunlu düzen ve copyright alanı sağ tarafa çekilir.
- Footer widget'larına metin eklenecek ve içeriğe link verilecektir.
- 32:04Footer Bölümü Düzenleme
- İkinci kısımda kategoriler ekleniyor ancak henüz hiçbirinde link bulunmuyor.
- Footer üç kısmında "Yardım" bölümü oluşturuluyor ve kaydedilmesi gerekiyor.
- Footer bir kısmına sitedeki logo ekleniyor ve bu resme link verilebiliyor.
- 33:12Footer İçeriği Düzenleme
- Footer iki ve üç kısımlarındaki "Kategoriler" ve "Yardım" yazıları kalınlaştırılıyor.
- Widget beşi ve widget altı olarak adlandırılan alanlara resimler ekleniyor.
- Sosyal medya bağlantıları ekleniyor ve tüm widget'lar ortalı hale getiriliyor.
- 36:39Footer Görünümü Ayarlama
- Footer kısmına üst ve alt çizgiler ekleniyor.
- Arka plan rengi beyaz olarak ayarlanıyor.
- Footer dört kısmında otomatik olarak ürünlerin çıkması planlanıyor.
- 37:51Ana Sayfa Oluşturma
- Ana sayfa için yeni bir sayfa oluşturuluyor ve "Ana Sayfa" olarak adlandırılıyor.
- Ayarlar kısmından okuma ayarlarına gidilerek ana sayfa olarak tanımlanıyor.
- Elementor ile ana sayfa düzenlenmeye başlanıyor.
- 39:23Ana Sayfaya Video Ekleme
- Ana sayfaya video eklemek için yeni bir bölüm oluşturuluyor.
- Video bağlantısı kopyalanıp Elementor üzerinden ekleniyor.
- Video yüklenirken, arka plan fallback olarak video kırpımı yüklenerek sunucudan çalmaya başlamadan önce gösterilecek resim belirleniyor.
- 41:40Banner Ekleme ve Düzenleme
- Web sayfasına banner eklemek için artı işaretine basıp iç bölüm seçiliyor.
- Banner için görsel atan ve kutu gölgesi özelliği ile gölge veriliyor.
- Banner'ın konumu ayarlanıyor ve sayfa güncellendiğinde banner görünür hale geliyor.
- 42:53Ürün Gösterim Bölümü Oluşturma
- Banner altına yeni bir bölüm ekleniyor ve iç bölüm eklenerek üç adet çoğaltılıyor.
- Her bir iç bölümüne görsel atılarak kutu gölgesi özelliği uygulanıyor.
- Gelişmiş özelliklerden bağlantı vurgusu seçiliyor ve rotate animasyonu ekleniyor.
- 44:24Arka Plan Rengi Ayarlama
- Web sitesinin arka plan rengi için renk kodu alınıyor.
- Biçem kısmından arka plan rengi ayarlanıyor ve farklı bölümlere farklı renkler veriliyor.
- Kılavuz özelliği kullanılarak bölümlerin konumları ve ilişkileri daha iyi görülebiliyor.
- 45:38Resim Döngüsü Ekleme
- Alt kısıma yeni bir bölüm ekleniyor ve iç bölümü çoğaltılıyor.
- Resim döngüsü sürüklenerek ekleniyor ve fotoğraflar yükleniyor.
- Galeri ayarları yapılarak slayt yerine sokul seçeneği ve animasyon hızları ayarlanıyor.
- 47:36İkinci Resim Döngüsü Oluşturma
- İlk resim döngüsünün kopyası yapılıyor ve farklı fotoğraflar ekleniyor.
- Görsellerin stili kopyalanıp başka bölüme yapıştırılıyor.
- Bannerlar eklenerek sayfa tasarımı tamamlanıyor.
- 49:26Animasyon Ekleme
- Resimlere hareket efekti ekleniyor.
- Fade in up animasyonu seçiliyor ve yavaşı hız ayarı yapılıyor.
- İkinci bir slider eklenerek farklı fotoğraflar ve ayarlar yapılarak sayfa tamamlanıyor.