Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan, WordPress ve Elementor kullanarak ücretsiz internet sitesi oluşturma sürecini adım adım gösteren kapsamlı bir eğitim içeriğidir.
- Video, web sitesi tasarımının tüm aşamalarını kapsamaktadır. İlk olarak gerekli pluginlerin (Hello tema, Elementor, Elementor Header ve Footer, Contact Form 7, HT Mega) kurulumu gösterilmekte, ardından header ve footer tasarımı, ana sayfa oluşturma, blok düzenleme, video ekleme, toggle menü oluşturma, telefon ekranı tasarımı ve iletişim formu oluşturma gibi konular detaylı olarak anlatılmaktadır. Son bölümde ise mobil uyumlu tasarım için gerekli ayarlar ve responsive tasarım teknikleri gösterilmektedir.
- Eğitim, tamamen ücretsiz Elementor versiyonu ve eklentiler kullanılarak profesyonel bir web sitesi oluşturma sürecini kapsamaktadır. Her adım boyunca logo yükleme, menü oluşturma, renk ayarları, hover efektleri, buton stillendirme, arka plan resimleri ekleme ve animasyon efektleri gibi teknik detaylar gösterilmektedir.
- 00:00Ücretsiz Elementor ile İnternet Sitesi Yapımı
- Elementor ve ücretsiz eklentiler kullanılarak bir internet sitesi yapılacak.
- Site, hover efektleri, video eklemesi, sık sorulan sorular bölümü, e-bülten ve iletişim kısmı içerecek.
- Tüm işlem tamamen ücretsiz olacak, herhangi bir ücretli premium eklenti veya ödeme gerektiren ürün satın alınmayacak.
- 01:15Gerekli Eklentilerin İndirilmesi
- İlk olarak "Hello" teması, ücretsiz Elementor, HD Mega Addons for Elementor, Contact Form 7 ve Elementor Header and Footer eklentileri indirilmeli.
- WordPress kurulumu tamamlandıktan sonra önce temayı, sonra eklentileri yüklemek gerekiyor.
- Tüm eklentiler indirildikten sonra "Actions" kısmından hepsi aynı anda aktifleştirilebilir.
- 04:46Menü Oluşturma
- Appearance kısmından menü oluşturularak "Main Menu" adı verilip header kısmında kullanılacak şekilde işaretlenir.
- Custom Links kısmından "Anasayfa", "Hakkımızda", "Ürünlerimiz", "Blok" ve "İletişim" bağlantıları eklenir.
- Menü oluşturulduktan sonra ön yüzde görülebilir hale gelir.
- 06:21Anasayfa Oluşturma
- Pages kısmından "Add New" ile yeni bir sayfa oluşturulur ve "Anasayfa" olarak adlandırılır.
- Sayfa şablonu olarak Elementor Full Template seçilmeli ve "Publish" edilmelidir.
- Reading ayarlarından ana sayfa olarak bu sayfanın seçildiği emin olunmalıdır.
- 08:09Sayfa Düzenleme ve Logo Yükleme
- Ana sayfada "Edit with Elementor" düğmesine tıklayarak düzenleme başlatılır.
- Site ayarlarına "Customize" düğmesi ile giriş yapılır ve site kimliği kısmından logo ve favicon yüklenebilir.
- Elementor sayfasında arka plan rengi ayarlanabilir ve düzenlemeler kaydedilebilir.
- 12:10Elementor ile Header Oluşturma
- Appearance ve Elementor Header and Footer Builder'a tıklayarak yeni bir header oluşturuyoruz.
- Header'a isim verip, type of template olarak header seçiyoruz ve tüm internet sitesinde gözükecek şekilde ayarlıyoruz.
- Elementor canvas kısmını işaretleyerek Elementor full with ayarlarını yaparak publish'e basıyoruz.
- 13:05Header İçeriği Ekleme
- Header kısmına logo, menü ve düğmeler eklemek için artı işaretine tıklayarak dörtlü seçeneği kullanıyoruz.
- Logo ve navigation menü elementlerini header içine sürükleyerek yerleştiriyoruz.
- Menüyü ortalayarak ve boyutunu küçülterek düzenliyoruz.
- 14:41Düğmeleri Ayarlama
- Header'a buton eklemek için artı işaretine tıklayıp basic bölümünden button seçeneğini kullanıyoruz.
- Butonları ortalayıp, stil kısmından renk ayarları yaparak iki adet buton oluşturuyoruz.
- Menüye geçici olarak arka renk ekleyerek menü yazılarının görünür olmasını sağlıyoruz.
- 15:56Menü ve Buton Stilleri
- Menü yazılarının rengini beyaz yaparak ve font ayarlarını değiştirerek menüyü düzenliyoruz.
- Hover rengini ayarlayarak butonlara fare üzerine geldiğinde değişen renk ekliyoruz.
- Sağdaki "Clicker" düğmesine transparan renk vererek ve hover animation kısmından shrink seçeneğiyle butonun küçülmesini sağlıyoruz.
- 17:37İkinci Butonu Oluşturma
- İlk düğmenin aynısını duplicate ederek sağ tarafa çekiyoruz.
- İkinci düğmenin rengini değiştirerek ve border kısmını ayarlayarak farklı bir görünüm veriyoruz.
- Butonlara "Hemen İndir" ve "Bayi Ol" yazılarını ekleyerek içerik kısmını düzenliyoruz.
- 18:40Header'ı Tamamlama
- Butonları sağa çekerek layout ayarlarını yapıyoruz ve sayfayı güncelliyoruz.
- Geçici olarak koyduğumuz header rengini transparan yaparak normal görünüme dönüyoruz.
- Ana sayfanın header kısmını tamamladıktan sonra siteye bakarak sonucu kontrol ediyoruz.
- 20:17Ana Sayfa İçeriği Ekleme
- MyBlock dashboard'a girerek sayfalara ve tüm sayfalara (all pages) geçiyoruz.
- Ana sayfayı duplicate ederek üç adet sayfa oluşturuyoruz.
- Sağ kısıma artı işaretine tıklayarak imaj ekleyip, resmi boyutlandırarak ve konumlandırarak düzenliyoruz.
- 22:04Yazı ve Çizgi Ekleme
- Sol tarafa yazı ekleyerek, rengini beyaz yaparak ve typography ayarlarını değiştirerek düzenliyoruz.
- Section kısmına basarak style kısmından shape devider seçeneğini kullanarak alt çizgi ekliyoruz.
- Çizgi için waves seçeneğini kullanarak yükseklik ve alçaklık ayarlarını yaparak sonucu tamamlıyoruz.
- 24:41Sitenin Çalışma Kısmı Oluşturma
- Sitede "Nasıl Çalışır" başlığı için blok ekleniyor ve yazı formatı ayarlanıyor.
- Yazı stili için arka plan rengi beyaz, yazı rengi siyah ve yazı boyutu 500 olarak ayarlanıyor.
- Yazı ortalama ve padding top değeri 62 olarak verilerek düzenleniyor.
- 26:35Paragraf ve Üçlü Blok Oluşturma
- "Nasıl Çalışır" kısmının altına paragraf ekleniyor ve ortalama formatı veriliyor.
- Yeni bir sayfa açılarak üçlü blok seçiliyor ve arka plan rengi gri tonajda ayarlanıyor.
- Blok içine resim, başlık, paragraf ve buton ekleniyor.
- 29:30Buton ve Görsel Ayarları
- Üçlü bloğun arka planı beyaz yapılıyor ve border değeri 5 verilerek kenarları kıvrılıyor.
- Butonun normal ve hover durumları için renk ve efekt ayarları yapılıyor.
- Butona hover efekti verilerek üzerine gelindiğinde küçülme ve gölge efekti ekleniyor.
- 34:13Nokta Ekleme ve Video Kısmı
- Navigatör üzerinden sectionlara erişilerek arka plana nokta görseli ekleniyor.
- Nokta görselinin pozisyonu center center ve attachment no repeat olarak ayarlanıyor.
- Video kısmını oluşturmak için üçlü blok seçiliyor ve gradient arka plan ayarlanıyor.
- 36:49Video Ekleme ve Düzenleme
- Video ekleme işlemi için "insert" seçeneği kullanılıyor ve video siteye yerleştiriliyor.
- Video ayarları yapılabiliyor: otomatik oynatma, mobil cihazlarda oynatma, devamlı tekrarlama ve oynatma kontrolü gibi özellikler ayarlanabiliyor.
- Video boyutu ayarlanabilir ve stil özellikleri (shape, devider, waves) eklenerek düzenlenebiliyor.
- 39:50Site İçeriği Düzenleme
- Video üzerinde başlık ekleniyor ve "Ürün Videosu" yazısı yerleştiriliyor.
- Resimler yüklenebiliyor ve opacity değeri ayarlanarak görünürlük seviyesi değiştirilebiliyor.
- Video altına padding verilerek alan oluşturuluyor ve arka plana resim eklenerek overlay efekti uygulanabiliyor.
- 44:15Toggle Menü Oluşturma
- Site alt kısmına toggle menü ekleniyor, bu menü için icon list seçeneği kullanılıyor.
- Toggle menüsünün arka planına resim ekleniyor ve pozisyon ayarları yapılıyor.
- Toggle menüsünde "Sık Sorulan Sorular" gibi başlıklar ve içerikler eklenerek dinamik bir liste oluşturuluyor.
- 47:53İletişim Formu ve Son Düzenlemeler
- Siteye telefon resmi ekleniyor ve üçlü bir resim düzeni oluşturuluyor.
- İletişim formu için yeni bir section ekleniyor, bu section üçlü şekilde ve orta kısma form yerleştiriliyor.
- Arka plana gradyan ve yuvarlaklı resim eklenerek görsel efektler uygulanıyor, sosyal medya ikonları eklenerek site tamamlanıyor.
- 53:00Site Güncellemesi ve Forum Ekleme
- Site güncellendiğinde aşağıya doğru inildiğinde forumlar eklenecek.
- Ön üst sol tarafa ve alt kısıma forumlar eklenecek.
- Harita, telefon bilgisi ve iletişim kutusu gibi öğeler siteye eklenecek.
- 53:30İletişim Formu Oluşturma
- Contact formu kontrol panelinden "Contact Form" seçeneğinden açılır ve varsayılan olarak kurulu gelir.
- Form üzerindeki label ve gereksiz kısımlar silinerek sadece ad, soyad, telefon ve gönder düğmesi kalır.
- Formun submit düğmesine "Gönder" yazısı verilir ve form kaydedilir.
- 55:16Abone Formu Oluşturma
- Mevcut contact formu kopyalanarak "Duplicate" ile ikinci bir form oluşturulur.
- İkinci form için "Abone" adı verilir ve gereksiz alanlar silinir.
- Sadece email alanı bırakılır ve form kaydedilir.
- 55:49Formun Stilini Düzenleme
- Ana sayfaya dönülerek Elementor editörü açılır ve formun stili düzenlenecek.
- HD Mega Addons bölümünden "Contact Form 7" formu seçilir ve siteye sürüklenir.
- Formun input kısmının arka plan rengi, düğmenin boyutu ve kenarlık özellikleri ayarlanır.
- 1:01:34İletişim Sayfası Oluşturma
- İletişim sayfası için iki bölümlü bir tasarım oluşturulur ve arka plan rengi ayarlanır.
- Sağ tarafta Google Maps eklentisi kullanılarak harita eklenir ve adres bilgisi girilir.
- Sol tarafta telefon, e-posta ve adres bilgileri için ikonlar ve metin alanları eklenir.
- 1:05:45İletişim Formu Düzenleme
- İletişim sayfası için yeni bir form oluşturulmak üzere dashboard'a dönülür.
- Mevcut contact formu kopyalanarak "İletişim Formu" adı verilir.
- Formda isim, soyisim, email, konu ve mesaj alanları eklenir ve kaydedilir.
- 1:07:42İletişim Formu Oluşturma
- Elementor'da "Contact" yazarak contact form 7 seçeneğine tıklanır.
- Stil 4 seçildikten sonra iletişim formu oluşturulur ve formun üzerine tıklayıp "kopyala" yapılır.
- Formun üzerine gelerek "paste style" seçeneği ile formun stili uygulanır.
- 1:08:43Formun Düzenlenmesi
- Formun text kısmına border radius eklenir ve input arka planı beyaz yapılır.
- Inputların renkleri ve placeholder yazıları düzenlenir, boyutları 300 olarak ayarlanır.
- Form öğeleri ortalanır ve arka plana resim yüklenir.
- 1:12:11Alt Kısım Oluşturma
- Elementor sayfasına "artı" tıklayarak iki öğe seçilir ve telefonla ilgili bir resim yüklendiği bir bölüm oluşturulur.
- Arka plana bir resim yüklenir ve "center center", "no repeat", "cover" ayarları yapılır.
- Shape divider olarak waves seçeneği kullanılır ve renk ayarları yapılır.
- 1:15:05Google Play ve App Store Resimleri
- Ortalama kısma Google Play ve App Store resimleri sürüklenir.
- Resimlerin yüksek çözünürlüklü olması internet hızını etkileyebilir, bu nedenle küçük boyutlar tercih edilmelidir.
- Resimlerin opacity değeri ayarlanarak siyah görünmeleri engellenir.
- 1:16:31Footer Kısmı Oluşturma
- Footer kısmına "Appearance" ve "Elementor Header and Footer Builder" üzerinden erişilir.
- Footer için yeni bir seçenek oluşturulur ve "Public" olarak kaydedilir.
- Footer kısmına şirket logosu ve otomatik olarak eklenen copyright metni yerleştirilir.
- 1:18:08Footer Stil Ayarları
- Footer kısmına gradient renk uygulanır, üst renk çok siyah olmamalı, alt renk ise daha siyah olmalıdır.
- Footer kısmının üst altı düğmesinden "Advanced" kısmına gidilerek padding değeri eksi 21'e kadar ayarlanır.
- Sayfa yenilendiğinde footer kısmının yerini doğru şekilde alması sağlanır.
- 1:19:28Animasyon Ekleme
- Ana sayfada "Advanced" kısmından "Motion Effects" seçeneği kullanılarak animasyonlar eklenebilir.
- Farklı öğelere "Fade in Left", "Fade in Right", "Fade in Up" gibi animasyon efektleri uygulanır.
- Animasyonların hızı "Slow" olarak ayarlanabilir ve gecikme değerleri eklenerek farklılıklar oluşturulabilir.
- 1:22:40Mobil Uyum Testi
- Oluşturulan site mobil uyumunu test edilecek.
- Site açıldığında her şey yavaş yavaş gelir ve hover etkileri bulunur.
- Videolar ve iletişim sayfası gibi özellikleri aşağıya doğru kaydırılarak görüntülenebilir.
- 1:22:44Mobil Uyumluluğu Ayarlama
- Sitenin mobil uyumluluğu ayarlanırken, normal masaüstü ve tablet görünümü otomatik olarak ayarlanır.
- Mobil uyumluluğu ayarlamak için header kısmında düzenleme yapılması gerekmektedir.
- Mobil görünümü ayarlamak için Appearance menüsünden Elementor, Header ve Footer'a gidilmesi gerekir.
- 1:24:02Header Kopyalama ve Ayarlama
- Header'ı kopyalamak için "Duplicate" seçeneği kullanılır ve böylece iki tane header olur.
- "Advanced" ayarlarından "Responsive" seçeneği ile sadece mobil ve tablette gösterilmesi sağlanır.
- Tablette ve mobilde site açıldığında farklı görünümler elde edilir.
- 1:26:00Mobil Görünümü Düzenleme
- Mobil görünümünde arka plan beyaz olup butonlar altında kalma sorunu yaşanabilir.
- Sorunu çözmek için header'ın mobil görünümü saklanır ve tekrar kopyalanır.
- Yeni kopyalanan header'ın "Responsive" ayarlarından sadece mobilde gösterilmesi sağlanır.
- 1:26:34Mobil Menü Tasarımı
- Mobil menü için arka plan rengi verilir ve angle (kenarlık) eklenir.
- Menü düğmelerinin konumu ayarlanır ve yüzdelik değerlerle pozisyonlandırılır.
- Bu ayarlar sayesinde mobil menü düzgün görünüm elde edilir.
- 1:27:54Sonuç
- WordPress ve Elementor kullanarak ücretsiz bir site oluşturulabilir.
- Tabloda ve mobilde site farklı görünümlerle görüntülenebilir.
- Video, izleyicilere site oluşturma sürecini adım adım göstermektedir.