- 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
2. 4. Hubungi Kami
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
- Home
- Makanan dan Minuman
- Tentang Kami
- 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.
- Home (URL : # , Link Text : HOME)
- Makanan dan Minuman (URL : # , Link Text : MAKANAN DAN MINUMAN)
- Tentang Kami (URL : # , Link Text : TENTANG KAMI)
- 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.