Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan WordPress ve Elementor kullanarak web sitesi kurma eğitimidir. Eğitmen, kendi satın aldığı domain adresi üzerinde adım adım gösterim yapmaktadır.
- Video, WordPress panelinde temaların ekleme, Elementor eklentilerinin kurulumu ve etkinleştirilmesi ile başlayıp, web sitesinin tüm bölümlerinin (header, footer, menü, sayfa, portfolyo, müşteri yorumları, harita, sosyal medya ikonları) nasıl oluşturulacağını detaylı olarak anlatmaktadır. Eğitim, web sitesi tasarımının temel adımlarını kapsamlı şekilde ele almaktadır.
- Eğitim içeriğinde gradient efektleri, hover efektleri, butonlar, görseller, ilerleme çubukları, yapışkan menü oluşturma, renk ayarları ve görsel düzenlemeler gibi web tasarım elemanlarının nasıl kullanılacağı gösterilmektedir. Video, tamamlanan web sitesinin gösterimiyle sona ermektedir.
- 00:01WordPress Sitesi Kurulumu
- WordPress'ten bir web sitesi kurulumu yapılacak.
- Ders için satın alınan domain adresine WordPress kurulmuş ve varsayılan şablonda çalışmaya başlanacak.
- İlk olarak görünüm > temalar menüsünden "Hello Elementor" teması kurulacak.
- 01:04Eklentilerin Kurulumu
- WordPress panelinden eklentiler kısmından "Elementor Website Builder", "Elementor Header and Footer", "Sticky Header Effects" ve "Sina Elementor" eklentileri indirilecek.
- Toplu olarak seçilen eklentiler etkinleştirilecek.
- 02:17Menü Oluşturma
- Görünüm > menüler menüsünden "Main Menu" adında bir menü oluşturulacak.
- Özel bağlantılar kısmından ana sayfa ve hakkımda menüleri oluşturulacak.
- Oluşturulan menü ana sayfada görünecek şekilde kaydedilecek.
- 03:34Sayfa Oluşturma
- Panel üzerinden yeni bir sayfa oluşturulacak.
- Ana sayfa yayında olacak şekilde ayarlanacak.
- Kullanılmayan diğer sayfalar silinecek.
- 04:17Header ve Footer Oluşturma
- Elementor Header and Footer eklentisi kullanılarak header ve footer oluşturulacak.
- Header ve footer tüm web sitesinde görüntülenecek şekilde ayarlanacak.
- Header ve footer tam genişlik olarak yayınlanacak.
- 05:21Header Düzenleme
- Header düzenlemesi için üçlü bir konteyner eklenip koyu bir renk verilecek.
- Header'a başlık, menü ve buton eklenecek.
- Butona gradient efekti uygulanacak ve yazı tipi Poppins olarak ayarlanacak.
- 09:15Site Ayarları
- Site ayarlarından global renkler kısmına header ve footer için renkler eklenecek.
- Site arka plan rengi karanlık tonlarda ayarlanacak.
- Tipografide varsayılan yazı tipi Poppins olarak değiştirilecek.
- 11:05Ana Sayfa İçeriği
- Ana sayfaya ikili bir alan eklenecek.
- Alanın arka rengi header ve footer ile aynı renk olarak ayarlanacak.
- İçerik olarak görsel, başlık, metin düzenleyici ve buton eklenecek.
- 11:50Başlık ve Mail Gönderme Butonu Oluşturma
- Başlık kısmında "Erkmen" yazısına gradient efekti verilerek renk efekti oluşturuldu.
- Mail gönderme butonu eklendi ve "Mail Gönderin" yazısı ortalandı, buton rengi ve siyah metin rengi ayarlandı.
- Mail gönderme butonuna "mailto:" eklenerek mail adresine yönlendirme yapıldı.
- 13:33Hakkımızda Bölümü Oluşturma
- Hakkımızda bölüm için yeni bir konteyner oluşturuldu ve 500 piksel yükseklik verildi.
- Header ile ana sayfa arasında ayrım sağlamak için kutu gölgesi eklendi ve saydamlaştırıldı.
- Hakkımızda bölümünde "Erkmen Hakkında" yazısı eklendi ve gradient efekti verildi.
- 16:18Hakkımızda İçeriği Düzenleme
- Hakkımızda bölümünde metin düzenleyici eklendi ve hakkında yazı yazıldı.
- CV butonu eklendi, buton rengi ve siyah metin rengi ayarlandı.
- Fotoğrafın boyutu küçültüldü ve orta üst konumlandırıldı.
- 18:22Yeterlilikler Bölümü Oluşturma
- Yeterlilikler bölümünde "Yeterliliklerim", "İlgi Alanlarım", "Becerilerim" ve "Yazılım Dilleri" başlıkları eklendi.
- Başlıklara gradient efekti verildi ve üstüne 70 piksel boşluk bırakıldı.
- Dörtlü kutu eklendi ve HTML başlığı, simge ve ilerleme çubuğu eklenerek düzenlendi.
- 23:54Portfolyo Bölümü Oluşturma
- Portfolyo bölümü için yetenekler bölümünü çoğaltıp aşağı sürükledi.
- Portfolyo, referanslar ve web tasarım başlıkları eklendi.
- Sina'nın portfolyo widget'i eklendi ve renk ayarları yapıldı.
- 26:16Karosel ve Müşteri Yorumları Bölümü
- Karosel ekranı oluşturuldu ve müşteri yorumları bölümü eklendi.
- Müşteri yorumlarında fotoğraflar, isimler, çalışma yerleri ve yaptıkları işler değiştirilebilir.
- Yorumların renkleri özelleştirildi: isimler beyaz, pozisyonlar ve şirketler için özel renkler kullanıldı.
- 27:19İletişim Ekranı Oluşturma
- İletişim ekranı oluşturuldu ve içine harita (map) eklendi.
- Recontact formu eklenerek kullanıcıların mesaj göndermesi sağlandı.
- Simge listesi eklendi ve telefon, mail ve konum simgeleri yerleştirildi.
- 29:56Buton Özelleştirme
- İletişim formunun buton rengi yeşil olarak değiştirildi.
- Butonun tipografisi Poppins olarak ayarlandı ve kalınlaştırıldı.
- Butona CSS filtresi ve kenar yuvarlaklılığı eklendi.
- 32:24İletişim Formunu Kişiselleştirme
- Buton üzerindeki yazı "Gönder" olarak değiştirildi.
- Form alanlarının başlıkları "Adınız", "Mail Adresi", "Konu" ve "Mesaj" olarak ayarlandı.
- Formun arka plan rengi header rengiyle eşleştirildi.
- 33:51Footer Bölümü Oluşturma
- Footer ekranı oluşturuldu ve header linki kopyalanıp yapıştırılarak hızlıca düzenlendi.
- Footer'a "Copyright" yazısı ve "Erkmen" geliştirme bilgisi eklendi.
- Sosyal medya ikonları (LinkedIn, GitHub, YouTube) footer'a yerleştirildi.
- 36:01Footer Özelleştirme
- Sosyal medya ikonlarının renkleri özelleştirildi: arka plan rengi buton rengi, iç renk header rengi olarak ayarlandı.
- İkon vurgusu efekti eklendi ve hover efekti için renk ayarları yapıldı.
- Footer'a boşluk eklenerek düzenlendi ve ek sosyal medya ikonları (Instagram, WordPress) eklendi.
- 40:57Sticky Header Ayarları
- Header ayarlarında gelişmiş seçeneklere gidilerek sticky header efekti aktif hale getiriliyor.
- Sticky header efekti mobil ve tablet cihazlarda da aktif edilebilir, ayrıca 45 piksel olarak ayarlanıyor.
- Yapışkan header efekti, sayfa aşağı kaydırıldığında aktif olarak çalışır.
- 41:44CSS ID'lerin Verilmesi
- Menü elemanlarına CSS ID'leri veriliyor: anasayfa, hakkında, ilgi alanları, portfolyo ve iletişim.
- Menü linklerine tıklandığında sayfa aşağı kayıyor, bu yükseklikle ilgili olabilir ve ayarlanabilir.
- Web sitesi oluşturulduktan sonra hata gidermeleri yapılıyor.
- 43:22Görsel ve İçerik Düzenlemeleri
- Fotoğraf konteynerin alt tarafına denk gelmediği durumda, gelişmiş ayarlardan alt hizalamaya eksi 20 piksel değer verilerek düzeltiliyor.
- İçerik kutusunda görüntülenen öğelerin sayısı değiştirilebiliyor, örneğin dörtlü veya beşli olarak gösterilebiliyor.
- İçerik başlıkları değiştirilebiliyor, örneğin "grafik tasarım" başlığı "wordpress" olarak değiştirilebiliyor.
- 45:06Footer Düzenlemeleri ve Kapanış
- Footer'daki butonların arasındaki mesafe ayarlanabiliyor, örneğin 15 piksel olarak ayarlanıyor.
- Web sitesi tamamlanıyor ve izleyicilere teşekkür ediliyor.
- Diğer videoların izlenmesi öneriliyor.