Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan WordPress ve Elementor kullanarak web sitesi oluşturma ve tasarım sürecini adım adım gösteren bir eğitim içeriğidir.
- Video, Figma'da hazırlanan bir tasarım üzerinden başlayıp, WordPress'e Elementor kurulumu, tema seçimi ve sayfa düzenleme aşamalarını kapsamaktadır. Eğitmen, header tasarımı, menü oluşturma, butonlar, hover efektleri, responsive ayarlar ve "Hakkımızda" sayfası oluşturma gibi temel web tasarım adımlarını detaylı olarak göstermektedir. Video, bir serinin ilk bölümü olup, ikinci videoda yetenekler, hizmetler, portfolyo, iletişim ve footer alanlarının yapılacağı belirtilmektedir.
- Eğitim boyunca, tasarım öğelerinin renk, yazı tipi, boyut ve gölge ayarları, görsel ekleme, metin düzenleme ve Siner Counter eklentisi gibi özellikleri de gösterilmektedir. Video, izleyicilerin kendi tasarımlarını web sitesine dönüştürebilmesine yardımcı olmayı amaçlamaktadır.
- 00:00WordPress ve Elementor ile Web Sitesi Oluşturma
- Video, WordPress ve Elementor kullanarak web sitesi oluşturma sürecini göstermektedir.
- Eğitmen, Figma'da çizdiği tasarımını WordPress ve Elementor ile web sitesine dönüştürecektir.
- Tasarım altı bölümden oluşmakta ve uzun bir video olabileceği için ikiye bölünebilir.
- 01:16Gerekli Eklentilerin Kurulumu
- İlk olarak Elementor eklentisi kurulmaktadır.
- Elementor Header & Footer, Sina Extension for Elementor ve Ona Sticky Header Effects eklentileri de yüklenmektedir.
- Elementor Add-ons, üçüncü parti uygulamalar olup, Elementor'un kendi özellikleri dışında ek özellikler sunmaktadır.
- 03:37Tema ve Menü Oluşturma
- "Hello" teması yüklenip etkinleştirilmektedir.
- Görünüm menüsünden menüler bölümüne gidilerek "Main Menü" adında bir menü oluşturulmaktadır.
- Menüye "Anasayfa", "Hakkında" ve "Yeteneklerim" bağlantıları eklenmektedir.
- 05:32Sayfa Oluşturma ve Ayarlar
- "Anasayfa" adında yeni bir sayfa oluşturulmaktadır.
- Elementor ile düzenleme başlatılır ve sayfa düzeni "Builder X Canvas" olarak ayarlanmaktadır.
- Site ayarlarından global renkler ve genel yazı tipi (Poppins) seçilerek ayarlanmaktadır.
- 07:57Header Bölümünün Oluşturma
- Header tasarımı, bir container içinde ortalanmış olup, logo ve menü olmak üzere iki kolu bulunmaktadır.
- İki kolu olan bir bölüm eklendiği ve arka plan rengi belirlendiği gibi minimum yükseklik 70 piksel olarak ayarlandı.
- Logo olarak "Portföy" yazısı iki renkli olarak oluşturuldu, yazı tipi boyutu 40 piksel ve kalınlığı 600 olarak ayarlandı.
- 11:38Menü Ekleme
- Header Footer eklentisi kullanılarak navigation menüsü eklendi.
- Menü öğeleri buton olarak ayarlandı.
- Menü yazı tipi boyutu 20 piksel, kalınlığı 400 olarak ayarlandı ve renk seçildi.
- 13:05Header Bölümü Düzenleme
- Header kısmında linklerin üzerine geldiğinde rengi mavi olarak değiştirildi ve link cover effect'i eklenerek alt çizgi eklendi.
- Butonun yazı tipi ve boyutu ayarlandı, border radius değeri 4 olarak verilerek köşeleri yuvarlatıldı.
- Butonun yazı rengi ve gölgesi değiştirildi, hover efekti eklenerek üzerine geldiğinde arka plan rengi değişti.
- 16:24Responsive Tasarım
- Header tasarımı masaüstü için bittiğinde tablet ve mobil için responsive ayarları yapıldı.
- Tablet için sütun genişlikleri yüzde elli olarak ayarlandı, buton rengi değiştirildi ve yazı boyutu ayarlandı.
- Mobil için de sütunlar yan yana getirildi, yazılar küçültüldü ve buton boyutu ayarlandı.
- 21:16Sosyal Medya Ekranı Tasarımı
- Sosyal medya ekranı için boş bir sütun eklendi, yüksekliği ekrana sığdırıldı ve arka plan rengi belirlendi.
- Header kısmına alt çizgi eklendi.
- Prefix text eklentisi kullanılarak "Tasarımcı", "Youtuber" ve "Yazılımcı" yazısı eklendi, yazı tipi ve boyutu ayarlandı.
- 25:52Sosyal Medya İkonları
- Sosyal medya ikonları eklenerek Instagram, LinkedIn ve YouTube simgeleri yerleştirildi.
- İkonların renkleri değiştirildi, yerleşimi sütunlar olarak ayarlandı ve sola yaslandı.
- İkonların boyutu 18 olarak ayarlandı ve renk düzenlemesi yapıldı.
- 27:49Elementor'da Power Animasyon ve İç Bölümler
- Power animasyon eklentisi kullanılarak "grow" animasyonu seçiliyor ve büyütme efekti uygulanıyor.
- İç bölüm eklenerek yazı altına yeni bir bölüm oluşturuluyor.
- Sosyal medya ikonları yukarı taşınıp pozisyonlandırılıyor.
- 29:06Arka Plan ve Görsel Ekleme
- Mavi bölümün arka planına görsel ekleniyor ve konumu orta orta, tekrarlaması devre dışı bırakılıp kapak doldurma modu seçiliyor.
- İç bölümün içine görsel ekleniyor ve pozisyonlandırılıyor.
- Sosyal medya butonları dikey yönde aşağı indiriliyor.
- 32:04Metin ve Buton Ayarları
- Metin düzenleyicisi eklenerek yazı kopyalanıp yapıştırılıyor, metin rengi ve tipografisi (Poppins) ayarlanıyor.
- İletişim butonu ekleniyor, metin rengi, arka plan rengi ve border radius (7) ayarlanıyor.
- İkinci buton (CV) ekleniyor, simge ekleniyor ve kenarlık özellikleri ayarlanıyor.
- 36:06Butonların Düzenlenmesi
- Butonların genişlikleri auto olarak ayarlanıp birbirine bağlanıyor ve 15 piksel boşluk bırakılıyor.
- Butonlara kutu gölgesi ekleniyor ve hover efekti (metin rengi ve arka plan rengi değişimi) uygulanıyor.
- Yazılar orta hizalanıyor ve sayfa önizleme yapılıyor.
- 39:04Responsive Tasarım Ayarları
- Tablet görünümünde sosyal medya butonları tablet ve mobilde gizleniyor.
- Tablet görünümünde yazı boyutları 40 pikselden 35'e, buton yazı boyutları 20 pikselden 16'ya düşürülebiliyor.
- Mobil görünümünde yazı boyutları 20 piksel olarak ayarlanıyor ve tasarım tamamlanıyor.
- 43:15Hakkımızda Sayfası Tasarımı
- Yeni bir boş sekme ekleyerek hakkımızda sayfasını oluşturuyoruz.
- Sayfaya "Hakkımızda" başlığı ekleniyor ve SEO açısından bir web sitesinde sadece bir tane H1 etiketi kullanılabilir.
- Başlığın yazı rengi ve font boyutu ayarlanıyor, genişlik 600 piksel olarak belirleniyor.
- 45:22İçerik Bölümü Ekleme
- Hakkımızda başlığına altına bölücü ekleniyor ve "Ben kimim?" yazısı ekleniyor.
- Metin rengi mavi olarak ayarlanıyor, yazı tipi Poppins 11 piksel olarak belirleniyor.
- Metin kısmına dolgunluk ve kenarlık değerleri verilerek düzenleniyor.
- 47:08İç Bölüm ve Görsel Ekleme
- İç bölüm eklenerek sayfa iki eşit bölüme bölünüyor, bir taraf resim, diğer taraf yazılar olacak şekilde düzenleniyor.
- Hakkımızda görseli ekleniyor ve kenar yuvarlağı verilerek yuvarlak kenarlar oluşturuluyor.
- Metin düzenleyici eklenerek yazılar eklendiği ve metin rengi ayarlandı.
- 48:42Buton ve Sayıcı Ekleme
- Önceki sayfada oluşturulan buton çoğaltılarak hakkımızda sayfasına ekleniyor.
- Siner Counter eklentisi kullanılarak sayıcılar ekleniyor ve yazılar düzenleniyor.
- Sayıların rengi beyaz, yazı boyutu 30 piksel olarak ayarlanıyor.
- 51:20Sayıcıların Düzenlenmesi
- Sayıcılar arasında boşluk ayarlanıyor ve arka plan rengi belirleniyor.
- Sayıcılar çoğaltılarak "200+ proje", "157+ müşteri" ve "3+ tecrübe" içerikleri ekleniyor.
- Sayıcıların kenar yuvarlağı ve kutu gölgesi eklenerek tasarım tamamlanıyor.
- 57:57Web Sayfası Düzenleme İşlemleri
- Sayfanın güncellemesi yapılıyor ve gölgelerle oynamak için bir seçenek sunuluyor.
- Sütunların dikey hizalaması orta yapılarak iki sütun ortalanıyor.
- Sayfanın ön izlemesi yapıldıktan sonra hoş durduğu belirtiliyor.
- 58:42Responsive Tasarım Yapımı
- Tablete uyumlu tasarım için sütun genişliği yüzde yüz yapılarak içerik hizalaması ortalama.
- Butonun sütun genişliği yüzde yüz yapılarak ve yatay hizalaması orta yapılıyor.
- Yazılar metin düzenleyicisinden ortalama ve telefon ekranı için dolgunluk değerleri ayarlanıyor.
- 59:55Telefon Ekranı Uyumluluğu
- Telefon ekranında içeriklerin sığması için dolgunluk değerleri 7 olarak ayarlanıyor.
- Yazı boyutları küçültülerek pound yazı tipi 11, sayılar 20 olarak ayarlanıyor.
- Yatay hizalamalar varsayılan yapılıp dolgunluk değerleri 7 verilerek telefon ekranı uyumluluğu sağlanıyor.
- 1:01:47Video Kapanışı
- Video burada sonlandırılıyor ve ikinci videoda yetenekler, hizmetler, portfolyo, iletişim ve footer alanlarının yapılacağı belirtiliyor.
- Sayfanın ön izlemesi yapılarak hoş ve tatlı bir tema olduğu gösteriliyor.