Monday, September 24, 2018

Membuat Landing Page Menggunakan Bootstrap | Virtual Online

Membuat Landing Page Menggunakan Bootstrap. – Kali ini kita akan belajar membuat landing page menggunakan Bootstrap. Jika kalian baru mengunjungi Codelatte, mungkin sebaiknya kalian baca tentang Pengertian dan Cara Menggunakan Bootstrap.

Apa itu Landing Page?


Landing page adalah suatu halaman website yang dikunjungi pertama kali oleh pengunjung. Bagaimana suatu pengunjung bisa sampai pada landing page ini?
Dalam era informasi ini jutaan manusia membuka internet dengan berbagai kebutuhan. Jika dia sudah mengetahui website yang menyediakan kebutuhannya, ia akan segera masuk ke website tersebut. Tetapi jika ia belum mengetahui di mana website yang menyediakan kebutuhannya maka ia akan masuk ke search engine dan mencari dengan keyword sesuai kebutuhannya. Hasil dari pencarian inilah dia menemukan halaman-halaman website dan kemudian mengklik suatu halaman. Halaman yang diklik dan dikunjungi inilah yang disebut landing page.
Pada dasarnya, setiap freelancer atau usaha kecil bisa mendapatkan keuntungan dari membangun landing page. Kapan pun Anda memiliki page yang ingin Anda kirimi pengunjung, landing page dapat membantu mengilhami action, seperti bergabung dengan milis atau membeli produk.

Membuat Landing Page Menggunakan Bootstrap

Pada tutorial kali ini kita akan membuat Landing Page kita sendiri. Untuk desain, saya akan menggunakan desain landing page yang bisa digunakan untuk website yang memiliki banyak cabang. Cabang yang saya maksud adalah sejenis subdomain dan/atau website yang menyediakan artikel per-kategori.
Struktur file dalam landing page yang kita buat adalah sebagai berikut.
  1. portal
  2. ├── assets
  3. │ ├── css
  4. │ │ ├── bootstrap-grid.css
  5. │ │ ├── bootstrap-grid.css.map
  6. │ │ ├── bootstrap-grid.min.css
  7. │ │ ├── bootstrap-grid.min.css.map
  8. │ │ ├── bootstrap-reboot.css
  9. │ │ ├── bootstrap-reboot.css.map
  10. │ │ ├── bootstrap-reboot.min.css
  11. │ │ ├── bootstrap-reboot.min.css.map
  12. │ │ ├── bootstrap.css
  13. │ │ ├── bootstrap.css.map
  14. │ │ ├── bootstrap.min.css
  15. │ │ └── bootstrap.min.css.map
  16. │ ├── font-awesome
  17. │ │ ├── HELP-US-OUT.txt
  18. │ │ ├── css
  19. │ │ │ ├── font-awesome.css
  20. │ │ │ └── font-awesome.min.css
  21. │ │ ├── fonts
  22. │ │ │ ├── FontAwesome.otf
  23. │ │ │ ├── fontawesome-webfont.eot
  24. │ │ │ ├── fontawesome-webfont.svg
  25. │ │ │ ├── fontawesome-webfont.ttf
  26. │ │ │ ├── fontawesome-webfont.woff
  27. │ │ │ └── fontawesome-webfont.woff2
  28. │ │ ├── less
  29. │ │ │ ├── animated.less
  30. │ │ │ ├── bordered-pulled.less
  31. │ │ │ ├── core.less
  32. │ │ │ ├── fixed-width.less
  33. │ │ │ ├── font-awesome.less
  34. │ │ │ ├── icons.less
  35. │ │ │ ├── larger.less
  36. │ │ │ ├── list.less
  37. │ │ │ ├── mixins.less
  38. │ │ │ ├── path.less
  39. │ │ │ ├── rotated-flipped.less
  40. │ │ │ ├── screen-reader.less
  41. │ │ │ ├── stacked.less
  42. │ │ │ └── variables.less
  43. │ │ └── scss
  44. │ │ ├── _animated.scss
  45. │ │ ├── _bordered-pulled.scss
  46. │ │ ├── _core.scss
  47. │ │ ├── _fixed-width.scss
  48. │ │ ├── _icons.scss
  49. │ │ ├── _larger.scss
  50. │ │ ├── _list.scss
  51. │ │ ├── _mixins.scss
  52. │ │ ├── _path.scss
  53. │ │ ├── _rotated-flipped.scss
  54. │ │ ├── _screen-reader.scss
  55. │ │ ├── _stacked.scss
  56. │ │ ├── _variables.scss
  57. │ │ └── font-awesome.scss
  58. │ └── js
  59. │ ├── bootstrap.bundle.js
  60. │ ├── bootstrap.bundle.js.map
  61. │ ├── bootstrap.bundle.min.js
  62. │ ├── bootstrap.bundle.min.js.map
  63. │ ├── bootstrap.js
  64. │ ├── bootstrap.js.map
  65. │ ├── bootstrap.min.js
  66. │ └── bootstrap.min.js.map
  67. ├── images
  68. │ ├── pic.png
  69. │ ├── pic2.png
  70. │ ├── pic3.png
  71. │ ├── pic4.png
  72. │ ├── pic5.png
  73. │ └── pic6.png
  74. ├── index.html
Sebelumnya kita harus menyiapkan beberapa gambar atau icon sebagai thumbnail dari masing – masing opsi di dalam landing page. Saya juga memakai Font Awesome untuk membuat icon – icon menarik. Bagi yang belum mengerti cara menggunakan Font Awesome, bisa dilihat caranya disini.
Setelah file Bootstrap, Font Awesome dan beberapa gambar sudah disiapkan, sekarang kita mulai membuat landing page!
Buat file index.html lalu isi dengan kode berikut,
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Portal Info Halaman</title>
  6. <link href="assets/css/bootstrap.min.css" rel="stylesheet">
  7. <link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  8. <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  9. <style>
  10. body {
  11. font-family: 'Roboto', sans-serif;
  12. background-color: #ECF0F1;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div class="container-fluid" id="Virtual Online">
  18. <nav class="navbar mb-3">
  19. <h3 class="mx-auto">Portal Info Halaman VIRTUAL ONLINE</h3>
  20. </nav>
  21. <div class="row justify-content-center text-center" style="margin-top: 3%;">
  22. <div class="card float-left col-md-3 mr-3" style="width: 20%;">
  23. <div class="card-body">
  24. <h2 class="card-title">Judul Halaman</h2>
  25. <img class="img-fluid mb-3" src="images/pic.png" alt="Card image cap" style="height: 150px; widht: 150px;">
  26. <p class="card-text">Lorem ipsum dolor sit amet.</p> <a href="#" class="btn btn-primary"><i class="fa fa-sign-in"></i> Kunjungi Halaman</a>
  27. </div>
  28. </div>
  29. <div class="card float-left col-md-3 mr-3" style="width: 20%;">
  30. <div class="card-body">
  31. <h2 class="card-title">Judul Halaman</h2>
  32. <img class="img-fluid mb-3" src="images/pic2.png" alt="Card image cap" style="height: 150px; widht: 150px;">
  33. <p class="card-text">Lorem ipsum dolor sit amet.</p> <a href="#" class="btn btn-primary"><i class="fa fa-sign-in"></i> Kunjungi Halaman</a>
  34. </div>
  35. </div>
  36. <div class="card float-left col-md-3 mr-3" style="width: 20%;">
  37. <div class="card-body">
  38. <h2 class="card-title">Judul Halaman</h2>
  39. <img class="img-fluid mb-3" src="images/pic3.png" alt="Card image cap" style="height: 150px; widht: 150px;">
  40. <p class="card-text">Lorem ipsum dolor sit amet.</p> <a href="#" class="btn btn-primary"><i class="fa fa-sign-in"></i> Kunjungi Halaman</a>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="row justify-content-center mt-3 text-center">
  45. <div class="card float-left col-md-3 mr-3" style="width: 20%;">
  46. <div class="card-body">
  47. <h2 class="card-title">Judul Halaman</h2>
  48. <img class="img-fluid mb-3" src="images/pic4.png" alt="Card image cap" style="height: 150px; widht: 150px;">
  49. <p class="card-text">Lorem ipsum dolor sit amet.</p> <a href="#" class="btn btn-primary"><i class="fa fa-sign-in"></i> Kunjungi Halaman</a>
  50. </div>
  51. </div>
  52. <div class="card float-left col-md-3 mr-3" style="width: 20%;">
  53. <div class="card-body">
  54. <h2 class="card-title">Judul Halaman</h2>
  55. <img class="img-fluid mb-3" src="images/pic5.png" alt="Card image cap" style="height: 150px; widht: 150px;">
  56. <p class="card-text">Lorem ipsum dolor sit amet.</p> <a href="#" class="btn btn-primary"><i class="fa fa-sign-in"></i> Kunjungi Halaman</a>
  57. </div>
  58. </div>
  59. <div class="card float-left col-md-3 mr-3" style="width: 20%;">
  60. <div class="card-body">
  61. <h2 class="card-title">Judul Halaman</h2>
  62. <img class="img-fluid mb-3" src="images/pic6.png" alt="Card image cap" style="height: 150px; widht: 150px;">
  63. <p class="card-text">Lorem ipsum dolor sit amet.</p> <a href="#" class="btn btn-primary"><i class="fa fa-sign-in"></i> Kunjungi Halaman</a>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. <p class="text-center" style="margin-top: 3%;">Copyright <i class="fa fa-copyright"></i> <a href="https://virtualwageronlinemarchmadness.blogspot.com/">Virtual Online</a> 2018 . All Rights Reserved.</p>
  69. <script>
  70. function changeWide(){
  71. document.getElementById("Virtual Online").className = "container-fluid";
  72. }
  73. function changeBoxed(){
  74. document.getElementById("Virtual On").className = "container ";
  75. }
  76. </script>
  77. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  78. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  79. <script src="assets/js/bootstrap.min.js"></script>
  80. </body>
  81. </html>
Setelah itu simpan dan lihat hasilnya! Kalian bisa menambah atau mengurangi desain tersebut sebagai bahan belajar. Untuk demo, saya sediakan di arc.codelatte.org/templates/portal. Untuk source code bisa di download disini.
Sekian artikel tentang Membuat Landing Page Menggunakan Bootstrap. Semoga bermanfaat dan sampai jumpa pada artikel selanjutnya!
Source : Codelatte.org


EmoticonEmoticon