membuat landing page di wordpress menggunakan bootstrap

Membuat Landing Page di WordPress Menggunakan Bootstrap

membuat landing page di wordpress menggunakan bootstrap

 

Landing page adalah halaman website yang pertama kali dibuka oleh pengunjung saat mereka mengklik alamat website kita. entah dari google atau langsung dari address bar. Mungkin pengertian tersebut tidak sesuai dengan apa yang kita lihat, dimana landing page terdiri dari satu halaman panjang kebawah dan mungkin tidak ada halaman lain. pernyataan itu juga benar karena yang itu juga merupakan landing page, cuma landing page tersebut ditujukan untuk keperluan marketing. Dan kali ini kita akan membuat landing page versi marketing tersebut di wordpress menggunakan bootstrap.

Landing Page Bootstrap

Pada tutorial wordpress ini kita akan memanfaatkan template website landing page yang dibangun dengan mengunakan bootstrap. template website ini disediakan gratis oleh http://startbootstrap.com, di situs tersebut juga terdapat berbagai template bootstrap yang bisa kalian gunakan untuk membuat template wordpress seperti pada tutorial sebelumnya membuat template wordpress dengan bootstrap.

 

Membuat landing page di WordPress

Sebelum kita memulai membuat landing page di wordpress dengan bootstrap pastikan beberapa hal berikut ini sudah selesai kalian siapkan :

Jika sudah siap maka langkah pertama untuk membuat landing page di wordpress adalah dengan membuat sebuah folder di wp-content > themes, beri nama folder baru tersebut dengan nama “landing-page“.

Kemudian ekstrak template bootstrap landing page ke dalam folder “landing-page” seperti gambar berikut.membuat landing page di wordpress menggunakan bootstrap

Tambahkan file functions.php dan file style.css di dalam folder “landing-page”, kemudian rename file “index.html” menjadi “index.php”.

Membuat Template WordPress

Dalam membuat template wordpress kita harus memiliki beberapa file utama seperti :

  • style.css
  • index.php dan
  • functions.php

Pertama buka style.css, kenapa style.css karena file ini memuat informasi tentang template atau theme wordpress yang kita buat. jika file style.css ini tidak ada, template wordpress kita tidak bisa dipakai. oke langsung saja tambahkan kode berikut di dalam style.css.

Kedua buka file functions.php, pada functions.php ini kita akan mendaftarkan beberapa link stylesheet atau css dan JavaScript kita juga bisa menambahkan beberapa support lain seperti tag <title>, html5, post-thumbnail jika diperlukan.

Kemudian buka index.php dan ubah script dari tag <!DOCTYPE html> hingga </head> dengan script berikut.

Kemudian pada tag <nav class=”navbar navbar-default navbar-fixed-top”> hingga </nav> di ubah dengan script berikut.

Kemudian pada bagian  <header> hingga  </header> kita ubah dengan script berikut.

Kemudian pada bagian <section id=”portfolio”> hingga </section> sebelum koment <!– About Section –> kita ganti dengan script berikut.

Kemudian pada <section class=”success” id=”about”> hingga </section> kita ubah menjadi seperti berikut.

Kemudian cari <form name=”sentMessage” id=”contactForm” novalidate> dan ubah jadi

pada file contact_me.js di landing-page/js/contact_me.js cari code :

dan ganti

 

Kemudian  dari <!– Footer –> hingga </footer> kita ganti dengan kode berikut.

Kemudian dari <!– Portfolio Modals –> hinggga </div> sebelum <!– jQuery –>. kita ganti dengan kode berikut.

dan terakhir dari <!– jQuery –> hingga </html> kita ganti dengan kode berikut.

Kurang lebih begitulah cara membuat landing page di wordpress kali dengan menggunakan bootstrap kali ini. jika kalian bingung dengan potongan-potongan template bootstrap kalian bisa lihat kode fullnya di sini.

dan kita akan mulai mengisi landing page kita dengan Teks an gambar-gambar.

Menggunakan Landing Page WordPress

Untuk menggunakan Template wordpress yang baru saja kita buat, kita setidaknya memerlukan 1 kategori, 1 page atau halaman, 1 menu wordpress  dan beberapa widget.

Pertama buatlah sebuah kategori pada menu Posts > Categories dan buatlah sebuah kategori bernama “Portfolio” dan slug-nya “portfolio”. kategori ini akan kita gunakan untuk membuat list portfolio pada landing page sekaligus popup yang muncul ketika kita klik salah satu item portfolio kita.

Kemudian buat halaman dengan klik Pages > Add New, buat halaman bernama “About”. nah ini bertujuan untuk mengisi pada bagian About pada landing page. Sebelum di simpan masukan kode html berikut pada text editor, ganti mode “Visual” dengan mode “Text” lalu paste-kan kode berikut :

kita beralih ke menus , Appearance > Menus , pilih create a new menus dan berinama “landing” dan buatlah menu dari Custom links seperti gambar berikut.

Membuat Landing Page di WordPress menggunakan bootstrap

dan kita akan membuat empat menu dengan urutan seperti berikut

  1.  URL : #page-top
    Link Text : Page Top
  2. URL : #portfolio
    Link Text : Portfolio
  3. URL : #about
    Link Text : About
  4. URL : #contatct
    Link Text : Contact

Setalah ke empat menu ditambahkan ke kotak sebelah kanan, kili Srceen Options dan check / centang CSS Classes. disini kita bisa menambahkan class custom pada list menu kita.

klik “custom link” pada kotak sebelah kanan sehingga menu akan tampak seperti gambar berikut.

Membuat Landing Page di WordPress menggunakan bootstrap

pada menu Page Top kita tambahkan CSS Classes “hidden” dan pada menu yang lain kita tambhakan CSS Classes “page-scroll”.  sebelum disimpan centang terlebih dulu “Primary Menu”.

4

dan selanjutnya kita masuk ketahap akhir yakni menambahkan widget, silakan menuju Appearance > Widgets, di sana banyak sekali widget yang bisa kalian gunakan tapi untuk tutorial wordpress kali ini kita hanya akan menggunakan “widget text” saja.

Untuk menggunakan widget ini cukup mudah, kita klik dan drag ke area widget disebelah kanan maka widget akan terpasang. pada landing page ini kita menggunakan 3 widget text yang secara berurutan dari atas location, around the web dan about freelancer.

Pada widget text teratas masukkan kode html berikut. Dan beri nama Location.

pada widget berikutnya. beri nama Around the Web

dan pada widget text terakhir. dan beri nama About Freelancer.

demikitan tutorial wordpress tentang membuat landing page di wordpress dengan menggunakan bootstrap dan jangan lupa untuk Like Fans Page onphpid untuk mendapatkan tutorial wordpress atau tutorial php terbaru. Terima kasih dan selamat belajar.

Scroll to Top
Scroll to Top