Cara Membuat Website Sendiri Dari Nol Sampai Online ( Full Lengkap )
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
Beli Hosting dan Domain
Untuk Hosting dan domain kami merekomendasikan menggunakan NiagaHoster. Kamu bisa memilih paket yang kamu inginkan dan disesuaikan dengan kebutuhan
Artikel Lengkap : Niagahoster Hosting Terbaik di Indonesia, Cepat dan Berkualitas Tinggi.
Gunakan Kode Kupon : RAHMANDI10 saat checkout untuk mendapatkan ekstra potongan tambahan 10%
Catatan : Pastikan WordPress sudah terinstal terlebih dahulu di hosting kamu. Jika kamu belum tahu bagaimana cara mengisntal WordPress di hosting bisa kungjungi artikel kami yang lainnya
Artikel Terkait: Cara Install WordPress di Hosting Niagahoster
Sebelum upload ke internet kamu harus eksport dulu file yang website nya. Caranya Pasang Plugin All in-One WP Migration > Ekspor
Berikutnya silahkan Import File WordPressnya. Caranya
Tambahkan plugin ekstensi All in One WP Migration untuk menambah kapasitas impor download disini https://import.wp-migration.com/ > instal dan aktifkan > Klik all in one wp migration > import file
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
Jika Kurang Jelas, Bisa Lihat Video dibawah ini.
Untuk SEO Dasar ini kita akan mempraktekan untuk melakukan SEO di halaman Homepage saja. Untuk halaman berikutnya bisa kamu praktekan sendiri karena pada dasarnya sama saja.
Pastikan sudah menginstal Plugin Yoast SEO > Masuk kehalamana lalu klik sunting halaman tersebut
Berikutnya masukan kata kunci (Frasa Kunci Utama) yang berkaitan dengan konten website yang sedang dibuat > Masukan Judul SEO ,Slug, dan Deskripsi Meta
Selain itu kamu juga bisa melihat Analisis SEO dari halaman website kamu. > Klik Analisis SEO, maka kamu akan melihat apa saja hal-hal yang harus kamu lakukan.
Ketika mengatur SEO usahakan indikator sampai berwarna hijau
Kamu juga bisa mengatur Sosial share. Penejelasan sederhananya jika kamu share halaman tertentu ke facebook atau media sosial lainnya, maka nanti akan muncul gambar dan judul yang telah kamu atur.
Klik Sosial > Kamu bisa menambahkan gambar > dan Judul
Jika Kurang Jelas, Bisa Lihat Video dibawah ini.
Setelah membuat website tentunya sebagai pemilik website kita harus mengamankan website yang sudah dibuat. Walau pada dasarnya website yang kita buat dengan WordPress relative aman namun akan lebih baik jika kita menambahkan lagi fitur keamanan di website kita.
Nah untuk kemanan website sendiri tidak akan kami bahas satu artikel dengan pembuatan website company profile ini. Karena topik nya cukup panjang. Kamu bisa kungjungi di artikel kami lainnya
Artikel Terkait: Belajar Dasar Keamanan Website WordPress Yuk
Untuk Banner sendiri sebenarnya hanya opsional saja, dan tentunya banyak sekali jenis banner yang bisa kamu pasang. Contohnya, Pop up banner.
Di artikel kali ini kita akan menggunakan plugin simple banner untuk membuat bannernya.
Plugin > Tambah Baru > instal dan aktifkan plugin simple banner > Setelah aktif, Klik Tab Simple Banner
Selanjutnya pada bagian ini kamu bisa mengatur background dari banner, Warna teks, Isi teks dan lainnya
Contoh simple banner yang sudah dibuat
Jika Kurang Jelas, Bisa Lihat Video dibawah ini.
Analytic website tentunya sangat dibutuhkan, hal ini untuk mengetahui perkembangan website kita seperti jumlah pengunjung. Dengan analytic website ini kita bisa mengetahui jumlah pengunjung dan perilaku pengunjung di website kita. Seperti Berapa lama mereka berkunjung ke website kita, berapa halaman yang dibuka dan yang lainnya
Namun untuk pembahasan mengenai Analytic website ini kami sudah membahasnya di artikel yang lain
Artikel Terkait: Cara Pasang Analytic di Website Mudah dan Simple
Jika Kurang Jelas, Bisa Lihat Video dibawah ini.
Oke. Akhirnya kita sudah sampai materi terkahir pembuatan Website Company Profile Mengguanakan WodPress. Cukup panjang juga ya..Semoga artikel ini bisa teman-teman pahami dan diterapkan dalam pembuatan website.
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
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
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
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.
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
Download dan Install XAMPP
Kunjungi situs remsinya di https://www.apachefriends.org/index.html > Download sesuai sistem operasi yang digunakan
Cari File XAMPP yang telah kamu Download > Klik 2 kali pada file tersebut > Jika muncul peringatan Klik OK > Klik Next Untuk Mulai Setup WordPress > Centang Semua pada pilihan yang ada Klik Next
Selanjutnya pilih Folder untuk melakukan penginstalan (saran menggunakan Folder C saja) Klik Next > Proses Instalasi berjalan > Proses instalasi selesai (bisa centang do you want start control panel jika ingin menjalankan langsung) > Klik Finish > Pilih language
Artikel Lengkap : Begini Cara Download dan Install XAMPP
Jika Kurang Jelas, Bisa lihat video dibawah ini.
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
