Cara Membuat Website Sendiri Dari Nol Sampai Online Full Lengkap

Cara Membuat Website dari Nol Sampai Online – Full Lengkap

Halo Semuanya. Terimakasih Telah berkunjung ke blog kami ya. Sesuai Dengan Judul artikel kali ini kita akan membahas pembuatan website Company Profile Profile Dari Nol sampai online menggunakan WordPress. Mulai dari cara instal Xampp, instal WordPress sampai ke proses desain website nya

Jika kamu pernah mengunjungi artikel kami yang lain tentu sudah familiar dengan apa itu WordPress, karena kami sering membahasnya. WordPress atau CMS (Content managemet sistem) Adalah sebuah software yang mempunyai fungsi untuk membantu kita dalam membuat blog ataupun website dengan mudah, karena tanpa memakai coding kita sudah bisa membuat sebuah website yang menarik.

Baca Juga: Pengertian WordPress.com & WordPress.org – Yuk Simak

Jika Kurang Jelas, Bisa Lihat Video dibawah ini.

Ada beberapa persiapan dasar yang harus kita lakukan untuk membuat website Company Profile

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

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.

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

Persiapan Upload Hosting

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 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

Homepage produk lainnya

Dibagian ini kita akan menambahkan fitur yang terkait dengan produk. Seperti produk terbaru, produk favorit dan Terlaris. Namun hanya Headingnya atau Judulnya terlebih dahulu karena untuk isinya kita perlu mengupload produk dahulu

Add new section > Pilih kolom blank (satu) > drag Teks Heading dan Divider. Lalu edit sesuai keinginan. Kemudian Duplicate untuk yang lainnya dan ganti judulnya sesuai Kategori Produk yang ingin di tampilkan misalkan Produk Terbaru, Favorit dan sebagainya

Tonton Video Lengkapnya

Homepage yang akan dibuat seperti ini

Add new section > pilih satu kolom > drag inner section. Drag icon dan Teks Heading ke setiap Inner section. Lalu edit sesuai dengan keinginan

Tonton Video Lengkapnya

Dibagian ini kita akan sedikit mengkustom tampilan blog yang dimunculkan di Homepage

Contoh tampilan blog yang akan dibuat

Instal Plugin Essential Addons For Elementor > lalu buat section baru > Drag Post Grid. Maka post yang sudah dibuat akan muncul di homepage

Untuk membuat footer pada artikel kali ini silahkan ke Theme panel > My Library > Add New > Masukan nama menu yang diinginkan > Edit with Elementor > Add new section > pilih structure > Drag inner section > Masukan Teks Heading dan edit sesuai keinginan

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

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