Kami berusaha menyediakan website yang berguna untuk pengetahuan para pembaca, panduan singkat dan sederhana ini semoga menjadi jalan bagi kalian yang mengalami kesulitan dalam membuat blog di dunia maya, kami mengambil sumber dari blog Panduan Blog Online.com seandainya kalian berkenan langsung mengunjungi website tersebut, selamat menikmati!
Ada dua hal penting dan perlu Anda pikirkan ketika mempunyai bisnis online. Apalagi ketika Anda ingin mengiklankannya. Pertama, bagaimana iklan dapat menjangkau konsumen. Kedua, bagaimana cara menentukan audiens yang tepat sehingga dapat menghasilkan lebih banyak konversi.
Contohnya ketika ingin beriklan di Facebook. Bagi sebagian besar dari Anda mungkin sudah pernah membuat iklan menggunakan Facebook Ads –layanan iklan premium di Facebook. Ketika menggunakan Facebook Ads, meskipun berhasil menaikan konversi, terkadang hasilnya belum maksimal. Bahkan beberapa kasus tidak memberikan hasil yang menggembirakan.
Baca juga: Panduan Lengkap Membuat Facebook Ads
Supaya Anda bisa merencanakan perbaikan dan memaksimalkan potensi iklan Anda, perlu fitur tambahan yang dapat membantu Anda menganalisis dan memaksimalkan kinerja iklan yang Anda tawarkan. Fitur yang paling mungkin Anda gunakan adalah dengan memasang Facebook Pixel.
Mungkin sebagian besar dari Anda tidak mengetahui apa itu Facebook Pixel. Padahal fitur ini menyediakan segudang manfaat yang dapat mengembangkan bisnis Anda lebih baik lagi. Supaya Anda dapat memanfaatkan Facebook Pixel untuk mengembangkan bisnis, artikel ini akan membahas mengenai apa itu Facebook Pixel dan bagaimana cara memasangnya di WordPress.
Bagi Anda pengguna Facebook dan penggiat Digital Marketing seharusnya tidak asing lagi dengan Facebook Ads dan juga temannya, Facebook Pixel. Kedua layanan tersebut merupakan tools yang membantu seorang Digital Marketing untuk menjalankan strategi pemasaran.
Di antara kedua layanan tersebut, Facebook Pixel adalah layanan yang bermanfaat seperti Facebook Ads karena dapat menjadi alat bantu melakukan analisis pemasaran dan penargetan ulang (remarketing & retargeting) di Facebook. Namun secara default Facebook Pixel tidak berjalan secara otomatis di website sehingga Anda perlu memasangnya terlebih dahulu.
Bagi Anda yang membangun website menggunakan WordPress, semua hal yang terkait dengan pemasaran menggunakan Facebook menjadi cukup mudah untuk dilakukan. Apalagi WordPress merupakan CMS yang mempunyai banyak fitur untuk memulai bisnis online dan mendukung penggunaan Facebook Pixel.
Dengan mengkombinasikan Facebook Pixel dengan WordPress, Anda dapat memaksimalkan proses pemasaran dan mengurangi pengeluaran yang tidak perlu. Hal ini dikarenakan Facebook Pixel dapat mengenali tingkah laku pengunjung saat mengunjungi website dan memunculkan iklan yang sesuai dengan ketertarikan mereka.
Baca juga: Cara Membuat Instant Article Facebook di WordPress
Facebook Pixel tidak lain merupakan kumpulan kode JavaScript yang membantu Anda untuk mengukur efektivitas dan keuntungan banner iklan yang terpasang di Facebook.
Kumpulan kode ini dapat memahami tindakan atau tingkah laku pengunjung di website Anda. Dengan memanfaatkan kode program ini, Anda dapat menjangkau audiens yang sesuai dengan kesukaan masing-masing ketika ingin memunculkan iklan di browser pengunjung.
Tidak hanya itu, ketika Anda memasang Facebook Pixel di website, maka Anda akan dapat melakukan:
Facebook Pixel memungkinkan Anda untuk memantau aksi atau tindakan apa yang dilakukan user ketika mengakses website Anda dari Facebook Ads. Dengan demikian Anda dapat melakukan penghitungan konversi rate dari Facebook Ads yang Anda tampilkan. Anda bahkan dapat melihat jalur atau aktifitas apa saja yang pengunjung lakukan dari berbagai perangkat sebelum mereka melakukan pembelian atau pembayaran.
Dengan bantuan data yang terkumpul menggunakan Facebook Pixel, Anda bisa mendapatkan berbagai ide strategi pemasaran untuk meningkatkan Return on Advertising Spend (ROAS) dan memaksimalkan iklan Anda supaya bisa mendapatkan konversi yang lebih baik.
Kenapa bisa? Karena Facebook Pixel memastikan iklan Anda hanya akan tampil di halaman user atau pengguna Facebook sesuai dengan ketertarikan mereka masing-masing. Pengelompokan ini sesuai tingkah laku atau tindakan yang mereka lakukan ketika menjelajah website. Contohnya seperti membuka tab tertentu, menutup tab, atau melakukan pembeliaan.
Ketika menggunakan Facebook Pixel, Anda dapat mendistribusikan iklan kepada user sesuai kesenangan mereka terhadap produk Anda layanan yang disediakan. Contohnya ketika Anda malah memunculkan iklan yang sama dengan waktu pengunjung melihat website Anda tetapi tidak melakukan pembelian.
Facebook Pixel menyediakan dashboard yang cukup powerful. Anda dapat menelusuri semua trafik yang masuk ke dalam website. Anda bisa mendapatkan banyak informasi yang sangat membantu tentang bagaimana pengunjung Anda berinteraksi dengan website dan mengelompokkan audiens untuk menentukan bagaimana seharusnya Facebook Ads bekerja.
Facebook Pixel juga dapat mengembangkan potensi pelanggan dengan mencarikan pelanggan baru di Facebook. Jadi Anda dapat memanajemen pelanggan yang sudah ada sekaligus mendapatkan pelanggan baru. Anda dapat menggunakan data hasil pelacakan untuk mendapatkan audiens baru yang mempunyai kesukaan dan minat yang serupa dengan pelanggan yang sudah ada.
Baca juga: Cara Membuat Live Chat di Website dengan Facebook Messenger
Anda tahu Google Analytics? Pada dasarnya cara kerja Facebook Pixel tidak berbeda dengan Google Analytics. Sama halnya dengan Google Analytics, Facebook Pixel juga termasuk fitur yang berjalan di balik layar.
Fitur ini menggunakan file gambar unik yang hanya berukuran 1×1 yang berisi beberapa baris kode untuk mencatat perilaku pengunjung website. Ketika ada seseorang yang mengunjungi website dan melakukan aktivitas, file gambar yang sudah dimasukan beberapa baris kode tadi akan meningkatkan otoritas HTTP cookie supaya dapat memerintahkan browser untuk mengunduh cookies dari server Facebook ke perangkat pengunjung yang dipakai untuk mengakses website.
Tujuan dari proses pengunduhan ini tentu saja supaya Facebook Pixel dapat dengan mudah melacak secara tepat berapa kali file gambar tersebut telah diunduh, kapan waktunya, dan oleh siapa. Bahkan melalui file gambar ini, Facebook Pixel dapat melacak jenis browser, tipe perangkat, sistem operasi dan alamat Internet Protocol (IP) yang digunakan untuk mengakses.
Semua informasi ini didapatkan berkat gambar unik yang ditanamkan di dalam file website. Melalui semua informasi ini, Facebook dapat menghasilkan data digital dari setiap pengunjung website.
Tidak sampai di situ, ketika pengunjung login ke dalam akun Facebook miliknya menggunakan browser yang sama, Facebook akan memetakan gambar yang telah diunduh ke dalam sebuah Facebook ID yang spesifik. Dengan demikian, berdasarkan penelusuran perilaku pengguna, Facebook Pixel memungkinkan Anda untuk menayangkan iklan bertarget dari data yang sudah dikumpulkan.
Singkatnya, Facebook Pixel yang sudah terhubung dengan website akan mengambil cookies dari browser kemudian disimpan ke dalam Facebook supaya iklan Facebook yang muncul di halaman Facebook pengunjung sesuai dengan isi cookies mereka.
Baca juga: Cara Mudah Menambahkan Tombol Like Facebook di WordPress
Cara menggunakan Facebook Pixel di WordPress langkahnya cukup sederhana. Anda hanya perlu menjalankan kedua langkah di bawah ini:
Langkah pertama yang perlu Anda lakukan adalah membuka tab Pixels di Facebook Ads Manager. Anda dapat langsung membuka halaman tersebut menggunakan tautan ini.
Facebook Pixel hanya dapat dibuat untuk satu akun saja. Jika belum membuat Facebook Pixel, Anda dapat mengklik tombol hijau (Create a Pixel) untuk membuat pixel:
Pada halaman ini Anda akan mendapatkan informasi terkait dengan kegunaan dari Facebook Pixel, seperti melacak aktivitas website, menghitung laba dari iklan, dan bagaimana cara menjangkau pelanggan baru dan lama. Semua ini ditawarkan oleh Facebook Pixel untuk Anda.
Setelah Anda membaca beberapa informasi yang tersedia, cukup klik “Create Pixel”.
Untuk memulai proses pelacakan (tracking), Anda perlu menambahkan pixel –yang mana ini adalah kode snippet– ke dalam website. Snippet ini adalah gambar berukuran kecil yang tidak akan tertampil di halaman website Anda. Kode ini mirip dengan yang digunakan oleh Hstat ketika ingin mengoleksi trafik di website.
Maka dari itu, Anda akan melihat beberapa opsi untuk memasang Pixel Facebook ke website Anda. Pada bagian ini terdapat tiga pilihan, yaitu “Connect a partner platform”, “Manually install pixel code yourself”, dan “Email instructions to a developer”.
Karena Anda akan memasang Facebook Pixel, jadi klik “Manual Install the Code Yourself” untuk meneruskan ke langkah selanjutnya.
Opsi “Connect a partner platform” dipilih ketika Anda ingin menambahkan tracking code ke salah satu pilihan platform yang tersedia seperti Magento, BigCommerce, Magento, dan Segment.
Sedangkan opsi “Email instructions to a developer” dipilih ketika Anda ingin menambahkan tracking code lain waktu –atau tidak saat itu juga.
Kemudian akan muncul layar untuk menginstall pixel.
Di bagian ini terdapat instruksi yang perlu Anda ikuti untuk memasang pixel code ke dalam website Anda. Tidak perlu pusing karena Anda hanya perlu menyalin (copy) kode yang ada di poin ke-2 (copy the entire pixel code and paste it …) dan kemudian menyimpannya.
Anda perlu menyimpan kode ini karena nantinya akan digunakan pada langkah selanjutnya.
Meskipun ada banyak cara untuk menambahkan tracking code ke WordPress, tapi cara yang paling sederhana adalah dengan menggunakan plugin Insert Headers and Footers. Supaya dapat menggunakan cara ini, Anda harus mempunyai akses dashboard WordPress karena dibutuhkan untuk proses instalasi plugin.
Setelah Anda masuk ke dalam dashboard WordPress, gunakan langkah-langkah sederhana di bawah ini untuk menambahkan kode pixel ke dalam website Anda:
Selesai! Anda sudah selesai memasang Facebook Pixel di WordPress.
Supaya yakin bahwa Facebook Pixel terpasang di halaman website, Anda harus melakukan pengecekan terlebih dahulu. Jadi bagaimana cara melakukan pengecekan Facebook Pixel di website?
Ketika Anda sudah selesai memasangkan Facebook Pixel di website dan ingin melakukan pengecekan. Hal yang perlu Anda lakukan adalah menginstal Chrome Extension untuk mengecek ada tidaknya Facebook Pixel yang ada di sebuah halaman website.
Langkah pertama yang perlu Anda lakukan adalah menginstall Facebook Pixel Helper Chrome extension. Setelah ekstensi Chrome sudah aktif, akses halaman website yang sudah Anda tambahkan Facebook Pixel.
Jika Facebook PIxel Anda sudah berjalan dengan baik, Anda akan melihat informasi seperti di bawah ini ketika Anda klik ekstensi yang sudah diinstall tadi.
Jika semua tidak ada masalah, Anda berhasil memasang dengan baik Facebook Pixel ke WordPress. Sampai dengan bagian ini, Anda sudah dapat melakukan remarketing, conversion tracking, dan custom audiences.
Langkah memasang Facebook Pixel di WordPress cukup sederhana dan mudah. Anda tinggal membuat Facebook Pixel melalui halaman Facebook untuk mendapatkan kode pixel (tracking code) yang nantinya disematkan di dalam file website. Supaya lebih mudah dan tidak terjadi perubahan ketika tema WordPress diperbarui, langkah yang paling aman adalah menggunakan plugin.
Langkah memasang Facebook Pixel yang mudah ini bukan berarti tidak mempunyai manfaat yang banyak, justru dengan adanya Facebook Pixel di website dapat digunakan untuk mendapatkan data dari pelanggan dan menganalisisnya sehingga dapat merencanakan langkah ke depan.
Semoga artikel memasang Facebook Pixel di WordPress ini bermanfaat untuk Anda. Jika masih ada pertanyaan jangan sungkan untuk meninggalkan komentar melalui kolom di bawah ini, atau jika Anda menyukai artikel dari kami silakan mengisi form subscribe yang juga tersedia di halaman ini.
Source:niagahoster.com
Kami berusaha menyediakan website yang berguna untuk pengetahuan para pembaca, panduan singkat dan sederhana ini semoga menjadi jalan bagi kalian yang mengalami kesulitan dalam membuat blog di dunia maya, kami mengambil sumber dari blog Panduan Blog Online.com seandainya kalian berkenan langsung mengunjungi website tersebut, selamat menikmati!
Plugin pada WordPress memegang peranan yang cukup penting. Selain menyediakan beragam fitur menarik bagi website WordPress Anda, fitur yang dipasang juga terpisah dari sistem coding website utama. Dengan cara ini, website WordPress Anda tetap dapat berjalan dengan baik jika sewaktu-waktu plugin mengalami kesalahan.
Pada tutorial ini kami akan membahas cara membuat plugin WordPress yang berguna sebagai tool menciptakan halaman admin sendiri. Ulasan ini kami berikan langkah demi langkah, mulai dari pemahaman dasar untuk membuat plugin.
Sebelum memulai langkah pada tutorial ini, Anda membutuhkan:
Plugin WordPress adalah kumpulan dari kode yang berdiri sendiri dan dapat berfungsi menambahkan fitur website WordPress Anda. Terdiri dari kombinasi PHP, HTML, CSS, JavaScript/jQuery, atau bahasa pemrograman web lainnya.
Sebuah plugin dapat menambahkan fitur baru pada bagian lain dari website Anda, termasuk pada dashboard admin. Anda dapat mengubah tampilan bawaan dari WordPress atau menghapus bagian yang tidak diinginkan.
Sehingga, sebuah plugin memungkinkan Anda dapat melakukan perubahan pada WordPress sesuai dengan yang diinginkan.
Karena plugin WordPress berdiri sendiri, sehingga tidak mengubah code utama pada WordPress. Selain itu, plugin tersebut dapat diinstal pada website lain yang menggunakan WordPress.
Alternatif lain untuk melakukan perubahan pada WordPress adalah dengan membuat function baru pada file functions.php, yang tersimpan pada folder /wp-includes/, atau pada file functions.php dri template. Tapi cara ini tidak kami sarankan ketika membuat plugin WordPress.
WordPress dan template akan menerima update terbaru secara berkala, sehingga ketika file functions.php diperbaharui ketika dilakukan update, maka code yang Anda buat akan terhapus.
Lain halnya dengan plugin, karena scriptnya tidak akan terhapus ketika dilakukan update pada WordPress atau template. Selain itu, jika code plugin Anda mengalami error, Anda hanya perlu menonaktifkan plugin dan error akan segera teratasi.
Selain itu, jika plugin mengalami error yang cukup serius, maka secara otomatis WordPress akan menonaktifkannya.
langkah pertama yang dilakukan ketika akan membuat plugin adalah membuat folder untuk menyimpan semua file dari plugin yang Anda buat. Untuk plugin akan tersempan pada folder /wp-content/plugins/.
Sebaiknya nama folder Anda kreasikan secara unik agar tidak terbalik dengan plugin lain.
1. Akses hosting Anda menggunakan FileZilla.
2. Kemudian, akses folder wp-content > plugins.
3. Buat folder baru dengan nama plugin-pertamaku.
[ecko_alert color=”gray”]Catatan: Jika Anda ingin membuat plugin dengan beberapa file CSS, Anda perlu membuat folder dengan nama CSS di dalam folder plugin yang Anda buat. Sama halnya jika Anda ingin menggunakan JavaScript. Folder JavaScript juga perlu Anda buat dalam folder plugin Anda.[/ecko_alert]
File pertama untuk plugin yang Anda buat adalah cukup penting karena berisi semua informasi yang dibutuhkan WordPress untuk menampilkan plugin yang dibuat pada daftar. Anda dapat mengaktifkan plugin tersebut melalui dashboard WordPress.
1. Silakan buat file dengan nama plugin-pertamaku.php di dalam folder plugin-pertamaku. Kami menyarankan Anda membuat nama file pertama sama dengan nama folder plugin.
2. Klik kanan pada file plugin-pertamaku.php, pilih View/Edit, kemudian tambahkan pada baris pertama tag PHP pembuka yaitu <?php.
3. Masukkan komentar pertama sesuai dengan nama plugin, diawali dengan tanda `/*` dan diakhiri dengan tanda` */`, seperti kode di bawah ini.
<?php/*Plugin Name: Plugin Pertamaku*/
4. Silakan simpan file tersebut dan pastikan bahwa Anda menyimpannya dalam folder plugin-pertamaku.
5. Untuk melihat perubahan, silakan login ke dashboard WordPress Anda, kemudian akses menu Plugins > Installed Plugins dan Anda akan melihat plugin yang Anda buat.
6. Setelah menambahkan nama, selanjutnya Anda perlu menambahkan deskripsi, nama Anda, link ke website Anda, versi plugin, dan lain-lain. Saat ini kami akan menambahkan deskripsi dan nama terlebih dahulu. Berikut ini adalah kodenya.
<?php/*Plugin Name: Plugin PertamakuDescription: Ini adalah plugin pertamaku! Ini membuat menu admin baru!Author: Nama Anda*/
7. Setelah file di-update, silakan refresh halaman plugin. Anda akan melihat deskripsi serta nama seperti gambar di bawah ini.
Cara terbaik ketika membuat plugin adalah dengan memisahkan kode ke dalam file dan folder yang sesuai.
1. Pada folder utama plugin yang bernama plugin-pertamaku, silakan buat folder baru dengan nama includes.
2. Di dalam folder includes, silakan buat file dengan nama pp-functions.php, File ini akan menyimpan semua function dari plugin Anda. (catatan: untuk pp dibuat supaya unik dan tidak bentrok dengan plugin lain, Anda dapat memberi nama lain yang unik)
3. Tambahkan tag PHP pembuka di baris pertama <?php di dalam file pp-functions.php.
4. Silakan buka kembali file plugin-pertamaku.php sebelumnya yang berada di dalam folder plugin yang Anda buat. Ini merupakan file utama dari plugin, sehingga perlu disertakan melalui file tersebut. Tujuannya supaya function dapat digunakan oleh file lain di dalam plugin Anda.
5. Masukkan kode di bawah ini ke dalam file plugin-pertamaku.php untuk memperbarui kode sebelumnya.
<?php/*Plugin Name: Plugin PertamakuDescription: Ini adalah plugin pertamaku! Ini membuat menu admin baru!Author: Nama Anda*/// Include pp-functions.php, gunakan require_once untuk menghentikan script jika file pp-functions.php tidak ditemukanrequire_once plugin_dir_path(__FILE__) . 'includes/pp-functions.php';
6. Silakan kembali lagi ke file pp-functions.php yang berada di dalam subfolder includes. Kami menyarankan Anda untuk mengelompokkan function sejenis serta menambahkan baris komentar di setiap kelompok function tersebut.
7. Nama function yang akan kami buat adalah pp_Tambah_Link_Admin(). Function tersebut akan menambahkan link pada menu navigasi dashboard admin WordPress.
6. Silakan edit file pp-functions.php dan tambahkan kode di bawah ini:
<?php/* * Menambah menu baru di dashboard admin WordPress */ // Menambahkan link menu di dashboard admin WordPressfunction pp_Tambah_Link_Admin(){ // code diletakkan di sini}Di dalam function, perlu menggunakan function built-in add_menu_page() untuk membuat nama pada menu, judul, serta menentukan siapa yang dapat melihatnya.
Berikut adalah parameter utama yang diperlukan dari add_menu_page():
Sebelum ke langkah selanjutnya, Anda perlu mengetahui cara lain menggunakan function tersebut. Parameter keempat dapat berupa text string yang ditampilkan pada URL setelah ‘wp-admin/admin.php?page=’.
Jika Anda mengakses ‘halaman-plugin’, maka url akan menjadi ‘wp-admin/admin.php?page=halaman-plugin’.
7. Edit file pp-functions.php, kemudian hapus baris // code diletakkan di sini, ganti dengan add_menu_page() dan tambahkan parameter seperti kode di bawah ini:
<?php/* * Menambah menu baru di dashboard admin WordPress */ // Menambahkan link menu di dashboard admin WordPressfunction pp_Tambah_Link_Admin(){ add_menu_page( 'Halaman Pertama', // Judul dari halaman 'Plugin Pertamaku', // Tulisan yang ditampilkan pada menu 'manage_options', // Persyaratan untuk dapat melihat link 'my-plugin-page', // slug dari file untuk menampilkan halaman ketika menu link diklik. 'tampil' );}function tampil(){ require_once 'mfp-first-acp-page.php';}Supaya function di atas dapat dijalankan, diperlukan untuk menggunakan function WordPress add_action() dengan dua parameter yang ditambahkan ke Action Hook.
Parameter pertama adalah action hook yang ingin Anda targetkan. Pada kasus ini action hook adalah admin_menu, yang berarti function tersebut akan dijalankan ketika menu admin di-generate.
Parameter kedua adalah memberi nama function yang akan dijalankan. Function tersebut akan diberi nama pp_Tambah_Link_Admin. Scriptnya sendiri akan terlihat seperti berikut ini:
<?php/* * Menambah menu baru di dashboard admin WordPress */ // Hubungkan action hook 'admin_menu', jalankan function bernama 'pp_Tambah_Link_Admin()'add_action( 'admin_menu', 'pp_Tambah_Link_Admin' ); // Menambahkan link menu di dashboard admin WordPressfunction pp_Tambah_Link_Admin(){ add_menu_page( 'Halaman Pertama', // Judul dari halaman 'Plugin Pertamaku', // Tulisan yang ditampilkan pada menu 'manage_options', // Persyaratan untuk dapat melihat link 'my-plugin-page', // slug dari file untuk menampilkan halaman ketika menu link diklik. 'tampil' );}function tampil(){ require_once 'mfp-first-acp-page.php';}Kemudian, unggah file pp-functions.php ke dalam folder includes dan timpa file sebelumnya.
Berikutnya adalah membuat halaman plugin untuk menampilkan halaman ketika link dari menu admin diklik. Silakan buka kembali subfloder includes dan buat file PHP baru dengan nama pp-halaman-pertama-daw.php. Kemudian, letakkan kode di bawah ini ke dalam file tersebut.
<div class="wrap"> <h1>Halo!</h1> <p>Ini adalah halaman plugin pertamaku</p></div>
Ketika Anda membuat halaman admin, WordPress merekomendasikan Anda untuk menyertakan HTML dengan div dan memberinya class “wrap”, seperti yang terlihat pada kode di atas.
Tujuan dari hal ini adalah untuk memastikan semua konten Anda muncul di tempat yang seharusnya, seperti halaman admin lainnya.
Pada langkah ini, proses membuat plugin WordPress sudah selesai dilakukan. Silakan akses halaman Plugins di dashboard WordPress, kemudian aktifkan plugin yang telah Anda buat.
Setelah itu silakan klik menu yang berada di sebelah kiri dengan nama Plugin Pertamaku. Anda akan melihat tampilan halaman seperti gambar di bawah ini.
Jika percobaan yang Anda lakukan sudah berhasil menampilkan halaman dari plugin, berarti Anda sudah memulai langkah pertama untuk membuat plugin WordPress dengan fitur lengkap. Apabila Anda memiliki pertanyaan atau masukan sehubungan dengan tutorial membuat plugin WordPress ini, jangan ragu untuk meninggalkan komentar pada kolom yang tersedia.
Silakan Subscribe pada kolom yang tersedia untuk mendapatkan artikel terbaru langsung di inbox email Anda! ?
Kini Anda bisa membuat website instan dengan WordPress langsung online dalam lima menit.
Ikuti tautan di bawah ini untuk mendapatkan informasi lebih lanjut!
Source:niagahoster.com
Kami berusaha menyediakan website yang berguna untuk pengetahuan para pembaca, panduan singkat dan sederhana ini semoga menjadi jalan bagi kalian yang mengalami kesulitan dalam membuat blog di dunia maya, kami mengambil sumber dari blog Panduan Blog Online.com seandainya kalian berkenan langsung mengunjungi website tersebut, selamat menikmati!
Sudahkah Anda memiliki website? Kami yakin Anda sudah memilikinya karena website merupakan media populer untuk pemasaran bisnis/usaha Anda. Selain berfungsi sebagai media pemasaran, website juga merupakan cerminan bagi perusahaan Anda, maka desain website yang profesional itu penting untuk dimiliki.
Kredibilitas sebuah bisnis dapat dinilai dari bagaimana website Anda ditampilkan.
Sayangnya, banyak pelaku bisnis kurang memperhatikan tampilan website mereka. Padahal, kesalahan sepele dalam pembuatan desain website dapat berakibat fatal. Berikut adalah 6 kesalahan umum yang sering dilakukan ketika mendesain sebuah website.
Sumber dari website Envato themeforest.
Tak kalah dengan Avada theme, jika Anda telah terbiasa menggunakan WordPress, Anda pasti sudah familiar dengan template ini.
Sumber dari website wordpress.org
Atau, bahkan template seperti di bawah ini.
Sumber Betheme. themeforest.net
Benar kan? Anda pasti sering melihat style design website seperti di atas. Dari ketiga contoh gambar yang ditampilkan, dapat disimpulkan bahwa peletakan semua elemen desainnya hampir sama. Jika dibuat sketsa, ketiga tampilan di atas akan tampak seperti ini.
Anda dapat melihat sendiri kecenderungan pola desainnya. Logo selalu ditempatkan pada bagian kiri atas header, menu navigasi di samping kanan, image slider di bagian bawah header, kemudian image poin utama yang menunjukan keunggulan dari setiap bidang usaha dalam website tersebut.
It’s ok, no problem if you use a website template like that.
OK, tidak apa-apa jika Anda menggunakan template seperti itu. Namun, ada beberapa hal yang perlu Anda perhatikan untuk kustomisasi template yang Anda gunakan.
Mungkin terdengar agak aneh mengapa logo perlu dituliskan di sini karena pasti Anda sudah mengerti bahwa logo termasuk identitas dari perusahaan Anda. Eits.. jangan salah sangka terlebih dahulu. Hal ini perlu disampaikan mengingat logo sering disepelekan. Bahkan, masih banyak pelaku bisnis yang menggunakan logo asal jadi atau alakadarnya. Bagi Anda yang memiliki usaha, terutama UKM, perkaya pemahaman Anda mengenai pentingnya sebuah logo di artikel kami selanjutnya: Mengapa UKM Perlu Logo Profesional.
Berikut adalah contoh logo profesional dari beberapa perusahaan besar di dunia.
Anda merasa tidak memiliki kemampuan mendesain logo secara profesional? sebagai alternatif Anda dapat mencoba beberapa situs jasa pembuat logo gratis berikut.
Tersedia banyak template/clipart menarik yang memudahkan Anda untuk melakukan kustomisasi logo yang Anda inginkan. Anda hanya perlu memilih clipart yang tersedia di Logomakr dan memberikan teks, setelah itu tinggal save dan logo yang Anda buat akan secara otomatis diunduh dengan format .png yang cukup ditampilkan pada website Anda. Namun sayangnya untuk mendapatkan High Resolution (format vector) Anda harus membayar $19 supaya bisa dicetak di berbagai media
Hampir sama dengan Logomakr, Logogarden menyediakan clipart menarik yang dapat Anda kustomisasi sesuai keinginan. Akan tetapi, dalam versi gratisan Logogarden Anda hanya mendapatkan file low resolution .jpg sedangkan untuk mendapatkan file High Resolution Anda cukup membayar $12.
Saat pertama kali dilihat, sekilas banner slider memang terlihat sangat menarik karena tampilannya yang dinamis. Akan tetapi tahukah Anda bahwa slider dapat merusak kinerja website?
Hal inilah yang pada akhirnya akan membuat para pengunjung meninggalkan website Anda. Jadi silakan pertimbangkan kembali pentingnya fitur slider ini, ya!
Slider bukanlah satu-satunya fitur yang dapat membuat website terlihat lebih dinamis. Tata letak (baca: layout) yang bagus berikut penggunaan animasi yang sesuai juga dapat memberikan dampak baik bagi website Anda. Salah satu contoh layout yang bagus adalah seperti yang diterapkan oleh Cleverbird.com
Penggunaan image yang sesuai dengan jasa yang ditawarkan, kualitas gambar yang bagus kemudian penempatan teks posisi ditengah yang membuat mata pengunjung lebih fokus kepada apa saja yang ditampilkan di website Cleverbird.com, beserta animasi yang sederhana dan tidak mengganggu mata itulah yang menjadikan Layout website ini pantas Anda jadikan inspirasi.
Baca Juga: Mengapa UKM Memerlukan Desain Logo Profesional?
Benar sekali. Kontak adalah hal yang penting untuk ditampilkan dalam website. Silakan lihat kembali tiga template yang ditampilkan di atas. Sebagian besar bahkan tidak menampilkan kontak.
Dengan adanya kontak atau nomor telepon, website Anda terlihat lebih terpercaya.
Nah, inilah poin utamanya: membangun kepercayaan pengunjung. Bayangkan jika Anda sudah membuat website sedemikian bagus namun Anda malah tidak menampilkan kontak. Apa jadinya?
Baik, mari kita lanjutkan. Lantas bagaimana penempatan kontak yang baik? Pada umumnya, kontak diletakkan pada bagian Header. Fungsinya adalah untuk mencuri kesan pertama pengunjung ketika pertama kali melihat website Anda. Berikut ini beberapa inspirasi website dengan penempatan kontak yang sangat baik.
Silakan lihat kotak berwarna merah, Bluehost meletakkan kontak di bagian atas sebelah logo dimana kebanyakan mata manusia melihat konten website dari kiri ke kanan sehingga hal ini akan memudahkan pengunjung untuk menemukan kontak yang ditampilkan.
Sama dengan bluehost, Zappos meletakkan kontak di bagian header diatas logo berguna untuk mempermudah pengunjung menemukan kontak yang ditampilkan di website.
Berbeda dengan kedua contoh diatas roosterschicken.com menempatakan kontak disisi kanan, dengan menggunakan backgroud warna kuning dan teks kontak lebih besar serta menggunakan warna hitam sehingga tampilan kontak kontrast dan mempermudah pengunjung menemukannya.
Salah satu bagian yang penting ketika membangun desain website adalah foto. Pemilihan foto atau gambar yang tepat dapat menyampaikan jutaan makna, karena foto yang baik dapat menyampaikan emosi, memberikan perintah untuk melaksanakan aksi, menjelaskan fitur atau produk secara rinci, bahkan menggambarkan konsep tanpa harus membaca sebuah kata dalam promosi
A good website starts with a good image.
Begitu juga sebaliknya. Foto yang kurang baik dapat memberikan kesan buruk bagi website Anda. Perlu Anda ketahui juga bahwa foto/gambar yang baik digunakan dalam website tidak melulu harus High Resolution (beresolusi tinggi). Mengapa? Resolusi yang terlalu tinggi dapat turut mempengaruhi kinerja website Anda, dan berpotensi memperlambat kecepatan akses. Jadi, silakan pertimbangkan baik-baik penggunaan foto untuk website Anda.
Adapun untuk mengoptimalkan kualitas foto/gambar yang Anda gunakan agar tetap dalam ukuran kecil, Anda dapat menggunakan tool optimizer online berikut ini.
Tools online ini bisa mengoptimasi file image Anda sampai 70%, maksimal proses dalam sekali optimasi 20 image dan setiap image maksimal berukuran 5MB, Hanya untuk optimasi file berekstensi .jpg dan .png.
Lain halnya dengan tinypng. Tools ini dapat mengoptimasi file image hingga 90%, tak hanya bisa mengotimasi file berekstensi .jpg dan .png tools ini juga bisa mengoptimasi file .gif dan .svg. Maksimal file untuk dioptimasi 10MB namun sayangnya hanya dapat memproses 1 image sekali optimasi.
Di sinilah Anda harus berpikir lebih keras lagi. Pada bagian Navigasi Anda harus bisa memahami apa yang sebenarnya Anda dan para pengunjung website inginkan.
Menentukan navigasi dapat digambarkan seperti meletakkan pondasi awal rumah.
Kegagalan dalam menentukan pondasi awal dapat beresiko mengakibatkan rumah Anda roboh.
Ada cara cepat yang bisa Anda tempuh untuk menentukan navigasi seperti apa yang akan Anda gunakan: bertanya pada diri Anda sendiri. Apa yang perlu Anda tanyakan?
Berikut adalah beberapa hal yang dapat Anda tanyakan kepada pada diri Anda untuk membantu mempersiapkan skema navigasi.
Dengan menjawab semua hal di atas dan memahami bagaimana konten website Anda saling berkaitan, Anda akan menemukan dasar dalam menentukan navigasi yang baik. Berikut adalah beberapa contoh website dengan navigasi baik yang bisa Anda jadikan inspirasi.
Simple is better
Inilah yang diterapkan oleh designmuseum, dimana hanya ada 1 menu di atas dan memanfaatkan scroll sebagai navigasi utama, berdasarkan kebiasaan para pengguna internet ketika mengunjungi sebuah website.
indicate content to users
Mempertegas navigasi menggunakan icon agar memudahkan pengguna untuk memahami konten didalam navigasi yang disajikan
show the most important
Karena sebuah agency yang dibutuhkan informasinya oleh pengunjung berupa portfolio/work, Deskripsi layanan dan Kontak maka hanya ada 3 menu navigasi di website yang diterapkan oleh manifold.
Bicara tentang desain tidak akan lepas dari urusan tipografi dan warna. Karena topik ini tidak akan ada habisnya jika dibahas dan penjelasannya berpotensi sangat panjang, kami tidak akan membahasnya secara rinci di sini.
Penggunaan tipografi dan warna yang sesuai dapat membuat desain website Anda lebih konsisten dengan brand (identitas) perusahaan Anda.
Percaya atau tidak (tapi sebaiknya Anda percaya, trust me I’m a designer), kebanyakan pengunjung datang ke website hanya untuk membaca apa yang Anda tawarkan. Bentuknya bisa bermacam-macam, baik itu artikel, review produk, maupun informasi mengenai usaha Anda. Mereka mengunjungi website Anda untuk membaca teks dan jarang sekali memperhatikan warna atau elemen desain lain yang Anda gunakan.
Maka dari itu, perhatikan dengan seksama pemilihan tipografi dan warna ketika membangun sebuah website. Bahkan ketika Anda merasa sudah memiliki warna serta tipografi favorit, alangkah baiknya jika Anda lebih berhati-hati.
Berikut adalah beberapa website dengan perpaduan sangat baik antara tipografi dan warna yang dapat Anda jadikan inspirasi.
Contoh desain yang clean, minimalist dan terkesan elegant.Dengan sentuhan hangat warna cokelat muda sebagai warna latar belakang dan dipadukan dengan penggunaan typografi Type Serif semakin memperjelas kesan mewah dari produk yang ditawarkan.
Ingin menampilkan kesan yang resmi, profesional dan clean L’avenir adalah contohnya. Memadukan warna hijau dan orange serta abu-abu muda sebagai warna latar belakang dan typografi sans serif untuk mempertegas citra profesional.
Bagi Anda yang belum tahu apa itu Call to Action beberapa contoh berikut ini bisa membantu Anda lebih memahaminya lagi. Pernahkah Anda mengunjungi halaman awal Facebook seperti ini?
Atau mengunjungi halaman awal WordPress seperti ini.
Atau Anda gemar berbelanja online di Lazada yang memiliki halaman seperti ini?
Dari tiga gambar di atas, coba Anda perhatikan bagian yang ditandai kotak berwarna merah. Bisa jadi saat ini Anda berpikir bahwa ini adalah sebuah tombol. Ya, benar sekali. Call to Action (biasa disingkat sebagai CTA) memang biasanya berbentuk tombol yang diletakkan dalam sebuah website. Tujuannya agar pengunjung melakukan suatu tindakan (misalnya tombol “Daftar Sekarang!“), mengarahkan pengunjung ke halaman website dengan informasi yang lebih lengkap (misalnya tombol “Selengkapnya …“) dan lain-lain.
CTA yang baik idealnya dapat meningkatkan penjualan dalam sebuah website.
Salah satu faktor yang mempengaruhi hal ini adalah desain visual CTA. Di sini ada dua elemen utama yang perlu Anda perhatikan: tombol dan teks.
Berikut adalah contoh website dengan CTA menarik yang bisa Anda jadikan inspirasi.
Tombol CTA dengan warna kuning dan teks “Get Started For Free” yang sangat jelas dan mudah terbaca akan menyita perhatian pengunjung untuk segera menekan ( meng-klik) tombol tersebut.
Penempatan tombol CTA yang sempurna, diantara 2 image dan tepat posisi ditengah beserta teks copy “Try Zendesk For Free” membuat design CTA semakin jelas terlihat dan nyaman untuk segera menekan tombol CTA tersebut.
Dari lima poin yang sudah disebutkan di atas, kecepatan loading space yang sering dilupakan oleh banyak desainer. Padahal, hal ini termasuk salah satu poin penting dalam membangun sebuah website. Anda pasti cukup sering mengalaminya. Apa yang biasa Anda lakukan ketika berkunjung ke sebuah website namun halamannya tak kunjung terbuka? Apakah refresh halaman? Atau mungkinkah Anda akan segera meninggalkan halaman tersebut?
Apabila Anda tidak ingin hal ini terjadi pada website Anda, sebaiknya Anda cek kembali hal-hal yang dapat membuat proses loading website Anda lambat, seperti :
berikut adalah tools untuk memeriksa kecepatan loading page website
Google Page Speed bisa menganalisa website dengan tampilan mobile dan dekstop jadi pada setiap elemen yang terdapat di website Anda terdapat analysa tersendiri dari yang versi mobile dan versi dekstopnya, sehingga ini akan mempermudah Anda untuk memperbaiki bagian-bagian tertentu sesuai yang direkomendasikan oleh tools ini.
Lain halnya dengan Googlepagespeed, GTMetrix tidak menganalisa page speed pada tampilan website mobile namun memberikan keunggulan pada nilai Yslow dimana nilai ini diambil dari rata-rata Googlepagespeed dan Yahoo, serta membandingkan dengan website yang pernah melakukan test dengan GTMetrix.
contoh kasus slow loading page yang terjadi pada website www.oakleysunglasses2.us.com
Tampilan Desktop
Tampilan Mobile
Yang terdapat dalam kotak merah itu adalah nilai hasil test loading page sedangkan yang didalam kotak warna hijau itu elemen-elemen yang perlu diperbaiki.
Yang terdapat dalam kotak merah itu adalah nilai hasil test loading page sedangkan yang didalam kotak warna hijau itu rekomendasi elemen mana yang perlu diperbaiki.
Citra yang baik tentu dapat membuat para pelanggan lebih senang melakukan bisnis dengan Anda. Melalui desain website yang baik, bisnis Anda dapat terlihat lebih meyakinkan, dan ini artinya Anda memiliki kesempatan lebih besar untuk meraih kesuksesan di internet.
Enam kesalahan umum dalam pembuatan website yang telah kami uraikan di atas dapat Anda jadikan bahan pelajaran. Harapan kami, berkaca dari kesalahan yang dilakukan orang lain, Anda dapat membangun website milik Anda sendiri dengan jauh lebih baik.
Sampai jumpa di artikel kami selanjutnya. Selamat berkreasi.
Source:niagahoster.com
