Buradasın
WordPress ve Elementor ile Basit Web Sitesi Oluşturma Eğitimi
youtube.com/watch?v=P6Xazih1aQoYapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan, WordPress ve Elementor kullanarak basit bir web sitesi oluşturma sürecini adım adım gösteren bir eğitim içeriğidir.
- Video, web sitesi tasarımı için gerekli tüm aşamaları kapsamaktadır. İlk olarak GIMP programı ile tasarım hazırlama, WordPress kurulumu ve Elementor eklentilerinin kurulumu gösterilmektedir. Ardından ana sayfa oluşturma, slider, info kutuları, video bölümü, butonlar, footer tasarımı ve mobil uyum ayarları detaylı olarak anlatılmaktadır.
- Eğitim, web sitesi tasarımı için önce tasarım yapmanın önemini vurgulayarak başlamakta ve tüm cihazların uyumlu çalışabilmesi için tablet ve mobil ayarlarının nasıl yapılacağını göstermektedir. Ayrıca slider oluşturma, düğme ayarları, hover efektleri, dörtlü kutu oluşturma, flip box ekleme ve video widgetı ekleme gibi web sitesi tasarımının temel bileşenlerinin nasıl ekleneceği ve düzenleneceği uygulamalı olarak gösterilmektedir.
- Yeni Template Oluşturma
- Video, sade bir template oluşturma sürecini anlatıyor.
- Template, header, slider, body ve footer kısımlarından oluşacak.
- Template'in en büyük özelliği mobil uyumlu olması ve sade tasarımı.
- 00:51Site Tasarımı
- Önce siteyi tasarlamanız gerekiyor, sonra WordPress'te uygulamaya başlamanız önerilir.
- Tasarım GIMP programı üzerinden yapılmış, bu ücretsiz bir programdır.
- GIMP, Photoshop'a benzer özelliklere sahip ancak başta zorlayıcı olabilir.
- 01:49WordPress Kurulumu
- WordPress kurulduktan sonra "Hello" teması yükleniyor.
- Elementor, Elementor Header and Footer Builder ve Sina Extension eklentileri yükleniyor.
- Bu eklentiler tamamen ücretsizdir.
- 04:56Menü Oluşturma
- Görünüm menüsünden menüler bölümüne gidilerek "Main Menü" adında bir menü oluşturuluyor.
- Menüye "Anasayfa", "Hakkımızda", "Hizmetlerimiz", "Blog" ve "İletişim" bağlantıları ekleniyor.
- Menü oluşturulduktan sonra site ön yüzünde görülebilir hale geliyor.
- 06:27Header Tasarımı
- Site özelleştirme menüsünden logo seçiliyor.
- Elementor Header and Footer Builder ile header ekleniyor.
- Header'da üçlü blok kullanılarak logo, menü ve sosyal medya simgeleri yerleştiriliyor.
- 09:46Menü ve Sosyal Medya Ayarları
- Sosyal medya simgeleri daire şeklinde ve renkleri ayarlanıyor.
- Menüdeki metin renkleri normal ve hover durumlarında ayarlanıyor.
- Mobil ve tablet görünümleri için menü ayarları düzenleniyor.
- 12:39Anasayfa Oluşturma
- Yeni bir sayfa oluşturulup "Anasayfa" adı veriliyor.
- Sayfa varsayılan şablon olarak Elementor tam genişlik seçiliyor.
- WordPress ayarlarından ana sayfa tanımlanıyor.
- 14:07Ana Sayfaya Slider Ekleme
- Ana sayfaya slider eklemek için "artı" işaretine tıklayıp bir section seçip "slider" yazıyoruz.
- Sol taraftan "Sina Banner Slider" vücutu seçip içeriye sürüklüyoruz ve içerik genişliğini tam genişlik yapıyoruz.
- Slider'ın ayarlarından yüksekliği 403 piksel, padding değerlerini 54 piksel olarak ayarlayarak istenen boyuta getiriyoruz.
- 16:03Slider Düğmelerini Düzenleme
- Primary button'ın rengini koyu bir renge, padding değerlerini 14, 24 ve 10 piksel olarak ayarlayarak düğmeyi biçimlendiriyoruz.
- Secondary button'ın rengini açık bir renge, padding değerlerini 14 piksel olarak ayarlayarak ikinci düğmeyi düzenliyoruz.
- Hover etkisi için text color, arka plan türü ve border color gibi ayarlar yapılabiliyor.
- 18:33Slider Ayarlarını Tamamlama
- Slider settings kısmından mouse, drag ve diğer ayarlar yapılabiliyor.
- Navigation ve dots kısmından arrow color'ı beyaz, hover rengini ayarlayarak ve dots color'ını siyahımsı bir renge getirerek tamamlıyoruz.
- 20:10Dörtlü Kutuları Oluşturma
- Ana sayfaya artı işaretine tıklayıp dört kutu oluşturuyoruz.
- Her kutuya "Sina Flip Box" ekleyerek arka ve ön tarafların renklerini ayarlıyoruz.
- Kutuların önüne ikon ekleyip, içine düğme yerleştirerek ve düğmenin rengini, boyutunu ve kenar yuvarlaklığını düzenliyoruz.
- 24:36Alt Kısım Oluşturma
- Alt kısım için iki kutu seçip arka plan rengini belirliyoruz.
- Bir kutuya GIMP programıyla hazırlanan bir imaj ekliyoruz.
- Diğer kutuya yazı ve video widget'ı ekleyerek, videoyu kendimiz yükleyip otomatik oynatma ve kontrol düğmelerini ayarlıyoruz.
- 27:21Elementor ile Sayfa Düzenleme
- Elementor kullanarak sayfada piksel kayması düzeltiliyor ve yükseklik ayarlanıyor.
- İki blok seçiliyor ve üst kısmına heading ekleniyor.
- Sol tarafta bir imaj atılarak Elementor logosu yükleniyor ve üzerine hover etkisi (resmin üzerine geldiğinde küçülme) veriliyor.
- 28:48Sayfa İçeriği Oluşturma
- Sağ tarafta WordPress logosu yükleniyor.
- Alt kısıma paragraf ve düğme ekleniyor.
- İçerikler çoğaltılarak sağ tarafa taşınıyor ve düğmeler ayarlanıyor.
- 29:55Mobil Uyum Ayarları
- Mobil uyum için tablet ve mobil görünüm ayarları yapılıyor.
- Tablet görünümünde her bloğa %50 genişlik verilerek alt alta sıralanıyor.
- Mobil görünümünde de benzer ayarlar yapılıyor ve sayfa tamamlanıyor.
- 30:54Footer Oluşturma
- Elementor panosundan ana sayfaya dönülüyor ve dashboard'a gidiliyor.
- Header ve footer bölümüne girilerek footer ekleniyor.
- Footer için basit bir tasarım oluşturuluyor: logo, menü ve copyright kısmı.
- 32:54Footer İçeriği Düzenleme
- Footer logosu ayarlanıyor ve arka plan rengi belirleniyor.
- Menü için simge ve metin ekleniyor, hover etkisi veriliyor ve bağlantılar atanıyor.
- Menü öğeleri çoğaltılarak "Anasayfa", "Blok", "İletişim", "Ürünler", "Hizmetler" ve "Resimler" başlıkları ekleniyor.
- 36:11Footer Düzenleme ve Tamamlama
- Footer yüksekliği ayarlanıyor ve konumu belirleniyor.
- Footer görünümü iyileştirilerek üstten dolgu (padding) ekleniyor.
- Alt kısıma copyright ekleniyor ve mobil uyum ayarları yapılıyor.
- 39:26Proje Tamamlama
- Siteye dönülüyor ve tamamlanan internet sitesi görüntüleniyor.
- Kullanıcıların farklı renkler ve içeriklerle kendi sitelerini oluşturabilecekleri belirtiliyor.
- GIMP programının linkinin videonun açıklamasında paylaşılacağı söyleniyor.