Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan, WordPress ve Elementor kullanarak web sitesi tasarımı konusunda adım adım rehberlik yapan bir eğitim içeriğidir.
- Eğitim, Bambı Kafe sitesi örneği üzerinden başlayarak, WordPress kurulumundan başlayıp, tema ve eklenti kurulumu, menü oluşturma, logo yükleme, header ve footer tasarımı, slider ekleme, içerik düzenleme ve e-ticaret özellikleri gibi tüm aşamaları kapsamaktadır. Video, web sitesi tasarımının temel adımlarını detaylı şekilde göstermekte ve izleyicilere kendi web sitelerini oluşturabilmeleri için gerekli bilgileri sunmaktadır.
- Eğitimde CSS özellikleri (position absolute, z indeksi, margin, padding, renk kodları) kullanılarak orijinal web sayfasına benzer bir tasarım oluşturulmakta, ayrıca slider içerik ayarları, ürün menüleri, sipariş verme butonları ve bilgilendirme bölümleri gibi e-ticaret sitelerinin temel bileşenleri de gösterilmektedir.
- 00:02WordPress ile Bambi Kafe Sitesi Oluşturma
- Videoda, internette bulunan Bambi Kafe sitesinin aynısını WordPress, Elementor ve Hello teması kullanarak nasıl yapılacağı gösterilecek.
- Bu siteyi yaparken herhangi bir ücretli eklenti veya tema satın alınmayacak.
- Tam birebir aynı site yapılamaz ancak görsel olarak %87-90 oranında benzer bir site elde edilebilir.
- 01:38WordPress Kurulumu ve Tema Ekleme
- WordPress kurulumu yapıldıktan sonra, Dashboard kısmından Appearance ve Themes'e giderek Hello teması yükleniyor.
- Hello teması kurulduktan sonra otomatik olarak Elementor düğmesi geliyor ve buradan Elementor eklentisi kuruluyor.
- Elementor Header and Footer eklentisi de aynı şekilde yükleniyor.
- 03:23Slider Eklentisi ve Menü Oluşturma
- Sitenin slider için Siena Extension for Elementor eklentisi yükleniyor.
- Menü oluşturmak için Appearance ve Menüye gidilerek Main Menü adında bir menü oluşturuluyor.
- Menüye #kodları kullanılarak Menüler, Kahvaltılar, Burgerler, Et Dönerler, Tavuk Dönerler, Tostlar, Sandviçler, Waffle ve Kumpir, İçecekler linkleri ekleniyor.
- 07:50Logo ve Favicon Yükleme
- Sitenin ön yüzünde sol taraftaki Customize düğmesine basılarak logo yüklenebiliyor.
- Side Identity kısmından Select Logo seçeneği ile sitemizin logosu yükleniyor.
- Favicon olarak da site köşesinde görünecek sembol yükleniyor.
- 09:20Header Bölümünün Oluşturma
- Elementor Header and Footer Builder'a giderek Header bölümü oluşturuluyor.
- Header için "Main" adı veriliyor ve gösterileceği yer olarak tüm web sitesi seçiliyor.
- Header bloğu için arka plan rengi ayarlanıyor ve search widget ile ikon listi eklenerek menü yazısı yerleştiriliyor.
- 12:23Menü Oluşturma ve Düzenleme
- Menü öğeleri için kırmızı beyaz renk ayarlanıyor ve hover (üzerine gelme) durumunda sarı renk olarak değiştiriliyor.
- Menü öğeleri için siyah grimsi kare kopyalanıp, "restoranlar", "helal gıda", "kampanyalar", "üretim", "KVKK bilgilendirme" ve "bize ulaşın" yazıları ekleniyor.
- Menü öğeleri ayarlanıp, layout kısmından ortalama ve sayfa kaydedildikten sonra internet sitesinde gösteriliyor.
- 16:05Arka Plan ve Buton Ekleme
- Menünün altına üç taneli bir blok açılıyor ve blok içine buton çekiliyor.
- Butona arka plan olarak resim yüklendiği ve pozisyon ayarları yapıldıktan sonra yükseklik ayarlanıyor.
- "Sipariş vermek için lütfen şube seçiniz" yazısının olduğu buton silinip, yeni bir buton ekleniyor ve kırmızı renkli "sipariş verebilmek için lütfen şube seçiniz" butonu oluşturuluyor.
- 19:31Kampanyalar Butonu ve Giriş Kısmı
- Sipariş butonunun kopyası alınıp "kampanyalar" yazısı ekleniyor ve rengin şeffaflığı düşürüldükten sonra yazı kalınlığı inceltiliyor.
- Giriş kısmını oluşturmak için artı butonuna basılarak intersection ekleniyor ve içine resim yüklüyor.
- Giriş butonu için sipariş butonunun kopyası alınıp, yazı "giriş" olarak değiştiriliyor ve butonun kenarları kare yapılarak padding ayarları yapılıyor.
- 22:04Kayıt Ol Butonu ve Hover Efekti
- Giriş butonunun kopyası alınıp "kayıt ol" yazısı ekleniyor ve butonlar birbirine yanaştırılıyor.
- Butonların yazı rengi beyaz, arka plan rengi kırmızı olarak ayarlanıyor.
- Hover efekti için butonlara üzerine geldiğinde yazı rengi beyaz, arka plan rengi kırmızı olacak şekilde ayarlar yapılıyor.
- 25:37Web Sayfası Düzenleme
- Position absolute özelliği kullanılarak resim yukarı doğru kaydırılıyor.
- Kampanyalar bölümü sağa kaydırılıyor ve logo yukarı çekiliyor.
- Sayfada 9 adet resim ekleniyor ve bu resimlerin arka plan rengi ayarlanıyor.
- 29:01Menü ve Layout Ayarları
- Menü için yükseklik ayarı yapılıyor ve z indeksi ile üst seviyeye taşınıyor.
- Logo ve menü arasındaki konum ayarları yapılıyor.
- Menünün rengi beyaza, hover durumunda sarıya ayarlanıyor ve yazı tipi kalınlığı 500 olarak belirleniyor.
- 35:52Footer Bölümü Oluşturma
- Dashboard'a dönülerek yeni bir footer ekleniyor.
- Footer için kampanyalar, restaurantlar, hakkımızda ve KVKK bölümleri oluşturuluyor.
- Footer'a bir resim ekleniyor ve arka plan özellikleri ayarlanıyor.
- 37:52Footer Bölümünün Düzenlenmesi
- Footer kısmına logo ekleniyor ve yazılar düzenleniyor.
- İkon listesi oluşturulup, ikonlar silinerek sadece yazı kalıyor ve yazı rengi beyaz, hover rengi sarı olarak ayarlanıyor.
- Footer kısmının yüksekliği ayarlanıyor ve padding değeri verilerek içerik aşağıya doğru kaydırılıyor.
- 40:32Footer Kırmızı Bölümünün Oluşturulması
- Footer kısmının altına kırmızı renkli bir bölüm ekleniyor.
- İçerisine "Copyright" yazısı ekleniyor ve rengi beyaz olarak ayarlanıyor.
- Background overlay özelliği kullanılarak gradient efekti uygulanıyor.
- 42:47Ana Sayfa Oluşturma ve Ayarları
- Slider eklemek için önce ana sayfa oluşturuluyor ve Elementor Full Good şablonu seçiliyor.
- WordPress ayarlarından reading kısmına gidilerek oluşturulan sayfanın ana sayfa olarak tanımlanması yapılıyor.
- Ana sayfaya dönülerek Elementor ile düzenleme başlatılıyor.
- 44:38Slider Ekleme ve Ayarları
- Ana sayfaya slider eklemek için "Content Slider" bloğu ekleniyor.
- Slider ayarlarında 1 slayt gösterilmesi, otomatik çalışması ve nokta göstergelerinin gösterilmesi yapıldığı belirtiliyor.
- Sliderın tam ekran kaplaması için layout ayarı "full width" olarak değiştiriliyor.
- 46:35Slider İçeriği ve Görünümü
- Slider için arka plan resmi ekleniyor ve slider yüksekliği ayarlanıyor.
- Sliderın marj ve padding değerleri sıfırlanarak tam ekran görünümü sağlanıyor.
- İkinci ve üçüncü slider eklenerek toplam 3 slayt oluşturuluyor ve okların rengi kırmızı olarak ayarlanıyor.
- 50:22Slider Ayarları
- Slider ayarlarında "show items one" seçeneği kullanılıyor ve resimler kesilmekten dolayı ayarlar değiştiriliyor.
- Slider content ayarlarında dots kapatılıyor, navigation show, position center center ve repeat ayarları yapılıyor.
- Slider boyutu "cover" olarak ayarlanarak resimler tam olarak görüntüleniyor.
- 51:58Ürün Kullanım Alanı Oluşturma
- Ürün kullanım alanı için üç adet yer seçiliyor ve arka plan resmi ekleniyor.
- Üzerine "Sucuklu Kaşarlı Tost" başlığı ekleniyor ve yazı tipi büyütülüyor.
- Alt kısımda fiyat bilgisi ekleniyor ve kalınlaştırılıyor.
- 54:03Sipariş Ver Butonu Ekleme
- Ürünün yanında "Sipariş Ver" butonu ekleniyor ve buton ortalanıyor.
- Buton yazı tipi büyütülüyor ve rengi sarı olarak ayarlanıyor.
- Butona üzerine geldiğimizde renk beyaza dönüyor.
- 55:22Layout Düzenlemeleri
- Başlığa ve butona marjin değerleri veriliyor (30px üst ve alt boşluk).
- Sayfa yenilendiğinde içerik doğru şekilde görüntüleniyor.
- Sağ tarafta bir buton ekleniyor ve pozisyonu ayarlanıyor.
- 57:40Buton Pozisyonu Düzenleme
- Butonun z-index değeri arttırılarak öne çıkması sağlanıyor.
- Buton yukarı doğru taşınıyor ve sayfa yenileniyor.
- Butonun sağ tarafındaki boşluk ayarlanarak doğru konuma getiriliyor.
- 1:00:06Sitenin Animasyon Ayarları
- Advanced kısmından motion effects seçeneğine tıklanarak giriş animasyonu sağdan içeri gelme (fade in from the right) ve hızlı bir şekilde eklendi.
- Animasyonda 100 milisaniyelik bir bekleme süresi ayarlandı ve kaydedildi.
- Sayfa güncellendiğinde sağ tarafa sipariş bölümü otomatik olarak gelmeye başladı.
- 1:00:46Sitenin İçeriği Düzenlenmesi
- İstenmeyen içerikler silindi ve iki kere kopyalanıp yapıştırıldı.
- Resimler değiştirildi ve e-ticaret sitesi olarak WooCommerce indirilerek online ödeme özelliği eklenebilir.
- Resimler değiştirildikten sonra sayfa yenilendi ve sitenin üst kısmı tamamlandı.
- 1:02:12Sitenin Orta Kısmının Oluşturulması
- Ana sayfaya dönersek boşluk kapatıldı ve dört tane kutucuk seçildi.
- Her kutucuğa resim yüklendi ve margin top değeri 40 olarak ayarlandı.
- Resimler (kitap, motosiklet, aşçıbaşı şapkası, fast food) duplicate (kopyala) yöntemiyle eklendi.
- 1:03:36Sitenin Alt Kısmının Tasarlanması
- Kırmızı renkli başlık ve ortalanan kırmızı paragraf eklendi.
- Duplicate yöntemiyle aynı tasarım diğer resimlere de uygulandı.
- Altına bir section ve boşluk (spacer) eklendi.
- 1:04:56Sitenin Tamamlanması ve Tavsiyeler
- Sitenin ön yüzünde ana menü, slider, sipariş ver, ürünler, açıklamalar, bilgilendirme ve fotoğraflar bölümleri yer aldı.
- Site tamamen ücretsiz olarak oluşturuldu ve bu beceriyle para kazanılabilir.
- WordPress öğrenilmesi tavsiye ediliyor ve tasarım için Photoshop gibi programlar kullanılması öneriliyor.