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ını anlatan bir eğitim içeriğidir.
- Eğitim, ana sayfa butonlarının ortalanması ve marjin ayarlarıyla başlayıp, tablet ve mobil görünümlerde responsive tasarımın nasıl yapılacağını adım adım göstermektedir. Videoda ana sayfa, ebat sayfası, works sayfası, blog sayfası ve kontakt sayfası gibi farklı sayfaların responsive görünümü kontrol edilmekte ve gerekli düzenlemeler yapılmaktadır.
- Eğitim serisinin sonunda, home, ebat, work ve blog sayfalarının başarılı bir şekilde tasarlandığı gösterilmektedir. Blog sayfası için sadece WordPress'in kendi turu kullanılmış, Elementor kullanılmamıştır. Ayrıca, mobil görünümde yazıların düzeltilmesi, padding ve margin değerlerinin ayarlanması gibi konular da ele alınmaktadır.
- Ana Sayfa Responsive Düzenlemeleri
- Butonların üzerine geldiğimizde sağ ve sol tarafta oluşan boşlukları ortadan kaldırmak için sütunlara 80 piksellik marjin verildi.
- Butonlar center olarak işaretlenerek ortalanarak, sütunlar genişletildi.
- Section'lar arasındaki boşluk 80 pikselden 40 piksele düşürüldü ve sütunlara 20 piksellik padding verildi.
- 04:46Tablet ve Mobil Görünüm Kontrolü
- Tablet görünümünde header boyutu küçültülmeye gerek olmadığı için mevcut durumda bırakıldı.
- Tablet dik durduğunda alt tarafta oluşan boşluk için sütunlara 50 piksellik marjin verildi veya layout ayarlarından "fit to screen" yerine "default" seçildi.
- Görsellerin content position'ı defaulttan middle haline getirildi.
- 08:49Ebat Sayfası Düzenlemeleri
- Ebat sayfasında tablet boyutunda herhangi bir problem olmadığı için değişiklik yapılmadı.
- Mobil görünümde yazı boyutu 32 piksele düşürüldü ve sütunlara padding sıfırlandı.
- Görsellerin ve team bölümünün görünümü kontrol edildi.
- 11:21Works Sayfası Düzenlemeleri
- Works sayfasında portfolyo bölümü kendini iyi responsive bir şekilde ayarladı.
- Mobil görünümde text boyutu 32 piksele düşürüldü ve sütunlara padding sıfırlandı.
- Portfolyo alanının görünümü kontrol edildi.
- 13:39Blog ve Contact Sayfası Düzenlemeleri
- Blog sayfası WordPress'in kendi elemanlarıyla yapıldığı için yeterli responsive özelliklere sahip.
- Contact sayfasında tablet görünümünde herhangi bir değişiklik yapılmadı.
- Mobil görünümde paddingler azaltılabilir, Ninja Form 3 formu %50 oranında ve sağdan-soldan %125 marjinle eklendi.
- 16:10Mobil Görünüm Düzenlemeleri
- Mobil görünümde yazıları düzeltmek için advanced padding sıfır olarak ayarlanıyor.
- Mobil görünümde sütunlar yüzde olarak ayarlanarak sağ ve sol marjinleri 10 olarak değiştiriliyor.
- Yazılar için padding ve margin değerleri ayarlanarak düzenlemeler yapılıyor.
- 20:28Sayfa Düzenlemeleri ve Sonuç
- Sayfanın bitmiş halini kontrol ederek ortalanma ve formun mobil görünümde başarılı görünmesi sağlanıyor.
- Proje başarıyla tamamlanmış olup home, ebat, work ve blog sayfaları mevcut.
- Blog sayfası için sadece WordPress'in kendi turu kullanılmış, Elementor kullanılmamış.