Bikin Web Coffee Shop

Table Of Contents
  • 1. Persiapan
  • 1.1 Merencanakan
  • 1.2. Memilih Nama Domain
  • 1.3. Memilih Sewa Hosting
  • 2. Layout Desain dan Menu
  • 2.1. Homepage
  • 2.2. Minuman Makanan
  • 2.3. Tentang Kami
  • 2.4. Hubungi Kami
  • 3. Mari Mulai !
  • 3.1. Menginstall WordPress
  • 3.2. Menginstall Elementor
  • 3.3. Menginstall Hello Themes
  • 3.4. Membuat Menu
  • 3.5. Membuat Slide Header

Kali ini kita akan mencoba membuat website coffee shop yang saat ini sangat marak di tanah air kita. Tujuan dari website ini tentu saja untuk memberikan informasi dan keterikatan dari pelanggan ke brand usaha coffee shop kita.

1. Persiapan

Panduan ini menggunakan WordPress sebagai cms dan Elementor plugin dalam pembuatan website.

1. 1. Merencanakan

Dari mulai nama domain yang sesuai dengan brand coffee shop, sewa hosting dengan kualitas yang bagus, juga harga terjangkau sampai dengan layout desain, fitur dan menu apa saja yang ditampilkan dalam website tsb. Semua harus terencana dengan baik dan lengkap.

1. 2. Memilih Nama Domain

Nama domain dan tipe domainnya bisa kita sesuaikan dengan brand dari coffee shop kita. Domain ekstension beragam pilihannya, bisa .com , .net atau .id ( yg sedang trend saat ini di Indonesia )

1. 3. Memilih Sewa Hosting

Pilihkan jasa layanan sewa hosting yang sudah terbukti kualitasnya. Anda bisa googling untuk mencari layanan hosting yang bagus dan murah. 

2. Layout Desain dan Menu

Upayakan layout desain yang berkesan simple dan clean. Untuk jumlah menu page, disesuaikan dengan kebutuhan, standar minimal adalah : homepage, produk/jasa, tentang kami & hubungi kami.

2. 1. Homepage

Homepage dari sebuah web coffee shop biasanya menampilan photo suasana kafe dan produk andalan yang dikemas dalam konten menarik, misal aneka jenis kopi dingin atau hangat, juga cemilan ringan.

2. 2. Minuman dan Makanan

Menampilkan dengan lengkap dan detail setiap menu yang disediakan di kafe ini, tentunya dengan penyajian konten yang menarik.

2. 3. Tentang Kami
Berisikan informasi siapa pemilik dan juga tim yang terlibat dalam operasional coffee shop. Juga info semacam visi dan misi dibalik pembuatan coffee shop ini.
2. 4. Hubungi Kami
Informasi lokasi berikut map, nomor contact dengan jelas, dan juga sosial media dari coffee shop ini.
 
3. Mari Mulai !

Sesuai dengan ulasan sebelumnya, kita akan langsung membuat layout desain yang berisikan menu : Home, Makanan dan Minuman, Tentang Kami dan terakhir adalah Hubungi Kami. Tampilan layout seperti gambar dibawah ini. 

3.1. Menginstall WordPress

Untuk menginstall wordpress, silahkan lihat lagi di Artikel Cara Membuat Website. Di artikel tsb secara lengkap dipandu step by step cara install WordPress menggunakan fasilitas dari CPanel

3.2. Menginstall Elementor Plugin

Pada Dashboard Worpdress, pilih menu Plugins – Add New, lalu ketik keyword “elementor” pada tampilan search results, akan muncul plugin Elementor Website Builder, lalu klik tombol install.

Setelah Elementor plugin berhasil diinstall, tampilannya akan seperti gambar dibawah ini. Di panel menu kiri, akan ada menu Elementor & Template, itu artinya plugin Elementor sudah sukses ter-install.

3.3. Menginstall Hello Themes

Kita lanjutkan dengan menginstall Themes standar dari Elementor yaitu Hello themes. Pilih menu Appearance – Themes – Add New, pada tab Featured, ketik “Hello” dikotak Search themes. Lalu akan muncul Hello themes, klik tombol install, lalu tunggu proses install  dan aktifkan themes tsb dengan cara klik tombol Activate.

Untuk mengecek Hello themes tadi, klik menu Appearance – Themes, maka akan ada keterangan Active : Hello Elementor, yang berarti themes tsb sudah aktif.

3.4. Membuat Menu
Sesuai dengan layout yang sudah kita buat sebelumnya, ada 4 menu utama di bagian atas yaitu :
 
  1. Home
  2. Makanan dan Minuman
  3. Tentang Kami
  4. Hubungi Kami

Pilih menu Appearance – Menus, lalu klik tombol Create Menu. Kemudian isi kolom Menu Name, misal dengan “Manu Utama”, lalu untuk memudahkan pembuatan menu, hapus semua list menu yang sudah ada, dengan klik link Remove pada tiap list menu tsb.

Kemudian untuk membuat list menu baru, pada bagian Add menu item (sebelah kiri), di pilihan Custom Links, isi URL dan Link text sesuai dengan menu yang akan ingin kita buat. 

  1. Home (URL : # , Link Text : HOME)
  2. Makanan dan Minuman (URL : # , Link Text : MAKANAN DAN MINUMAN)
  3. Tentang Kami (URL : # , Link Text : TENTANG KAMI)
  4. Hubungi Kami (URL : # , Link Text : HUBUNGI KAMI)

Lalu pada bagian Menu Setting (bawah), di Display Location centang pada checkbox (Primary). Lalu klik tombol Save Menu.

Jika sudah lengkap, maka list menu akan seperti gambar dibawah ini.

Sampai disini, kita sudah berhasil membuat list menu utama yang posisinya ada di header website coffee shop.
 
3.5. Membuat Slide Header
Pertama-tama kita install plugin Slider Revolution, ini adalah plugin andalan untuk membuat slide pada header di tampilan depan website kita.