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>
4. <head>
5. <meta charset="UTF-8">
6. <title>Portal Info Halaman</title>
7. <link href="assets/css/bootstrap.min.css" rel="stylesheet">
8. <link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
9. <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
10. <style>
11. body {
12. font-family: 'Roboto', sans-serif;
13. background-color: #ECF0F1;
14. }
15. </style>
16. </head>
18. <body>
19. <div class="container-fluid" id="Virtual Online">
20. <nav class="navbar mb-3">
21. <h3 class="mx-auto">Portal Info Halaman VIRTUAL ONLINE</h3>
22. </nav>
23. <div class="row justify-content-center text-center" style="margin-top: 3%;">
24. <div class="card float-left col-md-3 mr-3" style="width: 20%;">
25. <div class="card-body">
26. <h2 class="card-title">Judul Halaman</h2>
27. <img class="img-fluid mb-3" src="images/pic.png" alt="Card image cap" style="height: 150px; widht: 150px;">
28. <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>
29. </div>
30. </div>
31. <div class="card float-left col-md-3 mr-3" style="width: 20%;">
32. <div class="card-body">
33. <h2 class="card-title">Judul Halaman</h2>
34. <img class="img-fluid mb-3" src="images/pic2.png" alt="Card image cap" style="height: 150px; widht: 150px;">
35. <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>
36. </div>
37. </div>
38. <div class="card float-left col-md-3 mr-3" style="width: 20%;">
39. <div class="card-body">
40. <h2 class="card-title">Judul Halaman</h2>
41. <img class="img-fluid mb-3" src="images/pic3.png" alt="Card image cap" style="height: 150px; widht: 150px;">
42. <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>
43. </div>
44. </div>
45. </div>
46. <div class="row justify-content-center mt-3 text-center">
47. <div class="card float-left col-md-3 mr-3" style="width: 20%;">
48. <div class="card-body">
49. <h2 class="card-title">Judul Halaman</h2>
50. <img class="img-fluid mb-3" src="images/pic4.png" alt="Card image cap" style="height: 150px; widht: 150px;">
51. <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>
52. </div>
53. </div>
54. <div class="card float-left col-md-3 mr-3" style="width: 20%;">
55. <div class="card-body">
56. <h2 class="card-title">Judul Halaman</h2>
57. <img class="img-fluid mb-3" src="images/pic5.png" alt="Card image cap" style="height: 150px; widht: 150px;">
58. <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>
59. </div>
60. </div>
61. <div class="card float-left col-md-3 mr-3" style="width: 20%;">
62. <div class="card-body">
63. <h2 class="card-title">Judul Halaman</h2>
64. <img class="img-fluid mb-3" src="images/pic6.png" alt="Card image cap" style="height: 150px; widht: 150px;">
65. <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>
66. </div>
67. </div>
68. </div>
69. </div>
70. <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>
71. <script>
72. function changeWide(){
73. document.getElementById("Virtual Online").className = "container-fluid";
74. }
75. function changeBoxed(){
76. document.getElementById("Virtual On").className = "container ";
77. }
78. </script>
79. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
80. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
81. <script src="assets/js/bootstrap.min.js"></script>
82. </body>
83. </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