Cara Membuat Website Sendiri Dari Nol Sampai Online ( Full Lengkap )

Cara Membuat Website Sendiri Dari Nol Sampai Online ( Full Lengkap )

Pasang ongkos kirim plugin

Plugin ongkos kirim bertujuan untuk mengecek biaya pengiriman barang dari Alamat kamu ke Alamat pelanggan.

Mungkin pernah kamu bertanya kenapa saat melakukan checkout dengan plugin ongkos kirim, ongkos kirim nya berbeda dengan yang ada di website cek ongkir di google ? Sepanjang yang penulis ketahui jika biaya ongkos kirim ingin sama persis maka syarat utama adalah plugin tersebut harus bekerjasama dengan pihak ekspidsi secara langsung agar database nya sama. Salah satu caranya bisa menggunakan plugin ongkos kirim premium

Kali ini kita akan menggunakan Ongkos kirim gratisan. Caranya

Klik Tab Plugin > Tambah Baru > cari plugin ongkos kirim id > Instal dan Aktifkan

Klik Tab plugin ongkos kirim disebelah kiri > Konfigurasi atau ke Woocommerce dan pastikan bagian pengiriman memilih ongkos kirim id

Selanjutnya silahkan isi pengaturan yang diminta. Seperti jasa eskpidisi apa saja yang ingin digunakan, Alamat Kota pengiriman dan sebagainya

Tonton Video Lengkapnya

Konfirmasi pembayaran

Pastikan sudah membuat Halama lacak pesanan > Edit with Elementor >Add New Section > Drag Teks Heading dan Creative Button. Edit sesuai keinginan

Buka link ini https://faq.whatsapp.com/general/chats/how-to-use-click-to-chat/?lang=id > Pada bagian membuat tautan pesan yang telah terisi copy https://wa.me/62XXXXXXXXXXX?text= untuk xxxxxx silahkan ganti dengan nomor whatsapp kamu dan jangan hapus 62(kode Negara) > buka kembali halaman lacak pesanan. Dibagian creative button pada bagian pastekan tautan yang telah kamu copy dan pastikan sudah mengganti nomor whatsappnya

Selanjutnya buka link ini https://www.urlencoder.org/ Masukan format pesan > Pilih UTF-8 > Pilih Windows > Klik Encode

Selanjutnya akan muncul kode.Copy code tersebut dan kembali ke halaman kofirmasi pembayaran > Pastekan code tadi dibelakang tanda (=)

Setup email di Woocommerce berfungsi ketika ada Orderan atau pendaftaran baru di website kita maka akan ada email notifikasi ke email kita ataupun ke email pelanggan

Ke pengaturan umum > pastikan email benar (email yang sudah kita buat dengan nama domain) > dan centang untuk keanggotaan

Artikel terkait Cara Membuat Email Profesional Cara Membuat Email di Hosting

Langkah selanjutnya kamu harus melakukan konfigurasi SMTP agar ketika ada email nanti bisa masuk ke email dari domain yang sudah kita buat

Setelah Email dibuat jangan lupa ikuti langkah berikut nya silahkan baca artikel berikut Cara Konfigurasi SMTP

Tambahkan fitur Wishlist

Fitur Wishlist berfungsi agar pengunjung bisa memfavortikan terlebih dahulu produk yang diinginkan tanpa harus menambahkannya ke keranjang atau melakukan checkout. Untuk panduannya bisa ikuti dibawah ini ya

Instal dan aktifkan plugin Ti Woocommerce terlebih dahulu > Klik Tab TI Wislhist > General Settings > dibagian Button Custom css masukan “wishlist-button” > lalu save

Kembali ke Tab TI Wishlist > Style Options, Cari Kolom Template Custom CSS > masukan kode css > Lalu save

Tonton Video Lengkapnya

Untuk menambahkan fitur chat whatsaapp. Klik plugin > Tambah Baru > cari plugin click to chat > masukan Nomor Whatsapp kita, atur pesan yang ingin dikirimkan ke kita, style Tombol dan lainnya

Tonton Video Lengkapnya

Download dan Install XAMPP

Kamu bisa Download Xampp dari web resminya https://www.apachefriends.org/ lalu pilih sesuai dengan sistem operasi yang digunakan (saran saya menggunakan Windows, karena dalam artikel ini saya menggunakan Windows)

Berikutnya silahkan instal Xampp yang sudah Didownload Tersebut. Untuk cara instal xampp bisa kunjungi artikel ini Cara Download dan Install XAMPP

Tonton Video Lengkapnya

Banyak yang bertanya kepada saya. Kak kenapa saat menginstal WordPress kok tidak Bisa? atau juga Waktu memasukan nama Database dalam proses instalasi WordPress kok gagal ya?. Hal ini disebabkan karena kamu belum membuat nama database di server localhost.

Bagaimana cara membuat database? Kamu bisa kunjungi artikel ini ya untuk pembuatan Database di localhost Cara Membuat Database di XAMPP untuk nama database bisa disesuikan dengan keinginan kamu ya.

Download dan Instal WordPress

Download WordPress dari situs resminya di https://wordpress.org/ > Copy file WordPress > dan pastekan di folder C > Xampp > htdocs > Extract Here file wordpress nya > lalu rename file WordPress yang sudah di Extract sesuai dengan nama yang diinginkan

Aktifkan XAMPP (Apache dan MySQL) > buat database terlebih dahulu dengan cara ketikan localhost/phpmyadmin di browser kamu > Klik Baru > masukan nama database yang diinginkan > Klik Buat

Artikel Lengkap: Cara Membuat Database di XAMPP

Selanjutnya Ketikan localhost/nama database yang sudah dibuat di browser > saatnya melakukan konfigurasi wordpress > pilih bahasa > Klik lanjutkan > klik Ayo

Isikan Koneksi Database > Untuk Basis data isikan nama database yang sudah dibuat > Untuk settingan lainnya biarkan default kamu bisa lihat pada gambar > Klik jalankan pemasangan

Masukan informasi yang dibutuhkan seperti judul situs, username, password dan lainnya > klik instal WordPress > penginstalan selesai klik log masuk untuk login ke Dasboard WordPress

Artikel Lengkap: Cara Install WordPress di XAMPP dengan Mudah

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Beriktunya kita akan melakukan Setup dasar WordPress

Untuk setting permalink login ke Dashboard WordPress > pengaturan > permalink > pilih type post > Simpan Perubahan

Artikel Lengkap: Settingan Dasar WordPress #Permalink

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Klik Sunting profil di pojok kanan atas > Pada Manajamen Akun Atur kata sandi baru dan buat kata sandi atau password > Perbarui Profil

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Laman > Tambah baru > Buat nama halaman atau menu yang ingin dibuat > Publish > ulangi langkah tersebut untuk membuat Menu yang lain

Artikel Lengkap: Cara Membuat Halaman Website di WordPress

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Navigasi berfungsi untuk memunclkan Halaman yang sudah kita buat sebelumnya

Login ke dashboard WordPress > Tampilan > menu > Buat Nama menu > Pilih lokasi penayangan > tambahkan item menu > klik save menu

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Pengaturan ini berfungsi untuk memilih halaman mana yang ingin ditampilkan ketika orang lain berkunjung ke website kamu

Login ke Dashboard WordPress > Pengaturan Membaca > pilih halaman Home (atau halaman lain yang kamu pilih)

Untuk tema pada pembuatan website kali ini kita menggunakan Page Builder Framework

Baca Juga : Page Builder Framework – Tema WordPress Gratis Ringan

Login ke dashboard WordPress > Tema > Tambah baru > cari tema “Page Builder Framework” > Instal dan Aktifkan

**Jika dalam penginstalan gagal kamu bisa klik link berikut – Klik Disini

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Plugin ini kita gunakan untuk mendesain halaman website kita

Login ke Dashboard WordPress > Plugin > Tambah baru > cari plugin Elementor > instal sekarang dan Aktifkan

**Jika dalam penginstalan gagal kamu bisa klik link berikut – Klik Disini

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Selanjutnya kita akan mulai mendesain website kita,Untuk Tutorial mendesain ini cukup panjang ya, kami harapkan bisa dipahami dengan mudah.

Catatan : Ketika pembuatan website masih dilakukan di localhost jangan lupa menjalankan Apache dan MySQL terlebih dahulu. Dan setelah selesai mendesain jangan lupa klik update

Pembahasan berikutnya kita akan mendesain halaman homepage

Kita akan membuat Homepage Header seperti gambar dibawah ini

Langkah pertama kamu bisa ke laman > cari laman Home > Edit With Elementor > Klik tanda (+) > Pilih Structure > Masukan Teks Heading, Text editor dan button di bagian sebelah kiri kemudian ubah teks sesuai keiginan (Edit sesuai keinginan)

Masukan Fitur Image dan video dengan cara drag and drop lalu pilih gambar dan video yang diinginkan untuk bagian sebelah kanan (gambar bisa diambil dari situs gratis seperti undraw)

Berikutnya untuk pewarnaan atau background untuk header Klik di bagian Edit Section > Style > Backgorund > saya memilih menggunakan gradient, lalu atur warna sesuai keinginan > klik update

Baca Juga: Cara Menggunakan Elementor dengan Mudah

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Atur Homepage dan blog

Login ke dashboard WordPress > Pengaturan > Membaca > pilih lama statis. Pada bagian Beranda pastikan memiih Home dan Laman Pos-pos pilih Blog

Tonton Video Lengkapnya

Cara Membuat Toko Online Sendiri Dari Nol Sampai Online – Full Lengkap

Halo semua. Jika diartikel sebelumnya kita sudah membuat website Company Profile diartikel kali ini kita akan membuat Website E-commerce. Sebelum kita memulai pembahasan saya ingin menekankan bahwa artikel kali ini membahas E-commerce ya bukan marketplace.

Kenapa saya jelaskan seperti ini ? karena banyak sekali yang menghubungi saya. Kak apakah nanti orang lain bisa daftar toko di website kita? Apakah website ini bisa seperti Tokopedia, Bukalapak dan lainnya ? Jawabannya Tidak, karena ini hanya E-commerce saja bukan website Multi vendor. Untuk multivendor mungkin kita akan bahas di kesempatan lain.

Baca Juga: Jangan Keliru! Perbedaan Ecommerce dan Marketplace

Oke langsung saja kita masuk ke materi:

Secara singkat WordPress adalah sebuah tool atau dikenal dengan Content Management System (CMS) Yang berfungsi memudahkan kita dalam membuat website. Karena dengan WordPress tidak perlu memiliki skill Coding

Tonton Video Lengkapnya

Ada beberapa persiapan yang harus dilakukan sebelum membuat website

Hubungkan Semua Link Homepage

Jik diawal kita sudah membuat beberapa Button dan ketegori produk. Maka saatnya menghubungkan masing- masing button ke link terkait

Caranya Copy URL Dari Kategori produk yang sudah ada > Kemudian buka halaman Homepage > Edit With Elemenetor > Klik button yang sudah dibuat > masuk ke bagian Content dan pastekan link tersebut.

Tonton Video Lengkapnya

Proses pembelian dan pengiriman

Pada bagian ini adalah bagian yang paling penting. Kita akan mencoba untuk membeli dan mengelola pengiriman barang

Lakukan Checkout setelah menambahkan barang ke keranjang

Pada bagian ini jika kamu belum mempunyai akun maka silahkan mendaftar dan mengisi form yang disediakan. Serta memilih metode pembayaran dan pengiriman > Buat Pesanan

Selanjutnya akan muncul Instruksi yang harus pembeli lakukan. Seperti jumlah pembayaran yang harus dilakukan dan rekening Tujuan pembayaran

Sebagai catatan jika kamu menggunakan metode pembayaran secara manual , maka pembeli diharuskan untuk mengirimkan bukti transfer dan kamu harus mengecek terlebih dahulu sebelum melakukan pengiriman.

Jika menggunakan Mutasi Otomatis atau Payment Gateway maka proses transaksi akan dicek otomatis oleh sistem

Jika ada orderan yang masuk aka nada Notifikasi ke email kamu, ini berlaku jika kamu sudah melakukan pengaturan email dengan benar

Untuk memproses pesanan yang masuk bisa ke woocommerce > Pesanan > klik pesanan yang ingin diproses > kamu bisa melihat alamat untuk pengiriman barang dan mengupdate status orderan

Tonton Video Lengkapnya

Oke sampai disini pembahasan kita mengenai cara pembuatan website dengan Toko Online sudah selesai. Sebagai Tambahan jika kami membaca panduan di artikel ini ataupun video yang disediakan ada tampilan atau fitur yang berbeda kamu tidak perlu panik di karenakan WordPress adalah CMS yang selalu mengupdate fitur-fiturnya bisa saja fitur yang tadinya ada di artikel ini berbeda tata letaknya atau berganti namanya.

Terimakasih ya sudah mampir dan mau membaca sampai sejauh ini. Semoga artikel kali ini bisa segera kamu terapkan juga di website kamu

Daftar Akun di Toko Online Kita

Di bagian ini kita akan mengatur Untuk sistem pendaftaran. Seperti, mengizinkan pelanggan untuk melakukan pendaftaran, Tidak mengizinkan pelanggan memesan tanpa mempunyai akun dan yang lainnya. Kamu bisa ikuti panduan dibawah ini ya :

Login ke Dashboard WordPress > Pengaturan > Umum > Centang pada di bagain keanggotaan dan pilih peran sebagai pelanggan

Woocommerce > Pengaturan > Akun dan Email > Centang seperti gambar dibawah ini

Tonton Video Lengkapnya