HTML5 Web Sitesi Nasıl Yapılır? Adım adım web sitesi kurma rehberi

HTML5 ile bir web sitesi oluşturmayı mı planlıyorsunuz? Bu durumda, en iyi kararlarından biri hazır bir HTML şablonu kullanmaktır:

  • Sürükle ve bırak yapısı sayesinde, herhangi bir kodlama bilgisine sahip olmak gerekmez. Yönetici panelinden web sitesi görünümünü değiştirilebilir, öğe eklenebilir, düzenlenebilir veya kaldırılabilir, widgetleri eklenebilir ve daha fazlasını yapılabilir. Şablonların çoğu arama motorları için optimize edilmiştir.
  • Bu, gelecekteki web sitesinin motoru gereksinimleri karşıladığı ve arama motorunda üst sırada çıkacağını anlamına gelir.
  • Bu hazır çözümler duyarlıdır. Böylece, bir web sitesi herhangi bir tarayıcıda / cihazda sorunsuz bir şekilde görüntülenecek.
  • Farklı amaçlar ve gereksinimler için çeşitli şablonları bulabilirsiniz. Örneğin, web sitemizde 900'den fazla işletme web sitesi şablonu bulunmaktadır.

Ayrıca, sonuçtan daha memnun kalma şansınız artar, çünkü durum size aittir. Sonunda, bir şablon ile bir web sitesi oluşturmak:

  • kolay
  • hızlı
  • stressiz
  • güvenilir

Bir şablon kullanarak HTML5 web sitesi oluşturmaya karar verdiyseniz bu adım adım kılavuz çok kullanışlı olacaktır.

Örnek olarak, bu çok amaçlı HTML şablonu aldım. Bu sayfalı bir çözüm, farklı işletme alanları için 11 düzeni içerir. Ayrıca, şunları da içerir:

  • 100'den fazla hazır HTML5 sayfası

  • Novi Builder ve Görsel Sayfa Düzenleyicisi

  • Harika Blog ve Galeri Şablonları

  • Çoklu e-ticaret düzenleri

  • 100'den fazla önceden yapılmış elemanlar ve bloklar

  • Paralaks Etkisi

  • Flexbox İzgara Sistemi

  • Çok çeşitli eklentiler ve widgtler

Brave, bir iş web sitesi oluşturmak için en güçlü çözümlerden biridir. Ancak, dikkatinizi hak eden başka en çok satan ürünler de var.

Ek olarak, sezgisel tasarım sahip, kullanımı kolay web sitesi oluşturucusunu arıyorsanız, Novi Builder'ı denemelisiniz. Hem yeni başlayanlar hem de deneyimli kullanıcılar için iyidir.

  • birkaç tıklamayla sayfa oluşturun veya çoğaltın

  • gelecekte benzer içerik blokları oluştururken zamandan tasarruf etmek için ön ayarlarınızı yapın

  • yüzlerce Zemez şablınundan birini kullanın

  • hızlı yedek oluşturun ve web sitenize bilgi ve tasarım kaydedin

  • HTML, CSS ve JS ile çalışan düzenleyicinin yardımıyla kaynak kodunu düzenleyin

  • web sitenizin çeşitli ekran çözünürlüklerinde nasıl göründüğüne bakın

  • çok sayıda Novi eklentisinden ve görsel düzenleme araçlarından birini kullanın

Novi Builder nasıl yüklenir

Novi Builder'ın kurulumu üç basit adımdan oluşur. Ana bilgisayara bir HTML teması yükleme işleme benzer.

01 Web sitenizin kök klasöründe “oluşturucu” adlı yeni bir dizin oluşturun.

02 Builder dosyalarını yeni oluşturduğunuz dizine yükleyin (builder dosyaları temanın indirme paketinde, oluşturucu klasöründe bulunur).

03https://yourwebsite.com/builder/bağlantıyı takip edin. Şimdi, builder sunucunuzda kullanabilirsiniz.

Brave Teması Nasıl Kurulur ve Düzenlenir

Bu temayı Novi Builder ile kişiselleştirmek, Elementor Builder'ın yardımı ile yapmak çok kolay. Sezgisel tasarımı, yeni başlayanların web sitelerini oluşturmasını kolaylaştırır.

Bu arada, oluşturucuyu web sitesine yüklmeden, herhangi bir Brave temasının içerik öğesini düzenleyebilirsiniz.

Brave temasını yüklemek için indirme paketini açın. Burada “oluşturucu” adlı dizini bulacaksınız.Bu dizin, temanın içerdiği tüm ciltleri içerir.

Temayı özelleştirmeden önce, hem temayı hem de oluşturucu dosyalarını yüklemek önemlidir. Bunu yaptıktan sonra düzenleme işlemini başlatmak için bu bağlantıyı izleyin:https://yourwebsite.com/builder/skin-name/.

Dolayısıyla, daha önce de belirtiğimiz gibi, sezgisel tasarım, oluşturucunun temel avantajlarından biridir. Üst panelde, ihtiyacınız olacak tüm referansları ve araçları bulacakısnız.

Brave temasının içerdiği tüm sayfalar gösterge tablosunun sol tarafında gösterilecektir. Sağ taraf, duyarlı görüntüleyici, sayfa yarları ve kaydet düğmesini içerecektir. Gösterge panelinin ortada yer alan butonun yardımıyla modlar arasında geçiş yapabilirsiniz:

  • Önizleme modu web sitesinin güncellenmiş sürümünü gösterir.
  • Düzenleme modu, temayı veya web sitesini düzenlemek için araçlar ve seçenekler sunar.
  • Tasarım modu, kod düzenleyiciye erişim sağlar.

Metin Düzenleme

Temanın demosu açtığınızda, bu ikonları sayfanın altında göreceksiniz:

Mevcut metni silebilir, kendinize ait bir yazı yazabilir ve sonra onu düzenleyebilirsiniz. Yazı tipini, rengini değiştirmek, etkin bir bağlantı oluşturmak, metnin konumunu değiştirmek, kalın, altı çizili veya italik hale getirmek mümkündür.

İçerik öğelerini çoğaltma

Her şey çok kolaydır. Sadece bir metin parçası veya görsel bir öğe seçin, farenin sağ tuşunu tıklayın ve çoğalt seçeneğini seçin.

Blok Nasıl Eklenir

Ön ayar oluşturmak için önce görüntüdeki Mavi Artı Düğmesi kullanılır. Üzerine tıklayarak, önceden hazırlanmış çok sayıda blok gösteren Presets Manager'ı açacaksınız.

Bir sayfa oluşturmak için bu hazır ayarlardan birini kullanabileceksiniz. Elementor Builder benzer bir seçeneğe sahip ama kullanıcılar yeni bir sayfa oluştururken ortaya çıkan hatalardan şikayetçilerdir.

Arka Plan Nasıl Özelleştirilir?

Novi Builder'ın yardımıyla alt kısımdaki rengi değiştirmek mümkündür.

Bölümünü gezdikten sonra, farklı seçeneklere sahip küçük bir pencere göreceksiniz. Renkli dönge, renk değişikliği yapmak içindir. Üzerine tıkladığınızda, ayarları içeren başka bir pencere göreceksiniz. Rengi değiştirmenize veya degrade bir arka plan oluşturmanıza olanak sağlar.

Yeni Bir Sayfa Nasıl Oluşturulur

Sayfanın sol tarafında bir Page Manager'ı göreceksiniz. Sayfalara tıklandığınızda, şu seçenekleri göreceksiniz:

Yeni bir sayfa oluşturmak için uygun düğmesine tıklayın, sayfaya bir isim verin ve Sayfa Oluştur düğmesini tıklayın.

Bundan sonra, bir Ön Ayarlar Yöneticisi açılır. Yeni bir sayfanızı dolduracak içerik bloklarını seçebilirsiniz.

Aşağı kaydırırsanız, Call to Action 6 düğmesi gibi farklı öğeleri koleksiyonunu göreceksiniz:

Tasarım modunda, sayfa şöyle görünecek:

Burada arka planı da özelleştirilebilir, yazı tipini vb. değiştirebilirsiniz. Örneğin, gradyan arka planını # 191337 ile kaldırabilir ve #fff ile başka bir renk seçebilirsiniz. Ayrıca yazı tipini değiştirebilir ve örneğin Montserrat'ı seçebilirsiniz:

İçerik öğesinde değişiklik yapmak için sadece onu seçin ve (tüm resmi, arkaplanı) ve sağ fare düğmesini tıklayın.

İçerik bloğunun resmini başka bir resimle değiştirmek mümkündür. Aşağıdaki resme tıklayın:

Medya Galerisi açılacaktır. Orada, Novi arama yoluyla bulduğunuz herhangi bir resmi seçmek mümkündür. Örneğin, Ürünler klasöründen iMac görüntüsünü seçelim. Pencerenin altında Görüntü Ekle düğmesini tıklayın ve sonucun tadını çıkarın:

Brave teması ve Novi Builder'ın yardımıyla bir HTML web sitesi oluşturmanın ana yönlerini anlatmaya çalıştım. Kayıtla ilgili herhangi bir sorunuz varsa bu ayrıntılı video eğitimini izlemenizi öneririm. Bu ürünleri kullanarak sayfa oluşturmanın ve düzenlemenin ne kadar kolay olduğunu bir kez daha kanıtladı.

Ek olarak, Novi Builder'ın WordPress'in gerektirdiği kadar güçlü sunucu donanımına ihtiyacı yoktur. Elementor ile tam teşekkülü ve iyi görünümlü bir web sitesi oluşturmak için web sitenizi yavaşlatan düzinelerce eklenti kullanacaksınız. HTML web siteleri ağır veritabanına sahip değildir ve bu nedenle genellikle daha hızlı yüklenir.

Şimdi bir web sitesi oluşturmak daha kolay oldu. Bu tür hazırlanmış şablonlar web sitesi oluşturma süreci kolaylaştırır ve çekici, profesyonel görünümlü bir tasarıma sahip siteleri başlatmasına izin verir.

Bu nedenle Novi Builder tarafından desteklenen web sitesi şablonları, web sitesi başlatmak için iyi bir seçimdir.



Oksana Semenchuk

Web tasarımı ile ilgili herhangi bir konuda ilham kaynağı arıyorsanız, Oksana'nın makalelerinin koleksiyonu inceleyin. Sizin için kullanışlı olmalıdır. Onu LinkedIn'de takip edin.