BandungLokalBisnis

Integrative | Website One Page Gratis

Oleh Tisna Rudi | 15 Agustus 2019


Home > Blog > Website One Page Gratis

Free Responsive One Page Website Template

Deskripsi


Template website one page responsive berjudul Integrative ini gratis. Dikembangkan menggunakan HTML, CSS dan JavaScript. Tidak menggunakan CSS framework Bootstrap. Navigasi menggunakan Responsive Fixed Nav.

Sesuai namanya, website One Page hanya satu halaman terbagi dalam beberapa section. Pengguna mengunjungi section bawah atau section atas melalui navigasi di bagian atas (Fixed top navigation). Halaman website bergulir (Scrolling) ke bawah atau ke atas, mengarahkan pengguna ke konten section tertentu berdasarkan jump links.

Pada Smartphone berukuran layar kecil mobile user experience website one page lebih baik daripada multi page. Pengguna Smartphone lebih suka gerakan halaman web bergulir untuk melihat konten dibagian lain pada halaman web yang sama daripada mengetuk link dan menunggu halaman web lain di loading untuk menampilkan konten.

Tampilan


Layout Integrative saya buat satu kolom terdiri dari empat section dengan warna background berbeda-beda. Warna background section HTML, CSS, dan JS disesuaikan dengan warna logo masing-masing (HTML5, CSS3, JavaScript). Sementara bagian footer dibagi menjadi tiga kolom.

Free Responsive One Page Template
Tampilan Website One Page Integrative

Konten template website one page tidak menggunakan dummy text: Lorem ipsum dolor sit amet... Karena tujuannya bukan sekedar template, tapi juga sebagai materi pembelajaran dalam kursus membuat website di Bandung Lokal Bisnis.

Subyek konten-nya tentang meng-integrasikan tiga layer dalam web development, yaitu HTML, CSS, dan JavaScript.

Dalam tugas membuat proyek website, peserta kursus diuji sejauh mana pemahaman materi HTML, CSS dan JavaScript yang sudah dipelajari dengan menggabungkan berbagai elemen menjadi satu kesatuan dalam bentuk halaman website.

Dalam proses web development, selain kreatifitas juga perlu kemampuan problem solving dan berpikir kritis. Tidak hanya bagaimana membuat website tapi juga kenapa atau atas dasar apa memilih suatu pilihan.

Tampilan responsive di Browser mode Developer tools.
Tampilan responsive di Browser yang lebarnya diperkecil.

Fitur Integrative


  • Responsive Fixed Navigation
  • Responsive layout satu kolom
  • Footer tiga kolom
  • Text modal/pop up window
  • Scroll to Top button (Hanya ditampilkan pada layar berukuran kecil)
  • Theme Author dan image credit: Tisna Rudi
  • Released August 15, 2019
  • MIT Lisence

Demo Download



Menggunakan Template


Template website integrative dikemas dalam file format .zip. Setelah di download, perlu software WinZip atau WinRar untuk membukanya. Setelah di ekstrak ke local drive komputer, susunan folder dan file seperti terlihat dalam Gambar di bawah ini.

Susunan folder dan file template website integrative.

File README.md (Markdown) dapat dibuka dengan WordPad yang sudah tersedia di Windows. File ini berisi keterangan Lisensi MIT dalam Bahasa Inggris. Anda bebas menggunakan template website one page integrative, untuk kepentingan komersil atau non-komersil.

Dalam folder css, icons, images, dan js terdapat file-file yang diperlukan / dipanggil oleh index.html. Untuk melihat website, buka index.html dengan web browser atau klik dua kali.

Setelah tampil di web browser, untuk melihat source code klik kanan pada bagian halaman kosong sehingga muncul popup window, pilih View page source. Alternatif lain untuk melihat page source adalah menekan tombol CTRL+U secara bersamaan.

Kalau ingin memodifikasi tampilan atau layout, gunakan code editor Visual Studio Code atau Notepad++. Anda harus mengerti HTML dan CSS untuk memodifikasinya.

Tentang Website One Page


Website one page biasanya digunakan untuk situs web tidak memiliki banyak konten dan fokus pada satu subyek. Misalnya website untuk mempromosikan suatu aplikasi, menjual satu jenis produk, landing page, brosur online, menampilkan portfolio, atau halaman coming soon.

Aspek visual website one page umumnya menonjol. Menampilkan background zebra strip atau warna-warni. Menggunakan font size besar, gambar ilustrasi menarik atau foto berukuran besar, hingga background video.

Karena hanya satu halaman, Anda harus menyederhanakan apa yang ingin disampaikan pada komponen-komponen sangat perlu saja. informasi yang disampaikan harus memilih kata-kata yang singkat, jelas, dan mudah dimengerti. Manfaatkanlah kemampuan bercerita (storytelling).

Kemampuan bercerita (storytelling) ini dapat meng-inspirasi pengunjung untuk mengambil tindakan membeli atau mendaftar sehingga akan meningkatkan faktor konversi pengunjung.


Komentar, dan pertanyaan sampaikan melalui email ke bandunglokalbisnis@gmail.com


© Bandung Lokal Bisnis 2010-2019