Cara Membuat Website Sendiri Dari Nol Sampai Online Full Lengkap

Metode pembayaran (3 metode pembayaran)

Untuk metode pembayaran karena pembahasannya cukup panjang maka kami buatkan artikel tersendiri. silahkan baca artikel Mantul! 3 Cara Integrasi Pembayaran di WooCommerce

Yang jelas untuk metode pembayaran ini ada 3 macam yaitu menggunakan Transfer Bank Manual, Mutasi Otomatis dan Payment Gateway

Homepage ( Halaman Depan )

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 :

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

Tonton Video Lengkapnya

Halaman lacak pesanan

Di halaman lacak pesanan ini kita akan memasang shortcode lacak pesanan. Lacak pesanan ini bertujuan untuk mengetahui status orderan kita di website.misalnya psanan diterima, Diproses, dikirim dan lainnya

Bagaimana cara untuk melakukannya ?

Pertama silahkan klik link berikut > Doc WooCommerce > Copy shortcode di bagian Order Trackig Form

Selanjutnya edit halaman lacak pesanan ya sudah dibuat > Cari Fitur Shortcode pastekan code yang telah di copy > Scroll kebawah kamu bisa mengatur layout halaman Lacak Pesanan

Tonton Video Lengkapnya

Dibagian halaman about berisi informasi seputar perusahaan. Misal penjelasan tentang jasa yang disedikan dan lainnya.

Pertama Ke menu laman > edit With elementor laman About > di halaman elementor kamu bisa buat section baru. Tambahkan fitur yang diinginkan lalu Drag

Tonton Video Lengkapnya

Halaman ini berisi Seputar kontak perusahaan seperti No Telephone, Alamat Email dan lainnya

Cara membuatnya Login ke Dashboard Wordprss > ke laman > Cari menu Contact Edit With Elementor > Tambahkan section dan pilih Structure yang di inginkan > Drag fitur yang diinginkan kedalam Section yang dibuat lalu edit sesuai dengan keinginan

Tonton Video Lengkapnya

Halaman FAQ biasanya berisi pertanyaan yang berpotensi akan sering ditanyakan. Bagaimana cara membuatnya ?

Login ke WordPress > cari laman FAQ > Edit With Elementor > tambahkan section > Drag teks Heading dan Accordion, Lalu edit sesuai dengan keinginan

Di tahapan ini kita akan memasukan produk ke dalam Toko Online kita. Oya disini contoh Produk yang kita masukan adalah produk simple ya artinya tidak mempunya varian yang berbeda-beda. Untuk cara input produk yang memiliki varian akan kami jelaskan di artikel berikut Begini Cara Memasukan Produk Ke WooCommerce

Ok. Untuk caranya ikuti panduan dibawah ini ya :

Ke tab Produk > Tambah baru > masukan Nama Produk , deskrpisi Produk > Pilih Kategori produk dan buat Tag Untuk Produk Tersebut

Scroll kebawah. Silahkan atur layout yang diinginkan > Pilih Produk Simple > masukan Harga dan lainnya > masukan Gambar Produk dan Gallery Produk

Tonton Video Lengkapnya

Dibagian ini kita mengatur produk di bagian Produk Terbaru, Produk Favorit dan Best Selling. Silahkan ikuti panduan dibawah ya

Kunjungi link berikut Doc WooCommerce > Untuk Produk Terbaru Copy shortcode dari Newest Products, Produk favorit menggunakan Featured Post dan Bet selling menggunakan Best Selling Products.

Cari laman kemudian dit With Elementor > misalnya dibagian Produk terbaru > Drag fitur Shortcode > lalu masukan Shortcode terkait. Maka produk terbaru akan muncul

Kamu juga bisa mengatur berapa produk terbaru yang ingin ditampilkan

Tonton Video Lengkapnya

Download dan Instal WordPress

Sebenarnya cara untuk menginstal WordPress di localhost sudah sering kami bahas di artikel yang lainnya. Tapi daripada kamu kebingungan harus bolak-balik halaman bisa ikuti panduan dibawah ini ya.

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 (Usahakan nama file rename sama dengan nama Database yang dibuat)

Berikutnya Aktfikan Xampp (Apache dan MySQL) > Di browser ketikan localhost/database yang sudah dibuat pada langkah 2 > Pilih bahasa “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

Tonton Video Lengkapnya

Dibagian ini kamu bisa mengubah beberapa pengaturan Admin seperti Password, Email, Nama Admin, Password dan sebagainya

Caraya login ke dashboard WordPress > Pengguna > Profil. Silahkan ubah pengaturan yang ingin diubah > lalu perbarui Profil

Tonton Video Lengkapnya

Dibagian berikutnya kamu bisa mengubah foto profil untuk website kamu dengan cara membuat akun gravatar terlebih dahulu

Caranya login ke dashboard WordPress > Pengguna > Pada bagian Foto Profil. Klik “Anda dapat mengubah gambar profil Anda melalui Gravatar.” Selanjunya Create your Own Gravatar > Masukan Email, Nama pengguna dan password > klik buat akun > cek email yang di daftarkan lalu Aktfikan Akun

Kembali ke pengguna > profil > lalu klik kembali pada bagian Gravatar. Silahkan login dengan akun yang sudah dibuat tadi > Add New Image > Lalu upload foto yang diinginkan dan atur sesuai dengan keinginan

Kembali Ke dashboard WordPress. cek apakah foto profil admin sudah berubah. Jika belum kamu bisa menunggu nya beberapa saat atau menggantinya ketika website kamu sudah berada di Hosting

Tonton Video Lengkapnya

Berikutnya kita akan membuat Halaman seperti Home, About, Contact dan lainnya

Tonton Video Lengkapnya

Didalam pembuatan menu ini berfungsi untuk menampilkan menu apa saja yang ingin ditampilkan di halaman website. Baik itu menu yang dibuat pada langkah sebelumnya atau ingin menambahkan menu dengan tautan tertentu. Tentu sangat fleksibel sekali

Tambahkan Menu apa saja yang ingin ditampilkan > atur sesuai dengan urutan yang kamu inginkan > pilih lokasi penayangan > Simpan Menu

Tonton Video Lengkapnya

Untuk pembuatan Toko Online kali ini kita akan menggunakan Tema Ocean WP.

Cara untuk mennginstal Tema Login Ke dashboard WordPress > Tema > Tambah Baru. Cari Tema Ocen WP > insal dan aktifkan

Jika kamu gagal dalam penginstalan tema dengan cara ini kamu bisa mencobanya dengan cara yang lain, kunjungi artikel kami cara menginstal Tema

Tonton Video Lengkapnya

Setelah menginstal Tema Ocen Wp maka ada notifikasi untuk menginstal Plugin yang diharuskan. Oya jika kamu melihat divideo yang kami buat mungkin akan ada notifikasi untuk menginstal Elementor dan Ocean Extra. Namun setelah update Elementor tidak ada lagi kamu harus mengisntalnya sendiri

Klik instal di Ocean Extra lalu aktifkan

Berikutnya instal Elementor. Caranya klik plugin > Tambah Baru > Cari plugin Elementor > Instal dan Aktifkan

Tonton Video Lengkapnya

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

Section Apa Yang Kami Buat

Pada bagian ini kita akan membuat tampilan home page apa yang kita buat sperti gambar dibawah ini

Klk tanda (+) > masukan structure > Pertama drag Teks Heading dan edit sesuai keinginan seperti warna,dan lainnya.

Selanjutnya drag inner section kedalam section yang sudah dibuat dan duplicate menjadi 4 kolom > Selanjutnya drag image box ke dalam setiap inner section dan edit sesuai keinginan

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Kita kan membuat homepage bagian teknologi yang kita gunakan.Tepatnya seperti gambar dibawah ini

Buat Section > pilih Structure > drag teks Heading lalu edit sesuai keinginan

Drag inner section kedalam section yang sudah dibuat > klik kanan > Duplicate manjadi 4 bagian > selanjutnya masukan image box ke setiap bagian inner section lalu edit sesuai keinginan

Untuk background bagian ini saya menggunakan gambar > klik Edit section > Background (pilih gambar) > selanjutnya atur warna untuk background Overlay > untuk mengatur divider bottom klik shape divider pilih bagian bottom pilih divider yang diinginkan

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Add new section > Pilih structure (1 kolom) > masukan Inner section lalu Duplicate menjadi 3 bagian

Masukan counter pada setiap bagian section, Khusus kepuasan client kamu bisa menambahakan rating dengan menambahkan Star Ratting

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Klik Add New Section > Pilih Structure (1 kolom) > Drag Teks Heading dan edit teks sesuai keinginan > Selanjutnya Drag Inner Section dan duplicate menjadi 3 bagian

Selanjutnya Drag Testimonial ke bagian inner section yang sudah dibuat > untuk memberikan pewarnaan bisa klik bagian inner section lalu klik style > selanjutnya untuk memberikan efek radius klik Advanced lalu Border > Border Radius > dan sesuaikan dengan keinginan

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Add New Section > Pilih Structure (Kolom 1) > Drag Heading lau edit teksnya sesuai dengan keinginan

Drag Pos-pos terbaru ke section yang sudah dibuat (pastikan kamu sudah membuat pos terlebih dahulu)

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Add New section > pilih structure (1 kolom) > Drag Teks Heading lalu edit teks sesuai dengan keinginan > selanjutnya drag Sosial icons

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Pertama login ke Dashboard WordPress > Laman > cari laman Produk lalu Edit With Elementor

Klik Add New Section > Pilih Structure > Drag Teks Heading dan edit sesuai keinginan > Setelah itu Drag Basic Gallery dan masukan gambar yang diinginkan

Buat section baru lagi dan pilih structure

Selanjutnya buat section baru lagi > Add New Section > pilih structure (1 kolom) > drag image untuk bagian sebelah kiri. Drag Teks Heading, Text Editor, dan Button pada bagian sebelah kiri lalu edit sesuai keinginan > untuk pewarnaan bisa klik section yang membungkus lalu ke style dan klik background

Selanjutnya kamu bisa mengubah posisi gambar dari posisi sebelah kiri ke sebelah kanan atau sebaliknya untuk meyesuaikan saja > berikutnya kamu bisa klik duplicate

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Pada halaman blog ini kita tidak akan mengubah tampilan halamannya namun hanya akan sedikit melakukan pengaturan saja.

Pertama kamu bisa login ke Dasboard WordPress > ke pos > pilih salah satu pos dan edit > pada bagian ini kamu bisa mengatur kategori untuk pos, tag, Kutipan dan lainnya

Berikutnya kamu bisa ke halaman blog > klik sesuaikan > Blog. Di bagian ini kamu bisa mengatur berbagai settingan lainnya. seperti, Meta judul, menampilkan atau menyembunyikan penulis dan lainnya

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Add New Section > Pilih Satu Kolom > Pertama untuk background saya menggunakan gambar > klik stye dan pilih gambar yang diinginkan > berikan shape divider bottom yang ada dibagian style > atur tinggi konten, lebar dan lainnya dengan cara ke tab Layout dan atur

Drag Teks Heading dan Teks Editor, lalu edit sesuai dengan keinginan

Add new section > pilih structure (1 kolom) >Drag Video lalu atur lebar sectionnya

Berikutnya untuk desain kami menggunakan image overlay sebagai Thumbnail > untuk settingan lainnya bisa masuk ke bagian advanced > dan atur border dari image Overlay video

Berikutnya buat section baru lagi > Klik Add New Section > Drag Teks Heading dan Text Editor > edit sesuai dengan keinginan. Bagian ini kita buat untuk sejarah perusahaan, visi misi perusahaan

Berikutnya buat section bari lagi dan drag Basic Gallery > tambahkan gambar dan atur sesuai dengan keinginan

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Masuk ke laman > Edit With Elmentor > Add New Section > pilih 2 kolom. Pada bagian sebelah kiri masukan Teks Heading dan Form (Unutk pembuatan form sudah kami jelaskan di artikel yang lainnya) drag teks heading dan wp Form

Selanjutnya untuk bagian sebelah kanan kamu bisa drag Google maps dan icon list

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Tampilan > Sesuaikan > Header > Logo. Masukan Logo yang kamu inginkan > di bagian ini juga kamu bisa mengatur lebar logo, Tag alt, URL Logo dan yang lainnya.

Navigasi ini berfungsi untuk mengtur tampilan menu yang ada di bagian header. Seperti, warna, lebar antar menu, jenis font dan lainnya

Login ke WeorPress > tampilan > Sesuaikan > Navigasi. Kamu bisa mengatur warna font, background color, posisi menu dan lainnya

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Tampilan > Sesuaikan > Footer > Footer Bar > masukan Footer yang kamu inginkan

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Sidebar ini berfungsi untuk mengatur posisi sidebar yang ada di halaman blog. Apakah ingin ditampilkan di sebelah kanan atau kiri

Tampilan > Sesuaikan . General (umum) > Sidebar (Bilah sisi)

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

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

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

Homepage instal Woocommerce

Berikutnya kita akan menginstal Woocommerce. Caranya login ke dashboard WordPress > Plugin > Tambah baru > Cari plugin woocommerce > instal dan aktifkan. Jika muncul Notifikasi kamu bisa menskipnya terlebih dahulu

Jika gagal untuk menginstal plugin kamu bisa mengikuti cara lain untuk mengisntal plugin.

Tonton Video Lengkapnya

Ke tampilan > Sesuaikan > Menu > Buat Menu Baru > Pilih “ Top Bar”

Kembali ke Menu > Pilih Nama yang sudah dibuat > Tambahkan item menu apa saja yang ingin ditampilkan Di bagian Top Bar

Kembali kebagian menu > pilih pada menu Header yang kita buat sebelumnya di awal-awal > lalu singkirkan menu yang barusan kita pindahkan ke top bar di bagian menu header ini

Tonton Video Lengkapnya

Tampilan > Sesuaikan > Top Bar. Dibagian ini kamu bisa mengatur Posisi Menu dan juga background Top Bar

Tampilan > Sesuaikan > identitas situs > pilih favicon

Tampilan > Sesuaikan > Header > Logo

Di halaman Home Edit With Elementor > Add New section > pilih 2 kolom > Drag Teks Heading, Teks Editor,dan Button dibagian sebelah kiri

Dibagian kanan drag image dan ganti image nya.

Untuk memeberikan background klik Edit Section > Style > Background. Pilih warna yang diinginkan

Tonton Video Lengkapnya

Mengalami Sesuatu yang berbeda dengan di Tutorial ? Cek Artikel Berikut