Cara Membuat Website Sendiri Dari Nol Sampai Online Full Lengkap

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

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.

Beli Hosting dan Domain

Hal pertama yang dilakukan sebelum membuat website kamu online tentunya kita harus mempunyai Hosting dan domain. Untuk hosting sendiri kami merekomedasikan untuk menggunakan Niaga Hoster, ya sebenarnya kamu bebas menggunakan Hosting manapun

Cara membeli hosting di Niaga Hoster bisa kunjungi website resminya niagahoster.co.id kamu bisa memilih jenis server yang diinginkan apakah itu Shared hosting, Cloud Hosting atau VPS. Untuk proses pembelajaran kali ini kita menggunakan paket shared hosting > lalu pilih paket yang diinginkan

Tonton Video Lengkapnya

Video Full Tutorial Beli Hosting dan Domain

Langkah selanjutnya kamu harus mengupload file web dari localhost ke hosting dan domain.

Pertama Ekspor file web yang ada dilocalhost.caranya instal plugin All in One-Wp Migration. Lalu ekspor file web dengan cara klik plugin All in One WP Migration > lalu Ekspor

Langkah selanjutnya pastikan sudah menginstal WordPress di hosting yang sudah dibeli > instal plugin All in One Wp Migration dan ekstensi all in one wp migration.

Untuk ekstensinya kamu bisa download disini https://import.wp-migration.com/

Catatan : ekstensi ini hanya mendukung untuk file web maksimal sebesar 512mb untuk versi free nya

Berikutnya Impor file web ke WordPress yang sudah diinstal di hosting,

Klik tab all in one Wp Migration > Impor file dari berkas

Import berjalan > klik lanjutkan > proses berjalan kembali > setelah itu klik selesai, jika file telah selesai berhasi di import > Berikutnya kamu bisa refresh Dashboard WordPress > Login dengan Username dan password bawan dari localhost

Tonton Video Lengkapnya

Sebuah website wajib memasang SSL. Apa itu SSL? SSL adalah salah satu fitur untuk keamanan website yang wajib dipasang untuk sebuah webstie. SSL standar biasanya akan didapat secara gratis ketika kita membeli hosting.namun tergantung juga dengan kebijakan dari provider hosting

Bagaimana cara memasang SSL? Biasanya setiap Hosting akan memiliki panduan tertentu dalam Proses pemasangan SSL. Jika kamu menggunakan hosting dari niaga hoster kamu bisa mengikuti panduan dibawah ini

Cara memasang SSL di Niagahoster Cara Install SSL di Niagahoster

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

Persiapan Upload Hosting

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

Merapikan halaman Woocommerce

Dibagian ini kita akan menghilangkan beberapa fitur yang tidak kita inginkan. Seperti menghilangkan sidebar woocommerce di halaman detail produk . seperti gambar dibawah ini

Caranya : Masuk Ke Tab produk > lalu edit produk yang ingin dihilangkan sidebarnya > Scroll kebawah > dibagian OceanWp Settings, Content Layout ubah menjadi FullWidth

Tonton Video Lengkapnya

Sales Booster Notifikasi

Fitur ini sebenarnya hanya opsional saja.cara menambahakan fitur ini dengan cara menginsal Plugin NotificationX . Login ke dashboard WordPress > Plugin > Tambah Baru. Cari plugin NotificationX > Instal dan aktifkan

Selanjutnya klik Tab NotificationX > Add New > masukan nama desain yang diinginkan dan kamu bisa mendesain tampilan dari NotificationX Yang akan ditampilkan

Tonton Video Lengkapnya

https://youtu.be/Xicx8cNSyvU

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

Pengenalan Woocommerce

Dibagian ini kita akan melakukan sedikit pengaturan di Woocommerce yang sudah diinstal caranya ke Woocommerce > Pengaturan. Kamu bisa mengatur Alamat Toko, Target Penjualan, Mata Uang Dan Lainnya

Tonton Video Lengkapnya

Dibagian ini kita akan membuat kategori produk terlebih dahulu. Untuk Nama kategori produk usahakan relevan dengan produk yang dijual karena akan berpengaruh di SEO

Caranya Ke tab produk > Kategori > Masukan Nama Kategori, Slug > klik” Tambahkan kategori baru”. Dibagian ini juga kamu bisa membuat ketegori induk. Contoh kategori yang dibuat baju polos, baju kerah, baju batik maka induk kategori nya adalah baju

Tonton Video Lengkapnya

Kali ini kita akan memasukan produk kedalam Toko online kita. Untuk produk yang ktia masukan di dalam pembahasan kali ini hanya produk simple saja. Untuk produk yang mempunyai varian dan lainnya silahkan baca di artikel kami lainnya