Panduan Menggunakan Elementor

 

Panduan Menggunakan Elementor

Visual speaks first. Itulah sebab saya memilih untuk mempunyai website sendiri kerana ianya mudah, tanpa kod  dan banyak element design yang boleh dibina.

Penampilan awal website sangat user-friendly dan membuatkan siapa sahaja yang melihat permukaan website ini boleh mengambil masa yang lama melihat tampilan sesebuah website yang menarik.. Ini membuat pengunjung sanggup berada lebih lama di laman website. Ini juga menjadikan ia amat penting ketika prospek yang mengunjungi website  menjadi pelanggan akhirnya.

Cara mudah untuk membuat website dengan tampilan menarik adalah dengan memasang themes WordPress terbaik. (Cara ini tentu saja hanya berlaku untuk website sedia ada WordPress). Namun, ada kalanya themes saja tidak cukup. Sering kali themes memberikan pengaturan terbatas.

Ketika inilah, Anda memerlukan bantuan page builder. Dengan page builder, Anda boleh merekabentuk (design) halaman web dengan lebih luas. Tidak memerlukan coding atau menguasai kemampuan teknik-teknik lainnya. Hanya dengan teknik tarik dan lepas (drag and drop) elemen web yang diinginkan ke dalam Kolum (Colum) rekaan yang mahu di bentuk.  .

Salah satu page builder yang sangat umum dipakai oleh para pereka website ialah  Elementor. Tercatat ada lebih dua juta pengguna WordPress yang memakai plugin elementor ini di web mereka. Di artikel ini, Anda boleh membaca panduan lengkap cara menggunakan Elementor. Anda boleh  menemukan informasi lengkap mengenai pertanyaan apa itu elementor, kelebihan dan kekurangannya, elemen web apa saja yang boleh dibuat, dan tentunya cara menggunakan elementor itu sendiri.

Artikel ini akan sedikit panjang. Jadi, tanpa berlengah lagi, mari kita mulakan! 

Daftar isi  tutup 

1 Apa itu Elementor ?

2 Apa yang Bisa Anda Buat dengan Elementor?

3 Mengenal Bagian-Bagian di Elementor Page Builder

3.1 1. Tab options

3.2 2. Page settings

3.3 3. Element library

4 Cara Menggunakan Elementor

4.1 Cara Menginstall Elementor

4.2 Cara Mendesain Menggunakan Template

4.3 Cara Mendesain dari Nol

5 Kelebihan dan Kekurangan Elementor

5.1 Kelebihan Elementor Page Builder

5.2 Kekurangan Elementor Page Builder

6 Kesimpulan

Apa itu Elementor?

Elementor adalah page builder yang khusus diciptakan untuk website WordPress. Dengan menambahkan plugin ini ke dalam web, Anda boleh bebas mengubah dan mereka bentuk ulang tampilan web page anda.

Bagaimana caranya? Jika dijelaskan secara ringkas, beginilah cara Elementor bekerja:

Elementor membantu Anda mengubah tampilan webpage dengan sistem bernama drag and drop. Terdapat sejumlah tombo(widget) elemen web ─ seperti contoh  teks, video, galeri, spacer, dsb ─ yang boleh di klik, di letakkan dan disusun sesuai dengan keinginan anda.

Elementor memberi pilihan bagi Anda untuk mengubah setiap halaman di webpage. Mulai dari post, custom post types, sampai dengan pages boleh di bentuk  berulang. Pilihan ini membuat Anda bebas menyesuaikan flow tampilan dengan pengisian (Content) tertentu.

Plugin ini bekerja di front-end website. Artinya, apa yang Anda lihat ketika mengolah / mereka website akan jadi tampilan yang dilihat oleh pengunjung anda. Cara ini membuat Anda lebih kreatif dalam merebentuk. Apalagi kalau dibandingkan dengan rekaan sistem back-end yang sedikit rumit dan mengambil masa terlalu lama.

Anda tidak lagi perlu tauliah dan berkemahiran dalam  HTML atau PHP untuk rekabentuk website. Satu-satunya yang Anda  perlukan hanyalah kreativiti unik..

Ya, begitulah garis panduan cara kerja Elementor. Kini saatnya meneroka apa saja yang boleh di buat dengan plugin hebat ini. 

Apa yang Boleh Anda Buat dengan Elementor?

Elementor boleh di gunakan untuk membina rekaan setiap halaman pada website page atau singkatan Webpage. Lebih tepat lagi, apa  yang boleh di buat dengan Elementor? Berikut jawabannya:

Landing pages ─ Satu halaman khusus untuk mengajak pengunjung agar melakukan aksi tertentu. Adakah sebagai dengan mengisi formular/kajiselidik, Daftar (subscribe) website, ataupun melakukan transaksi untuk pembelian produk atau layanan.

Opt-in forms ─ formula khusus yang disediakan untuk pengunjung. Dengan mengisi nama dan alamat email, pengunjung boleh  mendapatkan akses kepada konten premium seperti (eBook) atau langganan website (Newsletter). Anda boleh letakkan opt-in forms di mana saja Anda mau: sidebars, header, footer, atau di dalam konten itu sendiri.

Widget ─ berbagai elemen tambahan untuk melengkapi fungsi halaman. Contohnya, login form, rekomendasi konten sejenis, peta, dan sebagainya. Baca juga rekomendasi widget terbaik untuk website WordPress.

Pop-up ─ pesan atau iklan promosi yang muncul secara tiba-tiba ketika membuka website.

Custom header and footer ─ elemen yang berisi identiti dan informasi atau pun penunjuk arah spesifik sekitar website. Terletak di bagian atas web (header) dan paling bawah (footer).

Custom post types ─ pada dasarnya merupakan halaman konten biasa. Dengan Elementor, halaman konten tersebut bisa disesuaikan tampilannya menurut keinginan.

Global widgets ─ widget yang boleh di rekabentuk dan digunakan pada bagian-bagian web sekaligus.

Banyak sekali, bukan? Kalau Anda menginginkan satu solusi mudah untuk desain web, sudah tentu Elementor jawabannya. Cara menggunakannya mudah. sangat, ada banyak pengaturan automasi yang boleh dilakukan.

Mengenal Bahagian-Bahagian di Elementor Page Builder..

Elementor menjanjikan satu solusi lengkap untuk design web. Ada banyak pilihan elemen dan komponen yang termasuk di dalam plugin ini. 

Dengan ini  ianya menjadikan berita baik untuk pengguna WordPress. Ertinya, Anda tak perlu memasang plugin tambahan lain di website anda. 

Namun, Paparan sangat lengkap juga boleh sedikit menyusahkan. Sebagai startup, Anda boleh jadi serabut dibuatnya kerana banyak sangat pilihan dan elemen yang boleh ditambahkan. 

Supaya memudahkan Anda, di bahagian ini kami akan perkenalkan elemen-elemen di elementor. Dengan begitu, Anda boleh merasa lebih serasi dalam menggunakan plugin ini.

Untuk mempermudah penjelasan, kami akan membahagi bahagian ini ke dalam tiga point. Ketiga point itu adalah:

Tab options;

Page settings;

Elements library.

Sekali lagi, kami ingatkan, membahaskan bahagian ini akan sangat panjang. Akan tetapi, kami mengharapkan info yang panjang lebar ini akan anda manfaatkan. Selain itu juga, kami yakin, tiada ada web lain yang memuat tutorial selengkap ini.

Baik. Mari kita mulai satu per satu bahagian-bahagian dari elementor.

Tab options terletak di bagian bawah Elementor side panel. Dapat dilihat dari browser, panel ini terletak di sebelah kiri halaman.

Sejujurnya, Elementor tidak mengeluarkan nama rasmi untuk bahagian ini. Akan tetapi, supaya ianya menjadi mudah, kami sebut saja sebagai tab options. Sebab, bahagian ini memang terdiri dari pilihan-pilihan berbentuk tab.

Nama tab dari kiri ke kanan: settings, navigator, history, responsive mode, dan preview changes. Deskripsi singkat seperti berikut:

Settings  ─ memuat pengaturan umum soal halaman (judul, status publikasi, featured image, pilihan sembunyikan judul, dan page layout); pengaturan style halaman (pilihan gaya latar belakang, warna latar, gambar, dan padding), dan custom CSS.

Navigator ─ semacam daftar isi yang memuat komponen Elementor apa saja yang digunakan di sebuah halaman. Tab ini memudahkan Anda mencari dan mengatur tampilan halaman.

History ─ mendaftar perubahan apa saja yang dilakukan pada halaman. Anda bisa dengan mudah undo atau redo sebuah aksi.

Responsive mode ─ preview tampilan web di tiga layar berbeza, iaitu di desktop, tablet, dan mobile. Ubah langsung untuk sesuaikan tampilan di resolusi layar yang diinginkan.

Preview changes ─ lihat hasil design/rekabentuk web sebelum disimpan dan di paparkan pada khalayak.

Tab options terletak di bagian bawah Elementor side panel. Dapat dilihat dari browser, panel ini terletak di sebelah kiri halaman.

Sejujurnya, Elementor tidak mengeluarkan nama rasmi untuk bahagian ini. Akan tetapi, supaya ianya menjadi mudah, kami sebut saja sebagai tab options. Sebab, bahagian ini memang terdiri dari pilihan-pilihan berbentuk tab.

Nama tab dari kiri ke kanan: settings, navigator, history, responsive mode, dan preview changes. Deskripsi singkat seperti berikut:

Settings  ─ memuat pengaturan umum soal halaman (judul, status publikasi, featured image, pilihan sembunyikan judul, dan page layout); pengaturan style halaman (pilihan gaya latar belakang, warna latar, gambar, dan padding), dan custom CSS.

Navigator ─ semacam daftar isi yang memuat komponen Elementor apa saja yang digunakan di sebuah halaman. Tab ini memudahkan Anda mencari dan mengatur tampilan halaman.

History ─ mendaftar perubahan apa saja yang dilakukan pada halaman. Anda bisa dengan mudah undo atau redo sebuah aksi.

Responsive mode ─ preview tampilan web di tiga layar berbeza, iaitu di desktop, tablet, dan mobile. Ubah langsung untuk sesuaikan tampilan di resolusi layar yang diinginkan.

Preview changes ─ lihat hasil design/rekabentuk web sebelum disimpan dan di paparkan pada khalayak.

Tab options terletak di bagian bawah Elementor side panel. Dapat dilihat dari browser, panel ini terletak di sebelah kiri halaman.

Sejujurnya, Elementor tidak mengeluarkan nama rasmi untuk bahagian ini. Akan tetapi, supaya ianya menjadi mudah, kami sebut saja sebagai tab options. Sebab, bahagian ini memang terdiri dari pilihan-pilihan berbentuk tab.

Nama tab dari kiri ke kanan: settings, navigator, history, responsive mode, dan preview changes. Deskripsi singkat seperti berikut:

Settings  ─ memuat pengaturan umum soal halaman (judul, status publikasi, featured image, pilihan sembunyikan judul, dan page layout); pengaturan style halaman (pilihan gaya latar belakang, warna latar, gambar, dan padding), dan custom CSS.

Navigator ─ semacam daftar isi yang memuat komponen Elementor apa saja yang digunakan di sebuah halaman. Tab ini memudahkan Anda mencari dan mengatur tampilan halaman.

History ─ mendaftar perubahan apa saja yang dilakukan pada halaman. Anda bisa dengan mudah undo atau redo sebuah aksi.

Responsive mode ─ preview tampilan web di tiga layar berbeza, iaitu di desktop, tablet, dan mobile. Ubah langsung untuk sesuaikan tampilan di resolusi layar yang diinginkan.

Preview changes ─ lihat hasil design/rekabentuk web sebelum disimpan dan di paparkan pada khalayak.

2. Page settings

Bahagian ini memuat pengaturan basic Elementor. Terdiri dari tiga pilihan yang berbeza, iaitu Style, Settings, dan Go To.

Di pilihan style, Anda bisa menyesuaikan tampilan warna dan font dari website. Terdapat default color dan default font yang bisa diubah dengan bebas. Untuk mendapatkan warna yang pas, ada juga aplikasi color picker.

Pilihan settings memuat pengaturan di WordPress dan pengaturan Elementor. Pengaturan di WordPress lebih banyak soal aktiviti aplikasi di Elementor. Sedangkan untuk pengaturan Elementor, Anda boleh menyesuaikan jarak antara konten, lebar konten, serta tampilan foto serta galeri.

Di bahagian Go To, ada tiga hal yang boleh dilakukan. Finder di gunakan untuk mencari elemen konten di Elementor dengan cepat dan mudah. Anda tak perlu mencari secara manual dengan scrolling di element library. 

Lalu, pilihan View Page sama dengan Preview changes. Pilihan yang tak lain membolehkan Anda mengintip halaman sebelum menyimpan atau memaparkannya. Terakhir, Exit Dashboard adalah tombol yang bisa diklik ketika Anda memutuskan kembali ke halaman Utama (Dashboard).

3. Element library

Element library berisi semua elemen yang boleh Anda tambahkan ke halaman website. Ada tiga jenis elemen yang bisa Anda pilih, iaitu basic, general, dan WordPress. Kami akan terangkan deskripsi setiap elemen di bawah ini:

Basic memuat elemen-elemen sederhana yang terdapat di setiap konten. 

General berisi widgets yang lebih advance dibandingkan widget basic. Terdapat lebih banyak elemen yang boleh ditambahkan. 

WordPress merupakan pilihan widget bawaan dari WordPress.  Isinya sama dengan yang ada di Elementor. Jika Anda menambahkan plugin seperti Jetpack, widgets dari plugin tersebut juga akan muncul.

Cara Menggunakan Elementor

Setelah cukup familiar dengan berbagai aplikasi dan bahagiannya, kini saatnya Anda belajar bagaimana cara menggunakan Elementor. Di bahagian ini, setidaknya Anda akan mengetahui tiga hal. 

Pertama, cara memasang Elementor. Kedua, cara desain halaman web dari template Elementor. Ketiga, cara mendesain halaman web dari kosong (Scracth).

Cara Memasang Elementor

Menambahkan Elementor ke website, caranya cukup mudah. Anda cukup klik menu Plugins > Add New. Lalu masukkan kata kunci Elementor di kolum pencarian sebelah kanan.

Ketika sudah menemukan plugin yang dicari, klik tombol Install Now. Tunggu beberapa saat hingga tombol berubah menjadi Activate. Kemudian klik tombol tersebut dan plugin sudah siap digunakan.

Cara Merekabentuk / mendesign Menggunakan Template

Selepas plugin aktif, Anda bisa melihat menu Elementor di Dashboard. Selain itu, tombol Edit with elementor akan muncul di setiap halaman website. Untuk mengedit halaman, Anda tinggal klik tombol tersebut. Kemudian, Anda akan dibawa ke halaman khusus desain. 

Perhatikan bagian sebelah kanan dari side panel. Di bagian itulah Anda bisa mengubah tampilan dan menambahkan aplikasi -fitur yang diinginkan.

Untuk buat halaman dari template, tekan tombol bergambar folder.

Selanjutnya, Anda akan menemukan halaman khusus berisi templates. Ada templates berupa blocks atau susunan untuk teks pada halaman. Lalu ada juga Pages, iaitu template untuk keseluruhan halaman. 

Ketika sudah menemukan desain yang diinginkan, klik tombol Insert di bawah desain.

Desain yang dimaksud akan muncul ke halaman yang diinginkan. Sekarang Anda tinggal mengubah isinya. Boleh  juga Anda menambahkan elemen pada bahagian-bahagian yang dirasa perlu.

Setelah kustomasi dirasa cukup, Anda boleh simpan desain yang sudah dibuat. Sudah Cukup klik tombol panah kecil di samping kanan tombol Publish. Kemudian klik Save Draft. 

Bisa juga klik Save as Template untuk jadikan desain sebagai template. Cara ini membuat Anda tak perlu lagi mendesain ulang tampilan yang persis ke halaman lainnya. Cukup load template dan sesuaikan konten dengan mudah.

Cara Merekabentuk/ mendesain dari Kosong (Scracth)

Untuk mendesain halaman dari kanvas kosong, klik tombol + di sebelah kiri.

Tombol ini akan mengarahkan Anda ke pilihan structure halaman.

Setelah memilih structure yang cocok, halaman akan diisi dengan outline atau section. Dalam section ini Anda bisa tambahkan elemen-elemen yang ada di library. 

Ketika proses desain selesai, Anda bisa Save Draft, Save as Template, atau Publish. 

Kelebihan dan Kekurangan Elementor

Apa Anda sudah tertarik untuk memakai Elementor? Belum? Kalau begitu, coba kita daftar kelebihan dan kekurangan dari Elementor.

Kelebihan Elementor Page Builder

Sebagai plugin tambahan WordPress, Elementor menawarkan banyak sekali kelebihan. Setidaknya inilah yang Anda rasakan ketika menggunakan Elementor untuk mendesain website:

Fitur lengkap dan sangat mudah digunakan.

Terdapat banyak sekali elemen untuk ditambahkan di halaman web. Mulai dari fitur-fitur sederhana seperti teks, heading, gambar, spacer, dan sebagainya. Tetapi ada juga elemen yang lebih advance seperti tabs, menu anchor, accordion, toggle, dan banyak lagi lainnya.

Anda bisa mengubah tampilan dengan bebas. Bahkan Anda bisa tambahkan detail yang tidak tersedia di tema WordPress.

Lihat perubahan tampilan secara real-time.

Terdapat opsi untuk kustomisasi tampilan di tiga jenis layar berbeda: dekstop, tablet, dan mobile.

Setiap perubahan yang dilakukan di halaman terekam dengan baik. Anda bisa mengembalikan tampilan ke versi sebelum dengan sekali klik.

Fitur yang ditawarkan untuk versi gratis sudah sangat lengkap. Apalagi dibandingkan dengan plugin page builder lainnya.

Kekurangan Elementor Page Builder

Tentu saja Elementor tak lepas kekurangan. Kalau Anda punya concern soal ini, kami coba beri gambaran hal-hal yang mungkin membuat Anda kurang puas.

Elementor tak membolehkan Anda melakukan kustomasi tampilan URL.

Terkadang tampilan font dan teks tidak selari (Tetapi Sekarang Elementor 3.0 sudah ada automasi warna dan font untuk keseluruhan web).

Fitur-fitur penting setanding Mailchimp, Confirmation Email, Hubspot dan sebagainya hanya tersedia dalam versi Pro.

Kesimpulan

Jadi, bagaimana? Mendesain web ternyata cukup mudah, kan?

Kalau Anda memerlukan tambahan inspirasi soalan desain webpage, kami juga memiliki beberapa artikel yang bisa dibaca:

Akan Datang

Kalau bercakap mengenai kepantasan kecepatan dan server selalu up, itu urusan Serverfreak yang saya daftarkan website saya..  Dapatkan pretasi website paling optima dengan fitur aplikasi pakej hosting lengkap, support terbaik dan sangat membantu serta datacenter tier 4 yang canggih. Tunggu apa lagi? Pilih paket hosting sekarang.

 

15 Cara Desain Blog Agar Tampil Keren dan Menarik

September 5, 2018  4 min read

Membuat desain blog yang bagus dan menarik mungkin merupakan sebuah tantangan bagi sebagian besar orang. Permasalahannya biasanya karena tidak tahu harus mulai dari mana. Nah, artikel ini akan membahas cara desain blog yang keren dan menarik dari awal sampai akhir.

Daftar isi  tutup 

1 15 Cara Mendesain Blog Agar Tampil Keren dan Menarik

1.1 1. Tetapkan tujuan dulu!

1.2 2. Struktur Blog

1.3 3. Tampilkan Deskripsi Singkat

1.4 4. Navigasi Mudah dan Sederhana

1.5 5. Memakai Slider? Coba Dipertimbangkan Lagi!

1.6 6. White Space itu Penting

1.7 7. Tampilkan Profil Media Sosial

1.8 8. Pentingnya Subheading

1.9 9. Tambahkan Gambar

1.10 10. Beri Warna Juga untuk Link

1.11 11. Maksimal 3 Jenis Font

1.12 12. Maksimal 3 Warna

1.13 13. Jaga Konsistensi

1.14 14. Desain Blog Mobile Friendly

1.15 15. Jangan Gunakan Background Gelap

2 Kesimpulan

15 Cara Mendesain Blog Agar Tampil Keren dan Menarik

Berikut kami hadirkan cara desain blog agar website Anda memiliki tampilan yang keren dan menarik sesuai dengan jenis website yang Anda miliki. Setiap tipsnya bisa Anda ikuti dengan mudah dan langsung Anda praktekkan di website Anda.

1. Tetapkan tujuan dulu!

Sebelum berpikir mau memakai warna apa, font apa, headernya seperti apa, hal paling pertama yang harus Anda lakukan dalam mendesain blog adalah menetapkan tujuan blog terlebih dahulu.

Mengapa tujuan blog penting dalam desain blog? Sebab tujuan yang ingin Anda capai adalah dasar dalam menentukan desain blog secara keseluruhan. Apakah tujuan blog Anda untuk berbagi cerita perjalanan? Atau Anda akan mengisi blog dengan tutorial teknologi?

Ketahui tujuan yang ingin Anda capai terlebih dahulu, kemudian Anda bisa lanjut membaca poin setelah ini.

2. Struktur Blog

Setelah mengetahui tujuan blog Anda, langkah penting selanjutnya yang perlu Anda pahami adalah tentang struktur blog. Gambar di atas adalah struktur blog pada umumnya, ada header, sidebar, konten utama, dan footer. Setiap blogger dapat memodifikasinya sesuai selera dan keinginan.

Apa saja isi dari setiap bagian blog? Berikut penjelasannya.

Di bagian header, biasanya diisi oleh judul atau nama blog beserta deskripsi singkat tentang blog. Menu navigasi dan kolom pencarian biasanya juga terletak di bagian ini.

Kemudian di bagian sidebar, Anda bisa mengisinya dengan profil media sosial, artikel terpopuler, artikel rekomendasi, arsip artikel, atau tombol subscribe blog.

Bagian selanjutnya adalah konten utama. Konten utama tentu diisi oleh artikel-artikel yang Anda tulis.

Terakhir adalah bagian footer. Di bagian footer Anda bisa mengisinya dengan disclaimer, privacy policy, kontak Anda, atau tombol share media sosial.

3. Tampilkan Deskripsi Singkat

Pertama, pastikan Anda memiliki deskripsi singkat mengenai blog Anda. Biasanya deskripsi singkat ini berada di bawah judul atau nama blog. Misalnya, blog Anda adalah blog tekno, deskripsinya bisa seperti ini, “Blog yang mengulas semua tentang teknologi”.

Di langkah ini kreativitas Anda mulai diuji. Anda perlu mengungkapkan tentang keseluruhan blog dalam sebuah kalimat singkat. Mengapa kalimat deskripsi blog harus singkat? Sebab pengunjung Anda perlu tahu blog apa yang sedang mereka baca.

Deskripsi singkat tidak hanya penting untuk blog secara keseluruhan, tetapi juga untuk setiap artikel atau konten blog. Dengan begitu, pembaca bisa mengetahui secara singkat artikel seperti apa yang akan mereka baca, sebelum menekan tombol “Read More”

Baca Juga: 9+ Blogger Indonesia Inspiratif yang Wajib Anda Follow

4. Navigasi Mudah dan Sederhana

Ketika pembaca Anda ingin membaca satu topik tertentu dari blog Anda, menu mana yang harus mereka klik? Jika mereka ingin membaca artikel yang terbit dua tahun sebelumnya, menu mana yang harus mereka pilih? Kalau pembaca ingin mengetahui siapa pemilik blog, tombol mana yang harus mereka klik?

Intinya adalah Anda harus membuat navigasi yang sederhana dan mudah dipahami semua orang. Hal ini memudahkan pengunjung blog untuk berpindah-pindah dari satu laman ke laman lain, dari satu artikel ke artikel lain, dari satu tag ke tag lain.

Jika pengunjung bisa dengan mudah membaca blog Anda, tentu mereka akan menghabiskan waktu lebih lama sehingga tentu saja menguntungkan Anda sebagai pemilik blog. Jangan membuat navigasi yang rumit, apalagi jika tujuannya hanya untuk “terlihat keren”. Desain blog keren yang sesungguhnya terletak pada kemudahan pengunjung dalam menavigasikan blog Anda.

5. Memakai Slider? Coba Dipertimbangkan Lagi!

Mungkin pernah terpikir kalau memakai slider di blog adalah suatu hal yang keren. Namun, Anda sebaiknya membuang jauh-jauh rencana tersebut. Menurut sebuah penelitian, hanya 1 persen pengunjung yang mengklik konten di slider. Sekali lagi, hanya satu persen. Itu artinya jika ada 100 pengunjung, hanya 1 pengunjung yang mengklik slider Anda.

Slider memang terlihat keren, tetapi tidak efektif dan efisien. Tentu Anda tidak mau mengorbankan 99 pengunjung blog hanya untuk satu pengunjung, bukan?

Terlebih lagi, slider memakan waktu lama untuk loading sehingga akan berpengaruh buruk ke page loading blog Anda. Hal terburuknya adalah menurunnya kinerja SEO Anda yang disebabkan oleh page loading yang lambat.

Selain itu, tidak semua slider sudah dioptimisasi untuk versi mobile. Jadi tidak menggunakan slider adalah langkah terbaik untuk desain blog Anda.

6. White Space itu Penting

Sebelum pusing-pusing memilih warna, ada satu hal penting yang harus Anda perhatikan, yaitu white space. Apa itu white space? Meminjam istilah dari Computer Hope, white space adalah bagian dari sebuah desain yang tidak digunakan.

Secara sederhana, white space adalah ruang kosong di desain blog Anda. Keberadaan white space ini penting agar blog Anda tidak terlihat terlalu ramai. White space juga membantu pembaca agar lebih mudah dalam membaca artikel-artikel blog.

7. Tampilkan Profil Media Sosial

Profil media sosial juga merupakan komponen penting di desain blog. Jangan lupa untuk menampilkan profil-profil media sosial Anda di bagian sidebar atau footer agar pembaca bisa mengetahui siapa pemilik blog yang mereka kunjungi.

8. Pentingnya Subheading

Mulai masuk ke pembahasan untuk struktur konten. Struktur konten juga penting untuk desain blog. Dengan struktur yang baik dan konsisten, pembaca akan lebih mudah dalam membaca artikel Anda.

Nah, salah satu cara untuk membuat struktur konten yang baik adalah dengan memanfaatkan subheading. Subheading digunakan untuk menjelaskan poin-poin penting dalam suatu artikel.

Jika menggunakan WordPress, Anda bisa menemukan fitur subheading ini di menu editor. Terdapat pilihan Subheading 1, Subheading 2, Subheading 3, dan seterusnya.

Subheading 1 biasanya digunakan untuk bagian judul. Sedangkan subheading 2 biasanya digunakan untuk menunjukkan poin-poin utama dalam artikel. Lalu subheading 3 digunakan untuk menjelaskan poin-poin dari subheading 2.

9. Tambahkan Gambar

Setelah membuat struktur tulisan yang rapi dan mudah dibaca, Anda juga perlu menambahkan gambar yang masih berkaitan dengan tulisan Anda. Sebaiknya gunakan gambar-gambar yang jelas copyrightnya. Jika Anda menggunakan gambar milik orang lain, jangan lupa untuk menuliskan sumber di bawah gambar tersebut.

Lebih baik lagi kalau Anda menggunakan infografik. Infografik memudahkan pembaca untuk memahami artikel melalui ilustrasi visual.

10. Beri Warna Juga untuk Link

Dalam artikel Anda, tentu ada link atau tautan-tautan, baik internal link (link ke artikel lain dalam blog) atau external link (link ke website atau blog lain). Jangan lupa untuk memberi warna berbeda untuk kata atau kalimat yang mengandung link. Misal, warna font yang Anda gunakan adalah hitam maka warna font untuk kalimat berlink adalah warna biru.

11. Maksimal 3 Jenis Font

Ungkapan the more, the merrier (lebih banyak, lebih meriah) tidak berlaku ketika Anda sedang memilih jenis font untuk blog. Jenis font untuk blog tidak perlu banyak, cukup tiga jenis saja. Tiga adalah angka maksimal, Lebih dari itu hanya akan membuat blog Anda terlihat berantakan dan tidak profesional.

12. Maksimal 3 Warna

Begitu juga dengan warna, Anda tidak perlu memilih banyak warna untuk desain blog Anda, cukup tiga saja. Warna pertama adalah warna primer, yaitu warna yang berhubungan dengan identitas blog Anda. Misalnya, logo blog Anda berwarna biru, Anda bisa memilih warna biru sebagai warna primer blog Anda agar pembaca semakin familiar bahwa biru adalah identitas blog Anda.

Dua warna yang lain Anda bisa memilih bebas, tentu disesuaikan dengan selera dan warna primer yang sudah ditentukan di awal.

Baca Juga: 15+ Contoh Blog dan Website Pribadi Inspiratif

13. Jaga Konsistensi

Hal terpenting dalam desain blog adalah menjaga konsistensi di setiap bagiannya. Dari warna, font, struktur konten, sidebar, footer, header blog, menu, sampai bar navigasi. Warna tombol menu di home harus sama dengan warna tombol menu di laman lain. Begitu juga dengan font dan komponen desain blog lainnya.

Konsistensi desain blog akan membuat pembaca semakin merasa familiar dengan blog Anda.

14. Desain Blog Mobile Friendly

Ketika memilih template atau tema blog, selalu pilih template yang mobile friendly. Sebab kebanyakan orang mengakses internet melalui perangkat mobile.

Menurut survei perilaku penggunaan internet di Indonesia oleh APJII, ditemukan bahwa 44,16 persen masyarakat Indonesia mengakses internet hanya melalui perangkat mobile. Kemudian sebanyak 39,28 persen masyarakat mengakses internet melalui perangkat mobile dan desktop. Sedangkan yang mengakses hanya melalui desktop hanya sebesar 4,49 persen.

Baca Juga: 50 Template Blog Keren dan SEO Friendly

15. Jangan Gunakan Background Gelap

Terakhir, jangan gunakan background berwarna gelap karena Anda harus memilih warna yang kontras dari background untuk font Anda. Pada akhirnya Anda harus memilih warna font terang jika menggunakan background berwarna gelap. Dan warna font terang bukan warna yang familiar bagi sebagian besar pembaca sehingga akan mengganggu pengalaman membaca mereka. Oleh karena itu, hindari warna gelap untuk background.

Kesimpulan

Mendesain blog memang membutuhkan waktu yang tidak sedikit dan diperlukan ketelitian. Anda tidak mendesain blog hanya berdasarkan selera saja, tetapi juga berdasarkan pengalaman pembaca dan dari sisi SEO.

Dengan mengikuti langkah-langkah di atas, diharapkan Anda bisa membuat desain terbaik untuk blog Anda. Jika ada pertanyaan, hal yang tidak dipahami, atau masukan, silakan tinggalkan komentar di bawah ya!

Menentukan Warna Efektif untuk Desain Website Anda

September 30, 2016  6 min read

Warna merupakan hal penting dan unik dalam dunia desain visual. Warna tidak memiliki bentuk, ukuran maupun simbol untuk menyampaikan pesan secara langsung. Akan tetapi, warna mampu berbicara melalui emosi alam bawah sadar manusia, sehingga dapat mempengaruhi pikiran serta suasana hati orang yang melihatnya.

Misalnya saat berkendara, Anda akan banyak menemukan simbol rambu-rambu maupun tanda peringatan yang menggunakan warna-warna berbeda setiap informasinya. Misalnya menggunakan warna mencolok seperti merah, dapat merangsang Anda untuk lebih waspada dan berhati-hati. Sangat aneh jika warna sebuah peringatan adalah warna lembut yang dapat dengan mudah luput dari pandangan mata.

Warna yang tepat mampu memperkuat pesan yang dibawakan.

Daftar isi  tutup 

1 Pahami Teori Warna

1.1 Klasifikasi Warna Dasar

1.1.1 Warna Primer

1.1.2 Warna Sekunder

1.1.3 Warna Tersier

1.1.4 Warna Netral

2 Percampuran Warna

3 Temperatur Warna

3.1 Warna Panas

3.1.1 Merah

3.1.2 Oranye

3.1.3 Kuning

4 Warna Dingin

4.1 Hijau

4.2 Biru

5 Berapa Jumlah Warna Efektif dalam Website?

5.1 Porsi 60% sebagai warna dominan.

5.2 Porsi 30% sebagai warna sekunder kontras dari warna dominan

5.3 Porsi 10% adalah warna aksen yang melengkapi

6 Tips Menerapkan Warna Efektif ke dalam Website

6.1 1. Gunakan warna brand Anda

6.2 2. Terapkan psikologi warna

6.3 3. Sesuaikan warna dengan target pasar

6.4 4. Pastikan warna teks kontras dengan background

7 Referensi Kombinasi Warna

7.1 Adobe Colour CC

7.2 Colrd

7.3 Colourlovers

Pahami Teori Warna

Sebelum menerapkan warna web yang efektif dalam sebuah desain, sebaiknya pahami dulu seperti apa pembagian warna berdasarkan turunan/percampuran warna, agar keserasian antara elemen warna website bisa sejalan dengan tujuan konversi website Anda.

Klasifikasi Warna Dasar

Menurut teori Brewster, untuk menyederhanakan warna yang ada di alam, warna dibagi menjadi 4 kelompok, yaitu warna primer, sekunder, tersier, dan warna netral.

Warna Primer

Warna primer merupakan warna dasar yang membentuk warna-warna lain. Warna primer tidak dapat diciptakan dengan percampuran warna apapun karena sifat warna primer adalah murni. Yang merupakan warna primer adalah merah, kuning dan biru.

Warna Sekunder

Warna Sekunder adalah warna turunan yang dihasilkan dari campuran dua warna primer dengan proporsi yang sama. Misalnya warna merah dan kuning menghasilkan warna oranye, kuning dan biru menghasilkan warna hijau, serta merah dan biru menghasilkan warna ungu.

Warna Tersier

Warna tersier adalah warna turunan yang dihasilkan dari percampuran antara satu warna primer dan satu warna sekunder. Misalnya warna primer merah ditambah warna sekunder ungu, akan menghasilkan warna tersier ungu merah.

Warna Netral

Warna netral adalah warna yang biasa digunakan sebagai penyeimbang dan membantu warna lain agar terlihat lebih fokus. Hitam dan putih merupakan warna netral yang secara umum banyak digunakan. Namun, dalam banyak kesempatan bisa juga dikombinasikan menjadi berbagai warna netral yang lebih bervariasi, misalnya cokelat, krem, dan abu-abu.

Percampuran Warna

Setelah memahami warna dasar, Anda akan lebih mudah menciptakan banyak kombinasi warna berbeda. Yang perlu Anda lakukan selanjutnya adalah menggabungkan warna dasar dengan warna netral seperti hitam maupun putih, sehingga Anda akan mendapatkan variasi kedalaman warna yaitu membuatnya lebih terang ataupun lebih gelap.

Tint

Warna tint merupakan campuran warna dasar dengan warna putih, atau sering disebut dengan warna pastel. Warna tint terlihat lebih santai, lembut, serta memiliki kesan feminin.

Warna tint efektif digunakan untuk target konsumen wanita serta bayi/anak-anak. Biasanya, perusahaan yang menggunakan warna seperti ini bergerak di bidang kecantikan, produk bayi, salon, spa, permainan anak-anak, dan lain-lain.

Shade

Shade, atau sebutan tingkat kegelapan sebuah warna, didapatkan dari campuran warna dasar dengan warna hitam. Kombinasi warna shade akan tampil baik ketika dipadukan bersama warna murni atau warna yang lebih terang.

Warna yang termasuk dalam jenis shade sangat pas jika digunakan untuk website yang berkaitan dengan keuangan, portal berita, jasa konsultan, dan organisasi. Tampilan gelapnya memberikan kesan serius, profesional, serta elegan.

Tone

Warna tone adalah hasil dari campuran warna dasar dengan warna abu-abu, yang dihasilkan warna putih dan hitam. Adanya unsur warna abu-abu menghasilkan warna yang memiliki gradasi lebih keruh. Hal ini menjadikan kombinasi warna yang tidak mencolok dan mudah menyatu dengan warna lain.

Warna tone memberikan kesan klasik, alami, dan natural seperti warna alam. Jenis warna ini cukup baik jika digunakan untuk website arsitektur, fotografi, kerajinan tangan, dan lain-lain.

Temperatur Warna

Ketika berbicara mengenai temperatur warna, tentu akan berkaitan dengan bagaimana warna dapat mempengaruhi suasana hati serta pikiran seseorang. Hal ini sering dikenal dengan istilah psikologi warna. Warna memiliki temperatur panas dan dingin seperti benda pada umumnya. Namun, temperatur dalam warna hanya dapat dirasakan dampaknya melalui pikiran serta suasana hati seseorang.

Warna Panas

Warna panas/hangat tersusun dari warna merah, oranye dan kuning. Warna ini sering dikaitkan dengan sesuatu yang memiliki tensi tinggi, semangat membara, dan lain-lain. Ketika diaplikasikan dalam desain, penggunaannya memberikan cukup kontras sehingga cocok dijadikan pusat perhatian. Pada praktiknya, informasi penting, button call to action, pop up, dan headline sering memanfaatkan warna ini.

Berikut beberapa contoh warna panas serta penerapannya ke dalam sebuah website.

Merah

Warna merah merupakan salah satu warna primer/utama yang dianggap cukup efektif jika digunakan untuk tombol call to action. Secara umum, warna merah memang memiliki daya tarik yang cukup kuat, karena warna merah yang terlihat kontras, seringkali diasosiasikan sebagai:

• Peringatan

• Penunjuk bahaya

• Kewaspadaan

• Tidak stabil

Karenanya, secara psikologis seseorang akan selalu tertarik untuk memperhatikan sesuatu yang berwarna merah.

Oranye

Warna oranye merupakan warna sekunder percampuran antara dua warna primer merah dan kuning. Warna oranye sering dimaknai sebagai sesuatu yang menggambarkan:

• Kesenangan

• Kesegaran

• Antusias

• Pembaharuan

Warna oranye merupakan warna yang cukup agresif, namun masih sedikit lembut jika dibandingkan warna merah. Selain warna merah, warna oranye juga dikenal sebagai warna yang cukup baik untuk digunakan sebagai tombol.

Kuning

Warna kuning juga salah satu warna primer yang tampil begitu kuat dan mencolok, serta sering diasosiasikan sebagai tanda peringatan rambu lalu lintas. Dengan tampilan yang cerah warna kuning akan terlihat lebih kuat jika dikombinasikan dengan warna netral seperti warna hitam atau warna gelap lainnya. Sifat warna kuning yang menarik perhatian tampil cerah seperti matahari pagi, menggambarkan:

• Keceriaan

• Kegembiraan

• Kehangatan

• Kehidupan

Sehingga warna kuning sangat efektif untuk website yang ingin menunjukan semangat, keceriaan, serta kehidupan yang cerah.

Warna Dingin

Warna dingin terdiri dari warna hijau, biru, dan ungu. Warna dingin memberikan kesan lebih menenangkan, ketentraman dan santai, karena sering diibaratkan dengan sesuatu yang bersifat dingin seperti air, samudera, es, hujan, mendung, dan lain-lain. Kombinasikan warna-warna dingin untuk menciptakan tampilan desain yang lebih tenang dan profesional. Berikut contoh warna biru serta penjelasannya.

Hijau

Warna hijau merupakan warna sekunder hasil kombinasi antara warna biru dan kuning. Warna hijau adalah warna dingin/sejuk yang sering dikaitkan dengan lingkungan dan alam. Sehingga warna hijau dapat disimbolkan dengan:

• Kesuburan

• Pertumbuhan

• Kesegaran

• Pembaharuan

• Kestabilian

Penerapan warna hijau ke dalam sebuah desain website sangat efektif untuk menunjukan sifat natural/alam, seperti kesehatan, makanan/minuman dan produk/bidang yang berada di luar ruangan.

Biru

Warna biru merupakan salah satu warna primer yang menjadi warna favorit di seluruh dunia. Hal ini dapat kita lihat dari banyaknya aplikasi biru di setiap perusahaan. Penggunaan warna biru dalam website, simbol perusahaan (logo), brand identity, seragam, bangunan, dan lain-lain. Sifat warna biru adalah

• Damai dan tenang

• Loyalitas

• Kebijaksanaan

• Intelektual

• Kebesaran/kekuasaan

Warna biru merupakan warna yang menenangkan, seperti warna lautan, langit, pegunungan, dll. Sehingga banyak perusahaan yang mengadopsinya. Penerapan warna biru ke dalam website untuk menunjukan sifat ketenangan, intelektual, serta bijaksana. Cocok untuk perusahaan yang bergerak di bidang teknologi, kepemerintahan, pendidikan, organisasi sosial, dan lain-lain.

Ungu

Warna ungu merupakan kombinasi warna merah dan biru. Berada di antara warna panas merah dan dingin biru, membuat warna ungu terkesan sebagai warna penyeimbang yang menghangatkan. Warna ungu adalah warna sekunder yang memiliki makna:

• Misterius

• Spiritual

• Keanggunan

• Bernilai

• Kemewahan

• Kebijaksanaan

Warna ungu cukup baik untuk mendukung usaha/produk yang mengedepankan kemewahan. Biasanya warna ini sering digunakan oleh produk perhiasan, fashion, parfum, lifestyle, dan lain-lain.

Berapa Jumlah Warna Efektif dalam Website?

Tidak ada jumlah yang pasti berapa warna yang efektif dalam sebuah desain website. Penggunaan warna menjadi kebutuhan masing-masing website dan berpegang pada branding perusahaan. Namun tetap disarankan untuk menggunakan kombinasi warna yang minimalis, karena akan lebih mudah dalam memadu warna dengan keseluruhan isi website.

Untuk mempermudah mendapatkan kombinasi warna yang efektif. Gunakan prinsip sederhana 60-30-10 (60%, 30%, 10%), yaitu prinsip warna yang sering dipakai dalam desain interior. Namun sangat membantu untuk kombinasi warna desain website Anda.

Sebagai contoh, website Niagahoster.co.id yang menerapkan prinsip 60-30-10, menggunakan perbandingan warna 60% sebagai warna dominan, 30% warna sekunder, dan 10% sebagai warna aksen. Berikut penjelasannya.

Porsi 60% sebagai warna dominan.

Warna dominan akan menjadi warna yang akan banyak digunakan dalam desain, seperti warna identitas perusahaan yang harus ditonjolkan. Dalam hal ini website niagahoster menggunakan warna biru sebagai warna dominan dan sebagai warna identitas perusahaan.

Porsi 30% sebagai warna sekunder kontras dari warna dominan

Porsi 30% digunakan sebagai warna sekunder yang digunakan sebagai kontras dari warna dominan. Menjadi penghias yang mendukung warna dominan menjadi lebih terlihat menonjol. Warna sekunder dari website niagahoster adalah oranye.

Porsi 10% adalah warna aksen yang melengkapi

Gunakan porsi 10% sebagai aksen untuk mendapatkan kombinasi yang lebih bervariasi namun tetap menjaga keserasian keseluruhan tampilan website. Berdasarkan contoh website niagahoster di atas, warna hijau digunakan sebagai warna aksen.

Tips Menerapkan Warna Efektif ke dalam Website

Ada beberapa hal yang harus diperhatikan dalam menerapkan warna. Berikut apa saja yang sebaiknya dilakukan dalam mengkombinasikan warna ke dalam desain website.

1. Gunakan warna brand Anda

Warna identitas brand Anda merupakan hal yang penting untuk selalu diterapkan ke berbagai media, termasuk media online seperti website sebagai bentuk branding perusahaan. Begitu juga website Coca Cola yang menerapkan identitas brand-nya yaitu merah. Jangan menggunakan warna yang jauh berbeda dengan warna brand Anda, karena hal itu akan membuat kesan tidak profesional dan tidak konsisten. Gunakan warna brand sebagai warna utama dalam branding usaha Anda.

2. Terapkan psikologi warna

Secara tidak sadar, warna mampu memberikan pengaruh kedalam pikiran seseorang. Saat kita mengunjungi halaman website, mata akan tertarik untuk memperhatikan sesuatu yang terlihat berbeda dan menonjol. setelah memahami beberapa penjelasan tentang teori warna sebelumnya, Anda dapat menerapkannya ke dalam desain website Anda. Seperti sifat warna-warna panas yang cerah, cukup efektif untuk menarik perhatian, jika digunakan sebagai informasi penting, tombol, link, headline, dll. Begitu juga dengan warna-warna dingin yang menenangkan dapat digunakan sebagai background, text maupun paragraf, dll.

3. Sesuaikan warna dengan target pasar

Setiap konsumen memiliki ketertarikan warna yang berbeda sesuai umur maupun jenis kelaminnya. Begitu juga setiap bidang usaha akan selalu berbeda dalam menerapkan warna berkaitan dengan profesionalitas usaha.

Sebagai contoh warna ceria yang tampil fun dan menyenangkan, akan lebih efektif di gunakan untuk target konsumen bayi/anak-anak maupun wanita, serta digunakan dalam bidang usaha yang lebih santai. Sangat tidak efektif, jika warna ceria tersebut digunakan untuk target konsumen serta bidang usaha yang lebih serius dan profesional, seperti usaha kontraktor, politik, akuntan, hukum, dll.

4. Pastikan warna teks kontras dengan background

Kontras teks dalam desain website jugalah penting. Teks menjadi sumber rujukan bagi pengunjung untuk mengetahui informasi mengenai bisnis Anda. Untuk itu, membuat teks mudah dibaca dan untuk menghindari ketegangan mata pengunjung website, harus ada kontras yang tinggi antara warna teks dan warna background Anda.

Gunakan teks warna gelap untuk background terang. Sebaliknya, gunakan warna terang untuk teks dengan background gelap. Jangan menyulitkan pengunjung dalam membaca isi konten website Anda, dengan menggunakan kontras warna yang rendah antara teks dan background.

Referensi Kombinasi Warna

Saat ini memang banyak situs online yang menyediakan referensi kombinasi warna menarik. Hal ini tentu memudahkan Anda memikirkan dari awal kombinasi warna yang pas digunakan. Namun, memahami teori dasar warna akan sangat membantu Anda menentukan warna yang efektif untuk produk, target konsumen, serta bidang usaha Anda. Berikut beberapa situs yang menyediakan kombinasi warna yang bisa Anda coba.

Adobe Colour CC

Merupakan tool kombinasi warna produk dari Adobe Creative, yang sering digunakan oleh beberapa desainer dalam menentukan kombinasi warna yang menarik dan efektif. Dengan bantuan Adobe Colour CC, Anda dapat menyimpan palette warna Anda untuk dapat di gunakan di produk Adobe lainnya, seperti Photoshop, Illustrator. InDesign, dll.

Colrd

Merupakan referensi yang cukup menarik untuk Anda kunjungi. Dapatkan banyak referensi warna yang bisa Anda gunakan untuk website Anda. Dengan tool ini, Anda dapat menentukan kombinasi warna berdasarkan gradien, gambar, maupun pattern.

Colourlovers

Referensi yang sangat menarik untuk Anda kunjungi, Anda dapat menemukan banyak kombinasi warna berdasarkan media, seperti website, printing, fashion, craft, dll. Selain itu Anda juga dapat menggunakan tool yang disediakan, seperti Photocopa, Copaso, Seamless Lite, dll. Anda dapat menentukan kombinasi warna berdasarkan foto atau membuat pattern sesuai keinginan Anda.